1
00:00:02,090 --> 00:00:06,400
So what exactly is JavaScript then?

2
00:00:06,400 --> 00:00:09,180
Well, it is the third language

3
00:00:09,180 --> 00:00:12,230
of those three main languages,

4
00:00:12,230 --> 00:00:14,570
which you have to know as a web developer.

5
00:00:14,570 --> 00:00:17,640
It's one of those languages which we can use

6
00:00:17,640 --> 00:00:19,260
for writing code,

7
00:00:19,260 --> 00:00:22,520
which is then sent back to us from a server.

8
00:00:22,520 --> 00:00:24,370
But more specifically,

9
00:00:24,370 --> 00:00:27,210
JavaScript is a programming language

10
00:00:27,210 --> 00:00:30,280
that can be executed by browsers.

11
00:00:30,280 --> 00:00:33,580
Well, that might sound unimpressive.

12
00:00:33,580 --> 00:00:38,530
Wasn't that already the case for HTML and CSS.

13
00:00:38,530 --> 00:00:42,940
Yes, Kind of, though there are always arguments,

14
00:00:42,940 --> 00:00:47,940
whether HTML and CSS are real programming languages or not,

15
00:00:48,610 --> 00:00:51,060
but we don't have to dive into that right now.

16
00:00:51,060 --> 00:00:55,010
Of course they are after all, you build something with it.

17
00:00:55,010 --> 00:00:58,620
But the main difference is that, With Java script,

18
00:00:58,620 --> 00:01:01,500
you can solve a totally different problem

19
00:01:01,500 --> 00:01:04,670
than you can with HTML and CSS.

20
00:01:04,670 --> 00:01:06,640
And when it comes to that problem,

21
00:01:06,640 --> 00:01:10,270
which I'll describe in a second JavaScript indeed is the

22
00:01:10,270 --> 00:01:15,270
only programming language that can be executed by browsers

23
00:01:15,510 --> 00:01:16,700
like this.

24
00:01:16,700 --> 00:01:19,630
And that of course now brings us to the problem,

25
00:01:19,630 --> 00:01:24,380
which is being solved by JavaScript. Why do we need it?

26
00:01:24,380 --> 00:01:29,350
Well, we have HTML and CSS for defining our content

27
00:01:29,350 --> 00:01:31,530
and the structure of that content

28
00:01:31,530 --> 00:01:33,690
and for adding the semantics

29
00:01:33,690 --> 00:01:36,620
and for styling the content then,

30
00:01:36,620 --> 00:01:41,620
but we have Java script for actually changing the page,

31
00:01:42,110 --> 00:01:44,050
After it was loaded

32
00:01:44,050 --> 00:01:49,050
for adding interactivity to page you're currently viewing.

33
00:01:49,860 --> 00:01:51,970
And that might be a bit hard to grasp.

34
00:01:51,970 --> 00:01:54,630
So let me give you a concrete example.

35
00:01:54,630 --> 00:01:57,530
I prepared a simple demo project here,

36
00:01:57,530 --> 00:01:59,840
which contains some JavaScript code,

37
00:01:59,840 --> 00:02:03,170
which you of course can't understand right now.

38
00:02:03,170 --> 00:02:06,060
We're going to write this code together in this course,

39
00:02:06,060 --> 00:02:08,250
but I'm giving you that code right now,

40
00:02:08,250 --> 00:02:11,580
already so that we can see it in action so that we

41
00:02:11,580 --> 00:02:14,680
understand why we might want to use Java script,

42
00:02:14,680 --> 00:02:16,943
before we then learn it step by step.

43
00:02:18,140 --> 00:02:18,973
Now,

44
00:02:18,973 --> 00:02:23,130
if I start this project here by opening this HTML page,

45
00:02:23,130 --> 00:02:25,813
with my life server extension again,

46
00:02:26,790 --> 00:02:31,430
then we see something like this and I'm zoomed in

47
00:02:31,430 --> 00:02:34,453
quite a bit here, which is why it is that big for me.

