WEBVTT

1
00:00:00.120 --> 00:00:04.639
<v Speaker 1>Welcome to the deep dive. Today. We're not just looking

2
00:00:04.639 --> 00:00:07.799
<v Speaker 1>at another tech trend. We're actually cracking open the bedrock

3
00:00:07.839 --> 00:00:10.400
<v Speaker 1>of the modern web. That's right, we're diving into the

4
00:00:10.439 --> 00:00:15.119
<v Speaker 1>book Headfirst JavaScript Programming by Eric Freeman and Elizabeth Robson.

5
00:00:15.359 --> 00:00:16.679
<v Speaker 2>A really interesting one.

6
00:00:16.800 --> 00:00:19.000
<v Speaker 1>Definitely, we've sort of sifted through it to pull out

7
00:00:19.000 --> 00:00:21.559
<v Speaker 1>the key insights about JavaScript, you know, especially if you

8
00:00:21.559 --> 00:00:24.320
<v Speaker 1>want to quickly grasp why it's so important its main

9
00:00:24.359 --> 00:00:26.960
<v Speaker 1>ideas without feeling totally overwhelmed.

10
00:00:27.239 --> 00:00:32.439
<v Speaker 2>Exactly, think of us as your guides navigating this landscape.

11
00:00:32.560 --> 00:00:34.960
<v Speaker 2>We'll point out the crucial bits, show how they connect,

12
00:00:35.520 --> 00:00:40.479
<v Speaker 2>and really explain why understanding JavaScript matters whether you build

13
00:00:40.479 --> 00:00:42.920
<v Speaker 2>websites or honestly just use them day to day.

14
00:00:43.000 --> 00:00:45.200
<v Speaker 1>Totally. And the book starts with a pretty bold claim,

15
00:00:45.240 --> 00:00:48.719
<v Speaker 1>doesn't it. It says if JavaScript just vanished, the web

16
00:00:48.799 --> 00:00:50.880
<v Speaker 1>as we know it would basically disappear. That's huge.

17
00:00:51.000 --> 00:00:53.840
<v Speaker 2>It's not an exaggeration really, it highlights just how fun

18
00:00:53.880 --> 00:00:54.439
<v Speaker 2>the nettle it is.

19
00:00:54.560 --> 00:00:58.479
<v Speaker 1>So let's start right there. What is JavaScript exactly in

20
00:00:58.520 --> 00:00:59.679
<v Speaker 1>the context of the Internet.

21
00:01:00.039 --> 00:01:04.200
<v Speaker 2>Okay, yeah, the core question. So, JavaScript is the language

22
00:01:04.239 --> 00:01:07.120
<v Speaker 2>that kind of breeds life into web pages, you've got HTML.

23
00:01:07.280 --> 00:01:09.200
<v Speaker 1>That's the structure, the bones.

24
00:01:08.920 --> 00:01:12.079
<v Speaker 2>Precisely, and then CSS adds the style, the look and feel.

25
00:01:12.519 --> 00:01:15.879
<v Speaker 2>JavaScript is more like the muscles and the nervous system.

26
00:01:16.280 --> 00:01:19.319
<v Speaker 2>It makes things happen, makes pages interactive.

27
00:01:18.799 --> 00:01:20.200
<v Speaker 1>So lets things react to you.

28
00:01:20.359 --> 00:01:22.840
<v Speaker 2>Yeah. It lets websites respond when you click something or

29
00:01:22.879 --> 00:01:25.400
<v Speaker 2>type into a form, all those dynamic actions.

30
00:01:25.439 --> 00:01:28.319
<v Speaker 1>Okay, so it's not like some older programming language, the

31
00:01:28.359 --> 00:01:30.640
<v Speaker 1>ones that needed that whole compile step before they could run.

32
00:01:30.680 --> 00:01:32.959
<v Speaker 1>It's more immediate exactly.

33
00:01:33.120 --> 00:01:38.280
<v Speaker 2>Yeah. JavaScript code is typically embedded right into the HTML

34
00:01:38.319 --> 00:01:42.560
<v Speaker 2>file itself, usually inside script tags. When your browser loads

35
00:01:42.560 --> 00:01:45.439
<v Speaker 2>that page, it finds the JavaScript and just runs it

36
00:01:45.599 --> 00:01:49.840
<v Speaker 2>right then and there. There's no separate translation step needed beforehand.

37
00:01:50.079 --> 00:01:52.760
<v Speaker 2>The browser handles it on the fly, and that direct

38
00:01:52.760 --> 00:01:55.760
<v Speaker 2>interaction with the browser is what makes it so perfect

39
00:01:55.760 --> 00:01:56.920
<v Speaker 2>for the web, that.

40
00:01:56.920 --> 00:01:58.879
<v Speaker 1>Makes it sound incredibly flexible. Can you give us some

41
00:01:59.760 --> 00:02:03.000
<v Speaker 1>example stuff we see online all the time? Oh? Sure.

42
00:02:03.239 --> 00:02:06.159
<v Speaker 2>Think about filling out a form online. Right, you click

43
00:02:06.280 --> 00:02:10.400
<v Speaker 2>submit and instantly a little message pops up saying, hey,

