1
00:00:00,060 --> 00:00:05,160
Hey, welcome back in this lesson, we're going to continue to construct and work with the dorm content

2
00:00:05,220 --> 00:00:12,690
loaded and as we saw last time, that whenever the page, the document object loads, then it fires

3
00:00:12,690 --> 00:00:18,240
off an event listener that is listening for the dorm content to be loaded and it runs the code that's

4
00:00:18,240 --> 00:00:19,260
contained within here.

5
00:00:19,680 --> 00:00:24,090
So what I want to do in this lesson is extend on what we did in the last lesson.

6
00:00:24,320 --> 00:00:32,010
We're going to actually create a standalone app object that's going to run whenever the page gets loaded.

7
00:00:32,190 --> 00:00:35,880
And this is going to be where we're going to contain the core of our code.

8
00:00:36,180 --> 00:00:42,390
And this is also going to allow us to separate out the application from any other Java scripts in case

9
00:00:42,390 --> 00:00:46,890
for reusing some of the variable names and so on.

10
00:00:46,920 --> 00:00:51,650
It's not going to conflict as we're gonna be wrapping it in an object called app.

11
00:00:52,020 --> 00:00:54,240
So let's set that up within the script file.

12
00:00:54,540 --> 00:00:58,350
And then we're going to run app whenever the page loads.

13
00:00:58,680 --> 00:01:01,560
So creating an app and it's going to be a function.

14
00:01:02,030 --> 00:01:04,800
It's going to be actually a self invoking function.

15
00:01:05,070 --> 00:01:08,400
That's going to run a particular file whenever the page loads.

16
00:01:08,730 --> 00:01:12,660
So it's going to be returning back an iron I.T. function.

17
00:01:13,050 --> 00:01:16,320
So let's create that contained within the app function.

18
00:01:16,620 --> 00:01:21,720
And I NIST is going to be the first initial initializing function that's going to run.

19
00:01:22,200 --> 00:01:26,880
And then within here, we can just simply put, I an I.T. ready.

20
00:01:27,570 --> 00:01:33,480
And that means that all of the content and we're gonna be using ITC to construct our gameboard in the

21
00:01:33,480 --> 00:01:34,300
upcoming lessons.

22
00:01:34,310 --> 00:01:36,060
So it's going to be an important function.

23
00:01:36,330 --> 00:01:38,430
And of course, we do want to return something.

24
00:01:38,730 --> 00:01:40,680
And that's what we're going to be returning back.

25
00:01:40,860 --> 00:01:44,070
So it's going to contain all of the construction of our Web page.

26
00:01:44,400 --> 00:01:47,900
And keeping it within a separate variable called app.

27
00:01:48,270 --> 00:01:51,150
That's going to be separate from the rest of the JavaScript code.

28
00:01:51,450 --> 00:01:54,420
And all of the OP contents are going to be scripts sitting in script.

29
00:01:54,450 --> 00:01:54,690
J.

30
00:01:54,720 --> 00:01:55,050
S.

31
00:01:55,320 --> 00:01:59,150
And the only connection is going to be with an index dot h Timal.

32
00:01:59,370 --> 00:02:01,880
Where we're going to be loading the script, G.S. file.

33
00:02:02,130 --> 00:02:05,530
And then whenever the DOM content loads that we're going to connect to up.

34
00:02:06,080 --> 00:02:10,140
So doing return, you're going to return back an object.

35
00:02:10,260 --> 00:02:11,930
And that's going to be iron I.T..

36
00:02:12,630 --> 00:02:14,860
And we're going to invoke the function iron.

37
00:02:15,480 --> 00:02:18,720
And this is expecting a function to be associated with it.

38
00:02:18,990 --> 00:02:21,720
So it's why we're not using the rounded brackets.

39
00:02:21,780 --> 00:02:24,120
Otherwise, we'd be invoking the function down here.

40
00:02:24,390 --> 00:02:27,660
And we don't want to be invoking the function on the return.

41
00:02:27,870 --> 00:02:31,470
We just want to be associating identity with the same function name.

42
00:02:31,500 --> 00:02:33,870
So that's where we're returning that information back.

43
00:02:34,200 --> 00:02:37,440
And we do want OP to be self invoking.

44
00:02:37,890 --> 00:02:44,040
So we're going to simply have the rounded brackets which indicate that the application is going to invoke.

45
00:02:44,730 --> 00:02:51,620
And that means that whenever we have the DOM content loaded instead of running function, we're going

46
00:02:51,620 --> 00:02:53,370
to connect it to the app.

47
00:02:53,970 --> 00:02:58,710
I indictee object and it's going to run the app by NATO function.

48
00:02:59,010 --> 00:03:00,630
And remember, this is self invoking.

49
00:03:00,630 --> 00:03:04,170
That's where we don't need the rounded brackets because we've placed it within app.

50
00:03:04,590 --> 00:03:06,960
So let's try that and refresh the page.

51
00:03:07,230 --> 00:03:11,220
And now we've got instead of Piech ready, we've got iron I.T. ready.

52
00:03:11,520 --> 00:03:18,970
So that means that the app object is up and running and it's returning back the contents of iron I.T.

53
00:03:19,260 --> 00:03:24,060
and within iron I.T. is where we're gonna set all of the document content.

54
00:03:24,480 --> 00:03:29,220
And that's coming up in the next lesson, where we're going to construct some H.T. Amelle for the page.

55
00:03:29,280 --> 00:03:34,590
So that's going to be visible as well as setup some game variables that we're going to be using within

56
00:03:34,590 --> 00:03:35,670
the app object.

57
00:03:36,450 --> 00:03:42,660
And the reason for making it this way is, again, to separate out any of this JavaScript contained

58
00:03:42,660 --> 00:03:43,650
within script J.

59
00:03:43,680 --> 00:03:45,870
S from the regular pages.

60
00:03:45,960 --> 00:03:52,890
As you might have several different JavaScript libraries and you don't want any interference between

61
00:03:52,980 --> 00:03:56,210
the app object and the function names with it here.

62
00:03:56,640 --> 00:04:00,570
That might be affecting the rest of the JavaScript code on the Web page.

63
00:04:00,930 --> 00:04:07,800
So there's a completely separate set out and provides a nice, neat place to build our code within.

64
00:04:08,190 --> 00:04:10,560
And this is gonna be a lot of JavaScript.

65
00:04:10,590 --> 00:04:12,930
We're gonna be focusing only on JavaScript.

66
00:04:13,230 --> 00:04:17,790
So the upcoming lessons, we're gonna construct everything using JavaScript.

67
00:04:17,870 --> 00:04:18,750
So that's coming up next.