1
00:00:02,210 --> 00:00:06,270
We wrote this beautiful code here and yet it fails.

2
00:00:06,270 --> 00:00:08,132
The reason for it failing is

3
00:00:08,132 --> 00:00:13,132
that actually our JavaScript code here executes too early.

4
00:00:14,290 --> 00:00:17,090
We actually load our JavaScript code

5
00:00:17,090 --> 00:00:19,450
here in the head section.

6
00:00:19,450 --> 00:00:21,980
And it's important to understand

7
00:00:21,980 --> 00:00:23,897
that the browser goes ahead

8
00:00:23,897 --> 00:00:26,332
and executes this loaded code right

9
00:00:26,332 --> 00:00:29,503
away when this line of code is parsed.

10
00:00:29,503 --> 00:00:33,304
And this line of code is actually parsed

11
00:00:33,304 --> 00:00:36,150
before this code is parsed.

12
00:00:36,150 --> 00:00:39,020
So our JavaScript code executes

13
00:00:39,020 --> 00:00:43,760
before the browser, even parsed these HTML elements

14
00:00:43,760 --> 00:00:47,573
and created the DOM representation for them.

15
00:00:47,573 --> 00:00:51,090
Hence if we try to drill into the DOM here

16
00:00:51,090 --> 00:00:53,176
and we try to access different elements,

17
00:00:53,176 --> 00:00:55,133
they don't exist yet.

18
00:00:56,320 --> 00:00:58,685
Now you might remember that we were able

19
00:00:58,685 --> 00:01:02,820
to console 'log' or 'dir' document though.

20
00:01:02,820 --> 00:01:04,480
And we were able to drill

21
00:01:04,480 --> 00:01:08,940
into it there in this JavaScript console earlier.

22
00:01:08,940 --> 00:01:10,410
And that only works

23
00:01:10,410 --> 00:01:13,330
because the document exists right from the start,

24
00:01:13,330 --> 00:01:15,810
which is why we can log it immediately.

25
00:01:15,810 --> 00:01:18,300
And the content of it, which is missing initially,

26
00:01:18,300 --> 00:01:21,788
is basically added to this document object

27
00:01:21,788 --> 00:01:24,240
after we initially locked it.

28
00:01:24,240 --> 00:01:27,330
So what we're outputting in a console is updated

29
00:01:27,330 --> 00:01:29,910
behind the scenes, which can be confusing,

30
00:01:29,910 --> 00:01:31,890
but is how it works.

31
00:01:31,890 --> 00:01:34,610
So that's where we can log it, but not change it

32
00:01:34,610 --> 00:01:37,190
because when we change it that happens instantly.

33
00:01:37,190 --> 00:01:40,033
It's not waiting until maybe the content is there.

34
00:01:41,100 --> 00:01:42,502
So how can we work around that?

35
00:01:42,502 --> 00:01:44,904
There are two ways of working around that;

36
00:01:44,904 --> 00:01:48,674
we can take our script and not load it here in the head,

37
00:01:48,674 --> 00:01:50,204
but instead cut it

38
00:01:50,204 --> 00:01:54,263
and move it to the end of the body section here.

39
00:01:54,263 --> 00:01:57,900
Then we ensure that this script is only parsed

40
00:01:57,900 --> 00:02:02,090
and executed, once all this content is here.

41
00:02:02,090 --> 00:02:04,400
So if I now save that,

42
00:02:04,400 --> 00:02:06,623
you see if I reload the error is gone.

43
00:02:07,510 --> 00:02:09,340
Now we'll see if it worked in a second,

44
00:02:09,340 --> 00:02:11,403
but that's one way of fixing the error.

45
00:02:12,350 --> 00:02:15,310
The other more elegant and recommended way is

46
00:02:15,310 --> 00:02:17,140
that you will leave it here in 'head'

47
00:02:17,140 --> 00:02:21,270
and you add another attribute to this script element.

48
00:02:21,270 --> 00:02:24,653
And that would be the 'defer' attribute.

49
00:02:25,610 --> 00:02:28,330
This is a so-called Boolean attribute,

50
00:02:28,330 --> 00:02:30,300
which you just have to add like this,

51
00:02:30,300 --> 00:02:32,470
you don't have to set a value.

52
00:02:32,470 --> 00:02:35,780
Just adding it like this already activates it

53
00:02:35,780 --> 00:02:38,043
and 'defer' tells the browser

54
00:02:38,043 --> 00:02:42,230
that it should defer the script execution

55
00:02:42,230 --> 00:02:44,879
that it should wait with the script execution

56
00:02:44,879 --> 00:02:47,973
until the entire document has been parsed.

57
00:02:48,890 --> 00:02:51,970
So if we add defer here, it also works

58
00:02:51,970 --> 00:02:53,483
and we also get no error.

59
00:02:54,500 --> 00:02:57,909
And now let's see if our code in the script actually works.

60
00:02:57,909 --> 00:03:00,560
If it does, if I click the link,

61
00:03:00,560 --> 00:03:02,934
I should now be redirected to Google.

62
00:03:02,934 --> 00:03:05,713
And indeed, if I click it, I am.

63
00:03:06,580 --> 00:03:09,450
If I inspect my link here, I also see

64
00:03:09,450 --> 00:03:14,400
that this link, this link address shows up here,

65
00:03:14,400 --> 00:03:18,900
and clearly I did not add it here in my HTML code.

66
00:03:18,900 --> 00:03:20,660
So since it does show up here

67
00:03:20,660 --> 00:03:23,090
and since the link does work as intended,

68
00:03:23,090 --> 00:03:26,710
that has to be the result of our JavaScript code.

69
00:03:26,710 --> 00:03:28,640
And that's a first way,

70
00:03:28,640 --> 00:03:30,916
a first example of how we can interact

71
00:03:30,916 --> 00:03:34,670
with the DOM to manipulate the page.

72
00:03:34,670 --> 00:03:37,310
Not too useful and still a bit clunky,

73
00:03:37,310 --> 00:03:39,510
but a first important step.

74
00:03:39,510 --> 00:03:42,010
Now let's dig deeper and let's see how we can do

75
00:03:42,010 --> 00:03:43,670
this in a more elegant way

76
00:03:43,670 --> 00:03:47,433
and how we then can also do more useful things with that.