1
00:00:00,120 --> 00:00:04,440
Hey, in this lesson, we are going to start writing some JavaScript code, because I know that's what

2
00:00:04,440 --> 00:00:06,460
you're here for, to write JavaScript.

3
00:00:06,520 --> 00:00:11,640
And we're going to be bringing in an external file into this project and this going to be a regular

4
00:00:11,670 --> 00:00:12,480
G.S. file.

5
00:00:12,510 --> 00:00:15,670
So I'm going to go ahead and create a new file and save this.

6
00:00:15,780 --> 00:00:17,580
And we're just gonna call this as script.

7
00:00:17,700 --> 00:00:22,520
I'm saving it within the same folder that I've got my index each Timal file.

8
00:00:22,590 --> 00:00:24,780
And this will allow us to link to it.

9
00:00:24,840 --> 00:00:27,330
And you can also create a subfolder and link to that as well.

10
00:00:27,620 --> 00:00:29,360
I'm just gonna be calling it script J.

11
00:00:29,400 --> 00:00:29,710
S.

12
00:00:29,780 --> 00:00:34,920
So it's gonna be a blank file for now and for now to just have an alert just to make sure that everything

13
00:00:34,950 --> 00:00:36,420
is working properly.

14
00:00:36,720 --> 00:00:37,680
And I'll say hello.

15
00:00:37,950 --> 00:00:38,810
Each Timal file.

16
00:00:38,970 --> 00:00:42,880
We're going to link out to the G.S. file and the source is going to be.

17
00:00:42,900 --> 00:00:43,710
Script G.S..

18
00:00:43,920 --> 00:00:45,660
That's the new file that we've just created.

19
00:00:46,050 --> 00:00:50,280
So that's what we needed to do to bring the G.S. file into the project.

20
00:00:50,700 --> 00:00:56,070
And I'm going to use a feature within brackets to life preview the file.

21
00:00:56,400 --> 00:00:58,340
So it's only available within brackets.

22
00:00:59,010 --> 00:01:03,210
Otherwise, you can go and locate where your file is located.

23
00:01:03,420 --> 00:01:05,060
And just open it up within the browser.

24
00:01:05,060 --> 00:01:07,650
And it's going to have the same effect with brackets.

25
00:01:07,710 --> 00:01:10,830
We do get the HTP local file.

26
00:01:11,130 --> 00:01:13,590
So it's going to make a difference with the Web address.

27
00:01:13,860 --> 00:01:15,600
And this is just simply outputting the H.

28
00:01:15,600 --> 00:01:17,850
T Amelle into the browser.

29
00:01:18,060 --> 00:01:23,250
And we can see that that JavaScript file ran and provided the hello message.

30
00:01:23,550 --> 00:01:30,300
And from now on, I'll just do a split screen so that we can see the project on the right hand side.

31
00:01:30,330 --> 00:01:35,000
When the browser being output on the left hand side, I'm going to open up the code editor.

32
00:01:35,040 --> 00:01:36,180
So shrink this down.

33
00:01:36,330 --> 00:01:37,290
Minimize this.

34
00:01:37,320 --> 00:01:38,790
So we can see both screens.

35
00:01:39,360 --> 00:01:42,210
So I'd like to flip back and forth as we go through the project.

36
00:01:42,370 --> 00:01:49,550
And we also want to add in a script tag is a load, some JavaScript whenever the Web page load.

37
00:01:49,560 --> 00:01:53,070
So we're going to do this with an event listener on the document object.

38
00:01:53,400 --> 00:01:58,230
So whenever we want to interact with the DOM content, we want to make sure that the DOM content has

39
00:01:58,230 --> 00:01:58,610
loaded.

40
00:01:58,950 --> 00:02:03,450
Before we invoke or if we try to interact with any of the content within the Web page.

41
00:02:03,730 --> 00:02:08,160
So that means that all the Web elements within are each HTML are loaded and ready to go.

42
00:02:08,490 --> 00:02:13,830
So in order to ensure this, you can use a method called Dom Content Loaded event.

43
00:02:14,130 --> 00:02:19,990
So this is an event that can be fired off whenever the window object or the document object loads.

44
00:02:20,190 --> 00:02:21,900
It can run some JavaScript.

45
00:02:22,380 --> 00:02:26,910
So what I want you to do now is pausing video and add this into your project.