44
00:02:10.919 --> 00:02:14.159
<v Speaker 2>you missed this field or your emit looks wrong.

45
00:02:14.319 --> 00:02:15.520
<v Speaker 1>Yeah, happens all the time.

46
00:02:15.680 --> 00:02:18.800
<v Speaker 2>That's JavaScript checking your input before it even goes anywhere,

47
00:02:19.280 --> 00:02:22.840
<v Speaker 2>or interactive maps where you zoom in and pan around

48
00:02:22.840 --> 00:02:24.159
<v Speaker 2>without the whole page reloading.

49
00:02:24.319 --> 00:02:26.479
<v Speaker 1>Right, Yeah, smooth, that's.

50
00:02:26.400 --> 00:02:29.840
<v Speaker 2>Usually JavaScript fetching new map data and displaying it. Even

51
00:02:30.120 --> 00:02:33.400
<v Speaker 2>like slick animations on websites or playing games right in your.

52
00:02:33.280 --> 00:02:34.759
<v Speaker 1>Browser, it's JavaScript too.

53
00:02:35.080 --> 00:02:38.759
<v Speaker 2>Yep, all powered by JavaScript. And new sites that update

54
00:02:38.840 --> 00:02:42.879
<v Speaker 2>live with new headlines appearing without you hitting refresh. Often

55
00:02:42.879 --> 00:02:45.759
<v Speaker 2>that's JavaScript working behind the scenes, pulling in that new data.

56
00:02:45.800 --> 00:02:49.400
<v Speaker 1>Wow, it really is everywhere, kind of hidden in plain sight. Now.

57
00:02:49.439 --> 00:02:53.680
<v Speaker 1>The book mentions a strong endorsement from David Gellinter at Yale.

58
00:02:54.039 --> 00:02:56.319
<v Speaker 1>What does he emphasize about JavaScript's importance.

59
00:02:56.599 --> 00:03:00.000
<v Speaker 2>Well, Professor Gellinter is pretty direct about it. He basically said,

60
00:03:00.039 --> 00:03:03.479
<v Speaker 2>as everyone who is interested in web software must know

61
00:03:03.639 --> 00:03:06.439
<v Speaker 2>JavaScript full stop. He acknowledges there are different ways to

62
00:03:06.520 --> 00:03:10.280
<v Speaker 2>learn it, but stresses that this book headfirst offers a

63
00:03:10.319 --> 00:03:11.280
<v Speaker 2>really solid path.

64
00:03:11.439 --> 00:03:14.319
<v Speaker 1>And there's this fascinating connection he makes right about the

65
00:03:14.400 --> 00:03:17.599
<v Speaker 1>author's colleagues at Yale actually inspiring parts of Java.

66
00:03:17.719 --> 00:03:22.360
<v Speaker 2>Yes, that's quite something. Gellerntern notes that one of the

67
00:03:22.439 --> 00:03:26.759
<v Speaker 2>key people behind Java actually credited work done at Yale

68
00:03:26.919 --> 00:03:30.199
<v Speaker 2>in distributed programming work that involved Freeman and Robson as

69
00:03:30.240 --> 00:03:30.879
<v Speaker 2>an inspiration.

70
00:03:31.159 --> 00:03:33.560
<v Speaker 1>So these authors have deep roots in this stuff. They

71
00:03:33.560 --> 00:03:35.800
<v Speaker 1>weren't just jumping on a bandwagon.

72
00:03:35.439 --> 00:03:38.080
<v Speaker 2>Not at all. They were involved in concepts that shaped

73
00:03:38.159 --> 00:03:42.120
<v Speaker 2>modern programming well before JavaScript even dominated the web.

74
00:03:42.199 --> 00:03:46.240
<v Speaker 1>But Gillinter also points out JavaScript didn't have that formal

75
00:03:46.319 --> 00:03:50.080
<v Speaker 1>academic upbringing. It kind of grew organically with the web itself.

76
00:03:50.240 --> 00:03:51.879
<v Speaker 1>What does that mean for the language if.

77
00:03:51.719 --> 00:03:54.599
<v Speaker 2>You connected to how the web evolved. Yeah, he compares

78
00:03:54.639 --> 00:03:57.719
<v Speaker 2>it a bit to say the early days of Apple

79
00:03:57.840 --> 00:04:02.879
<v Speaker 2>or Microsoft. Yeah, JavaScript wasn't born from some rigorous, peer

80
00:04:02.919 --> 00:04:07.280
<v Speaker 2>reviewed specification. It adapted really quickly to what the web needed,

81
00:04:07.479 --> 00:04:10.400
<v Speaker 2>which was great for its growth, made it dominant. But

82
00:04:10.479 --> 00:04:13.319
<v Speaker 2>it also means it picked up some well, let's call

83
00:04:13.319 --> 00:04:14.879
<v Speaker 2>them idiosyncrasies along the way.

84
00:04:15.000 --> 00:04:15.520
<v Speaker 1>Quirks.

85
00:04:15.639 --> 00:04:19.240
<v Speaker 2>Quirks, Yeah, especially around how it handles different types of data.

