1
00:00:02,029 --> 00:00:04,140
Now to see this all in action.

2
00:00:04,140 --> 00:00:07,460
I'm again, back in an empty project folder,

3
00:00:07,460 --> 00:00:09,420
I have this gitignore file, which

4
00:00:09,420 --> 00:00:13,170
I mentioned before already helps me create code snapshots.

5
00:00:13,170 --> 00:00:15,470
You won't have that and you don't need it.

6
00:00:15,470 --> 00:00:17,190
And in this empty folder,

7
00:00:17,190 --> 00:00:19,990
which I did open in visual studio code here,

8
00:00:19,990 --> 00:00:23,463
I will create a new index HTML file.

9
00:00:24,520 --> 00:00:27,080
And in this index HTML file,

10
00:00:27,080 --> 00:00:30,540
I will create a brand new HTML skeleton

11
00:00:30,540 --> 00:00:32,950
by entering an exclamation mark,

12
00:00:32,950 --> 00:00:36,680
and then in this auto overlay, which I get here,

13
00:00:36,680 --> 00:00:40,683
I hit tab to automatically create this skeleton.

14
00:00:42,250 --> 00:00:45,990
And here I'll just give this a title of JavaScript

15
00:00:45,990 --> 00:00:49,120
introduction. And now for the moment,

16
00:00:49,120 --> 00:00:54,120
we actually won't add any meaningful HTML content.

17
00:00:54,270 --> 00:00:55,520
Instead for the moment,

18
00:00:55,520 --> 00:00:58,660
I just want to start with some JavaScript code

19
00:00:58,660 --> 00:01:03,350
and how we can include it in our HTML file.

20
00:01:03,350 --> 00:01:06,400
And that's actually the first thing I want to do.

21
00:01:06,400 --> 00:01:10,960
How can we now add JavaScript code to this project here

22
00:01:10,960 --> 00:01:13,760
to this HTML page?

23
00:01:13,760 --> 00:01:15,870
Now there are different ways of doing it,

24
00:01:15,870 --> 00:01:18,330
but the most straight forward

25
00:01:18,330 --> 00:01:22,760
and easiest way of adding JavaScript to HTML file

26
00:01:22,760 --> 00:01:27,760
is to add a special script HTML element,

27
00:01:27,790 --> 00:01:31,510
opening and closing, you need both tags.

28
00:01:31,510 --> 00:01:34,030
This is not a self-closing tag,

29
00:01:34,030 --> 00:01:37,740
and it's not a self-closing tag because there is content

30
00:01:37,740 --> 00:01:40,600
which you can put between those tags

31
00:01:40,600 --> 00:01:44,043
and that content would be the actual JavaScript code.

32
00:01:44,940 --> 00:01:47,580
So that's very similar to the style

33
00:01:47,580 --> 00:01:50,000
tags we learned about earlier in the course,

34
00:01:50,000 --> 00:01:53,620
where we put CSS code between those tags.

35
00:01:53,620 --> 00:01:55,680
Now we have the script tags

36
00:01:55,680 --> 00:01:58,830
and we put JavaScript code between those tags,

37
00:01:58,830 --> 00:02:00,203
quite straightforward.

38
00:02:01,090 --> 00:02:05,150
Now, when it comes to the placement of that script element,

39
00:02:05,150 --> 00:02:06,830
it's basically up to you.

40
00:02:06,830 --> 00:02:09,740
For the style tags, I strongly recommended

41
00:02:09,740 --> 00:02:12,790
that you put those into the head section.

42
00:02:12,790 --> 00:02:16,270
For JavaScript, I basically have the same recommendation,

43
00:02:16,270 --> 00:02:19,860
but you will also, quite frequently see it

44
00:02:19,860 --> 00:02:21,510
being added in the body.

45
00:02:21,510 --> 00:02:24,420
It's up to you, but it is worth mentioning and highlighting

46
00:02:24,420 --> 00:02:26,250
that like style,

47
00:02:26,250 --> 00:02:30,080
script won't render anything visible on the screen.

48
00:02:30,080 --> 00:02:31,580
So putting it into the body

49
00:02:31,580 --> 00:02:34,700
doesn't make a lot of sense from that perspective.

50
00:02:34,700 --> 00:02:35,533
And hence here,

51
00:02:35,533 --> 00:02:38,023
I'll actually also put it into the head section.

52
00:02:39,560 --> 00:02:42,300
Now, but we know script tags, as I mentioned,

53
00:02:42,300 --> 00:02:44,980
we can write some JavaScript code.

54
00:02:44,980 --> 00:02:46,600
And to get started

55
00:02:46,600 --> 00:02:50,393
let's practice working with variables and values.