1
00:00:00,270 --> 00:00:04,560
In this lesson, we're going to be building out our e-mail and discussing a little bit more about what

2
00:00:04,560 --> 00:00:05,520
the dorm is.

3
00:00:05,680 --> 00:00:11,820
So first of all, I've added a simple extension to my browser and this is the military generator.

4
00:00:11,940 --> 00:00:17,040
And what this does is this gives me the ability to see the dome of any webpage.

5
00:00:17,220 --> 00:00:23,370
And as you can see, the way that the dorm works is that it's a series of clothes that one up.

6
00:00:23,610 --> 00:00:29,820
And you can see that it's all the elements on the page are represented within this tree like structure,

7
00:00:29,940 --> 00:00:31,560
and we can easily access them.

8
00:00:31,560 --> 00:00:35,190
We see the relationship from them from one to the next to the next.

9
00:00:35,340 --> 00:00:39,840
So we've got the parent, we've got children, and then we've got the children's children and the parent

10
00:00:39,840 --> 00:00:41,790
and the parent of the parent and so on.

11
00:00:41,970 --> 00:00:48,990
So you can navigate your entire Web page using this type of format and maneuvering through all of the

12
00:00:48,990 --> 00:00:51,720
different elements that are available on your page.

13
00:00:51,970 --> 00:00:56,220
So if you actually want to see a little bit more about what's available within the dorm, we can open

14
00:00:56,220 --> 00:01:01,230
up our console and we can type in console.

15
00:01:01,450 --> 00:01:05,930
And this is console directories, so not console log and type in document.

16
00:01:06,210 --> 00:01:09,060
So this will give you the ability to see the document object.

17
00:01:09,270 --> 00:01:14,940
And you can do this on any Web page, your favorite websites, go to it, open up the console and type

18
00:01:14,940 --> 00:01:16,200
in console directory.

19
00:01:16,380 --> 00:01:22,500
And as you can see, all of the elements on the page are represented here within the document object.

20
00:01:22,680 --> 00:01:28,320
And you can see all of the different nodes, the children and then their children and so on and so on.

21
00:01:28,500 --> 00:01:33,660
And the nice thing about it, as well as it highlights all the different elements as you maneuver through

22
00:01:33,660 --> 00:01:37,980
them so that you can easily select them and find them available within your dorm.

23
00:01:38,900 --> 00:01:44,570
The advantage of understanding how the dorm is structured is it's going to make it a whole lot easier

24
00:01:44,690 --> 00:01:49,940
to interact with that document object when you're using your JavaScript, open up.

25
00:01:49,940 --> 00:01:53,780
Our editor adding in a div are going to give it a class.

26
00:01:53,810 --> 00:01:57,350
So that's how I'm going to select it from all the other elements on the page.

27
00:01:57,350 --> 00:02:02,870
And then this is going to give me my connection with JavaScript once I selected in order to update and

28
00:02:02,870 --> 00:02:03,610
manipulate it.

29
00:02:03,920 --> 00:02:09,310
We're also going to need an input and the type of input is going to be a number.

30
00:02:10,220 --> 00:02:14,600
So we'll set that up and I'm going to give it a default value of one hundred.

31
00:02:15,110 --> 00:02:17,060
So we're only going to have that one input.

32
00:02:17,070 --> 00:02:19,600
So that gives us, again, a way to select it.

33
00:02:19,820 --> 00:02:24,530
So I'm just making sure that all of these elements are distinct enough that it's fairly easy for me

34
00:02:24,530 --> 00:02:26,400
to select it using JavaScript.

35
00:02:26,780 --> 00:02:33,080
So next, let's set up using a button and then within here is where are we going to calculate the tip

36
00:02:33,080 --> 00:02:33,550
amount?

37
00:02:33,860 --> 00:02:35,720
So we've got all of the fields that we need.

38
00:02:35,870 --> 00:02:41,870
We've got an input number and then we've got a button that will calculate the tip, that will invoke

39
00:02:41,870 --> 00:02:47,180
the event to trigger the function, that calculates the tip and then the output where we're going to

40
00:02:47,180 --> 00:02:49,310
output the contents of the tip.

41
00:02:49,550 --> 00:02:50,930
So we refresh our page.

42
00:02:51,200 --> 00:02:52,800
Not a whole lot happening here.

43
00:02:52,850 --> 00:03:00,680
We have the input field and we've got our button for the tip and list out the document, opening up

44
00:03:00,680 --> 00:03:01,910
the document object.

45
00:03:02,520 --> 00:03:03,560
I'll make this bigger.

46
00:03:03,740 --> 00:03:08,060
You can see that we've got child nodes, so we've got each HTML is the first child.

47
00:03:08,240 --> 00:03:14,690
And then within HTML, I've got several children or I've got three child nodes, so I've got head,

48
00:03:14,870 --> 00:03:16,160
text and body.

49
00:03:16,430 --> 00:03:20,630
So this is the contents of the head and this is the contents of the body.

50
00:03:20,780 --> 00:03:23,930
And then inside of the body we've got child nodes.

51
00:03:24,050 --> 00:03:26,090
So I've got nine child nodes.

52
00:03:26,240 --> 00:03:27,500
I've got children here.

53
00:03:27,500 --> 00:03:29,090
So there's four different children.

54
00:03:29,240 --> 00:03:34,940
So there's that input divide that there's the output divide that I created with the class of output.

55
00:03:35,150 --> 00:03:39,650
There's the input field that I created, as well as the button that I created.

56
00:03:39,740 --> 00:03:44,510
And then lastly, we've got our script area where we're linking to our script code.

57
00:03:44,750 --> 00:03:50,430
So you can see that it actually matches exactly what we have on the left hand side within our code.

58
00:03:50,720 --> 00:03:55,820
So once you've set this up, go ahead and set up your HTML page and you're going to be ready to move

59
00:03:55,820 --> 00:04:01,160
on to the next part where we're going to be making use of the data that's represented here on the HTML

60
00:04:01,160 --> 00:04:07,280
page and connecting in our JavaScript and then using that data, manipulating some of the elements on

61
00:04:07,280 --> 00:04:07,700
the page.

62
00:04:08,480 --> 00:04:10,400
And that's coming up in the next lesson.