1
00:00:00,115 --> 00:00:03,520
The JavaScript console is great for
experimenting with code.

2
00:00:03,520 --> 00:00:07,040
And as you'll soon learn,
finding errors in your code.

3
00:00:07,040 --> 00:00:09,680
When writing larger,
more complex applications,

4
00:00:09,680 --> 00:00:12,940
it's common to put your JavaScript
code into a file that's separate

5
00:00:12,940 --> 00:00:15,850
from your HTML file like you
would with CSS, for example.

6
00:00:17,020 --> 00:00:22,814
So now, I'll teach you how and where
to link a JavaScript file to HTML file.

7
00:00:22,814 --> 00:00:26,489
Earlier, you learn that you can use
JavaScript in lots of different places.

8
00:00:26,489 --> 00:00:29,481
For instance, on web servers and
desktop applications.

9
00:00:29,481 --> 00:00:33,397
In this course, we'll concentrate on
how JavaScript works in a browser.

10
00:00:33,397 --> 00:00:36,940
The browser is the most common place
you'll encounter JavaScript and

11
00:00:36,940 --> 00:00:40,640
the easiest place to try
out JavaScript programming.

12
00:00:40,640 --> 00:00:43,320
Browsers perform lots
of different functions.

13
00:00:43,320 --> 00:00:46,160
They read and display content using HTML.

14
00:00:46,160 --> 00:00:50,080
They style that HTML following CSS
rules and they add behavior, and

15
00:00:50,080 --> 00:00:54,782
interactivity to a page by following
the instructions in a JavaScript program.

16
00:00:54,782 --> 00:00:58,537
Every browser has what's called
a JavaScript engine built into it.

17
00:00:58,537 --> 00:01:02,207
It's a powerful part of the browser
that reads, understands and

18
00:01:02,207 --> 00:01:04,953
runs the instructions in
a JavaScript program.

19
00:01:04,953 --> 00:01:09,385
When a browser encounters JavaScript
programming, the JavaScript engine

20
00:01:09,385 --> 00:01:14,035
evaluates each statement in the program
and does what the statement says to do.

21
00:01:14,035 --> 00:01:18,060
That is your program runs as
the JavaScript engine reads it.

22
00:01:18,060 --> 00:01:22,908
For example, earlier, when the browser
read a statement with an alert command,

23
00:01:22,908 --> 00:01:25,102
a dialog box appeared on the screen.

24
00:01:25,102 --> 00:01:26,662
Here's some new vocabulary.

25
00:01:26,662 --> 00:01:33,081
When a browser reads and acts on a JavaScript
program, we call that running the program.

26
00:01:33,081 --> 00:01:35,251
It's also called executing the program.

27
00:01:35,251 --> 00:01:39,978
So you'll often hear developers say things
like when the browser executes this line

28
00:01:39,978 --> 00:01:42,385
of code, a dialog box appears on the page.

29
00:01:42,385 --> 00:01:46,443
Browsers let you run JavaScript
code from several different places.

30
00:01:46,443 --> 00:01:50,597
Most of the time, you'll write all
your JavaScript code in a file that's

31
00:01:50,597 --> 00:01:54,349
separate from your HTML files and
there are two steps to writing and

32
00:01:54,349 --> 00:01:56,367
executing JavaScript from a file.

33
00:01:56,367 --> 00:02:00,391
You create a JavaScript
file with a .js extension,

34
00:02:00,391 --> 00:02:05,060
then you link or connect
the JavaScript file to an HTML file.

35
00:02:05,060 --> 00:02:09,434
Let's create a new JavaScript
file inside the js folder.

36
00:02:09,434 --> 00:02:14,846
In workspaces, you add a new file
by selecting File > New File.

37
00:02:14,846 --> 00:02:21,684
To create a new JavaScript file, provide
a name followed by the .js extension.

38
00:02:21,684 --> 00:02:24,631
script.js is just the name
I wanna give this file.

39
00:02:24,631 --> 00:02:28,148
A JavaScript file doesn't
have to be named script.js.

40
00:02:28,148 --> 00:02:30,614
You can name the file anything you want.

41
00:02:30,614 --> 00:02:35,304
Let's add a line of code and
this new file using the alert command.

42
00:02:41,982 --> 00:02:45,723
All right, we've created a JavaScript
file and added a line of code.

43
00:02:45,723 --> 00:02:49,486
Now, we need to link the file to our HTML.

44
00:02:49,486 --> 00:02:55,158
To link the .js file to an HTML file,
you use the HTML script tag.

45
00:02:55,158 --> 00:02:59,762
Script has an attribute named source
just like the HTML image tag.

