1
00:00:02,540 --> 00:00:04,450
So now, with our starting setup

2
00:00:04,450 --> 00:00:06,590
out of the way, let's dive right in

3
00:00:06,590 --> 00:00:09,580
and let's explore this DOM thing,

4
00:00:09,580 --> 00:00:11,920
and what it is and how it helps us

5
00:00:11,920 --> 00:00:14,180
when it comes to using JavaScript

6
00:00:14,180 --> 00:00:16,590
to build interactive websites and to

7
00:00:16,590 --> 00:00:19,810
manipulate what we see on the screen.

8
00:00:19,810 --> 00:00:21,740
And for that, let me first of all

9
00:00:21,740 --> 00:00:25,530
introduce two global variables,

10
00:00:25,530 --> 00:00:29,240
which are always available in our code,

11
00:00:29,240 --> 00:00:31,040
which we can always use.

12
00:00:31,040 --> 00:00:33,750
Built in variables, which are provided

13
00:00:33,750 --> 00:00:38,080
by the browser to us in our JavaScript code.

14
00:00:38,080 --> 00:00:42,280
And dat would be the window and the document variables

15
00:00:42,280 --> 00:00:46,463
and objects that are actually stored in that variables.

16
00:00:47,380 --> 00:00:49,360
These are built in variables,

17
00:00:49,360 --> 00:00:52,483
which then in turn, contain built in functions,

18
00:00:53,380 --> 00:00:56,410
and we got dis global window object,

19
00:00:56,410 --> 00:00:59,340
and we will see how we can use it in just a second,

20
00:00:59,340 --> 00:01:02,480
which is a globally available variable

21
00:01:02,480 --> 00:01:05,390
that contains an object, which then in turn holds

22
00:01:05,390 --> 00:01:09,320
a lot of utility information and functionality

23
00:01:09,320 --> 00:01:12,620
related to the active browser window

24
00:01:12,620 --> 00:01:16,630
and browser window here also means browser tab.

25
00:01:16,630 --> 00:01:19,250
So if you are running code on your website,

26
00:01:19,250 --> 00:01:22,380
you can use the window object to access information

27
00:01:22,380 --> 00:01:25,550
about the browser tab that opened your website,

28
00:01:25,550 --> 00:01:28,950
not about other tabs for security reasons,

29
00:01:28,950 --> 00:01:32,840
because otherwise your website could extract information

30
00:01:32,840 --> 00:01:35,970
from other websites loaded in different tabs,

31
00:01:35,970 --> 00:01:39,890
but you can access information about your browser tab.

32
00:01:39,890 --> 00:01:43,520
And now to see this in action, in our code

33
00:01:43,520 --> 00:01:47,270
we can access this window object like this,

34
00:01:47,270 --> 00:01:50,740
this window variable is globally available,

35
00:01:50,740 --> 00:01:52,703
even though we never defined it.

36
00:01:53,670 --> 00:01:56,200
We can also console log window

37
00:01:56,200 --> 00:01:59,300
to look inside of it, to look into it.

38
00:01:59,300 --> 00:02:02,570
If I saved dat, console log window,

39
00:02:02,570 --> 00:02:06,200
then here in your developer tools in the browser,

40
00:02:06,200 --> 00:02:09,539
you see this window object being logged here.

41
00:02:09,539 --> 00:02:13,550
And the great thing is dat when you console log an object

42
00:02:13,550 --> 00:02:17,210
in that console here in the DevTools, you can dive

43
00:02:17,210 --> 00:02:20,450
into that object and have a look at all the properties

44
00:02:20,450 --> 00:02:23,760
and methods that might exist in this object.

45
00:02:23,760 --> 00:02:26,963
Simply by clicking on this small arrow here.

46
00:02:28,310 --> 00:02:33,310
Now you'll see, we got lots of properties and methods here.

47
00:02:34,130 --> 00:02:39,130
Methods are marked by this F here, by this function symbol,

48
00:02:39,280 --> 00:02:43,870
because methods are just functions built into an object

49
00:02:43,870 --> 00:02:48,540
and properties are all the properties without dat F symbol.

50
00:02:48,540 --> 00:02:50,770
And you'll see, we've got lots of properties

51
00:02:50,770 --> 00:02:53,840
and functions here, and you should not be intimidated

52
00:02:53,840 --> 00:02:57,060
by this, with most of them you will never work.

53
00:02:57,060 --> 00:02:58,930
So you don't need to learn it by heart.

54
00:02:58,930 --> 00:03:00,880
And you can always console log it

55
00:03:00,880 --> 00:03:03,353
and dive into that anyways, if you want to.

56
00:03:04,490 --> 00:03:06,630
But one thing we can see in there, for example,

