JavaScript 101

The <script> Tag

In order for the web page to know when it's supposed to process some JavaScript code, we use the script tag. Anything placed between the start and end tags will be treated by the browser as JavaScript code.

Before we continue, it's imptorant to know that there's no room for error or ambiguity in programming. If you have some spelling mistakes in your essay, for example, chances are the reader will understand what you meant to say. But a computer only does exactly what you tell it to do—no more, no less. So when you make a mistake, the computer can't assume what you really wanted it to do. It either does the wrong thing or doesn't work at all.

The JavaScript Console

You can open the console in Firefox or Google Chrome by pressing the F12 key or finding it in the browser's menu. The console does a few important things for JavaScript programmers:

So if you open your document and find that the JavaScript isn't working properly, you can open the console to view any errors, which should be printed in red.

Once the console is open, you can view the value of variables by simply typing the variable name. You can also change the value of variables and even declare new ones.

Printing messages to the console from your JavaScript code is done using the console.log function, and it can be useful for testing purposes. Try opening the console and pasting in the following text, then pressing Enter:

var name = "Duncan";

console.log(name);

The console should then print this message:

Duncan

Naming Conventions

Readability is very important when programming because you'll be frequently going back and changing previously-written code. The first step to making code easy to understand is naming variables and functions logically and consistently. Take a look at the following examples and see if you can figure out which option makes more sense:

var x = "Dylan Thomas";

OR

var username = "Dylan Thomas";


var total = x + y;

OR

var variable = x + y;


function myFunction(n1, n2);

OR

function addNumbers(numberOne, numberTwo);

When it comes to longer variable and function names, the convention in JavaScript is to capitalize the first letter of each word after the first. Let's look at some examples:

var sashimi;

var californiaRoll;

function createNewElement();

Names can also contain numbers, underscores and dollar signs, though this is usually frowned upon.

Commenting

In addition to naming things well, adding comments to code can help to explain its purpose. This makes reading code much easier, especially when dealing with larger programs. Here's how you can add comments:

// This is a single comment line.

/*

This is a multi-line comment.

It continues until it's closed.

*/

Programmers have different opinions on where and how to add comments. Just remember that code usually makes sense as you're writing it, but it may not be as obvious later on.

Don't worry if you don't understand some of these concepts, we'll discuss variables and functions in greater detail in later lessons.

Continue to Next Lesson »