1
00:00:02,250 --> 00:00:07,740
Now before we actually start to work with any HTML elements, let's have a look at that document

2
00:00:07,830 --> 00:00:09,820
and that window object.

3
00:00:09,820 --> 00:00:15,480
Now for that, attached you find a very basic starting project, essentially an empty HTML file and an

4
00:00:15,510 --> 00:00:20,180
empty app.js file which is imported into that HTML file here

5
00:00:20,550 --> 00:00:26,160
and if you open up that HTML file and you open up your browser developer tools and go to the console

6
00:00:26,160 --> 00:00:31,620
there which allows you to also run some Javascript commands as you learned, then here you can simply

7
00:00:31,620 --> 00:00:33,500
write document

8
00:00:33,510 --> 00:00:36,600
and this gives you access to this document object.

9
00:00:36,600 --> 00:00:42,270
Now by default, you'll see you get this strange representation which looks like HTML code here,

10
00:00:42,750 --> 00:00:45,630
that's a little feature by the chrome dev tools,

11
00:00:45,630 --> 00:00:52,060
this is actually a Javascript object but since it's tied to the loaded document, to that loaded HTML

12
00:00:52,110 --> 00:00:57,050
code, it gives you this presentation where you can even select different parts if you hover over them

13
00:00:57,660 --> 00:01:06,390
but to get a feeling or get a look into the real Javascript object, you can type console.dir document

14
00:01:06,480 --> 00:01:11,850
and you can use console.dir in any cases where console.log gives you this strange output

15
00:01:11,850 --> 00:01:13,410
in the dev tools

16
00:01:13,410 --> 00:01:18,750
and now you get access to the real Javascript object with all the properties that are in there and you

17
00:01:18,750 --> 00:01:21,110
see, there are a lot of properties in there.

18
00:01:21,120 --> 00:01:26,670
Now most of them might never matter to you but for example, the body property here if you expose that

19
00:01:26,700 --> 00:01:32,010
gives you access to entire new object which in the end reflects your document body and everything that's

20
00:01:32,010 --> 00:01:33,280
attached to that

21
00:01:33,450 --> 00:01:38,840
and this will also allow us to get access to all the HTML content rendered in there.

22
00:01:38,880 --> 00:01:46,200
There are other properties which you can dive in, for example document element here is basically your

23
00:01:46,200 --> 00:01:47,760
entire HTML content,

24
00:01:47,790 --> 00:01:53,850
so the body gives you access to everything that was rendered in that body part age, HTML holds everything

25
00:01:53,850 --> 00:01:58,530
that was rendered or set up for your entire HTML code which was rendered,

26
00:01:58,530 --> 00:02:01,160
so that's also another important property.

27
00:02:01,260 --> 00:02:07,020
We also have a couple of other important properties, head for example unsurprisingly gives you access

28
00:02:07,020 --> 00:02:09,290
to everything that was rendered as part of this head,

29
00:02:09,780 --> 00:02:14,910
so together they kind of make up that entire HTML code as well of course and so on.

30
00:02:14,910 --> 00:02:18,690
So there are a bunch of interesting things in there and we'll work with a couple of them

31
00:02:18,720 --> 00:02:22,890
but there also are a lot of them which you will never really need but of course feel free to browse

32
00:02:22,890 --> 00:02:25,440
through all of that in that document here,

33
00:02:25,440 --> 00:02:31,320
this in the end is one of this important topmost objects which are made available to you by the browser

34
00:02:31,500 --> 00:02:35,430
to allow you to interact with your loaded HTML document.

35
00:02:35,430 --> 00:02:40,740
Now let's clear the console and let's also output window here, so you can type window here and you get

36
00:02:40,740 --> 00:02:42,640
access to the window object.

37
00:02:42,660 --> 00:02:49,740
Now this is that real topmost object and this gives you access to all the core APIs that the browser

38
00:02:49,740 --> 00:02:51,130
wants to expose to you

39
00:02:51,190 --> 00:02:56,340
and for example here you also find alert, a function which we already used a couple of times in this

40
00:02:56,340 --> 00:02:58,590
course to throw such an alert.

41
00:02:58,650 --> 00:03:04,260
The important thing is that with window, you by default if in your Javascript code, if you're running,

42
00:03:04,260 --> 00:03:09,030
if you're typing some code here, you by default have access to everything in window which is why you