86
00:04:19.360 --> 00:04:20.920
<v Speaker 2>We can dig into that a bit more later, but

87
00:04:21.480 --> 00:04:24.040
<v Speaker 2>knowing about those quirks can definitely save you some headaches.

88
00:04:24.279 --> 00:04:27.480
<v Speaker 1>Okay, good to know, So we get its importance. It's

89
00:04:27.480 --> 00:04:30.920
<v Speaker 1>slightly wild history For someone wanting to actually use it,

90
00:04:30.959 --> 00:04:34.279
<v Speaker 1>what's the absolute first step adding it to a webpage?

91
00:04:34.399 --> 00:04:36.480
<v Speaker 2>The most basic way is just putting your job script

92
00:04:36.560 --> 00:04:40.199
<v Speaker 2>code directly inside those script tags within your HTML file.

93
00:04:40.279 --> 00:04:42.040
<v Speaker 1>And you can put those tags in the head or

94
00:04:42.079 --> 00:04:42.560
<v Speaker 1>the body.

95
00:04:42.680 --> 00:04:46.720
<v Speaker 2>Yep, either works, but the book recommends and it's generally

96
00:04:46.759 --> 00:04:48.959
<v Speaker 2>good practice to put them right at the very end

97
00:04:49.000 --> 00:04:51.160
<v Speaker 2>of the body, just before the closing body tag.

98
00:04:51.319 --> 00:04:52.800
<v Speaker 1>Okay, and why is that preferred?

99
00:04:53.199 --> 00:04:56.759
<v Speaker 2>It's mainly for a better user experience. The browser reads

100
00:04:56.839 --> 00:04:59.360
<v Speaker 2>HTML top to bottom, so if the scripts are at

101
00:04:59.360 --> 00:05:04.199
<v Speaker 2>the end, it loads and shows all the visible stuff first, text, images.

102
00:05:03.800 --> 00:05:07.879
<v Speaker 1>Layout, ah, So the user sees the page content appearing quickly.

103
00:05:07.920 --> 00:05:11.120
<v Speaker 2>Exactly then it gets to the JavaScript. This makes the

104
00:05:11.120 --> 00:05:14.120
<v Speaker 2>page feel like it loads faster, even if the interactive

105
00:05:14.120 --> 00:05:16.680
<v Speaker 2>bits take a moment longer to kick in. You avoid

106
00:05:16.959 --> 00:05:19.560
<v Speaker 2>that blank screen effect while scripts are loading.

107
00:05:19.360 --> 00:05:22.720
<v Speaker 1>Which nobody likes. Nobody likes that it takes total sense. What's

108
00:05:22.759 --> 00:05:24.439
<v Speaker 1>the other way to include JavaScript? Then?

109
00:05:24.600 --> 00:05:27.920
<v Speaker 2>The other main approach, especially for anything more complex than

110
00:05:27.959 --> 00:05:30.560
<v Speaker 2>a tiny script yeah, is to put your JavaScript code

111
00:05:30.560 --> 00:05:34.040
<v Speaker 2>in separate files. These files just have a JS extension.

112
00:05:34.240 --> 00:05:34.600
<v Speaker 1>Okay.

113
00:05:34.959 --> 00:05:37.800
<v Speaker 2>Then in your HTML you still use a script tag,

114
00:05:38.279 --> 00:05:40.759
<v Speaker 2>but instead of putting code inside it, you use the

115
00:05:40.879 --> 00:05:43.839
<v Speaker 2>src attribute to point to your external dis.

116
00:05:43.639 --> 00:05:45.439
<v Speaker 1>File src for source.

117
00:05:45.519 --> 00:05:48.199
<v Speaker 2>I guess exactly, and this is usually much better keep

118
00:05:48.240 --> 00:05:51.920
<v Speaker 2>your htmail clean, your JavaScript organized, and crucially, you can

119
00:05:51.959 --> 00:05:55.160
<v Speaker 2>reuse the same JS file across lots of different HTML pages.

120
00:05:55.399 --> 00:05:59.879
<v Speaker 1>Right, more organized, reusable, sounds much more maintainable for sure.

121
00:06:00.040 --> 00:06:00.439
<v Speaker 2>Definitely.

122
00:06:00.439 --> 00:06:02.319
<v Speaker 1>Okay, So once we've got our script linked up, the

123
00:06:02.360 --> 00:06:05.240
<v Speaker 1>book dives into the real building blocks. What are those

124
00:06:05.480 --> 00:06:08.680
<v Speaker 1>first core concepts we need to wrapprehens around.

125
00:06:08.560 --> 00:06:12.720
<v Speaker 2>Yeah, the absolute basics. First up, variables and values. Think

126
00:06:12.759 --> 00:06:14.959
<v Speaker 2>of a variable as just a named container, like a

127
00:06:15.040 --> 00:06:18.079
<v Speaker 2>labeled box. You use it to store information of value.

128
00:06:18.240 --> 00:06:20.600
<v Speaker 2>There's could be a number some texts, which we call

129
00:06:20.680 --> 00:06:23.879
<v Speaker 2>string in programming, or maybe a true false value called

130
00:06:23.879 --> 00:06:26.639
<v Speaker 2>a booleon. The book introduces let.