48
00:02:35,630 --> 00:02:38,720
Now, here we get an input field, a label, a button,

49
00:02:38,720 --> 00:02:40,720
and then this annotation,

50
00:02:40,720 --> 00:02:43,750
this extra text next to the input field,

51
00:02:43,750 --> 00:02:48,750
which should signal to us how many characters are left until

52
00:02:48,850 --> 00:02:53,490
we exceeded the max length off that input field.

53
00:02:53,490 --> 00:02:56,090
Because before we start typing here,

54
00:02:56,090 --> 00:02:59,480
it is worth pointing out that this input field has,

55
00:02:59,480 --> 00:03:02,810
the max length attribute on it.

56
00:03:02,810 --> 00:03:06,550
We learned about dad and about those validation attributes

57
00:03:06,550 --> 00:03:08,770
in the forums section.

58
00:03:08,770 --> 00:03:11,350
And because we have that attribute on it,

59
00:03:11,350 --> 00:03:14,960
we can't enter more than 60 characters,

60
00:03:14,960 --> 00:03:17,690
but if I start typing here,

61
00:03:17,690 --> 00:03:21,160
then you'll notice that this number here,

62
00:03:21,160 --> 00:03:24,400
actually also updates as I continue typing.

63
00:03:24,400 --> 00:03:27,670
And it's tells me how many characters I have left.

64
00:03:27,670 --> 00:03:30,490
And once I reached 10 characters or less,

65
00:03:30,490 --> 00:03:33,870
I even get an extra warning effect telling me,

66
00:03:33,870 --> 00:03:36,620
that I'm running out of characters here.

67
00:03:36,620 --> 00:03:39,910
And ultimately once I hit those 60 characters,

68
00:03:39,910 --> 00:03:41,950
I can't type anymore,

69
00:03:41,950 --> 00:03:46,300
now that's can't type anymore effect is coming directly from

70
00:03:46,300 --> 00:03:49,000
that input field because of this attribute.

71
00:03:49,000 --> 00:03:53,060
But this warning effect that orange background color,

72
00:03:53,060 --> 00:03:58,060
and this life output here, that's JavaScript in action,

73
00:03:58,250 --> 00:04:01,300
because what we actually do here is

74
00:04:01,300 --> 00:04:04,890
we are changing what we see on the page.

75
00:04:04,890 --> 00:04:08,770
We are changing the content and the structure of this page

76
00:04:08,770 --> 00:04:12,120
with JavaScript behind the scenes.

77
00:04:12,120 --> 00:04:16,079
I mean, it might not be that obvious, but keep in mind that,

78
00:04:16,079 --> 00:04:18,959
this text here is not entered by the user,

79
00:04:18,959 --> 00:04:21,399
instead it's output by the browser.

80
00:04:21,399 --> 00:04:24,570
And yet it changes with every keystroke.

81
00:04:24,570 --> 00:04:26,910
And that happens because behind the scenes,

82
00:04:26,910 --> 00:04:29,270
JavaScript is doing some work.

83
00:04:29,270 --> 00:04:33,030
It's watching what we enter here, counting our characters,

84
00:04:33,030 --> 00:04:38,030
and then it updates detects here and to colors of this

85
00:04:38,770 --> 00:04:42,530
text and the background color here based on the length of

86
00:04:42,530 --> 00:04:43,363
our input.

87
00:04:44,320 --> 00:04:47,080
And we can also see it as if we opened the developer tools,

88
00:04:47,080 --> 00:04:50,220
the elements tab here. If I do that, then,

89
00:04:50,220 --> 00:04:55,220
we see if I select this span here, that when I type here,

90
00:04:58,340 --> 00:05:02,760
this text here actually updates as I type,

91
00:05:02,760 --> 00:05:06,150
this purple flashing, which you see here in my output,

92
00:05:06,150 --> 00:05:11,150
that means that this content of the webpage was updated.

93
00:05:11,390 --> 00:05:14,210
It was updated by Java script. In this case,

