JavaScript is a very deep programming language, which can take you many years to learn. Luckily for you, our Director of Front End Web Development Education has examined the code of eight of the top tech employers in South Florida, and found that most companies only use very basic JavaScript (the good parts). Here’s a quick tutorial to help you get started with JavaScript:
How To Get Started With JavaScript
Like CSS, you can embed JS as a section of an HTML document, or you can create a JavaScript file. Unlike CSS (which must be inserted in the <head> section of your HTML document), JS can be inserted into either the <head> or the <body> section.
Embedding JS in an HTML file: If you want to embed your JS code in an HTML document, your code will go between “script” tags, like so: <script> ...code... </script>
Creating a separate file for your JavaScript code: If you create a new file for your JS code, you can name the file whatever you want, as long as you give it a .js extension (whateverNameYouWant.js). Just like CSS, you’ll need to create a link to your external JS file, in your HTML code. The code will look something like this: <script src="whateverNameYouWant.js"></script>
As a general rule, it’s best to put your JS code in its own file, and put your <script src="whateverNameYouWant.js"></script> link at the bottom of the <body> section. That way all your HTML and CSS will load first, so the viewer doesn’t need to sit and wait for the JavaScript to load before she can even view the webpage.
Creating Our First JavaScript Files
So let’s get our very own JavaScript file up and running, and play around with it a little.
You can either try going through the steps above to create two files (one JavaScript file and an HTML file that links to it, and paste in the following code:
THIS CODE GOES IN YOUR JAVASCRIPT FILE
// THIS IS YOUR JAVASCRIPT DOCUMENT!
var shipHealth = 100;
var asteroid01_damage = 6;
var collision = true;
if (collision) {
shipHealth = (shipHealth - asteroid01_damage);
}
THIS CODE GOES IN YOUR HTML FILE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="codingIsFun.js"></script>
<title>This Is Your HTML Document</title>
</head>
<body>
<p>I think this is the beginning of a beautiful video game.</p>
</body>
</html>
(Please note that you’ll need to change “codingIsFun.js” to whatever name you gave to your JavaScript file).
Alternatively, you can just DOWNLOAD THESE TWO FILES that we’ve already created for your convenience.
Testing Your JavaScript In The Browser (using the JavaScript Console)
At this point, you should have a folder on your computer with two files in it: an HTML file and a JavaScript file. When you’re looking at the folder, the HTML file should have an icon indicating that it will be opened in your browser (Google Chrome, Firefox, Safari, Internet Explorer, or whatever your default browser happens to be). Go ahead and double click it to open it in your browser.
Now your browser should open the HTML file, and you should see a blank web page, that says “I think this is the beginning of a beautiful video game.”
Now you’ll need to open your browser’s “JavaScript console” to be able to see the JavaScript running under the hood of your web page. Every browser has a different way to access the JavaScript console, but they’re all relatively similar. If you’re not using Google Chrome, then search Google for “how to access javascript console in _______” (fill in the name of your browser). If you are using Google Chrome, then simply right-click somewhere on the web page, select “inspect” from the menu that appears, and then select “console” from the menu bar that appears on top of the Google Developer Tools at the bottom (or side) of your browser window.
Now, you can test your code by using JavaScript’s “console.log();” function. If you’ve correctly opened up the console, you should see a blinking prompt where you can type. Enter the following code:
console.log(asteroid01_damage);
and hit enter.
At this point, the console will return the number 6 — which is exactly what we programmed into our JavaScript file, with the line:
var asteroid01_damage = 6;
Congratulations! Your JavaScript code is officially running under the hood of your web page!
BONUS CHALLENGE
Take a look at the code in your JavaScript file, and write down what you think the console will return if you feed it the following code:
console.log(shipHealth);
(Hint: it’s a little bit more complicated than just looking at line #1.)
Join us next week as we dive deeper into this code, continue making our first JavaScript program, and learn more about JavaScript Variables in the process!