131
00:06:26.680 --> 00:06:27.439
<v Speaker 1>Call it yeah.

132
00:06:27.519 --> 00:06:29.720
<v Speaker 2>Let is used for variables where the value might need

133
00:06:29.759 --> 00:06:32.560
<v Speaker 2>to change later on in the program. And then there's

134
00:06:32.600 --> 00:06:35.920
<v Speaker 2>const for constant exactly. You use cost when you know

135
00:06:36.040 --> 00:06:38.680
<v Speaker 2>the value shouldn't change once it's set. It helps prevent

136
00:06:38.759 --> 00:06:41.759
<v Speaker 2>accidental changes. And the book also goes over naming rules.

137
00:06:41.759 --> 00:06:45.439
<v Speaker 2>Start with a letter or underscore, use letters, numbers, underscores,

138
00:06:45.639 --> 00:06:49.560
<v Speaker 2>dollar signs. Just avoid the special JavaScript keywords like let

139
00:06:49.600 --> 00:06:52.519
<v Speaker 2>itself or function false, things like that.

140
00:06:52.600 --> 00:06:55.959
<v Speaker 1>Got it. So let for changeable stuff, const for fixed stuff.

141
00:06:56.439 --> 00:06:59.680
<v Speaker 1>Boxes for our data. Now, how do we actually do

142
00:06:59.800 --> 00:07:03.279
<v Speaker 1>things with that data? That's expressions and operators precisely.

143
00:07:03.279 --> 00:07:05.680
<v Speaker 2>An expression is basically any bit of code that results

144
00:07:05.720 --> 00:07:07.680
<v Speaker 2>in a value. Could be just a variable name itself,

145
00:07:08.199 --> 00:07:11.560
<v Speaker 2>or more often, it's a mix of values. Variables and operators.

146
00:07:11.800 --> 00:07:14.639
<v Speaker 1>Operators are like the verbs, the action words.

147
00:07:14.879 --> 00:07:17.959
<v Speaker 2>Kind of yeah, they're the symbols that perform actions. You've

148
00:07:17.959 --> 00:07:22.639
<v Speaker 2>got arithmetic operators plus minus, multiplied, divide, you know, basic math,

149
00:07:23.519 --> 00:07:27.720
<v Speaker 2>then comparison operators greater than less than equal to checking

150
00:07:27.720 --> 00:07:34.000
<v Speaker 2>how values relate, and logical operators like nn which means an,

151
00:07:34.519 --> 00:07:39.079
<v Speaker 2>which means oar, and nan which means not. These let

152
00:07:39.120 --> 00:07:40.279
<v Speaker 2>you combine conditions.

153
00:07:40.519 --> 00:07:44.199
<v Speaker 1>So an example expression might be something like calculating fahrenheit

154
00:07:44.199 --> 00:07:44.839
<v Speaker 1>from celsius.

155
00:07:44.920 --> 00:07:47.759
<v Speaker 2>Perfect example, like nine to five ten plus thirty two

156
00:07:48.000 --> 00:07:51.160
<v Speaker 2>that combines variables temp numbers nine five thirty two and

157
00:07:51.240 --> 00:07:54.680
<v Speaker 2>arithmetic operators and n plus to produce a single result,

158
00:07:54.759 --> 00:07:55.639
<v Speaker 2>the Fahrenhet temperature.

159
00:07:55.639 --> 00:07:57.720
<v Speaker 1>Okay, that makes sense. We've got data storage, ways to

160
00:07:57.759 --> 00:08:00.399
<v Speaker 1>manipulate it. What's next in the fundamentals.

161
00:08:00.040 --> 00:08:02.879
<v Speaker 2>Excess control flow. This is all about controlling the order

162
00:08:02.920 --> 00:08:06.199
<v Speaker 2>things happen to your code. The book introduces wild loops.

163
00:08:05.879 --> 00:08:08.560
<v Speaker 1>Loops doing things repeatedly exactly.

164
00:08:08.879 --> 00:08:10.800
<v Speaker 2>A wild loop keeps running a block of code over

165
00:08:10.839 --> 00:08:13.240
<v Speaker 2>and over as long as a certain condition stays true,

166
00:08:13.399 --> 00:08:15.800
<v Speaker 2>like saying, keep doing this while x is true. Okay,

167
00:08:15.839 --> 00:08:18.720
<v Speaker 2>And then there's eifals's statements. These are for making decisions.

168
00:08:19.000 --> 00:08:20.680
<v Speaker 1>If this, then that pretty much.

169
00:08:21.000 --> 00:08:24.759
<v Speaker 2>If this condition is true, run this code, otherwise run

170
00:08:24.759 --> 00:08:27.839
<v Speaker 2>this other code. It lets your program react differently based

171
00:08:27.920 --> 00:08:28.560
<v Speaker 2>on the situation.

172
00:08:29.399 --> 00:08:35.440
<v Speaker 1>So loops for repetition, i fels for choices. The basic logic. Okay, now,

173
00:08:35.799 --> 00:08:39.279
<v Speaker 1>how does the JavaScript actually like talk back to the