46
00:02:27,360 --> 00:02:29,490
And I'm going to show you the solution coming up.

47
00:02:29,760 --> 00:02:32,310
So all we're doing is adding it as an event listener.

48
00:02:32,610 --> 00:02:38,010
For now, we can just invoke an anonymous function that's going to log some content into the console.

49
00:02:38,430 --> 00:02:43,710
And that will also enable us to present the console that we're gonna be using heavily in the upcoming

50
00:02:43,770 --> 00:02:44,250
lessons.

51
00:02:44,520 --> 00:02:47,730
So go ahead, posit video and try this out added into the project.

52
00:02:47,780 --> 00:02:48,540
I'll show you how to do that.

53
00:02:53,620 --> 00:02:56,860
I got to minimize the files on the left hand side.

54
00:02:56,940 --> 00:03:01,840
I'm going to do a document and then add an event listener and the listener that we're listening for

55
00:03:01,840 --> 00:03:07,210
is going to be Dorne content loaded, just as we saw within the example.

56
00:03:07,690 --> 00:03:12,370
And then we're gonna be invoking an anonymous function that's going to run whenever the darn content

57
00:03:12,430 --> 00:03:13,090
is loaded.

58
00:03:13,720 --> 00:03:15,730
And for now, we can just do console log.

59
00:03:15,820 --> 00:03:19,210
And we'll put a put a message of ready within the console.

60
00:03:19,450 --> 00:03:25,150
So that means that whenever the Web page, whenever all of the HD himmel is loaded and we're ready to

61
00:03:25,150 --> 00:03:30,940
go, then we're going to have console log output into the console.

62
00:03:31,560 --> 00:03:33,370
We have ready output into the console.

63
00:03:33,640 --> 00:03:35,260
I'm going to as well hide the line numbers.

64
00:03:35,290 --> 00:03:37,600
We've got a little bit more space within the editor.

65
00:03:38,080 --> 00:03:39,250
And now let's try the suit.

66
00:03:39,310 --> 00:03:40,540
So refresh the page.

67
00:03:40,870 --> 00:03:42,460
We've got the halo that runs.

68
00:03:42,820 --> 00:03:47,680
So this is something that we can remove now because we're not going to be needing that within the project.

69
00:03:47,920 --> 00:03:50,110
And then also opening up with an inspect.

70
00:03:50,170 --> 00:03:54,790
So this is an option for Chrome that we've got access to the dev tools.

71
00:03:55,000 --> 00:03:58,210
And we saw earlier in the last lesson how we can access the dev tools.

72
00:03:58,390 --> 00:04:03,820
You should have ready sitting within your console whenever the page loads.

73
00:04:04,030 --> 00:04:08,680
And this gives us the flexibility to move the script tax up into the head as well.

74
00:04:08,920 --> 00:04:14,410
Since we're interacting with the elements on the page, we do want to make sure that all of the DOM

75
00:04:14,410 --> 00:04:20,770
content has loaded and the DOM is short for document object model, which represents all of the elements

76
00:04:20,980 --> 00:04:22,240
within each Timal page.

77
00:04:22,600 --> 00:04:27,790
And just as an addition to this lesson, for those of you that might not be using Brackets C, you might

78
00:04:27,790 --> 00:04:33,700
not have access to the life preview loading it with in the local machine as HTP object.

79
00:04:33,940 --> 00:04:39,130
You can also open it just as a regular each Timal page in your browser.

80
00:04:39,250 --> 00:04:41,260
So just from your local directory.

81
00:04:41,560 --> 00:04:42,870
So I've got my directory open.

82
00:04:42,880 --> 00:04:48,760
I'm creating the courses in a folder called Course and I can open that up with Chrome and then opening

83
00:04:48,760 --> 00:04:51,410
it in Chrome is going to run that each time.

84
00:04:51,410 --> 00:04:57,100
I'll file within the browser according to where it's located on my computer, and I can do the same

85
00:04:57,100 --> 00:05:01,780
thing where I can open up the dev tools and can see the content is being output as ready.

86
00:05:02,140 --> 00:05:04,660
So that's an alternative option to open up the files.

87
00:05:04,900 --> 00:05:11,380
If you're not using brackets or if you're having some problems loading up the brackets local life preview,

88
00:05:11,650 --> 00:05:17,230
then you can just go ahead and open up the file within the directory wherever it's located on your computer.