94
00:05:14,210 --> 00:05:17,050
if something flashes in purple here on the right,

95
00:05:17,050 --> 00:05:20,210
it means that this HTML code is being updated,

96
00:05:20,210 --> 00:05:24,430
is being changed. And of course it's not our original code.

97
00:05:24,430 --> 00:05:25,690
That's being changed.

98
00:05:25,690 --> 00:05:29,330
That's the code we as a developer wrote after all,

99
00:05:29,330 --> 00:05:33,020
but it's the loaded code, the parsed code evaluated,

100
00:05:33,020 --> 00:05:35,170
and displayed by the browser,

101
00:05:35,170 --> 00:05:37,833
which updates here behind the scenes.

102
00:05:39,140 --> 00:05:42,680
Well, and that's what JavaScript can do.

103
00:05:42,680 --> 00:05:45,020
And it can do way more than that.

104
00:05:45,020 --> 00:05:48,930
There are many possible use cases and applications,

105
00:05:48,930 --> 00:05:52,380
and examples for JavaScript. You could, for example,

106
00:05:52,380 --> 00:05:56,470
use JavaScript to fetch some data behind the scenes,

107
00:05:56,470 --> 00:06:01,000
without fetching a brand new HTML page from a server,

108
00:06:01,000 --> 00:06:03,200
to update some data, which has occurred,

109
00:06:03,200 --> 00:06:04,800
visible on the screen.

110
00:06:04,800 --> 00:06:05,633
For example,

111
00:06:05,633 --> 00:06:09,440
think about pages that display weber or stocks data,

112
00:06:09,440 --> 00:06:13,390
and update that data. Whilst you are on the page,

113
00:06:13,390 --> 00:06:17,200
you could display a timer or set a timer behind the scenes

114
00:06:17,200 --> 00:06:19,633
that does something once it expires.

115
00:06:20,490 --> 00:06:22,220
Think about online banking,

116
00:06:22,220 --> 00:06:25,910
where you sometimes are locked out after five minutes,

117
00:06:25,910 --> 00:06:29,470
that's JavaScript doing some work. For example,

118
00:06:29,470 --> 00:06:32,080
you could also validate user input

119
00:06:32,080 --> 00:06:34,280
and show a more fine tuned,

120
00:06:34,280 --> 00:06:36,380
tailored error message

121
00:06:36,380 --> 00:06:39,720
and adding more fine tuned error styles.

122
00:06:39,720 --> 00:06:44,420
Then you can do it with just the built in HTML and CSS

123
00:06:44,420 --> 00:06:48,400
forums features. You could use JavaScript to display,

124
00:06:48,400 --> 00:06:50,540
and manage more complex overlays,

125
00:06:50,540 --> 00:06:52,830
which might be presented on the screen.

126
00:06:52,830 --> 00:06:55,990
You could use it for reordering or hiding and showing,

127
00:06:55,990 --> 00:06:58,690
or removing elements, which are on the screen.

128
00:06:58,690 --> 00:06:59,523
And for example,

129
00:06:59,523 --> 00:07:03,660
a list on your website where you can drag and drop items,

130
00:07:03,660 --> 00:07:04,830
and they have, of course,

131
00:07:04,830 --> 00:07:06,940
what you see on the screen changes,

132
00:07:06,940 --> 00:07:09,440
as you are dragging and dropping,

133
00:07:09,440 --> 00:07:12,680
you could also leverage Java scripts to keep,

134
00:07:12,680 --> 00:07:14,100
parts of your websites,

135
00:07:14,100 --> 00:07:17,520
or maybe even your entire websites up and running to a

136
00:07:17,520 --> 00:07:21,380
certain extent, even if the internet connection is lost,

137
00:07:21,380 --> 00:07:24,680
these are all things you can do with JavaScript.

138
00:07:24,680 --> 00:07:27,480
And we're going to see many of these examples,

139
00:07:27,480 --> 00:07:30,530
and other examples throughout this course,

140
00:07:30,530 --> 00:07:33,313
once we know a bit more about Java script.