Adding JavaScript to your Page

Adding JavaScript to your Page
1and1 placeholder image

Browsers support three different ways of adding JavaScript to your page, and these ways should already be familiar to you because they are the same as CSS.

In our first lesson, we saw how to add internal JavaScript to our page, but you can also add external JavaScript, or inline it as well.

External

You can include any external JavaScript file (a file with the .js extension) by giving the script tag a src attribute.

This is the same process as including an external CSS file. The value of src is just the path to the file you want to include. This path can be both relative, like this:

	
    <script src="javascript.js"></script>
	

or absolute, like this:

	
    <script src="https://sabe.io/js/javascript.js"></script>
	

Place your script tag right before the closing body tag, and you're good to go!

Here's an example:

	
    <!DOCTYPE html>
    <html>
        <head>
            <title>External JavaScript</title>
        </head>
        <body>
            <h1>Content here</h1>
            <!-- place javascript here -->
            <script src="javascript.js"></script>
        </body>
    </html>
	

Internal

Internal JavaScript is embedding the code directly inside script tags inside the head tag. Here is the example that you ran in the first lesson.

	
    <!DOCTYPE html>
	<html>
		<head>
			<title>Internal JavaScript</title>
            <script>
                alert("I am internal JavaScript!");
            </script>
		</head>
		<body>
		</body>
	</html>
	

The code inside the script tags will be executed by the browser right away.

1and1 placeholder image

Inline

You can also embed JavaScript inline, for example when it comes to handling events, which we'll get to later in this class.

While not important to know as of now, here is an example of it:

	
    <a href="#" onclick="alert('Hi');">Click Me</a>
	

Console

It is important to be aware that your browser can run JavaScript via its built-in console. This allows you to go through most of this class without needing to edit an HTML file.

To access your console on Chrome (and most browsers in general), right-click on the page, and select Inspect.

Accessing Developer Tools via Inspect.
Accessing Developer Tools via Inspect.

What you see now is your Developer Tools window. From here you can do many cool things such as monitor how much data has been transferred between you and the server, how long that has taken, and adjust CSS styles on the fly.

The Developer Tools window in Chrome.
The Developer Tools window in Chrome.

However, what we are interested in right now is getting to the console. To do so select the Console tab at the top.

Once selected, you can write and execute JavaScript right away, for example like printing output using console.log().

An example of using Console Log.
An example of using Console Log.

Comments

Leaving comments (basically text inside a JavaScript file that the browser ignores) in JavaSript is pretty straight forward.

Single Line Comments

To add a single line comment, you just prepend what you want as a comment with two slashes, like this:

	
    var x = 0; // this is a comment
	

Multiple Line Comments

When you need your comments to span multiple lines, simply place your comment after /* and before */. Everything that gets put inside of those two will be ignored by the browser.

	
    var y = 1;
    /* this
        is
        also
        a
        comment
        */
	

Now that you can add scripts to your page, access the console, and leave comments, let's learn how to declare variables in JavaScript!