174
00:08:39.320 --> 00:08:40.799
<v Speaker 1>person using the website?

175
00:08:41.000 --> 00:08:44.200
<v Speaker 2>Good question. The book covers a few key ways for

176
00:08:44.240 --> 00:08:47.080
<v Speaker 2>communicating with the user. Probably the most important one for

177
00:08:47.120 --> 00:08:48.720
<v Speaker 2>developers is console.

178
00:08:48.320 --> 00:08:51.159
<v Speaker 1>Dot log console dot log I've seen that, Yeah.

179
00:08:51.000 --> 00:08:55.919
<v Speaker 2>It's everywhere. This command lets you display information, variable values, messages, whatever,

180
00:08:56.279 --> 00:09:00.679
<v Speaker 2>in the browser's developer console. It's absolutely vital for debugging,

181
00:09:00.879 --> 00:09:02.399
<v Speaker 2>for seeing what your code is actually doing.

182
00:09:02.559 --> 00:09:05.399
<v Speaker 1>So it's like printing messages for yourself, the developer, not

183
00:09:05.480 --> 00:09:06.840
<v Speaker 1>the end user necessarily.

184
00:09:06.960 --> 00:09:09.759
<v Speaker 2>Mostly yes, for the end user. They mention alert, which

185
00:09:09.799 --> 00:09:12.000
<v Speaker 2>pops up a simple message box in the browser window.

186
00:09:12.159 --> 00:09:14.440
<v Speaker 1>Oh, those boxes, they can be kind of annoying.

187
00:09:14.480 --> 00:09:17.039
<v Speaker 2>Sometimes they can, which is why it's used less in

188
00:09:17.120 --> 00:09:20.200
<v Speaker 2>modern design. It interrupts things. Yeah, and they also mentioned

189
00:09:20.279 --> 00:09:22.840
<v Speaker 2>document dot rit, which can write stuff directly into the

190
00:09:22.919 --> 00:09:25.600
<v Speaker 2>HTML page itself. But you said that's not preferred now

191
00:09:26.080 --> 00:09:29.519
<v Speaker 2>generally not. No, it has some drawbacks, especially related to

192
00:09:29.879 --> 00:09:34.039
<v Speaker 2>performance and when it runs. Console dot log for debugging

193
00:09:34.600 --> 00:09:37.399
<v Speaker 2>and manipulating the page content dynamically, which we'll get to

194
00:09:38.080 --> 00:09:39.120
<v Speaker 2>are much more common.

195
00:09:39.320 --> 00:09:42.720
<v Speaker 1>Right. And that developer console you mentioned sounds pretty important.

196
00:09:42.759 --> 00:09:46.720
<v Speaker 2>Oh, absolutely essential. You access it through your browsers developer tools,

197
00:09:47.120 --> 00:09:50.279
<v Speaker 2>usually just by pressing F twelve. It shows your console

198
00:09:50.279 --> 00:09:54.120
<v Speaker 2>dot log output. But crucially, it also flags any errors

199
00:09:54.279 --> 00:09:55.480
<v Speaker 2>your JavaScript runs into.

200
00:09:55.720 --> 00:09:58.360
<v Speaker 1>Ah, so it tells you when things break exactly.

201
00:09:58.399 --> 00:10:00.440
<v Speaker 2>It gives you clues about what went wrong and where

202
00:10:00.759 --> 00:10:03.480
<v Speaker 2>you really can't do JavaScript development without getting comfortable with

203
00:10:03.480 --> 00:10:03.919
<v Speaker 2>the console.

204
00:10:04.039 --> 00:10:07.679
<v Speaker 1>Okay, got it. So those are the initial building blocks, variables, expressions,

205
00:10:07.720 --> 00:10:12.200
<v Speaker 1>control flow, basic output. Now the book starts getting into

206
00:10:12.240 --> 00:10:14.799
<v Speaker 1>more powerful stuff, right, what are some of those next

207
00:10:14.879 --> 00:10:15.519
<v Speaker 1>level concepts?

208
00:10:15.600 --> 00:10:18.519
<v Speaker 2>Yeah, this is where it's really interesting. Big one functions.

209
00:10:18.840 --> 00:10:22.639
<v Speaker 2>Think of functions as named blocks of code that perform

210
00:10:22.679 --> 00:10:23.720
<v Speaker 2>a specific.

211
00:10:23.279 --> 00:10:25.919
<v Speaker 1>Task, reusable code blocks exactly.

212
00:10:25.960 --> 00:10:28.360
<v Speaker 2>You define it once, give it a name, and then

213
00:10:28.399 --> 00:10:31.360
<v Speaker 2>you can call that function whenever you need that task done,

214
00:10:31.440 --> 00:10:35.399
<v Speaker 2>potentially many times. You can give it inputs called arguments

215
00:10:35.600 --> 00:10:38.120
<v Speaker 2>arguments okay, and it can produce an output, a result,

216
00:10:38.240 --> 00:10:41.320
<v Speaker 2>which we call a return value. Functions are fundamental for

217
00:10:41.440 --> 00:10:45.360
<v Speaker 2>organizing your code, making it less repetitive, more manageable.