57
00:03:06,630 --> 00:03:08,480
if I scroll to the very top

58
00:03:08,480 --> 00:03:10,850
is this alert function here,

59
00:03:10,850 --> 00:03:14,530
this alert method, and that might sound familiar.

60
00:03:14,530 --> 00:03:19,530
We did use this alert function here before in the course.

61
00:03:21,530 --> 00:03:26,123
Now, the interesting thing about this window object is

62
00:03:26,123 --> 00:03:28,640
that you can access it by its name,

63
00:03:28,640 --> 00:03:31,470
like I'm doing it here when I'm logging it.

64
00:03:31,470 --> 00:03:35,450
but that everything that's built into this window object

65
00:03:35,450 --> 00:03:38,930
is actually also made available by the browser

66
00:03:38,930 --> 00:03:42,463
as global variables or functions.

67
00:03:43,340 --> 00:03:47,000
So all the methods and all the properties you find in here

68
00:03:47,000 --> 00:03:49,980
can also be accessed without window dot.

69
00:03:49,980 --> 00:03:53,360
That's a special exception made by the browser

70
00:03:53,360 --> 00:03:56,590
for this very important window object.

71
00:03:56,590 --> 00:03:58,840
That's why we can execute alert like this,

72
00:03:58,840 --> 00:04:01,920
but we could also do window dot alert.

73
00:04:01,920 --> 00:04:06,120
Dat would also work and it would invoke the same function.

74
00:04:06,120 --> 00:04:10,323
So these are equivalents, these two lines of code.

75
00:04:11,690 --> 00:04:13,980
Now, why am I mentioning this?

76
00:04:13,980 --> 00:04:16,450
Because this window object gives us a lot

77
00:04:16,450 --> 00:04:19,730
of utility information and methods that

78
00:04:19,730 --> 00:04:22,690
we can use to achieve a lot of things.

79
00:04:22,690 --> 00:04:26,840
For example, we can find out on which page we currently are,

80
00:04:26,840 --> 00:04:29,260
we can access utility functions like alert,

81
00:04:29,260 --> 00:04:31,310
and we'll see a couple of these features

82
00:04:31,310 --> 00:04:33,470
in action throughout the course.

83
00:04:33,470 --> 00:04:35,793
Of course we did already see alert.

84
00:04:36,860 --> 00:04:41,090
but there also is one very specific property

85
00:04:41,090 --> 00:04:44,090
on this window object, which is even more useful

86
00:04:44,090 --> 00:04:46,860
to us and which is super important and which we will use

87
00:04:46,860 --> 00:04:49,370
a lot in web development.

88
00:04:49,370 --> 00:04:52,430
And that's the document object.

89
00:04:52,430 --> 00:04:55,490
So the document property on the window object,

90
00:04:55,490 --> 00:05:00,240
which holds yet another object, a so-called nested object,

91
00:05:00,240 --> 00:05:03,680
because it's an object inside of another object.

92
00:05:03,680 --> 00:05:07,160
And this document object holds information

93
00:05:07,160 --> 00:05:11,930
and functionality related to the loaded website content.

94
00:05:11,930 --> 00:05:15,070
So not to the tab as a whole, but instead

95
00:05:15,070 --> 00:05:18,890
to the actual content that was brought onto the screen.

96
00:05:18,890 --> 00:05:23,890
So to our HTML code that was parsed by the browser

97
00:05:24,050 --> 00:05:27,890
and that leads to something being displayed on the screen.

98
00:05:27,890 --> 00:05:31,470
To dis parsed HTML content to dis content,

99
00:05:31,470 --> 00:05:34,073
we get access with this document object.

100
00:05:34,920 --> 00:05:39,520
And dis for example, will give us a lot of functionalities

101
00:05:39,520 --> 00:05:44,060
that allow us to reach out to certain HTML elements,

102
00:05:44,060 --> 00:05:48,040
add event listeners to certain elements, for example,

103
00:05:48,040 --> 00:05:51,920
to react on a click on a certain element by the user.

104
00:05:51,920 --> 00:05:55,920
And it will also allow us to manipulate the HTML code

105
00:05:55,920 --> 00:05:58,560
and change what's displayed on the screen

106
00:05:58,560 --> 00:06:01,840
without fetching a new HTML page.

107
00:06:01,840 --> 00:06:04,700
Now we're going to have a look at this document object

108
00:06:04,700 --> 00:06:07,230
and what we can do with it in this section,

109
00:06:07,230 --> 00:06:12,000
but this document object is related to this DOM concept,

110
00:06:12,000 --> 00:06:14,360
which is also extremely important

111
00:06:14,360 --> 00:06:16,253
when working with JavaScript.