43
00:03:09,030 --> 00:03:16,270
can just type alert like this. Totally correct would be window.alert as you see because window is this

44
00:03:16,350 --> 00:03:21,570
topmost global object which is exposed to you by the browser and there, you have the alert functionality

45
00:03:21,960 --> 00:03:29,280
but actually browsers always parse your Javascript code such that window.. is automatically added

46
00:03:29,280 --> 00:03:33,900
in front of some function if that function can't be found anywhere else,

47
00:03:33,960 --> 00:03:39,600
so the browser always looks in the window object if you're calling or accessing something, which is why

48
00:03:39,600 --> 00:03:43,770
alert works just as well as window.alert would work here,

49
00:03:43,770 --> 00:03:45,580
so that's really great.

50
00:03:45,600 --> 00:03:51,060
So that window object is a really important global object giving you access to all these browser APIs

51
00:03:51,060 --> 00:03:56,520
like alert, a bunch of other things which we haven't worked with yet and which we'll see later and also

52
00:03:56,520 --> 00:03:57,730
the documents here.

53
00:03:57,750 --> 00:04:00,640
This is the document I just output a second ago,

54
00:04:00,690 --> 00:04:02,980
it's part of that window as I mentioned now

55
00:04:03,020 --> 00:04:08,880
but as I also just mentioned, if you enter something just like this, the browser automatically looks in

56
00:04:08,880 --> 00:04:16,350
the window, which is why we could use console.dir in the dev tools and we could also use it here

57
00:04:16,560 --> 00:04:21,930
because that will automatically look in window.document. So you could use window.document but you

58
00:04:21,930 --> 00:04:24,010
don't need to, the same for the alert.

59
00:04:24,300 --> 00:04:29,560
So that's document which we have in here, a couple of other nice features which we'll see throughout the course

60
00:04:29,560 --> 00:04:35,900
here to store data in the browser and so on, a couple of events which are exclusive to the window though

61
00:04:35,910 --> 00:04:41,370
which fire when certain things happen in the window and these on something events here

62
00:04:41,370 --> 00:04:46,890
by the way are just alternatives to using add event listener, something I'll dive deeper in the events

63
00:04:46,890 --> 00:04:52,820
module of this course where we learn all about events and how to work with them and so on.

64
00:04:52,820 --> 00:04:56,930
So there are a bunch of interesting things, here for example with outer height and outer width,

65
00:04:56,930 --> 00:05:02,250
you see that this gives you certain dimensions about the window in which your app is running, your script

66
00:05:02,250 --> 00:05:07,770
is running and also always keep in mind that the window does not really give you access to the

67
00:05:07,770 --> 00:05:13,020
real window but also just to the tab in which your script is running, so you won't be able to use window

68
00:05:13,230 --> 00:05:17,260
to interact with a totally different web page loaded in a different tab

69
00:05:17,280 --> 00:05:22,350
because that would be a huge security issue if you could start reading information from another tab

70
00:05:22,680 --> 00:05:23,970
on your web page here,

71
00:05:24,000 --> 00:05:28,440
that would not be something you would want to do because you could fetch important information from

72
00:05:28,440 --> 00:05:29,310
other tabs.

73
00:05:29,310 --> 00:05:34,950
So whilst it's called window, it really just means the currently loaded tab but also the dimensions of

74
00:05:34,950 --> 00:05:36,290
the general window and so on,

75
00:05:36,300 --> 00:05:40,660
that's how you can think of it. So that's window and that's document

76
00:05:40,660 --> 00:05:47,320
and no worries, we'll work with more of these things throughout the course to also see how we can get the size

77
00:05:47,320 --> 00:05:49,120
of the web page and so on.

78
00:05:49,120 --> 00:05:54,490
For now it's just important to keep in mind that you have these two global objects or that document

79
00:05:54,490 --> 00:06:00,310
actually is a part of the window but that you can access it with just document due to the way how window

80
00:06:00,310 --> 00:06:07,140
works and that this will help us interact with the web page and with the loaded HTML code. And

81
00:06:07,150 --> 00:06:07,750
with that,

82
00:06:07,990 --> 00:06:15,040
let's dive deeper into that DOM thing and understand how the browser really translates the HTML code

83
00:06:15,070 --> 00:06:18,430
to something and how we can then interact with that.