1
00:00:02,040 --> 00:00:03,740
Now we learned that there are different

2
00:00:03,740 --> 00:00:06,320
values, strings, and numbers, for the moment,

3
00:00:06,320 --> 00:00:09,220
and, hence, let's start with these values.

4
00:00:09,220 --> 00:00:13,740
A string value is always created in JavaScript code

5
00:00:13,740 --> 00:00:16,850
by using quotes, double quotes,

6
00:00:16,850 --> 00:00:20,090
opening and closing, or single quotes.

7
00:00:20,090 --> 00:00:23,530
So these are two individual single quotes.

8
00:00:23,530 --> 00:00:26,260
It's up to you, you can use either of the two,

9
00:00:26,260 --> 00:00:28,240
you just should be consistent.

10
00:00:28,240 --> 00:00:29,880
If you prefer double quotes,

11
00:00:29,880 --> 00:00:32,560
use them in all your JavaScript code,

12
00:00:32,560 --> 00:00:35,840
and don't switch between double and single quotes.

13
00:00:35,840 --> 00:00:38,130
Now, why do we need those quotes?

14
00:00:38,130 --> 00:00:41,500
Those quotes, double or single, doesn't matter,

15
00:00:41,500 --> 00:00:46,340
act as delimiters to JavaScript and to the browser,

16
00:00:46,340 --> 00:00:50,370
therefore, which is the thing executing our code in the end.

17
00:00:50,370 --> 00:00:54,170
They tell JavaScript where our text starts

18
00:00:54,170 --> 00:00:55,253
and where it ends.

19
00:00:56,380 --> 00:00:58,830
Now, here, I will go with single quotes,

20
00:00:58,830 --> 00:01:02,253
since this is my personal preference, but it is up to you.

21
00:01:03,220 --> 00:01:05,900
And, here, we could now store some value,

22
00:01:05,900 --> 00:01:10,360
for example, 'Hi my name is Max!'

23
00:01:12,700 --> 00:01:15,960
Very important, if you wanna use a single quote

24
00:01:15,960 --> 00:01:18,890
here in the text, and you're using single quotes

25
00:01:18,890 --> 00:01:23,070
for delimiting that text, or if you use double quotes

26
00:01:23,070 --> 00:01:25,560
and you wanna use a double quote in the text

27
00:01:25,560 --> 00:01:27,510
that won't be possible like this,

28
00:01:27,510 --> 00:01:31,150
you have to escape that character instead.

29
00:01:31,150 --> 00:01:35,900
So if I wanna say, 'Hi, I'm Max!'

30
00:01:35,900 --> 00:01:37,370
that would be invalid.

31
00:01:37,370 --> 00:01:40,190
As you can tell, already, by the fact that my IDE

32
00:01:40,190 --> 00:01:44,220
is showing an error, and we have to escape this character.

33
00:01:44,220 --> 00:01:46,020
So we have to tell JavaScript

34
00:01:46,020 --> 00:01:49,180
that it should not treat it as a closing quote

35
00:01:49,180 --> 00:01:51,903
by adding a backward slash in front of it.

36
00:01:52,770 --> 00:01:54,620
That's some special syntax,

37
00:01:54,620 --> 00:01:58,440
which is worth knowing when you work with strings,

38
00:01:58,440 --> 00:02:01,360
because that's how you can add the quote character

39
00:02:01,360 --> 00:02:03,120
inside of a string.

40
00:02:03,120 --> 00:02:05,590
Because the quotes around the text

41
00:02:05,590 --> 00:02:07,760
are actually not part of the text,

42
00:02:07,760 --> 00:02:10,419
but instead delimit the text,

43
00:02:10,419 --> 00:02:14,723
they tell JavaScript where your string starts and ends.

44
00:02:16,070 --> 00:02:19,513
But, with that, we now did create a first string,

45
00:02:20,420 --> 00:02:24,200
and we can also create a number, maybe in a new line,

46
00:02:24,200 --> 00:02:27,313
we can add 32 as a number.

47
00:02:28,150 --> 00:02:30,750
And for numbers we don't have quotes around them,

48
00:02:30,750 --> 00:02:33,270
we just entered a number like this.

49
00:02:33,270 --> 00:02:35,610
Now you might be thinking, okay,

50
00:02:35,610 --> 00:02:37,230
what's the idea behind all of that?

51
00:02:37,230 --> 00:02:39,230
What does this code do?

52
00:02:39,230 --> 00:02:40,930
Well, that's the problem.

53
00:02:40,930 --> 00:02:44,970
This code doesn't do anything because we're not giving

54
00:02:44,970 --> 00:02:47,950
the browser any useful instructions.

