Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

JavaScript Basics

Well done!

You have completed JavaScript Basics!

Sign up for Treehouse Back to Library
Preview
Video Player
00:00
00:00
00:00
  1. 2x 2x
  2. 1.75x 1.75x
  3. 1.5x 1.5x
  4. 1.25x 1.25x
  5. 1.1x 1.1x
  6. 1x 1x
  7. 0.75x 0.75x
  8. 0.5x 0.5x
Use Up/Down Arrow keys to increase or decrease volume.

Add JavaScript to HTML

6:58 with Guil Hernandez

It's common to put your JavaScript code into a file that's separate from your HTML file. In this video, you'll learn how and where to add JavaScript to a web page.

The JavaScript console is great for experimenting with code. 0:00
And as you'll soon learn, finding errors in your code. 0:03
When writing larger, more complex applications, 0:07
it's common to put your JavaScript code into a file that's separate 0:09
from your HTML file like you would with CSS, for example. 0:12
So now, I'll teach you how and where to link a JavaScript file to HTML file. 0:17
Earlier, you learn that you can use JavaScript in lots of different places. 0:22
For instance, on web servers and desktop applications. 0:26
In this course, we'll concentrate on how JavaScript works in a browser. 0:29
The browser is the most common place you'll encounter JavaScript and 0:33
the easiest place to try out JavaScript programming. 0:36
Browsers perform lots of different functions. 0:40
They read and display content using HTML. 0:43
They style that HTML following CSS rules and they add behavior, and 0:46
interactivity to a page by following the instructions in a JavaScript program. 0:50
Every browser has what's called a JavaScript engine built into it. 0:54
It's a powerful part of the browser that reads, understands and 0:58
runs the instructions in a JavaScript program. 1:02
When a browser encounters JavaScript programming, the JavaScript engine 1:04
evaluates each statement in the program and does what the statement says to do. 1:09
That is your program runs as the JavaScript engine reads it. 1:14
For example, earlier, when the browser read a statement with an alert command, 1:18
a dialog box appeared on the screen. 1:22
Here's some new vocabulary. 1:25
When a browser reads and acts on a JavaScript program, we call that running the program. 1:26
It's also called executing the program. 1:33
So you'll often hear developers say things like when the browser executes this line 1:35
of code, a dialog box appears on the page. 1:39
Browsers let you run JavaScript code from several different places. 1:42
Most of the time, you'll write all your JavaScript code in a file that's 1:46
separate from your HTML files and there are two steps to writing and 1:50
executing JavaScript from a file. 1:54
You create a JavaScript file with a .js extension, 1:56
then you link or connect the JavaScript file to an HTML file. 2:00
Let's create a new JavaScript file inside the js folder. 2:05
In workspaces, you add a new file by selecting File > New File. 2:09
To create a new JavaScript file, provide a name followed by the .js extension. 2:14
script.js is just the name I wanna give this file. 2:21
A JavaScript file doesn't have to be named script.js. 2:24
You can name the file anything you want. 2:28
Let's add a line of code and this new file using the alert command. 2:30
All right, we've created a JavaScript file and added a line of code. 2:41
Now, we need to link the file to our HTML. 2:45
To link the .js file to an HTML file, you use the HTML script tag. 2:49
Script has an attribute named source just like the HTML image tag. 2:55
The source attribute instructs the browser where to find the JavaScript file and 2:59
the browser then loads that file. 3:04
Open the index.html file in the workspace and add a set of opening and 3:06
closing script tags inside the head of the document. 3:11
The script.js file is inside a directory named js. 3:15
So you can point to it by setting the source 3:19
attributes value to js/script.js. 3:24
The name of the folder followed by the filename. 3:29
The script.js file is now linked or connected to index.html. 3:33
Meaning, index.html can run JavaScript code written inside the file. 3:37
Saving both files and refreshing the browser displays the alert dialog. 3:42
You can also add JavaScript directly inside the HTML by placing your 3:49
JavaScript code inside of here script tags like this. 3:54
Within the script tags, I'll add an alert displaying the text. 3:58
Another message from inside index.html. 4:03
When I save my file and refresh the browser, notice how the alert in 4:12
the linked file, script.js runs first and then the alert in the HTML file. 4:17
That's because script.js appears in the HTML before the set of script tags. 4:22
You can also run this code from the head of the document. 4:29
For example, I'll cut the script tags out of the body and 4:32
paste them below the first set of script tags. 4:35
And notice how the browser runs each in the same order as before. 4:44
Now, one thing you can't do is link to a JavaScript file using the source 4:53
attribute and insert JavaScript code inside the same script tags like this. 4:59
Once you set a source, 5:06
anything between the script tags gets ignored by the browser. 5:08
So make sure that you have only one set of script tags per linked file and another 5:11
set of script tags for any JavaScript you add directly inside your HTML file. 5:16
And it's perfectly common and okay to have more 5:24
than one set of script tags in an HTML file like you see here. 5:27
This is necessary if you want to link more than one JavaScript file to a page. 5:32
Now I didn't actually create or need an app.js file in this case, so 5:37
I'll go ahead and delete this second script tag. 5:40
Finally, you can place the script tag almost anywhere in an HTML file. 5:46
You'll most commonly find script tags placed in either the head of the document, 5:52
usually just before the closing head tag, or 5:57
more often within the body just before the closing body tag. 6:01
One advantage of placing your script near the bottom of the page is that it 6:05
lets the browser load and display the HTML before running the JavaScript. 6:09
Notice what happens if I move this script tag to the bottom of the page just 6:13
before the closing body tag. 6:18
When I save this file and refresh the page, now the alert that's directly in 6:23
the HTML loads first before anything else, then the content of the page displays. 6:29
Notice the headline, then the alert from the script.js file appears. 6:35
In this course, we'll use a separate JavaScript file and link it to near 6:40
the bottom of the page just before the closing body tag like this. 6:45