Lesson Hero Illustration Image
Newline Image

Day 15

Javascript Basics for Web Developers

HTML gives the web structure. CSS provides that structure with style. JavaScript makes that structure interactive.

This post is part of the series 30 Days of Web Development.

In this series, we start from the basics and walk through everything you need to know to get started with Web Development.

Newline Image

Javascript Basics for Web Developers
#

HTML gives the web structure. CSS provides that structure with style. JavaScript makes that structure interactive.

Today, I'll introduce you to JavaScript and give you a better sense of what I mean by "interactive."

JavaScript is a programming language, unlike HTML and CSS, which are markup languages. We will learn more about Programming Languages in a later blog post.

Exercise: What does "interactive" look like?
#

What do I mean when I say "JavaScript makes that structure (HTML) interactive"? To help answer that question, I've created an HTML file that uses JavaScript to add interactivity in the form of a turtle 🐢 and rabbit 🐇 racing each other.

  1. Because this HTML file uses two images, you need to download the following folder, and then right-click to open the "js-example.html" file in Chrome.

Once open, you should see a web page that looks something like the following:

The turtle 🐢 and rabbit 🐇 will start racing right away. Play around with stopping and restarting the animation.

  1. The "racing" between the turtle and rabbit, as well as the buttons "stopping" and "restarting" the race, are all done by JavaScript. This is an example of what interactivity looks like.

If at any point the race annoys you or you can no longer see the animals, restart and/or stop the animation using the buttons. No offense will be taken.

  1. Next, I'm going to have you change some values on the JavaScript written on the "js-example.html" file.

You will be changing the JavaScript, but I will not stop to explain the syntax. My hope is to have you focus on what the JavaScript is doing. Not on how it is doing it or how it is written.

Go ahead and in your text editor, open the "js-example.html" file.

Navigate to row 61. This is where the JavScript starts. Similar to CSS, you can add JavaScript on an HTML file by inserting it between a special HTML element. With CSS, this was called an Internal Stylesheet, and we did this by adding CSS in the <style></style> element.

Internal CSS Example:

For JavaScript, instead of using the <style></style> element, we use the <script></script> element.

Internal JavaScript Example:

  1. Next, in your text editor, navigate to row 72. We are going to change the "speed" of the race by changing a value here. Change the 500 to 100. Remember to save your changes, and then refresh the browser window.

500 here means 500 milliseconds between each time JavaScript changes the position of the rabbit and the turtle. By making this number lower, to 100 milliseconds, we speed up the race because JavaScript is now changing the positions every 0.1 seconds instead of every 0.5 seconds.

  1. Next, in your text editor, navigate to row 69. This snippet of JavaScript is essentially grabbing the turtle image and assigning it a starting position. Again, we won't go into syntax details here.

By setting the turtle's starting position and CSS unit "0px", the turtle is starting on the left-hand side of the screen. We are going to change this to "200px" to help give the turtle a bit of a head start (200px head start to be exact).

 

This page is a preview of Your First 30 Days of Web Development

Get the rest of this chapter and 180+ pages of Web Development instruction for free.

The entire source code for this tutorial series can be found in the GitHub repo, which includes all the styles and code samples.

If at any point you feel stuck, have further questions, feel free to reach out to us by:

Course Author

Avatar Image

Angel Garbarino

👋 Hi! I’m Angel, the author of the book.

I am a self-taught Frontend developer. Not until I was in my early thirties did I seriously consider building up skills as a web developer. In all honesty, I wasn’t even sure what it meant to work as a web developer. All I knew was, I wanted to work on computers because I was decent at using them, and I was attracted to the job opportunities.

I wrote this book for the “me,” five years ago; for the person who is starting to think about what it might take to become a programmer or web developer. My path was convoluted, stressful, and inefficient. But it did not have to be.

I started by reading articles and seeking advice from friends. I continued with more articles, books, and online courses. As my skills or ability to fake-my-skills improved, I sought out consulting gigs. Fixing friends’ websites, and then being hired out as a consultant. On the job learning is great, but I had no idea what I was doing and stressed and slept little during these contracts.

Eventually, I landed a position at a web application company. I made friends, asked questions, and studied the skills I learned were needed for a job as a Frontend Developer. The weekend studying paid off, I applied for a Frontend Developer position, and I got it!

In this book, I will cover the fundamentals. But more importantly, I will talk about why they are the fundamentals. My goal is not to teach you a specific skill like HTML. Instead, I show you how to navigate what’s ahead of you. I get you set up for your next steps, whether that’s a path of self-learning or attending a bootcamp. By the end of this book, you will be able to make an educated decision about your future and understand the steps and commitment it will take to get there.