JavaScript (ES5) - Getting Started

#javascript #beginners

This was originally posted on my site at https://martyhimmel.me on January 11, 2017. Like a number of others on dev.to, I've decided to move my technical blog posts to this site.

Getting Started

You've decided to learn JavaScript. Now you're wondering, "what do I do? Where do I write code?" Believe it or not, you're looking at the fastest place to get started. No, not this tutorial, though I appreciate you using this and hope this will be a great starting point on your coding journey. I'm talking about your browser. Right click anywhere on this page, then click "Inspect" (the wording may be different based on your browser). In the newly opened section, click on "Console." In the console, type or copy and paste this bit of code:

alert('Hello world!');

You should have seen a popup box with "Hello world!" in it. Congratulations! You just wrote your first line of JavaScript. Seriously, it's that easy to get started. The console is a great place to test small snippets, learn with, and just play around in.

Throughout this series, you'll see console.log('something in here'); statements - anything inside the parentheses will be printed to the console you just opened. In fact, you can copy and paste that in the console, too. You'll see 'something in here' printed below the line - the statement that was logged to the console.

Inline JavaScript

The console is only one way to write JavaScript. Realistically, you won't want to use it for more than testing things as nothing is permanent. As soon as you reload the page, the console is wiped clean (unless your settings preserve the console log).

For more permanent scripts, there are a couple ways you can do it. The first is inside an HTML file - an inline script. You can place a set of script tags anywhere in the head or body sections. Here's an example showing a script in both sections.

<html>
<head>
  <script>
    alert('Popup triggered in the head tags.');
  </script>
</head>

<body>
  <script>
    console.log('This is logged to the console from the body tags.');
  </script>
</body>
</html>

One thing to keep in mind is order matters. The script in the head section runs first, then the script in the body section. If you have script in the top of the body section that targets an HTML element below the script, it won't know what to do and you'll get an error. At the time the script is run, the HTML element hasn't loaded yet, so it doesn't exist. There are a couple ways around this.

The first is to put all of your script tags right before the closing body tag. This makes sure all the HTML is loaded first before running the scripts. This was a common workaround for over a decade, and some systems still use this for backwards compatibility (e.g. WordPress). The second is the either defer or async attribute. Let's look at JavaScript files first.

JavaScript Files

The other way to inlcude JavaScript in your page is to create a separate JavaScript file and link to it. This is similar to an inline script, except the code is stored in a ".js" file and referenced with a src attribute on the script tag. The tag contents are also empty.

<!-- index.html -->
<html>
<head>
  <script src="myscript.js"></script>
</head>

<body>
</body>
</html>

// myscript.js
alert('Popup triggered in the head tags.');

Again, order matters. The contents of the "myscript.js" file will be loaded before the body tag is loaded. This is where async and defer come in to play. async will load a file in the background while continuing to load the rest of the page. If you have code that depends on an HTML element, this may or may not work, depending on which one finishes loading first (the .js file or the HTML). defer will wait until the page is loaded, then it will load the script.

If you're writing any code that relies on page contents (which most JavaScript will), I'd recommend using defer. Here's what it looks like.

<html>
<head>
  <script src="myscript.js" defer></script>
</head>

<body>
</body>
</html>

Syntax Notes

There are a couple syntax rules to go over before diving in to JavaScript. This won't cover everything, but is meant to highlight some important rules so you know what you're looking at in the tutorials ahead.

Statements should be terminated (end with) a semicolon. If you forget a semicolon, the browser will automatically insert one when it's interpretting the code, but it's not always accurate. Missing semicolons can lead to hard to debug issues.

Comments are written in one of two ways - using // or /* */. The first is a single line comment and the second is a multiple line comment. Comments are ignored by the browser.

// This is a single line comment
/*
This comment
spans multiple
lines
*/

When using quotes (for text strings), you can use either single or double quotes. In JavaScript, it doesn't matter which one you use. The only time is matters is if you use the same type within the string, such as a contracted word. "some text" is the same as 'some text'. For same types within a string, you can either use both or escape the quote. Using both looks like "it's blue". Escaping a character means putting a backslash in front of the character, such as 'it\'s blue'.