1
00:00:02,170 --> 00:00:05,710
Now I got another upcoming exercise for you,

2
00:00:05,710 --> 00:00:09,270
but before we go there and apply what we learned,

3
00:00:09,270 --> 00:00:13,020
I want to summarize what you learned in this module up to

4
00:00:13,020 --> 00:00:14,260
this point.

5
00:00:14,260 --> 00:00:18,310
And of course the main topic of this section up to this

6
00:00:18,310 --> 00:00:22,589
point is how you can work with the Dom and maybe let's even

7
00:00:22,589 --> 00:00:27,374
take a step back from that. What was the Dom again?

8
00:00:27,374 --> 00:00:32,374
Well, the Dom in the end is just the parsed HTML code,

9
00:00:33,390 --> 00:00:37,500
the browser parses the HTML code so that it knows what it

10
00:00:37,500 --> 00:00:38,760
should show on the screen.

11
00:00:38,760 --> 00:00:43,710
And it stores basically a bunch of JavaScript objects that

12
00:00:43,710 --> 00:00:48,230
represent the parsed HTML code internally,

13
00:00:48,230 --> 00:00:51,044
which it then certainly also uses internally, for example,

14
00:00:51,044 --> 00:00:53,610
to bring this onto the screen,

15
00:00:53,610 --> 00:00:57,420
but which it also provides to you as a developer,

16
00:00:57,420 --> 00:01:01,560
so to through JavaScript, and to be precise through

17
00:01:01,560 --> 00:01:05,970
this document variable, which is globally available,

18
00:01:05,970 --> 00:01:08,423
you can access that Dom.

19
00:01:09,290 --> 00:01:12,150
Now document, as you learn stores an object

20
00:01:12,150 --> 00:01:14,110
with a bunch of properties

21
00:01:14,110 --> 00:01:16,460
where most of these properties,

22
00:01:16,460 --> 00:01:19,498
then store more nested objects

23
00:01:19,498 --> 00:01:21,690
so that you can actually drill

24
00:01:21,690 --> 00:01:26,620
into that Dom and access the different HTML elements that

25
00:01:26,620 --> 00:01:28,063
live inside of it.

26
00:01:29,040 --> 00:01:32,670
Now since drilling into the Dom, like this is possible,

27
00:01:32,670 --> 00:01:34,280
but can be cumbersome,

28
00:01:34,280 --> 00:01:36,800
we also learned about utility methods,

29
00:01:36,800 --> 00:01:41,268
which exist like very selector or a get element by ID.

30
00:01:41,268 --> 00:01:46,066
It is worth mentioning that these are not all the available

31
00:01:46,066 --> 00:01:47,580
methods.

32
00:01:47,580 --> 00:01:50,150
There also are methods for getting elements

33
00:01:50,150 --> 00:01:51,990
by tag name and so on.

34
00:01:51,990 --> 00:01:54,690
And there also is query selector all

35
00:01:54,690 --> 00:01:57,700
to select more than one element.

36
00:01:57,700 --> 00:02:00,970
But these two methods are definitely two of the most

37
00:02:00,970 --> 00:02:05,150
important and common methods for searching for specific

38
00:02:05,150 --> 00:02:07,053
elements in the dom.

39
00:02:08,220 --> 00:02:10,850
Now, once you got hold of an element,

40
00:02:10,850 --> 00:02:13,980
you can output it to look into it,

41
00:02:13,980 --> 00:02:16,480
but that's typically not too useful

42
00:02:16,480 --> 00:02:18,310
to the visitors of your site.

43
00:02:18,310 --> 00:02:22,140
And therefore you can also manipulate those elements,

44
00:02:22,140 --> 00:02:25,080
for example, you can set the ref attribute,

45
00:02:25,080 --> 00:02:28,140
the ref property and therefore the attribute

46
00:02:28,140 --> 00:02:31,530
off at element through JavaScript to change the

47
00:02:31,530 --> 00:02:33,540
link destination.

48
00:02:33,540 --> 00:02:37,141
As you saw before, you can also change styles or

49
00:02:37,141 --> 00:02:41,129
the text content of elements through those different

50
00:02:41,129 --> 00:02:45,160
properties that exist on those elements.

51
00:02:45,160 --> 00:02:48,760
And here indeed, it is a good idea to consult their

52
00:02:48,760 --> 00:02:51,830
elements, to find out which properties and

53
00:02:51,830 --> 00:02:53,733
methods are available there.

54
00:02:54,730 --> 00:02:58,940
Now you can not just select and add existing elements.

