Chapter 4: JavaScript

#

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

To give you a better sense of what I mean by "interactive," we are going to play with JavaScript using HTML examples that have JavaScript already on them.

JavaScript is a Programming Language

#

JavaScript is a Programming Language, unlike HTML and CSS, which are markup languages. We will learn more about Programming Languages in the Programming Languages Chapter.

Exercise 1 of 12: What does "interactive" look like?

#

1. In the code that comes with this book, open the following HTML file in a web browser: 4-javascript/js-example-1.html.

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

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

3. The "racing," "stopping" and "restarting" the race, is done through JavaScript. This is an example of what interactivity looks like.

If you are curious and would like to look at the JavaScript causing this interactivity, in your text editor, navigate to row 61 on the js-example-1.html file. Row 61 is where the JavaScript code starts.

Don't let the code overwhelm you. I simply want to point out where it lives on the HTML file. By no means do I expect you to understand it.

In this chapter, I will introduce you to some core JavaScript concepts. During this process, you should start to understand - even if only generally - how JavaScript affects your interactions/experience with web pages.

Why are we Focusing on JavaScript?

#

No matter what kind of programmer you decide to become, JavaScript is a language that you will need to know. The most recent statistics show that JavaScript is used by about 95% of all websites.

JavaScript is everywhere and because your browser can read and process the JavaScript language, anyone with access to a web browser can, in theory, program in JavaScript.

Sometimes to appreciate something, you have to lose it. We're going to take that approach with JavaScript; we're going to interact with the web without JavaScript. Hopefully, this Exercise will show you just how much of your day-to-day interactions with the web rely on JavaScript.

Exercise 2 of 12: The Web without JavaScript

#

1. In your Chrome settings there is an option to disable JavaScript, here is a quick link to get there.

2. Toggle off JavaScript.

3. Get ready to miss JavaScript.

Toggle the JavaScript option in Chrome on and off. Then, compare before and after versions of various websites. Try Twitter, YouTube, or try searching for something on Google.

Here is what Twitter looks like without JavaScript enabled; ugly and hard to use.

4. Don't forget to turn JavaScript back on. You may need to close and open your browser again for JavaScript to be reapplied.

Did you miss it? I sure did. The web isn't the same without JavaScript.

JavaScript Basics

#

There is no way we could reasonably teach you all you need to know about JavaScript in just one chapter. Instead, I am using this chapter to introduce you to some core JavaScript concepts.

We will cover the following topics:

• JavaScript in the Console
• JavaScript Comments
• HTML Element Selectors
• Event listeners
• Arrays
• Objects

JavaScript in the Console

#

All major web browsers come shipped with JavaScript. Without getting into too many details, what this means is that the browser can read and run the JavaScript language.

For us, this also means that we can type JavaScript directly into the browser's DevTools Console and it will read and run JavaScript on the fly.

Exercise 3 of 12: JavaScript in the Console

#

1. In a browser, open the 4-javascript/js-example-1.html file we used Exercise #1.

Next, open the DevTools.

2. Navigate to the Console. You'll find this panel just to the right of the Elements panel.

3. The Console is a panel in the DevTools where Chrome executes commands that you type there. The Console is not unique to Chrome. All major browsers have one.

4. Go ahead and type or copy-paste the following commands into the Console. Once added, press enter to execute the command.

Type what follows >

#

In the following screenshots, you will see the word undefined. This is what the browser returns after declaring a variable. You should be typing what follows the greater than > symbol. The browser's response will come after the follows the less than < symbol.

For the following command, go ahead and replace Angel with your name.

5. The next couple of commands perform simple calculations. Go ahead and type these in the Console as well.

6. Next, we'll trigger a prompt message (a window that opens up asking you to fill something in). To do this, type the prompt command into the Console with a message.

Now enter a response in the prompt that pops up and click "OK." Look back in the Console. You should see your response.

The above Exercises are designed to get you familiar with playing with JavaScript in the Console. Don't get caught up on the syntax; get comfortable with executing JavaScript in the Console.

Console command: console.log()

#

We will be using the command console.log(). It is a command provided by the browser, and prints messages inside of the Console panel (this is how error and warning messages find their way into the Console).

The console.log() command is very helpful and often used by developers when they are trying to figure out how to debug something. We will use this command later in the book, so I want to introduce you to it here.

Exercise 4 of 12: console.log()

#

1. In the Console, type console.log("howdy") and then hit enter. The console.log() command printed whatever you put inside the parentheses following it.