55
00:02:47,950 --> 00:02:51,220
We are just creating two values here,

56
00:02:51,220 --> 00:02:55,050
but we're not doing anything with those values.

57
00:02:55,050 --> 00:02:58,450
Now, what could we do with those values?

58
00:02:58,450 --> 00:03:01,290
Well, for a start, we could output them.

59
00:03:01,290 --> 00:03:04,330
We could output them, such that we see them

60
00:03:04,330 --> 00:03:07,320
in some way on the loaded page.

61
00:03:07,320 --> 00:03:09,470
And one way of outputting a value

62
00:03:09,470 --> 00:03:12,850
is to actually wrap that text here, maybe,

63
00:03:12,850 --> 00:03:14,850
with a so-called function.

64
00:03:14,850 --> 00:03:16,890
I'll come back to functions later,

65
00:03:16,890 --> 00:03:19,510
you can forget the term for now because, for the moment,

66
00:03:19,510 --> 00:03:21,940
it's enough if you just type along.

67
00:03:21,940 --> 00:03:23,900
You can write alert, here,

68
00:03:23,900 --> 00:03:27,580
and then an opening bracket, opening parentheses,

69
00:03:27,580 --> 00:03:31,843
and after the text a closing bracket, a closing parentheses,

70
00:03:33,200 --> 00:03:36,660
and then this actually will send

71
00:03:36,660 --> 00:03:38,830
the instruction to the browser.

72
00:03:38,830 --> 00:03:41,320
Alert is a built-in instruction,

73
00:03:41,320 --> 00:03:43,210
which the browser understands,

74
00:03:43,210 --> 00:03:44,840
which actually tells the browser

75
00:03:44,840 --> 00:03:49,400
to show a certain alert overlay on the screen,

76
00:03:49,400 --> 00:03:53,053
and to show this text inside of that overlay.

77
00:03:54,770 --> 00:03:59,080
If you now save this HTML file, and you open this

78
00:03:59,080 --> 00:04:01,810
with that Live Server extension, you should see

79
00:04:01,810 --> 00:04:04,313
Hi, I'm Max! on that screen.

80
00:04:05,570 --> 00:04:08,570
You should get this overlay, and you get this overlay

81
00:04:08,570 --> 00:04:10,380
because of JavaScript.

82
00:04:10,380 --> 00:04:13,440
This is our first, at least a bit,

83
00:04:13,440 --> 00:04:15,980
useful JavaScript instruction,

84
00:04:15,980 --> 00:04:19,040
and we're doing something with that text value, now,

85
00:04:19,040 --> 00:04:22,513
we are sending it as an alert to the browser.

86
00:04:23,460 --> 00:04:26,170
Now, as you can imagine, there are more things

87
00:04:26,170 --> 00:04:28,740
that we can do than just showing alerts.

88
00:04:28,740 --> 00:04:32,690
We can send behind the scenes requests to some server,

89
00:04:32,690 --> 00:04:36,700
we can set timers, we can, of course, also manipulate

90
00:04:36,700 --> 00:04:40,810
the HTML code that's visible on the page, if we had any,

91
00:04:40,810 --> 00:04:44,220
but we're going to dive into those features step-by-step.

92
00:04:44,220 --> 00:04:46,200
But, now, we at least have a first example

93
00:04:46,200 --> 00:04:47,630
of what we can do.

94
00:04:47,630 --> 00:04:50,470
But, with that, we're still not doing anything

95
00:04:50,470 --> 00:04:52,330
with that number.

96
00:04:52,330 --> 00:04:57,330
This 32 value still just sits there and does nothing.

97
00:04:58,430 --> 00:05:00,710
Now, of course, we can all just show this with an alert

98
00:05:00,710 --> 00:05:02,613
if we want to like that.

99
00:05:04,070 --> 00:05:07,510
Also, again, execute this alert command, here,

100
00:05:07,510 --> 00:05:12,350
and then wrap this between brackets, this number.

101
00:05:12,350 --> 00:05:13,700
And that's important,

102
00:05:13,700 --> 00:05:17,970
alert works with both text and a number as you can see.

103
00:05:17,970 --> 00:05:21,980
If I save this and I reload, I get Hi, I'm Max!,

104
00:05:21,980 --> 00:05:25,360
and if I click OK, I get this 32 value,

105
00:05:25,360 --> 00:05:27,660
and if I click OK again, that's gone.

106
00:05:27,660 --> 00:05:31,700
So now we're sending two alerts to the browser,

107
00:05:31,700 --> 00:05:33,930
and that's how we can work with values

108
00:05:33,930 --> 00:05:37,580
and what we can generally do with JavaScript.

109
00:05:37,580 --> 00:05:41,173
What we don't see here, though, are variables.