218
00:10:45.120 --> 00:10:47.720
<v Speaker 1>And the book mentions different ways to write them.

219
00:10:48.039 --> 00:10:52.279
<v Speaker 2>Yes, there are traditional function declarations, but also newer ways

220
00:10:52.360 --> 00:10:55.720
<v Speaker 2>like function expressions, anonymous functions that don't have a name,

221
00:10:56.000 --> 00:10:59.480
<v Speaker 2>and these really concise aerow functions. Getting good at structuring

222
00:10:59.519 --> 00:11:01.799
<v Speaker 2>your code with functions is a huge.

223
00:11:01.480 --> 00:11:04.759
<v Speaker 1>Step up modularity right makes sense. What else is key?

224
00:11:05.000 --> 00:11:08.720
<v Speaker 2>Next up? Arrays. An array is basically just an ordered

225
00:11:08.759 --> 00:11:11.639
<v Speaker 2>list of items, like a shopping list, perfect analogy, or

226
00:11:11.720 --> 00:11:14.559
<v Speaker 2>a list of scores, names, whatever. You can store multiple

227
00:11:14.639 --> 00:11:17.919
<v Speaker 2>values in a single array variable, and you access each

228
00:11:17.960 --> 00:11:22.279
<v Speaker 2>item using its position, its index, and important the index

229
00:11:22.320 --> 00:11:23.639
<v Speaker 2>starts at zero, not.

230
00:11:23.720 --> 00:11:27.399
<v Speaker 1>One, ah, the classic programmer off by one error source.

231
00:11:27.399 --> 00:11:30.600
<v Speaker 2>That's the one. Then there are objects. Objects are super

232
00:11:30.600 --> 00:11:33.639
<v Speaker 2>important in JavaScript. They let you group related data and

233
00:11:33.679 --> 00:11:37.799
<v Speaker 2>functions together. Think of an object representing say a user. Okay,

234
00:11:38.360 --> 00:11:42.039
<v Speaker 2>it might have properties like name, email, is logged in.

235
00:11:42.080 --> 00:11:44.679
<v Speaker 2>These are key value pairs, and it might also have

236
00:11:44.759 --> 00:11:47.600
<v Speaker 2>actions that can perform like log in or logout function.

237
00:11:48.120 --> 00:11:50.000
<v Speaker 2>When a function is part of an object, we call

238
00:11:50.080 --> 00:11:50.720
<v Speaker 2>it a method.

239
00:11:51.039 --> 00:11:55.559
<v Speaker 1>So data, properties and actions methods bundled together.

240
00:11:55.440 --> 00:12:00.200
<v Speaker 2>Exactly and a really key concept with objects. Variables don't

241
00:12:00.200 --> 00:12:03.559
<v Speaker 2>hold the object itself. They hold a reference to it, like.

242
00:12:03.519 --> 00:12:05.519
<v Speaker 1>An address the house analogy again.

243
00:12:05.360 --> 00:12:07.720
<v Speaker 2>Right, if you copy the variable, you're just copying the address,

244
00:12:07.759 --> 00:12:10.320
<v Speaker 2>not building a new house. Both variables point to the

245
00:12:10.320 --> 00:12:12.960
<v Speaker 2>same object, and memory changing it through one variable affects

246
00:12:13.000 --> 00:12:14.519
<v Speaker 2>the other. That catches people out.

247
00:12:14.559 --> 00:12:17.759
<v Speaker 1>Sometimes good to remember. So you've got to raise for lists,

248
00:12:17.840 --> 00:12:20.440
<v Speaker 1>objects for structured things. How does this connect back to

249
00:12:20.600 --> 00:12:21.799
<v Speaker 1>the actual web page?

250
00:12:21.840 --> 00:12:25.240
<v Speaker 2>We see that connection happens through the document object model.

251
00:12:25.639 --> 00:12:29.039
<v Speaker 2>The browser takes the HTML structure of your page and

252
00:12:29.200 --> 00:12:32.840
<v Speaker 2>represents it internally as a tree like structure of objects.

253
00:12:33.399 --> 00:12:37.440
<v Speaker 2>Every single HTML element, a heading, a paragraph, a button,

254
00:12:37.480 --> 00:12:40.559
<v Speaker 2>and image becomes an object in this DOM tree.

255
00:12:40.960 --> 00:12:43.600
<v Speaker 1>So the page is objects in the browser's eyes.

256
00:12:43.399 --> 00:12:47.879
<v Speaker 2>Pretty much, and JavaScript can access and manipulate these domb objects.

257
00:12:47.919 --> 00:12:50.080
<v Speaker 2>It can find a specific element, like a paragraph with

258
00:12:50.120 --> 00:12:51.080
<v Speaker 2>a certain ideas.

259
00:12:50.840 --> 00:12:54.159
<v Speaker 1>Using something like document element BI maybe.

260
00:12:54.000 --> 00:12:56.799
<v Speaker 2>Exactly that one. And once it has that object representing

261
00:12:56.799 --> 00:12:59.919
<v Speaker 2>the paragraph, it can change its text content, change its style.

262
00:13:00.000 --> 00:13:04.039
<v Speaker 2>We'll add or remove other elements inside it. Basically dynamically

