Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
1
00:00:01,380 --> 00:00:02,550
So let's now write
2
2
00:00:02,550 --> 00:00:05,733
our very first line of JavaScript code.
3
3
00:00:07,200 --> 00:00:11,260
And for now we will do that in the browser developer tools.
4
4
00:00:11,260 --> 00:00:14,600
So just to get started as quick as possible.
5
5
00:00:14,600 --> 00:00:16,700
We will then switch to the code editor
6
6
00:00:16,700 --> 00:00:20,220
that we just installed before in the next video.
7
7
00:00:20,220 --> 00:00:22,640
So make sure to open up Google Chrome,
8
8
00:00:22,640 --> 00:00:24,080
and then there are three ways
9
9
00:00:24,080 --> 00:00:27,610
in which we can open up the Chrome developer tools.
10
10
00:00:27,610 --> 00:00:31,310
First, we can hit command option J on the keyboard.
11
11
00:00:31,310 --> 00:00:32,440
And that's on Mac.
12
12
00:00:32,440 --> 00:00:35,643
So on Windows, that's gonna be ctrl+alt+J.
13
13
00:00:36,610 --> 00:00:40,830
And so this will then open up this console that we see here.
14
14
00:00:40,830 --> 00:00:45,110
So all of these tabs here are basically the developer tools.
15
15
00:00:45,110 --> 00:00:48,920
but we are just interested in the console, okay?
16
16
00:00:48,920 --> 00:00:52,100
Now another way of opening the developer tools
17
17
00:00:52,100 --> 00:00:55,440
is by right clicking and then inspect,
18
18
00:00:55,440 --> 00:00:58,200
which will bring us here to the elements tab,
19
19
00:00:58,200 --> 00:01:00,450
and then from there we can go to the console.
20
20
00:01:01,390 --> 00:01:03,090
And the third way,
21
21
00:01:03,090 --> 00:01:04,690
and I'm showing you all of them,
22
22
00:01:04,690 --> 00:01:06,590
because I know that are different people
23
23
00:01:06,590 --> 00:01:08,233
like to do it in different ways.
24
24
00:01:09,210 --> 00:01:13,290
So the third way is to come here to the Chrome menu,
25
25
00:01:13,290 --> 00:01:17,670
and then in there we go to view, developer
26
26
00:01:17,670 --> 00:01:21,470
and then JavaScript console, okay?
27
27
00:01:21,470 --> 00:01:24,260
And so we're back to the JavaScript console.
28
28
00:01:24,260 --> 00:01:26,070
And I'm increasing to font here a little bit
29
29
00:01:26,070 --> 00:01:27,563
by hitting command plus,
30
30
00:01:30,610 --> 00:01:32,840
and give it some more space.
31
31
00:01:32,840 --> 00:01:34,970
Now this JavaScript developer console
32
32
00:01:34,970 --> 00:01:38,480
allows us to write and test JavaScript code.
33
33
00:01:38,480 --> 00:01:40,710
So it's very useful during development,
34
34
00:01:40,710 --> 00:01:42,880
for example, to fix errors.
35
35
00:01:42,880 --> 00:01:45,690
Now we don't write real applications, of course,
36
36
00:01:45,690 --> 00:01:46,920
using this console.
37
37
00:01:46,920 --> 00:01:48,520
But now just to get started,
38
38
00:01:48,520 --> 00:01:51,640
let's use the console because it's a good and easy way
39
39
00:01:51,640 --> 00:01:54,360
to just write some JavaScript here.
40
40
00:01:54,360 --> 00:01:57,150
So let's write alert,
41
41
00:01:57,150 --> 00:01:59,960
which is a so-called JavaScript function,
42
42
00:01:59,960 --> 00:02:01,900
then open up parenthesis
43
43
00:02:01,900 --> 00:02:05,640
and without a space between alert and the parenthesis,
44
44
00:02:05,640 --> 00:02:08,020
and then we write a so-called string.
45
45
00:02:08,020 --> 00:02:09,930
So which is basically text,
46
46
00:02:09,930 --> 00:02:12,690
and let's write "Hello world."
47
47
00:02:12,690 --> 00:02:14,660
So that's the standard way
48
48
00:02:14,660 --> 00:02:18,240
of learning programming in any programming language.
49
49
00:02:18,240 --> 00:02:20,820
Then, we write the closing parenthesis
50
50
00:02:20,820 --> 00:02:23,393
and then let's hit return, or enter.
51
51
00:02:24,920 --> 00:02:25,860
And you'll see,
52
52
00:02:25,860 --> 00:02:28,890
that JavaScript gave us this popup window here
53
53
00:02:28,890 --> 00:02:32,330
which has "Hello world" just as we typed here
54
54
00:02:32,330 --> 00:02:34,003
in our string, in our code.
55
55
00:02:35,000 --> 00:02:37,520
Great, so that's your very first line
56
56
00:02:37,520 --> 00:02:40,150
of JavaScript code right there.
57
57
00:02:40,150 --> 00:02:43,530
So any code that we write here and then hit return
58
58
00:02:43,530 --> 00:02:45,683
will immediately get evaluated.
59
59
00:02:47,780 --> 00:02:50,750
Okay, but of course we can do a lot more.
60
60
00:02:50,750 --> 00:02:53,540
So let's write some more JavaScript code,
61
61
00:02:53,540 --> 00:02:56,380
which of course you do not need to understand yet.
62
62
00:02:56,380 --> 00:02:59,470
I just wanted to show some stuff that we can do.
63
63
00:02:59,470 --> 00:03:01,900
We will go into how everything works
64
64
00:03:01,900 --> 00:03:05,570
as we progress through this section, okay?
65
65
00:03:05,570 --> 00:03:07,560
So just to experiment a little bit,
66
66
00:03:07,560 --> 00:03:10,560
let's write a so-called variable.
67
67
00:03:10,560 --> 00:03:15,283
So let's say let JS equals, amazing.
68
68
00:03:17,330 --> 00:03:21,400
And so once more, we are basically writing a string here,
69
69
00:03:21,400 --> 00:03:22,363
so a text,
70
70
00:03:23,260 --> 00:03:24,740
and then we will do if
71
71
00:03:26,640 --> 00:03:28,983
and open parenthesis, JS,
72
72
00:03:30,370 --> 00:03:32,143
is equal to amazing,
73
73
00:03:34,370 --> 00:03:38,860
then we want an alert window like we saw before
74
74
00:03:38,860 --> 00:03:40,400
saying JavaScript
75
75
00:03:41,840 --> 00:03:43,610
is fun.
76
76
00:03:43,610 --> 00:03:45,590
And if I hit, now return
77
77
00:03:45,590 --> 00:03:47,330
we get this window which says
78
78
00:03:47,330 --> 00:03:50,350
JavaScript is fun, okay?
79
79
00:03:50,350 --> 00:03:52,930
So again, I will explain all these concepts
80
80
00:03:52,930 --> 00:03:56,850
and how all of this works here as we go through the section.
81
81
00:03:56,850 --> 00:03:59,150
But for now I hope that you can see the logic
82
82
00:03:59,150 --> 00:04:03,007
that we basically defined JS as being amazing.
83
83
00:04:03,007 --> 00:04:04,620
And then here in the next line,
84
84
00:04:04,620 --> 00:04:09,160
we said that if JS is equal to amazing,
85
85
00:04:09,160 --> 00:04:11,920
then JavaScript should show us this alert window
86
86
00:04:11,920 --> 00:04:14,777
with this text, okay?
87
87
00:04:14,777 --> 00:04:19,777
And now we can also change JS to, boring,
88
88
00:04:22,240 --> 00:04:23,800
hit return again.
89
89
00:04:23,800 --> 00:04:26,100
And now let's copy this text here again.
90
90
00:04:26,100 --> 00:04:27,750
So we want to run it again.
91
91
00:04:27,750 --> 00:04:32,710
So I'm just copying it and pasting it here, okay?
92
92
00:04:32,710 --> 00:04:33,973
So let's try that again.
93
93
00:04:34,900 --> 00:04:37,242
And this time nothing happened.
94
94
00:04:37,242 --> 00:04:40,820
And so that's because JS is now no longer amazing.
95
95
00:04:40,820 --> 00:04:42,630
It is boring.
96
96
00:04:42,630 --> 00:04:44,360
And so, in this case,
97
97
00:04:44,360 --> 00:04:49,160
if JavaScript is amazing is not actually true, right?
98
98
00:04:49,160 --> 00:04:50,720
Because it's boring now.
99
99
00:04:50,720 --> 00:04:53,743
And so in this case, the alert window is not shown.
100
100
00:04:54,640 --> 00:04:56,080
Now, there's also another way
101
101
00:04:56,080 --> 00:04:58,260
of going to the previous command,
102
102
00:04:58,260 --> 00:05:01,400
which is by hitting the up arrow on the keyboard.
103
103
00:05:01,400 --> 00:05:02,810
So just like this.
104
104
00:05:02,810 --> 00:05:05,890
And so we can see all the previous commands
105
105
00:05:05,890 --> 00:05:06,890
that we used before.
106
106
00:05:09,580 --> 00:05:10,550
Great.
107
107
00:05:10,550 --> 00:05:12,310
Now another thing that we can do
108
108
00:05:12,310 --> 00:05:15,270
is to do simple math operations.
109
109
00:05:15,270 --> 00:05:20,270
Let's say just 40, plus eight, plus 23, minus 10, let's say.
110
110
00:05:23,840 --> 00:05:24,850
Hit return,
111
111
00:05:24,850 --> 00:05:27,240
and then here we get the result.
112
112
00:05:27,240 --> 00:05:30,350
So basically we can use this as a calculator.
113
113
00:05:30,350 --> 00:05:32,240
And I hope that you can see how useful
114
114
00:05:32,240 --> 00:05:35,320
this is gonna become later down the road.
115
115
00:05:35,320 --> 00:05:37,340
Okay, and that's it for now.
116
116
00:05:37,340 --> 00:05:40,470
So I hope that this gave you a nice first taste
117
117
00:05:40,470 --> 00:05:44,160
of the language and of everything that is ahead.
118
118
00:05:44,160 --> 00:05:44,993
So if you want,
119
119
00:05:44,993 --> 00:05:47,840
you can experiment a little bit more with this,
120
120
00:05:47,840 --> 00:05:50,290
or you can move on right to the next lecture
121
121
00:05:50,290 --> 00:05:53,750
where we will learn what JavaScript actually is.
122
122
00:05:53,750 --> 00:05:55,163
So, see you there.
10181
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.