Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up