263
00:13:04.039 --> 00:13:05.559
<v Speaker 2>alter the web page after it's loaded.

264
00:13:05.720 --> 00:13:08.600
<v Speaker 1>Ah okay, so that's how things change on the page

265
00:13:08.960 --> 00:13:11.879
<v Speaker 1>without a full reload. JavaScript messing with the DOM.

266
00:13:12.120 --> 00:13:13.279
<v Speaker 2>That's the core mechanism.

267
00:13:13.399 --> 00:13:16.039
<v Speaker 1>Yes, well what causes JavaScript to make those changes? Does

268
00:13:16.080 --> 00:13:17.440
<v Speaker 1>it just decide randomly?

269
00:13:17.759 --> 00:13:20.360
<v Speaker 2>No? No, It responds to events. Events are things that

270
00:13:20.360 --> 00:13:23.559
<v Speaker 2>happen in the browser. Often there are user actions like click,

271
00:13:23.840 --> 00:13:26.879
<v Speaker 2>clicking a button, yeah, or moving the mouse, typing in

272
00:13:26.919 --> 00:13:29.840
<v Speaker 2>a field, scrolling the page, even just the page finishing loading.

273
00:13:29.879 --> 00:13:33.039
<v Speaker 2>Those are all events. JavaScript can listen for these events

274
00:13:33.039 --> 00:13:36.480
<v Speaker 2>happening on specific HTML elements, and when an event it's

275
00:13:36.559 --> 00:13:39.639
<v Speaker 2>listening for occurs, it runs a specific piece of code,

276
00:13:39.960 --> 00:13:42.039
<v Speaker 2>usually a function that we call an event handler or

277
00:13:42.080 --> 00:13:42.799
<v Speaker 2>event listener.

278
00:13:43.159 --> 00:13:46.919
<v Speaker 1>So when this button is clicked, event run this function handler.

279
00:13:46.960 --> 00:13:51.279
<v Speaker 2>Precisely, that event driven model is how you create interactivity.

280
00:13:51.759 --> 00:13:55.919
<v Speaker 2>User does something, event, JavaScript reacts, handler runs maybe changes

281
00:13:55.960 --> 00:13:56.320
<v Speaker 2>the dom.

282
00:13:56.519 --> 00:13:59.559
<v Speaker 1>Events and handlers. Got it now? You mentioned earlier that

283
00:13:59.639 --> 00:14:03.000
<v Speaker 1>javas script has some quirks, especially with types. What should

284
00:14:03.039 --> 00:14:03.799
<v Speaker 1>we know there, right?

285
00:14:03.919 --> 00:14:09.279
<v Speaker 2>JavaScript has different data types strings for text, numbers, booleans, true, false, objects,

286
00:14:09.840 --> 00:14:11.559
<v Speaker 2>and also a couple of special ones like.

287
00:14:11.559 --> 00:14:15.960
<v Speaker 1>Undefined meaning a variable exists but has no value yet correct.

288
00:14:16.000 --> 00:14:20.240
<v Speaker 2>And null, which means the intentional absence of value. It's subtle,

289
00:14:20.399 --> 00:14:24.159
<v Speaker 2>but different from undefined. Where it gets tricky is comparing values.

290
00:14:24.279 --> 00:14:28.440
<v Speaker 2>JavaScript has two main ways, double equals and triple.

291
00:14:28.120 --> 00:14:30.039
<v Speaker 1>Equals loose versus strict equality.

292
00:14:30.200 --> 00:14:32.840
<v Speaker 2>Exactly. Triple equals is strict. It checks if both the

293
00:14:32.919 --> 00:14:35.559
<v Speaker 2>value and the type are the same. So five is

294
00:14:35.600 --> 00:14:38.320
<v Speaker 2>false because one's a number one's a string makes sense,

295
00:14:38.360 --> 00:14:41.519
<v Speaker 2>but double equals is loose. It tries to be helpful,

296
00:14:41.600 --> 00:14:46.000
<v Speaker 2>sometimes too helpful, by converting types before comparing. So five

297
00:14:46.080 --> 00:14:49.399
<v Speaker 2>equals five is actually true because it converts the string

298
00:14:49.519 --> 00:14:51.080
<v Speaker 2>five to the number five first.

299
00:14:51.279 --> 00:14:54.440
<v Speaker 1>Ah. I can see how that could cause unexpected bugs.

300
00:14:54.679 --> 00:14:55.639
<v Speaker 2>It definitely can.

301
00:14:55.799 --> 00:14:56.080
<v Speaker 1>Sure.

302
00:14:56.360 --> 00:15:00.480
<v Speaker 2>Generally, using strict equality is recommended unless you sp pecifically

303
00:15:00.600 --> 00:15:03.600
<v Speaker 2>need that type conversion. And then there's nan not a

304
00:15:03.679 --> 00:15:06.200
<v Speaker 2>number sense for not a number yet it's a special

305
00:15:06.559 --> 00:15:10.960
<v Speaker 2>numeric value you get from invalid math operations like divide

306
00:15:11.039 --> 00:15:12.840
<v Speaker 2>zero by zero or trying to do math. It's something