46
00:02:59,762 --> 00:03:04,391
The source attribute instructs the browser
where to find the JavaScript file and

47
00:03:04,391 --> 00:03:06,377
the browser then loads that file.

48
00:03:06,377 --> 00:03:11,273
Open the index.html file in the workspace
and add a set of opening and

49
00:03:11,273 --> 00:03:15,085
closing script tags inside
the head of the document.

50
00:03:15,085 --> 00:03:19,538
The script.js file is inside
a directory named js.

51
00:03:19,538 --> 00:03:24,441
So you can point to it
by setting the source

52
00:03:24,441 --> 00:03:29,074
attributes value to js/script.js.

53
00:03:29,074 --> 00:03:33,182
The name of the folder
followed by the filename.

54
00:03:33,182 --> 00:03:37,951
The script.js file is now linked or
connected to index.html.

55
00:03:37,951 --> 00:03:42,944
Meaning, index.html can run JavaScript
code written inside the file.

56
00:03:42,944 --> 00:03:49,592
Saving both files and refreshing
the browser displays the alert dialog.

57
00:03:49,592 --> 00:03:54,442
You can also add JavaScript directly
inside the HTML by placing your

58
00:03:54,442 --> 00:03:58,368
JavaScript code inside of
here script tags like this.

59
00:03:58,368 --> 00:04:03,669
Within the script tags,
I'll add an alert displaying the text.

60
00:04:03,669 --> 00:04:08,344
Another message from inside index.html.

61
00:04:12,549 --> 00:04:17,126
When I save my file and refresh
the browser, notice how the alert in

62
00:04:17,126 --> 00:04:22,380
the linked file, script.js runs first and
then the alert in the HTML file.

63
00:04:22,380 --> 00:04:29,824
That's because script.js appears in
the HTML before the set of script tags.

64
00:04:29,824 --> 00:04:32,284
You can also run this code
from the head of the document.

65
00:04:32,284 --> 00:04:35,712
For example, I'll cut the script
tags out of the body and

66
00:04:35,712 --> 00:04:38,507
paste them below the first
set of script tags.

67
00:04:44,649 --> 00:04:48,614
And notice how the browser runs
each in the same order as before.

68
00:04:53,755 --> 00:04:59,162
Now, one thing you can't do is link
to a JavaScript file using the source

69
00:04:59,162 --> 00:05:04,941
attribute and insert JavaScript code
inside the same script tags like this.

70
00:05:06,926 --> 00:05:08,230
Once you set a source,

71
00:05:08,230 --> 00:05:11,877
anything between the script tags
gets ignored by the browser.

72
00:05:11,877 --> 00:05:16,612
So make sure that you have only one set of
script tags per linked file and another

73
00:05:16,612 --> 00:05:21,291
set of script tags for any JavaScript
you add directly inside your HTML file.

74
00:05:24,013 --> 00:05:27,853
And it's perfectly common and
okay to have more

75
00:05:27,853 --> 00:05:32,659
than one set of script tags in
an HTML file like you see here.

76
00:05:32,659 --> 00:05:37,161
This is necessary if you want to link
more than one JavaScript file to a page.

77
00:05:37,161 --> 00:05:40,913
Now I didn't actually create or
need an app.js file in this case, so

78
00:05:40,913 --> 00:05:43,645
I'll go ahead and
delete this second script tag.

79
00:05:46,744 --> 00:05:52,124
Finally, you can place the script
tag almost anywhere in an HTML file.

80
00:05:52,124 --> 00:05:57,863
You'll most commonly find script tags
placed in either the head of the document,

81
00:05:57,863 --> 00:06:01,022
usually just before the closing head tag,
or

82
00:06:01,022 --> 00:06:05,281
more often within the body just
before the closing body tag.

83
00:06:05,281 --> 00:06:09,377
One advantage of placing your script
near the bottom of the page is that it

84
00:06:09,377 --> 00:06:13,624
lets the browser load and display
the HTML before running the JavaScript.

85
00:06:13,624 --> 00:06:18,337
Notice what happens if I move this script
tag to the bottom of the page just

86
00:06:18,337 --> 00:06:20,275
before the closing body tag.

87
00:06:23,661 --> 00:06:29,389
When I save this file and refresh
the page, now the alert that's directly in

88
00:06:29,389 --> 00:06:35,673
the HTML loads first before anything else,
then the content of the page displays.

89
00:06:35,673 --> 00:06:40,196
Notice the headline, then the alert
from the script.js file appears.

90
00:06:40,196 --> 00:06:45,117
In this course, we'll use a separate
JavaScript file and link it to near

91
00:06:45,117 --> 00:06:49,568
the bottom of the page just before
the closing body tag like this.