55
00:02:58,940 --> 00:03:03,440
You also learn that you can add new elements and insert

56
00:03:03,440 --> 00:03:06,120
them into the page, into the dom,

57
00:03:06,120 --> 00:03:09,527
that you can remove elements and that you can

58
00:03:09,527 --> 00:03:13,290
also move elements around without deleting them.

59
00:03:13,290 --> 00:03:17,310
So just moving them into a new position on the page.

60
00:03:17,310 --> 00:03:20,410
And that's all also sometimes useful.

61
00:03:20,410 --> 00:03:22,190
And sometimes these are features,

62
00:03:22,190 --> 00:03:26,330
which you also need to add a certain feature to your page or

63
00:03:26,330 --> 00:03:28,380
achieve a certain behavior.

64
00:03:28,380 --> 00:03:30,260
Of course, as mentioned before,

65
00:03:30,260 --> 00:03:32,950
we are going to see more examples for that

66
00:03:32,950 --> 00:03:35,260
throughout this course.

67
00:03:35,260 --> 00:03:39,570
Now, in addition to selecting and manipulating elements,

68
00:03:39,570 --> 00:03:43,900
you can also add event listeners with that add event

69
00:03:43,900 --> 00:03:48,250
listener method, which you can call on all those elements.

70
00:03:48,250 --> 00:03:52,520
And then there is a broad variety of built in events like

71
00:03:52,520 --> 00:03:54,500
the input event or the click event,

72
00:03:54,500 --> 00:03:57,922
which we also saw before to which you can listen to

73
00:03:57,922 --> 00:04:02,470
then tell the browser to execute a certain function at some

74
00:04:02,470 --> 00:04:06,610
point in the future, when that event occurs.

75
00:04:06,610 --> 00:04:07,650
And in that function,

76
00:04:07,650 --> 00:04:11,530
you can then execute any code you want to execute one steady

77
00:04:11,530 --> 00:04:12,643
event occurred.

78
00:04:13,760 --> 00:04:16,332
Now in that function, which has executed by

79
00:04:16,332 --> 00:04:18,880
add event listener eventually

80
00:04:18,880 --> 00:04:22,210
you'll also get such an event object as a first

81
00:04:22,210 --> 00:04:26,150
parameter automatically by the browser.

82
00:04:26,150 --> 00:04:30,470
And you'll learn that this event object holds various pieces

83
00:04:30,470 --> 00:04:33,610
of information about the events that occurred.

84
00:04:33,610 --> 00:04:36,240
For example, also the events target,

85
00:04:36,240 --> 00:04:40,260
which is the element on which we clicked or on which the

86
00:04:40,260 --> 00:04:41,533
input event occurred.

87
00:04:42,550 --> 00:04:46,350
And that then allows you to get data from that element.

88
00:04:46,350 --> 00:04:50,903
For example, as we're doing it here in this demo JS file.

89
00:04:51,860 --> 00:04:55,410
So these are all extremely important and useful features,

90
00:04:55,410 --> 00:04:57,220
which you will often need.

91
00:04:57,220 --> 00:05:00,050
We also learned about the disconst keyword,

92
00:05:00,050 --> 00:05:02,590
which you can use instead of let,

93
00:05:02,590 --> 00:05:06,600
if you have a variable where you indeed never assign a new

94
00:05:06,600 --> 00:05:10,200
value to, with help of the equal sign.

95
00:05:10,200 --> 00:05:13,260
If you never assign a new value to a variable,

96
00:05:13,260 --> 00:05:15,840
and really only to the variable itself,

97
00:05:15,840 --> 00:05:19,810
not to some nest of property that does not matter,

98
00:05:19,810 --> 00:05:23,180
but if you never assign a new value to a variable,

99
00:05:23,180 --> 00:05:26,720
you can turn it into a const to be more explicit about the

100
00:05:26,720 --> 00:05:30,559
fact that this is a variable that does never change and

101
00:05:30,559 --> 00:05:33,630
that should maybe never change.

102
00:05:33,630 --> 00:05:38,010
So that's another keyword I introduced in this section.

103
00:05:38,010 --> 00:05:41,100
And with that, you already learned a lot about

104
00:05:41,100 --> 00:05:44,280
how to work with the Dom and how to manipulate it.

105
00:05:44,280 --> 00:05:45,460
And therefore next up,

106
00:05:45,460 --> 00:05:49,120
I'll give you a chance of practicing what you learned before

107
00:05:49,120 --> 00:05:52,683
we then explore control structures as a next step.