307
00:15:12.840 --> 00:15:15.360
<v Speaker 2>that isn't a number. But the weird part the quirk

308
00:15:15.799 --> 00:15:20.200
<v Speaker 2>is if you ask JavaScript what is the type of NAN, it.

309
00:15:20.200 --> 00:15:21.919
<v Speaker 1>Tells you, I mean, guess number.

310
00:15:22.000 --> 00:15:25.120
<v Speaker 2>It tells your number, which seems totally contradictory, but that's

311
00:15:25.159 --> 00:15:27.440
<v Speaker 2>just how it is. Nan is technically considered a numeric

312
00:15:27.480 --> 00:15:29.919
<v Speaker 2>type even though it represents something that isn't a valid number.

313
00:15:30.120 --> 00:15:31.759
<v Speaker 2>It's one of those things to file away.

314
00:15:32.000 --> 00:15:35.039
<v Speaker 1>Definitely a head scratcher. Okay, Wow, we've covered a lot

315
00:15:35.039 --> 00:15:38.799
<v Speaker 1>of ground from head first JavaScript programming. As we wrap

316
00:15:38.879 --> 00:15:41.799
<v Speaker 1>up this duck dive into the fundamentals, what are the

317
00:15:41.879 --> 00:15:44.120
<v Speaker 1>absolute core takeaways for our listeners.

318
00:15:44.200 --> 00:15:45.960
<v Speaker 2>Well, I think the main thing is that JavaScript is

319
00:15:46.000 --> 00:15:48.480
<v Speaker 2>just essential for webinar activity. It runs right in the

320
00:15:48.480 --> 00:15:53.039
<v Speaker 2>browser working with HTML and CSS. We saw the basics variables,

321
00:15:53.279 --> 00:15:57.399
<v Speaker 2>let cons expressions, operators, control flow, while iye fills, and

322
00:15:57.440 --> 00:15:58.039
<v Speaker 2>how to use.

323
00:15:57.960 --> 00:15:59.879
<v Speaker 1>The console console dot log is your friend.

324
00:16:00.039 --> 00:16:05.200
<v Speaker 2>Absolutely. Then the more powerful tools functions for usable code,

325
00:16:05.200 --> 00:16:08.960
<v Speaker 2>to raise for lists, objects for structured data, and understanding

326
00:16:09.000 --> 00:16:12.120
<v Speaker 2>the dom is key to change the page dynamically.

327
00:16:11.639 --> 00:16:14.519
<v Speaker 1>Triggered by events and handled by JavaScript.

328
00:16:13.960 --> 00:16:17.159
<v Speaker 2>Functions exactly and finally being aware of types, especially the

329
00:16:17.159 --> 00:16:19.960
<v Speaker 2>difference between emeon and the ivian and the weirdness of Nan.

330
00:16:20.200 --> 00:16:23.440
<v Speaker 1>And we touched on those cool background facts, the Yale

331
00:16:23.480 --> 00:16:27.240
<v Speaker 1>connection to Java's inspiration, the sort of wild West origins

332
00:16:27.240 --> 00:16:30.440
<v Speaker 1>of JavaScript, leading to some quirks like Nan being a number.

333
00:16:30.720 --> 00:16:34.639
<v Speaker 2>Yeah, those historical notes add some interesting context. Overall, this

334
00:16:34.720 --> 00:16:37.639
<v Speaker 2>should give you a really solid foundation. You understand why

335
00:16:37.720 --> 00:16:40.919
<v Speaker 2>JavaScript matters, and you've got an introduction to its core ideas,

336
00:16:41.240 --> 00:16:42.919
<v Speaker 2>hopefully without it feeling too dense.

337
00:16:43.200 --> 00:16:45.720
<v Speaker 1>It definitely sets the stage whether you want to dive

338
00:16:45.759 --> 00:16:49.200
<v Speaker 1>deeper into web development or just you know, understand better

339
00:16:49.279 --> 00:16:54.720
<v Speaker 1>how the websites you use every day actually tick precisely. Fantastic. Okay,

340
00:16:54.759 --> 00:16:58.320
<v Speaker 1>So for our final thought, the book hints that JavaScript

341
00:16:58.360 --> 00:17:01.879
<v Speaker 1>is moving beyond just the browse into lots of other environments.

342
00:17:02.039 --> 00:17:05.319
<v Speaker 1>Given its fundamental nature and how it keeps evolving, What

343
00:17:05.519 --> 00:17:08.799
<v Speaker 1>completely new things might this language unlock in the future.

344
00:17:09.240 --> 00:17:11.519
<v Speaker 1>Where else might we see JavaScript popping up?

345
00:17:11.599 --> 00:17:15.119
<v Speaker 2>Hmmm, that's a great question to ponder. Its reach is already.

346
00:17:14.839 --> 00:17:18.039
<v Speaker 1>Pretty wide, yeah, servers, mobile apps. It makes you wonder

347
00:17:18.039 --> 00:17:20.440
<v Speaker 1>what's next. Something for you all to think about thanks

348
00:17:20.440 --> 00:17:21.680
<v Speaker 1>for joining us on this deep dive