Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,360 --> 00:00:03,170
So over the next few lectures,
2
00:00:03,170 --> 00:00:04,190
we are going to add
3
00:00:04,190 --> 00:00:07,750
a couple of dynamic effects to our page.
4
00:00:07,750 --> 00:00:11,380
So things like making or mobile navigation work
5
00:00:11,380 --> 00:00:15,980
and also some scrolling animations, for example.
6
00:00:15,980 --> 00:00:19,100
And we will do all of that using JavaScript.
7
00:00:19,100 --> 00:00:20,750
And so I think that right now,
8
00:00:20,750 --> 00:00:24,520
it is a good idea to give you a very, very short
9
00:00:24,520 --> 00:00:27,720
and basic introduction to JavaScript,
10
00:00:27,720 --> 00:00:31,150
which is as I mentioned at the beginning of the course,
11
00:00:31,150 --> 00:00:33,933
basically the programming language of the web.
12
00:00:35,690 --> 00:00:38,270
All right and as always,
13
00:00:38,270 --> 00:00:40,180
we are starting a new section
14
00:00:40,180 --> 00:00:44,060
and so I will copy and then paste that here.
15
00:00:44,060 --> 00:00:46,500
So duplicating this folder
16
00:00:46,500 --> 00:00:49,867
and this one I'm gonna call it OmniFood Optimizations
17
00:00:52,050 --> 00:00:53,310
because in this section
18
00:00:53,310 --> 00:00:55,890
we will basically do some optimizations
19
00:00:55,890 --> 00:00:59,163
before we then launch our page to the internet.
20
00:01:00,170 --> 00:01:01,730
So section number nine
21
00:01:01,730 --> 00:01:05,550
and therefore folder number nine here as well.
22
00:01:05,550 --> 00:01:07,420
And as always you of course,
23
00:01:07,420 --> 00:01:09,890
don't have to create this new folder,
24
00:01:09,890 --> 00:01:12,400
so you can simply work on the folder
25
00:01:12,400 --> 00:01:13,890
that you have been using.
26
00:01:13,890 --> 00:01:15,550
But what you need to do
27
00:01:15,550 --> 00:01:18,210
is to get to your starter files
28
00:01:18,210 --> 00:01:20,483
and then here in the starter folder,
29
00:01:21,510 --> 00:01:23,230
select this one here
30
00:01:23,230 --> 00:01:25,840
and then copy the script.
31
00:01:25,840 --> 00:01:30,792
So this file here called script.js, copy that,
32
00:01:30,792 --> 00:01:35,317
and then paste that into your current project folder,
33
00:01:36,200 --> 00:01:37,133
so right here.
34
00:01:37,990 --> 00:01:40,690
And actually let's create a folder here,
35
00:01:40,690 --> 00:01:45,150
which I'm gonna call JS which stands for JavaScript.
36
00:01:45,150 --> 00:01:48,153
And so all our scripts will go into this folder.
37
00:01:49,520 --> 00:01:51,910
So here we already have to starter script
38
00:01:51,910 --> 00:01:55,870
because some of the code is already written, now right?
39
00:01:55,870 --> 00:01:59,240
And this one is typically called script.js,
40
00:01:59,240 --> 00:02:04,240
where JS stands again for the extension of JavaScript.
41
00:02:06,180 --> 00:02:07,130
Okay.
42
00:02:07,130 --> 00:02:08,900
And so I will take that folder
43
00:02:08,900 --> 00:02:11,493
and push it here onto this icon.
44
00:02:15,165 --> 00:02:17,260
And let's click on go live
45
00:02:20,930 --> 00:02:21,930
and so (indistinct),
46
00:02:23,150 --> 00:02:26,003
here this should be back to working.
47
00:02:27,050 --> 00:02:29,740
Now we can go out of this mode here
48
00:02:29,740 --> 00:02:32,593
by clicking again toggle device bar.
49
00:02:35,140 --> 00:02:37,493
And so we are back to normal here.
50
00:02:38,560 --> 00:02:39,393
Okay.
51
00:02:41,604 --> 00:02:44,120
So we have our HTML of course
52
00:02:44,120 --> 00:02:46,070
and or JavaScript.
53
00:02:46,070 --> 00:02:49,673
And for now we will not need the CSS files.
54
00:02:51,180 --> 00:02:52,600
So let's just close this
55
00:02:52,600 --> 00:02:55,463
and now we will work a little bit here in this file.
56
00:02:56,620 --> 00:02:58,230
Now, actually, before doing that,
57
00:02:58,230 --> 00:03:00,470
we need to connect the script here.
58
00:03:00,470 --> 00:03:04,523
So this JavaScript file with our index.HTML.
59
00:03:06,090 --> 00:03:07,720
So JavaScript can be written
60
00:03:07,720 --> 00:03:09,730
in many different places.
61
00:03:09,730 --> 00:03:11,640
So we could also write the JavaScript
62
00:03:11,640 --> 00:03:14,260
right here in the HTML file
63
00:03:14,260 --> 00:03:16,470
but just like we did with CSS,
64
00:03:16,470 --> 00:03:19,890
we prefer to do that in another external file
65
00:03:19,890 --> 00:03:21,853
and then simply link these together.
66
00:03:23,050 --> 00:03:27,070
Now the way we link them is by using the script tag,
67
00:03:27,070 --> 00:03:29,273
here after these other two scripts.
68
00:03:32,120 --> 00:03:35,600
So script then the defer keyword
69
00:03:35,600 --> 00:03:38,610
and it's not really important what this one does.
70
00:03:38,610 --> 00:03:43,610
And then the source is or JavaScript folder
71
00:03:43,630 --> 00:03:45,693
and then script.js in there.
72
00:03:46,810 --> 00:03:49,000
All right. So save that.
73
00:03:49,000 --> 00:03:51,600
And then here give it some space
74
00:03:53,617 --> 00:03:55,500
and write console.log
75
00:03:57,896 --> 00:03:59,530
hello world.
76
00:03:59,530 --> 00:04:01,370
Now the rest of the script here
77
00:04:01,370 --> 00:04:03,640
might look different in your case.
78
00:04:03,640 --> 00:04:06,060
So there might be a little bit more code
79
00:04:06,060 --> 00:04:08,560
but in case that it is, don't worry,
80
00:04:08,560 --> 00:04:12,020
that just means that you have the updated version.
81
00:04:12,020 --> 00:04:13,170
All right.
82
00:04:13,170 --> 00:04:16,520
But anyway make sure to write this code here
83
00:04:16,520 --> 00:04:18,683
and then go back to the browser.
84
00:04:19,660 --> 00:04:20,950
And now for the first time
85
00:04:20,950 --> 00:04:24,440
we will use this console tab, right here.
86
00:04:24,440 --> 00:04:25,960
So click that.
87
00:04:25,960 --> 00:04:28,720
And indeed now we get hello world,
88
00:04:28,720 --> 00:04:32,680
which is exactly what we wrote in our JavaScript.
89
00:04:32,680 --> 00:04:33,670
Great.
90
00:04:33,670 --> 00:04:36,260
So that means that our HTML file
91
00:04:36,260 --> 00:04:38,863
and the JavaScript file are now connected.
92
00:04:40,010 --> 00:04:41,790
Now this console.log here
93
00:04:41,790 --> 00:04:45,200
is simply a way that we have of writing content
94
00:04:45,200 --> 00:04:48,950
into that browser console that we just saw,
95
00:04:48,950 --> 00:04:50,717
so basically this area here.
96
00:04:50,717 --> 00:04:52,940
And so that is a very useful way
97
00:04:52,940 --> 00:04:55,780
for us to test out some of our code.
98
00:04:55,780 --> 00:04:56,790
But now let's write
99
00:04:56,790 --> 00:04:59,530
just a little bit more JavaScript.
100
00:04:59,530 --> 00:05:02,210
Now my goal here is actually not
101
00:05:02,210 --> 00:05:04,740
for you to understand JavaScript.
102
00:05:04,740 --> 00:05:07,650
So this is an HTML and CSS course
103
00:05:07,650 --> 00:05:10,180
and not a JavaScript course.
104
00:05:10,180 --> 00:05:12,750
So this part here of the section
105
00:05:12,750 --> 00:05:15,220
can kind of be seen as a bonus.
106
00:05:15,220 --> 00:05:16,610
And so here again,
107
00:05:16,610 --> 00:05:19,550
the goal is not really for me to teach you
108
00:05:19,550 --> 00:05:22,090
exactly how JavaScript works.
109
00:05:22,090 --> 00:05:24,430
So I have a whole big course for that
110
00:05:24,430 --> 00:05:27,210
if you're interested in learning JavaScript,
111
00:05:27,210 --> 00:05:29,850
but here is not the place for that.
112
00:05:29,850 --> 00:05:30,710
So here instead,
113
00:05:30,710 --> 00:05:32,460
I will just write some code
114
00:05:32,460 --> 00:05:35,350
and will walk you through how that code works
115
00:05:35,350 --> 00:05:37,920
so that you can then eventually adapt it
116
00:05:37,920 --> 00:05:39,670
to your own sites.
117
00:05:39,670 --> 00:05:42,810
However, just in order for you to understand
118
00:05:42,810 --> 00:05:45,400
even the basics of what I'm gonna write
119
00:05:45,400 --> 00:05:47,470
in the next few lectures,
120
00:05:47,470 --> 00:05:48,690
here I will just give you
121
00:05:48,690 --> 00:05:52,120
a very short introduction to JavaScript.
122
00:05:52,120 --> 00:05:54,670
And let's start with variables.
123
00:05:54,670 --> 00:05:58,940
So we can define variables using the const keyword
124
00:05:58,940 --> 00:06:03,360
and then we give them a name, for example, my name
125
00:06:03,360 --> 00:06:05,683
and then here we define a value for them.
126
00:06:06,710 --> 00:06:09,303
So let's say Jonas Schmedtmann here.
127
00:06:10,380 --> 00:06:11,260
All right.
128
00:06:11,260 --> 00:06:14,410
And so basically the variable is my name
129
00:06:14,410 --> 00:06:17,520
and we can see a variable like a box
130
00:06:17,520 --> 00:06:20,020
that can store some value in it.
131
00:06:20,020 --> 00:06:21,370
And so the value here
132
00:06:21,370 --> 00:06:24,240
is this text of Jonas Schmedtmann.
133
00:06:24,240 --> 00:06:25,920
But it could also be a number
134
00:06:25,920 --> 00:06:28,220
or some other kind of data.
135
00:06:28,220 --> 00:06:30,660
And then we could also lock that data
136
00:06:30,660 --> 00:06:32,090
to the console again,
137
00:06:32,090 --> 00:06:33,253
just like we did here,
138
00:06:36,200 --> 00:06:38,960
so just so we can actually take a look
139
00:06:38,960 --> 00:06:40,670
at the variable.
140
00:06:40,670 --> 00:06:42,800
So here we define the variable
141
00:06:42,800 --> 00:06:44,980
and then here we can reference that,
142
00:06:44,980 --> 00:06:47,640
so we can use it and then it will print
143
00:06:47,640 --> 00:06:51,283
Jonas Schmedtmann here to our console, right?
144
00:06:53,510 --> 00:06:55,190
Now another thing that we can do
145
00:06:56,940 --> 00:07:00,360
and let's again create a variable here.
146
00:07:00,360 --> 00:07:03,690
So h1 and so now we can select elements
147
00:07:03,690 --> 00:07:05,530
from our HTML page
148
00:07:05,530 --> 00:07:08,730
just like we can select them in CSS.
149
00:07:08,730 --> 00:07:11,720
So basically using the exact same selectors
150
00:07:11,720 --> 00:07:14,550
just as we write them in CSS.
151
00:07:14,550 --> 00:07:16,320
So to do that we write
152
00:07:18,110 --> 00:07:19,260
document.querySelector,
153
00:07:20,940 --> 00:07:23,250
in case we only have one element,
154
00:07:23,250 --> 00:07:26,420
and then here we can define a string,
155
00:07:26,420 --> 00:07:29,080
which is basically some texts,
156
00:07:29,080 --> 00:07:31,760
so anything that is between these quotes here
157
00:07:31,760 --> 00:07:33,250
or double quotes.
158
00:07:33,250 --> 00:07:37,300
And then we can just for the h1 element here
159
00:07:37,300 --> 00:07:41,510
select it using the class selector of heading
160
00:07:44,540 --> 00:07:46,200
primary.
161
00:07:46,200 --> 00:07:47,410
All right.
162
00:07:47,410 --> 00:07:50,273
So just like we did in our CSS.
163
00:07:52,590 --> 00:07:54,097
Right.
164
00:07:54,097 --> 00:07:56,913
So, exactly this selector here.
165
00:07:58,450 --> 00:07:59,990
Okay.
166
00:07:59,990 --> 00:08:04,990
So that's what we can do right here in JavaScript.
167
00:08:05,400 --> 00:08:09,210
And so that's also log that to the console
168
00:08:11,850 --> 00:08:13,493
so just so we see what happens.
169
00:08:15,490 --> 00:08:17,820
So you see that now it shows us here
170
00:08:17,820 --> 00:08:21,520
it is h1 element with the class of heading primary
171
00:08:21,520 --> 00:08:23,910
and then when we hover over it here,
172
00:08:23,910 --> 00:08:26,540
you see that it even selects basically
173
00:08:26,540 --> 00:08:27,690
here on the page,
174
00:08:27,690 --> 00:08:30,223
so it gets highlighted, right?
175
00:08:32,880 --> 00:08:34,100
Okay.
176
00:08:34,100 --> 00:08:37,380
However, all of that is not really helpful
177
00:08:37,380 --> 00:08:39,640
because we didn't do anything yet
178
00:08:39,640 --> 00:08:42,690
that would actually be visible on the page,
179
00:08:42,690 --> 00:08:45,100
but let's do that now.
180
00:08:45,100 --> 00:08:47,580
So we can take our h1,
181
00:08:47,580 --> 00:08:51,250
which remember is this heading element,
182
00:08:51,250 --> 00:08:53,800
so with the class of heading primary.
183
00:08:53,800 --> 00:08:55,400
And then we can say .textContent
184
00:08:58,691 --> 00:09:01,993
and we can then set that, for example, to myName,
185
00:09:03,200 --> 00:09:05,060
which will then be replaced here
186
00:09:05,060 --> 00:09:07,720
with Jonas Schemdtmann, right?
187
00:09:07,720 --> 00:09:09,210
Because this my name here
188
00:09:09,210 --> 00:09:12,373
is of course a variable which has this value.
189
00:09:14,180 --> 00:09:16,010
And so let's see,
190
00:09:16,010 --> 00:09:19,523
and indeed now it got replaced with Jonas Schmedtmann.
191
00:09:20,640 --> 00:09:21,950
And as we hover it now,
192
00:09:21,950 --> 00:09:24,070
it will of course still select it
193
00:09:24,070 --> 00:09:26,543
but now the text content is different.
194
00:09:28,460 --> 00:09:29,293
All right.
195
00:09:30,370 --> 00:09:33,573
What we can also do is to manipulate the CSS.
196
00:09:35,159 --> 00:09:39,320
So for that, we can write h1.style
197
00:09:39,320 --> 00:09:41,010
and then for example,
198
00:09:41,010 --> 00:09:43,713
let's say we wanted to change the background color.
199
00:09:45,960 --> 00:09:46,920
Now in CSS,
200
00:09:46,920 --> 00:09:50,323
background color is written with a hyphen,
201
00:09:51,220 --> 00:09:53,600
like this, right?
202
00:09:53,600 --> 00:09:56,790
However, that is not valid in JavaScript
203
00:09:56,790 --> 00:09:58,670
and so all the property names
204
00:09:58,670 --> 00:10:00,140
that have two words,
205
00:10:00,140 --> 00:10:02,910
they use this notation here instead,
206
00:10:02,910 --> 00:10:04,430
so without the dash
207
00:10:04,430 --> 00:10:07,473
and making the second word uppercase,
208
00:10:09,200 --> 00:10:13,470
then equal and then here we can define the value,
209
00:10:13,470 --> 00:10:15,433
so again just like in CSS.
210
00:10:16,890 --> 00:10:20,310
And then indeed the background turned red.
211
00:10:20,310 --> 00:10:22,770
And you see down here that the way this happened
212
00:10:22,770 --> 00:10:26,090
was that JavaScript edit this style tag here
213
00:10:26,090 --> 00:10:27,740
so the style attribute
214
00:10:27,740 --> 00:10:30,440
and then edit or style in there.
215
00:10:30,440 --> 00:10:32,850
So remember from way, way back
216
00:10:32,850 --> 00:10:33,960
that one of the ways
217
00:10:33,960 --> 00:10:36,130
in which we can write JavaScript
218
00:10:36,130 --> 00:10:38,400
is by adding it directly to the elements
219
00:10:38,400 --> 00:10:39,970
using the style tag.
220
00:10:39,970 --> 00:10:42,193
And so this is what JavaScript does here.
221
00:10:43,470 --> 00:10:46,383
Let's try another one, h1.style.
222
00:10:48,800 --> 00:10:49,760
let's say padding
223
00:10:52,850 --> 00:10:56,270
and let's say 5rem for example,
224
00:10:56,270 --> 00:10:58,543
and indeed that works as well.
225
00:10:59,700 --> 00:11:01,800
Okay, nice.
226
00:11:01,800 --> 00:11:05,030
However, that is still not really that helpful
227
00:11:05,030 --> 00:11:08,599
because we could simply define these styles here
228
00:11:08,599 --> 00:11:10,543
also in our CSS, right?
229
00:11:11,540 --> 00:11:13,660
So let's actually make it so
230
00:11:13,660 --> 00:11:15,950
that these styles only get applied
231
00:11:15,950 --> 00:11:18,773
once we actually click here on this heading.
232
00:11:19,870 --> 00:11:21,120
All right.
233
00:11:21,120 --> 00:11:24,860
So that in itself is also not such a useful effect
234
00:11:24,860 --> 00:11:26,170
but at least it is something
235
00:11:26,170 --> 00:11:29,920
that we cannot do with CSS alone.
236
00:11:29,920 --> 00:11:32,573
So that's kind of a dynamic effect already.
237
00:11:33,430 --> 00:11:34,890
Now in JavaScript,
238
00:11:34,890 --> 00:11:38,200
we can respond to an event like a click
239
00:11:38,200 --> 00:11:40,980
by basically listening for that event
240
00:11:40,980 --> 00:11:43,090
on a certain element.
241
00:11:43,090 --> 00:11:44,080
So in this case,
242
00:11:44,080 --> 00:11:45,530
we want something to happen
243
00:11:45,530 --> 00:11:47,730
when we click on the h1.
244
00:11:47,730 --> 00:11:52,053
And so we can listen for the click event on that h1.
245
00:11:54,745 --> 00:11:57,150
So we do that by saying h1.addEventListener,
246
00:12:00,550 --> 00:12:03,500
and now this is something that we call a function,
247
00:12:03,500 --> 00:12:05,560
and that's not really important.
248
00:12:05,560 --> 00:12:07,720
So this one here is also a function
249
00:12:07,720 --> 00:12:11,350
and we can see that because of these parenthesis here.
250
00:12:11,350 --> 00:12:14,340
So functions are basically reusable pieces of code
251
00:12:14,340 --> 00:12:16,690
that we can define somewhere else
252
00:12:16,690 --> 00:12:18,506
and then use them
253
00:12:18,506 --> 00:12:20,050
and so this addEventListener
254
00:12:20,050 --> 00:12:21,453
is another case of that.
255
00:12:22,840 --> 00:12:25,340
And if all of that sounds confusing
256
00:12:25,340 --> 00:12:27,520
then again don't worry about that
257
00:12:27,520 --> 00:12:30,350
because this is not really about you learning
258
00:12:30,350 --> 00:12:32,560
how JavaScript actually works.
259
00:12:32,560 --> 00:12:34,870
For that I have a whole big course,
260
00:12:34,870 --> 00:12:36,970
but of course you don't need to take that.
261
00:12:38,190 --> 00:12:41,890
But anyway, here we want to listen for the click event.
262
00:12:41,890 --> 00:12:43,440
And when that happens,
263
00:12:43,440 --> 00:12:46,380
we of course want something to happen.
264
00:12:46,380 --> 00:12:49,250
So we want these three lines of code here
265
00:12:49,250 --> 00:12:51,233
to execute in that situation.
266
00:12:52,270 --> 00:12:55,110
So the way we do that is by here,
267
00:12:55,110 --> 00:12:58,223
creating a function ourselves,
268
00:12:59,730 --> 00:13:03,530
so a function and then giving it a function body.
269
00:13:03,530 --> 00:13:04,820
So that's here this block
270
00:13:04,820 --> 00:13:06,910
between these curly braces.
271
00:13:06,910 --> 00:13:09,420
And then I will grab this code
272
00:13:09,420 --> 00:13:11,230
and put it here.
273
00:13:11,230 --> 00:13:12,510
Okay.
274
00:13:12,510 --> 00:13:15,070
So here we created a function,
275
00:13:15,070 --> 00:13:18,120
which again is basically a block of code.
276
00:13:18,120 --> 00:13:19,580
And so this block of code
277
00:13:19,580 --> 00:13:23,973
will be executed whenever we click on the h1.
278
00:13:25,120 --> 00:13:26,160
Okay?
279
00:13:26,160 --> 00:13:28,220
So I hope that makes sense.
280
00:13:28,220 --> 00:13:29,763
So let's try it out.
281
00:13:30,860 --> 00:13:34,593
So I'm gonna click now and beautiful.
282
00:13:35,430 --> 00:13:38,140
So that worked just nice.
283
00:13:38,140 --> 00:13:39,010
Okay.
284
00:13:39,010 --> 00:13:41,650
So those were just a couple of (indistinct) examples
285
00:13:41,650 --> 00:13:45,270
just to show you some of the fundamentals of JavaScript.
286
00:13:45,270 --> 00:13:49,730
But now let's actually do something that is helpful.
287
00:13:49,730 --> 00:13:51,630
So I'm gonna go all the way down here.
288
00:13:53,080 --> 00:13:56,460
And here we have the current year, basically,
289
00:13:56,460 --> 00:13:59,730
which right now is of course not 2027,
290
00:13:59,730 --> 00:14:02,520
so I just put that here as a placeholder.
291
00:14:02,520 --> 00:14:04,800
But usually on our own web pages,
292
00:14:04,800 --> 00:14:06,460
we always want to have the year there
293
00:14:06,460 --> 00:14:09,130
and then we want to keep it up to date
294
00:14:09,130 --> 00:14:12,750
so that the user basically sees that our website
295
00:14:12,750 --> 00:14:15,000
is not like super old.
296
00:14:15,000 --> 00:14:17,800
So one way of keeping this year updated
297
00:14:17,800 --> 00:14:21,200
is to every year on the January 1st,
298
00:14:21,200 --> 00:14:23,730
open up your site code
299
00:14:23,730 --> 00:14:26,090
and then change that manually.
300
00:14:26,090 --> 00:14:28,510
But the second option is way better
301
00:14:28,510 --> 00:14:30,170
because it's automatic.
302
00:14:30,170 --> 00:14:32,860
And so that is by simply using JavaScript
303
00:14:32,860 --> 00:14:34,533
to do that job for us.
304
00:14:38,441 --> 00:14:39,550
So let's do that
305
00:14:39,550 --> 00:14:42,700
and so we basically now want to, again,
306
00:14:42,700 --> 00:14:45,740
change the text content of some element,
307
00:14:45,740 --> 00:14:47,173
so just like we did here.
308
00:14:48,870 --> 00:14:51,373
So that element is here in the footer.
309
00:14:52,670 --> 00:14:53,713
Let's go there,
310
00:14:56,420 --> 00:14:57,610
so right here.
311
00:14:57,610 --> 00:15:00,890
So this year, this is all we want to change.
312
00:15:00,890 --> 00:15:02,150
So we don't want to change
313
00:15:02,150 --> 00:15:06,150
the entire text content of the copyright paragraph
314
00:15:06,150 --> 00:15:07,443
but only this one here.
315
00:15:08,710 --> 00:15:11,933
Well, then let's create an element just for the year.
316
00:15:12,910 --> 00:15:15,450
So span, and then I will give it
317
00:15:16,388 --> 00:15:20,370
the class of year, so 2027
318
00:15:20,370 --> 00:15:23,500
and of course it could be any other placeholder
319
00:15:23,500 --> 00:15:26,893
because now we will replace this with JavaScript.
320
00:15:29,070 --> 00:15:31,150
So the class is year
321
00:15:31,150 --> 00:15:34,930
and so therefore in order to now select this,
322
00:15:34,930 --> 00:15:36,393
we do just like before.
323
00:15:38,500 --> 00:15:39,670
So let's say year,
324
00:15:39,670 --> 00:15:44,570
and then I like to call these actual HTML elements, EL,
325
00:15:44,570 --> 00:15:46,763
so adding that value there.
326
00:15:50,040 --> 00:15:54,203
So that's again, document.querySelector,
327
00:15:56,693 --> 00:15:58,730
and then again the quotes
328
00:15:58,730 --> 00:16:02,003
and then we can just write the very normal selector.
329
00:16:03,500 --> 00:16:04,810
Okay.
330
00:16:04,810 --> 00:16:07,070
And now we can of course change
331
00:16:07,070 --> 00:16:09,353
the text content of this element.
332
00:16:11,128 --> 00:16:12,278
So year EL.textContent,
333
00:16:14,330 --> 00:16:16,783
let's say 3000 just for now,
334
00:16:18,660 --> 00:16:22,623
just so we see that we successfully selected our element.
335
00:16:25,070 --> 00:16:28,440
And yeah, so now it's 3000
336
00:16:28,440 --> 00:16:31,574
but that is still not ideal obviously,
337
00:16:31,574 --> 00:16:35,400
but now the power of JavaScript comes into play
338
00:16:35,400 --> 00:16:36,740
because here we can
339
00:16:36,740 --> 00:16:38,763
very simply get the current year.
340
00:16:39,710 --> 00:16:41,810
So let's do that also here,
341
00:16:41,810 --> 00:16:45,683
creating a new variable for a new value.
342
00:16:46,770 --> 00:16:50,050
So let's call that current year.
343
00:16:50,050 --> 00:16:53,103
And so here is the trick of getting the current year.
344
00:16:54,898 --> 00:16:55,848
So we say new date,
345
00:16:57,448 --> 00:16:59,730
then we open and close parenthesis,
346
00:16:59,730 --> 00:17:02,250
which means that this is a function.
347
00:17:02,250 --> 00:17:03,170
And so all of this here
348
00:17:03,170 --> 00:17:06,133
we'll basically generate the current date.
349
00:17:07,130 --> 00:17:09,663
All right. So this is the current date.
350
00:17:11,281 --> 00:17:14,697
And then on that we can say get full year
351
00:17:16,570 --> 00:17:19,230
and then again open and close parenthesis.
352
00:17:19,230 --> 00:17:20,673
So don't forget this.
353
00:17:21,770 --> 00:17:22,603
Okay.
354
00:17:24,550 --> 00:17:26,683
Then we can also lock this to the console,
355
00:17:29,970 --> 00:17:33,163
but while we can also just put it directly here.
356
00:17:35,190 --> 00:17:36,253
All right.
357
00:17:37,790 --> 00:17:41,400
That indeed it is right now, 2021
358
00:17:41,400 --> 00:17:44,440
by the time I'm recording this video and so,
359
00:17:44,440 --> 00:17:47,160
therefore here we got 2021
360
00:17:47,160 --> 00:17:50,083
and the same thing down here also in the console.
361
00:17:51,530 --> 00:17:53,040
Nice.
362
00:17:53,040 --> 00:17:56,310
So just in our very first lecture on JavaScript,
363
00:17:56,310 --> 00:17:58,820
we already did something helpful.
364
00:17:58,820 --> 00:18:00,550
So this is very useful.
365
00:18:00,550 --> 00:18:01,810
So nice trick,
366
00:18:01,810 --> 00:18:05,040
even if you don't learn anything else about JavaScript,
367
00:18:05,040 --> 00:18:07,297
just make sure to include
368
00:18:07,297 --> 00:18:12,297
well these three lines of code here in some JavaScript.
369
00:18:12,394 --> 00:18:13,740
All right.
370
00:18:13,740 --> 00:18:15,690
Now this one here we do not need
371
00:18:15,690 --> 00:18:17,910
so we can comment all that out
372
00:18:17,910 --> 00:18:19,390
just like in the other files
373
00:18:19,390 --> 00:18:23,053
by simply hitting comment or control slash.
374
00:18:24,170 --> 00:18:26,170
And so then it's all gone.
375
00:18:26,170 --> 00:18:29,300
And while this code here doesn't do any harm,
376
00:18:29,300 --> 00:18:31,153
so we can just leave it like this.
377
00:18:32,000 --> 00:18:32,833
All right.
378
00:18:32,833 --> 00:18:34,250
And that's actually it
379
00:18:34,250 --> 00:18:37,730
for this very, very short crash course,
380
00:18:37,730 --> 00:18:39,820
let's say into JavaScript.
381
00:18:39,820 --> 00:18:42,410
But I hope you still had some fun here
382
00:18:42,410 --> 00:18:44,370
and that maybe you find JavaScript
383
00:18:44,370 --> 00:18:46,113
a little bit more interesting now.
26263
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.