WEBVTT

1
00:00:00.080 --> 00:00:03.680
<v Speaker 1>Welcome to the deep dive. Today, we're taking a really

2
00:00:03.720 --> 00:00:08.240
<v Speaker 1>focused look at JavaScript, specifically for web developers. We're pulling

3
00:00:08.320 --> 00:00:12.880
<v Speaker 1>everything from this one pretty comprehensive book. But hey, even

4
00:00:12.880 --> 00:00:16.320
<v Speaker 1>if you're not a coder, stick around. Yeah, definitely understanding

5
00:00:16.399 --> 00:00:18.440
<v Speaker 1>JavaScript basics. It's kind of like getting a peek under

6
00:00:18.480 --> 00:00:21.199
<v Speaker 1>the hood of you know, all those interactive websites who

7
00:00:21.280 --> 00:00:22.839
<v Speaker 1>use every single day exactly.

8
00:00:22.960 --> 00:00:28.559
<v Speaker 2>Think of it as uncovering the essential mechanics our source.

9
00:00:28.879 --> 00:00:32.079
<v Speaker 2>It's aimed at web developers, but the core ideas right,

10
00:00:32.280 --> 00:00:35.640
<v Speaker 2>and you know some of the let's say, surprising ways

11
00:00:35.719 --> 00:00:39.119
<v Speaker 2>JavaScript works. That's interesting for anyone curious about webtech.

12
00:00:39.439 --> 00:00:42.920
<v Speaker 1>So our mission today is well, pretty straightforward but important. Yeah,

13
00:00:43.000 --> 00:00:46.960
<v Speaker 1>pull out the key building blocks of JavaScript, demystify how

14
00:00:46.960 --> 00:00:49.759
<v Speaker 1>it makes websites actually do things, and hopefully you'll have

15
00:00:49.799 --> 00:00:51.079
<v Speaker 1>a few of those aha.

16
00:00:50.960 --> 00:00:53.920
<v Speaker 2>Moments we should. The book covers a lot, from basic

17
00:00:53.920 --> 00:00:57.840
<v Speaker 2>syntax writing the code, to making page elements react, even

18
00:00:57.880 --> 00:00:59.759
<v Speaker 2>server communication loads to cover.

19
00:01:00.079 --> 00:01:03.000
<v Speaker 1>Let's just dive right in chapter one the basics.

20
00:01:03.280 --> 00:01:08.120
<v Speaker 2>Okay, so first off, the book really emphasizes using the

21
00:01:08.200 --> 00:01:12.439
<v Speaker 2>browser's developer tools, specifically the console. Ah.

22
00:01:12.560 --> 00:01:13.200
<v Speaker 3>The console.

23
00:01:13.719 --> 00:01:16.040
<v Speaker 1>Yeah, it can look a bit intimidating candidate, it.

24
00:01:16.000 --> 00:01:18.560
<v Speaker 2>Can, but it's actually a fantastic place to just try

25
00:01:18.560 --> 00:01:19.959
<v Speaker 2>stuff out, like a sandbox.

26
00:01:20.040 --> 00:01:22.920
<v Speaker 1>Okay. The book gives an example, right like three plus five.

27
00:01:22.840 --> 00:01:25.560
<v Speaker 2>Yep, type three plus five hit ender and boom eight.

28
00:01:25.799 --> 00:01:26.599
<v Speaker 2>Makes perfect sense.

29
00:01:26.640 --> 00:01:29.920
<v Speaker 1>But then it shows console dot log hello, and that

30
00:01:29.959 --> 00:01:34.079
<v Speaker 1>gives you hello, but then also undefined. Okay, what's up

31
00:01:34.120 --> 00:01:35.920
<v Speaker 1>with the undefined there? Why does that show up?

32
00:01:36.079 --> 00:01:38.640
<v Speaker 2>Well, it's about what console dot log is designed to do.

33
00:01:39.120 --> 00:01:42.560
<v Speaker 2>Its main job is to display something like the text hello, okay,

34
00:01:42.640 --> 00:01:44.959
<v Speaker 2>and it does that, but the function itself doesn't really

35
00:01:45.000 --> 00:01:47.920
<v Speaker 2>return a useful value back to the program in the

36
00:01:47.920 --> 00:01:49.560
<v Speaker 2>way three plus five returns eight.

37
00:01:49.760 --> 00:01:50.280
<v Speaker 1>Ah.

38
00:01:50.319 --> 00:01:50.840
<v Speaker 3>I see.

39
00:01:50.920 --> 00:01:54.200
<v Speaker 2>So in JavaScript, if a function doesn't explicitly say return

40
00:01:54.280 --> 00:01:57.120
<v Speaker 2>this value, it just automatically returns undefined.

41
00:01:57.159 --> 00:02:00.319
<v Speaker 1>So console dot log does its job displaying hello, but

42
00:02:00.359 --> 00:02:03.359
<v Speaker 1>the result of running the function is just nothing useful,

43
00:02:03.480 --> 00:02:04.319
<v Speaker 1>hence undefined.

44
00:02:04.480 --> 00:02:07.359
<v Speaker 2>Exactly like think of a printer at printer document, right,

45
00:02:07.560 --> 00:02:10.960
<v Speaker 2>but the act of printing itself doesn't like create a

46
00:02:11.000 --> 00:02:12.360
<v Speaker 2>new document as its output.

47
00:02:12.639 --> 00:02:15.599
<v Speaker 1>It just performs the action that printer analogy actually helps

48
00:02:15.599 --> 00:02:15.840
<v Speaker 1>a lot.

49
00:02:15.919 --> 00:02:17.360
<v Speaker 2>Okay, action versus result.

50
00:02:17.520 --> 00:02:20.280
<v Speaker 1>Got it, and the book also sets the stage, you know,

51
00:02:20.319 --> 00:02:24.719
<v Speaker 1>explaining that JavaScript is basically just text plain text files, right, and.

52
00:02:24.680 --> 00:02:28.960
<v Speaker 2>The browser reads those files and interprets the instructions.

53
00:02:29.080 --> 00:02:31.360
<v Speaker 1>Yeah, it executes the code. And these files are made

54
00:02:31.400 --> 00:02:34.120
<v Speaker 1>up of statements individual instruction.

55
00:02:33.919 --> 00:02:37.520
<v Speaker 2>Like console do log Hello, that's one statement precisely.

56
00:02:38.000 --> 00:02:41.080
<v Speaker 1>And you can group statements together in blocks using curly braces,

57
00:02:41.719 --> 00:02:44.919
<v Speaker 1>sometimes optional for single lines, but the book uses them

58
00:02:44.919 --> 00:02:46.639
<v Speaker 1>consistently for clarity.

59
00:02:46.439 --> 00:02:49.599
<v Speaker 2>Good practice probably, And semicolons.

60
00:02:49.439 --> 00:02:51.599
<v Speaker 1>At the end of statements. The book says they're often

61
00:02:51.639 --> 00:02:53.280
<v Speaker 1>optional if you use line breaks.

62
00:02:53.360 --> 00:02:56.199
<v Speaker 2>Yeah. JavaScript tries to be clever and insert them. Sometimes

63
00:02:56.439 --> 00:02:58.680
<v Speaker 2>it's called automatic semicolon.

64
00:02:58.120 --> 00:03:00.360
<v Speaker 1>Insertion, but the book uses them anyway.

65
00:03:00.639 --> 00:03:04.560
<v Speaker 2>It does for consistency and to avoid you know, potential

66
00:03:04.680 --> 00:03:07.919
<v Speaker 2>weird edge cases where the automatic insertion might guess wrong.

67
00:03:08.479 --> 00:03:10.080
<v Speaker 2>It's generally seen as safer.

68
00:03:09.879 --> 00:03:14.080
<v Speaker 1>Okay, good to know. Then variables super fundamental.

69
00:03:14.280 --> 00:03:17.599
<v Speaker 2>Absolutely. Think of them as labeled boxes storage locations in memory.

70
00:03:17.639 --> 00:03:20.759
<v Speaker 1>And you use the equals sign the assignment operator to

71
00:03:20.840 --> 00:03:21.840
<v Speaker 1>put something in the box.

72
00:03:22.039 --> 00:03:25.360
<v Speaker 2>Right, the book uses a three, then plus one, then

73
00:03:25.360 --> 00:03:26.520
<v Speaker 2>console dot log.

74
00:03:26.319 --> 00:03:28.560
<v Speaker 1>Which shows four, so you put three in a set.

75
00:03:28.800 --> 00:03:31.000
<v Speaker 1>Then you take what's an eye, which is three, add one,

76
00:03:31.120 --> 00:03:34.360
<v Speaker 1>and put the result four back into exactly that.

77
00:03:34.560 --> 00:03:37.719
<v Speaker 2>A plus one looks a bit strange mathematically, but it's

78
00:03:37.759 --> 00:03:41.680
<v Speaker 2>standard in programming. Update the variable based on its current value.

79
00:03:41.759 --> 00:03:44.599
<v Speaker 1>And for those common plus one and opus one operations,

80
00:03:44.639 --> 00:03:45.479
<v Speaker 1>there are shortcuts.

81
00:03:45.599 --> 00:03:49.879
<v Speaker 2>Yep, the increment plus plus and decrement operators just shorthand

82
00:03:49.919 --> 00:03:51.919
<v Speaker 2>for adding or subtracting one very common.

83
00:03:52.280 --> 00:03:54.800
<v Speaker 1>And there are other assignment shortcuts too, like plus.

84
00:03:54.759 --> 00:03:56.919
<v Speaker 2>Rate plus a ten is just a shorter way to

85
00:03:56.919 --> 00:03:57.840
<v Speaker 2>write A plus.

86
00:03:57.560 --> 00:04:00.680
<v Speaker 1>Ten makes sense, like the example A five plus equals

87
00:04:00.719 --> 00:04:04.000
<v Speaker 1>ten results in fifteen. Keeps the code a bit tidier.

88
00:04:04.080 --> 00:04:06.680
<v Speaker 2>It does, especially when things get more complex, saves it.

89
00:04:06.759 --> 00:04:09.159
<v Speaker 2>A typing makes the intent clear once.

90
00:04:09.000 --> 00:04:11.000
<v Speaker 1>You know them now, something that can trip people up.

91
00:04:11.439 --> 00:04:14.719
<v Speaker 3>Case sensitivity, oh yeah, hugely important to JavaScript.

92
00:04:14.919 --> 00:04:18.040
<v Speaker 1>The book stresses that thing with a lowercase T is

93
00:04:18.120 --> 00:04:20.519
<v Speaker 1>totally different from thing with an uppercase.

94
00:04:20.120 --> 00:04:23.720
<v Speaker 2>T, completely different variables as far as JavaScript is concerned,

95
00:04:24.199 --> 00:04:27.079
<v Speaker 2>and that difference it can lead to some really really

96
00:04:27.120 --> 00:04:28.519
<v Speaker 2>hard to find bugs.

97
00:04:28.160 --> 00:04:29.920
<v Speaker 1>Because you defined it one way and try to use

98
00:04:29.959 --> 00:04:32.199
<v Speaker 1>it another and suddenly it's undefined or not what you

99
00:04:32.279 --> 00:04:33.560
<v Speaker 1>expect exactly.

100
00:04:33.639 --> 00:04:36.480
<v Speaker 2>You've got to be precise with spelling and capitalization like

101
00:04:36.839 --> 00:04:37.959
<v Speaker 2>library call numbers.

102
00:04:38.120 --> 00:04:41.680
<v Speaker 1>Okay, how do we actually declare these variables? The book

103
00:04:41.800 --> 00:04:44.800
<v Speaker 1>introduces var, let, and const.

104
00:04:45.120 --> 00:04:47.480
<v Speaker 2>Right. So var is the older way if you just

105
00:04:47.519 --> 00:04:52.680
<v Speaker 2>say var my variable. Its initial value is undefined.

106
00:04:52.240 --> 00:04:53.959
<v Speaker 1>Until you assign something to it, yep.

107
00:04:54.240 --> 00:04:57.720
<v Speaker 2>Whereas let and const are newer constants or values you

108
00:04:57.720 --> 00:04:59.000
<v Speaker 2>don't intend to change later.

109
00:04:59.120 --> 00:05:01.600
<v Speaker 1>Constants you have to give a const of value when

110
00:05:01.600 --> 00:05:04.639
<v Speaker 1>you declare it, right. You can't just say const x correct.

111
00:05:04.680 --> 00:05:07.120
<v Speaker 2>Yeah, you can't reassign it later either. Lit is for

112
00:05:07.240 --> 00:05:09.240
<v Speaker 2>variables that you do expect to change.

113
00:05:08.920 --> 00:05:12.480
<v Speaker 1>And var it has some quirks, something about hoisting.

114
00:05:12.800 --> 00:05:15.800
<v Speaker 2>Yeah. Var declarations get sort of mentally moved to the

115
00:05:15.800 --> 00:05:19.120
<v Speaker 2>top of their scope by the JavaScript engine. It can

116
00:05:19.160 --> 00:05:21.920
<v Speaker 2>sometimes cause confusing behavior if you're not aware of it.

117
00:05:22.079 --> 00:05:24.040
<v Speaker 1>Whereas let and const don't do that.

118
00:05:24.160 --> 00:05:26.279
<v Speaker 3>They have what's called block scope exactly.

119
00:05:26.480 --> 00:05:29.959
<v Speaker 2>They're generally considered safer and lead to fewer surprises. The

120
00:05:30.000 --> 00:05:33.879
<v Speaker 2>book also warns about just using variables without declaring them

121
00:05:33.879 --> 00:05:34.199
<v Speaker 2>at all.

122
00:05:34.720 --> 00:05:37.279
<v Speaker 1>Oh right, in non strict mode.

123
00:05:37.240 --> 00:05:40.639
<v Speaker 2>Yeah, JavaScript might just create a global variable for you,

124
00:05:40.680 --> 00:05:44.560
<v Speaker 2>which is usually a bad idea can cause conflicts and bugs.

125
00:05:44.199 --> 00:05:48.759
<v Speaker 1>So always declare your variables, use let or const preferably.

126
00:05:48.279 --> 00:05:49.399
<v Speaker 2>That's the modern best practice.

127
00:05:49.439 --> 00:05:52.279
<v Speaker 1>Yes, okay, to keep code readable, we use.

128
00:05:52.120 --> 00:05:56.319
<v Speaker 2>Comments crucial for single line comments and followed by for

129
00:05:56.480 --> 00:05:59.680
<v Speaker 2>multiline comments. Yeah. Great for explaining why you did something

130
00:05:59.879 --> 00:06:03.399
<v Speaker 2>or for temporarily disabling code during testing. Just remember you

131
00:06:03.439 --> 00:06:05.279
<v Speaker 2>can't nest the multi lined comments.

132
00:06:05.519 --> 00:06:06.040
<v Speaker 3>Good tip.

133
00:06:06.399 --> 00:06:08.560
<v Speaker 1>And finally for this section, strict mode.

134
00:06:08.720 --> 00:06:12.000
<v Speaker 2>Ah, yes, you strict You put that string is the

135
00:06:12.160 --> 00:06:14.279
<v Speaker 2>very first thing in your script or the top of

136
00:06:14.319 --> 00:06:14.800
<v Speaker 2>a function.

137
00:06:15.000 --> 00:06:17.120
<v Speaker 1>And what does it do? Make JavaScript stricter?

138
00:06:17.360 --> 00:06:20.439
<v Speaker 2>Pretty much? It tells the browser, hey, be less forgiving

139
00:06:20.480 --> 00:06:22.879
<v Speaker 2>about errors and enforce stricter rules.

140
00:06:23.199 --> 00:06:26.360
<v Speaker 1>So it catches potential problems that regular JavaScript might just.

141
00:06:26.319 --> 00:06:31.040
<v Speaker 2>Ignore exactly, things that are considered bad practices or ambiguous code.

142
00:06:31.040 --> 00:06:34.759
<v Speaker 2>Strict mode often turns those into actual errors, making them

143
00:06:34.759 --> 00:06:37.959
<v Speaker 2>easier to find and fix. Highly recommended for new code.

144
00:06:38.160 --> 00:06:41.639
<v Speaker 1>Right helps you write cleaner, more reliable code from the start.

145
00:06:41.879 --> 00:06:44.759
<v Speaker 2>Okay, Moving on from the basics of writing code, the

146
00:06:44.759 --> 00:06:48.480
<v Speaker 2>book gets into the actual types of data. JavaScript works

147
00:06:48.480 --> 00:06:50.639
<v Speaker 2>with data types. Right starts with numbers, and the key

148
00:06:50.639 --> 00:06:54.480
<v Speaker 2>thing here is that JavaScript doesn't really distinguish between whole numbers, integers,

149
00:06:54.519 --> 00:06:57.680
<v Speaker 2>and numbers with decimal points floating point number. It's calls

150
00:06:57.720 --> 00:07:00.600
<v Speaker 2>of all number yep one single number type, which leads

151
00:07:00.680 --> 00:07:02.439
<v Speaker 2>us to a classic.

152
00:07:02.040 --> 00:07:04.720
<v Speaker 1>Issue ah the point one plus point two problem.

153
00:07:04.839 --> 00:07:08.839
<v Speaker 2>The very same console dot log zero zero zero zero

154
00:07:09.000 --> 00:07:11.040
<v Speaker 2>zero zero zero zero doesn't give you point.

155
00:07:10.800 --> 00:07:13.480
<v Speaker 1>Three, it gives you point three zero zero zero zero

156
00:07:13.560 --> 00:07:16.360
<v Speaker 1>zero zero zero zero zero zero zero zero zero zero

157
00:07:16.399 --> 00:07:18.800
<v Speaker 1>zero zero zero zero zero zero zero zero zero zero

158
00:07:18.920 --> 00:07:21.439
<v Speaker 1>zero zero zero zero zero zero zero four are something

159
00:07:21.480 --> 00:07:22.560
<v Speaker 1>ridiculously long.

160
00:07:22.439 --> 00:07:26.879
<v Speaker 2>Like that exactly. It's because computers use binary base two internally,

161
00:07:27.279 --> 00:07:29.480
<v Speaker 2>and just like thirteens that are repeating decimal in our

162
00:07:29.480 --> 00:07:32.879
<v Speaker 2>base ten system, some simple base ten fractions don't have

163
00:07:32.920 --> 00:07:35.560
<v Speaker 2>an exact finite representation in binary.

164
00:07:35.480 --> 00:07:38.120
<v Speaker 1>So tiny rounding errors creep. In the book mentions this

165
00:07:38.160 --> 00:07:39.959
<v Speaker 1>isn't just a JavaScript thing, right.

166
00:07:39.920 --> 00:07:42.879
<v Speaker 2>No, it happens in many languages. JavaScript just doesn't hide

167
00:07:42.879 --> 00:07:45.079
<v Speaker 2>it as much. It's something to be aware of, especially

168
00:07:45.079 --> 00:07:47.959
<v Speaker 2>if you're doing precise financial calculations for example good point.

169
00:07:48.279 --> 00:07:51.360
<v Speaker 1>So, besides that quirk, you can write numbers normally with

170
00:07:51.480 --> 00:07:55.000
<v Speaker 1>decimals or using exponential notation like one point two three

171
00:07:55.040 --> 00:07:56.639
<v Speaker 1>E four four twelve fo hundred.

172
00:07:56.839 --> 00:08:00.560
<v Speaker 2>Right and briefly it mentions binary notation with zero bo okay.

173
00:08:00.720 --> 00:08:04.279
<v Speaker 1>Then operators for numbers we saw, but the arithmetic ones.

174
00:08:04.160 --> 00:08:08.519
<v Speaker 2>The usual suspects plus for edition, subtraction, multiplication, division.

175
00:08:08.199 --> 00:08:11.839
<v Speaker 1>And the crucial part operator precedence the order they happen in.

176
00:08:12.040 --> 00:08:17.319
<v Speaker 2>Yes, just like math class parentheses first, then multiplication and division,

177
00:08:17.759 --> 00:08:19.480
<v Speaker 2>then addition and subtraction.

178
00:08:19.439 --> 00:08:21.920
<v Speaker 1>And if they have the same precedence like Warren.

179
00:08:21.680 --> 00:08:24.439
<v Speaker 2>Evaluated left to right. The books example twelve to two

180
00:08:24.480 --> 00:08:26.279
<v Speaker 2>to three really shows this right.

181
00:08:26.319 --> 00:08:29.279
<v Speaker 1>It's twelve two which is six, then sixty three which

182
00:08:29.319 --> 00:08:32.080
<v Speaker 1>is eighteen, not twelve two three exactly.

183
00:08:32.159 --> 00:08:34.559
<v Speaker 2>Understanding precedents avoids surprises.

184
00:08:34.639 --> 00:08:36.679
<v Speaker 1>And there's the remainder operatorcent shit, the.

185
00:08:36.600 --> 00:08:39.840
<v Speaker 2>Percent sign one hundred perc seven gives you two because

186
00:08:39.840 --> 00:08:42.519
<v Speaker 2>one hundred divided by seven is fourteen with the remainder

187
00:08:42.559 --> 00:08:42.799
<v Speaker 2>of two.

188
00:08:43.000 --> 00:08:47.080
<v Speaker 1>And the book says it's useful for things like cyclic patterns.

189
00:08:46.720 --> 00:08:49.080
<v Speaker 2>Yeah, figuring out days of the week, or maybe alternating

190
00:08:49.120 --> 00:08:51.279
<v Speaker 2>styles in a list, anything where you need to know

191
00:08:51.320 --> 00:08:53.919
<v Speaker 2>the remainder after division, or just checking if a number

192
00:08:53.960 --> 00:08:57.159
<v Speaker 2>is even or odd number percent two okay.

193
00:08:57.519 --> 00:09:01.039
<v Speaker 1>Next, data type strings text.

194
00:09:01.039 --> 00:09:04.279
<v Speaker 2>Sequences of characters. You enclose them in either single quotes

195
00:09:04.360 --> 00:09:05.120
<v Speaker 2>or double quotes.

196
00:09:05.279 --> 00:09:08.240
<v Speaker 1>The book uses single quotes mostly, but the console often

197
00:09:08.279 --> 00:09:09.240
<v Speaker 1>shows double yeah.

198
00:09:09.279 --> 00:09:12.399
<v Speaker 2>Either's fine. Just be consistent within a project, and importantly

199
00:09:12.480 --> 00:09:15.639
<v Speaker 2>use the straight quotes, not the curly typographic ones. Some

200
00:09:15.759 --> 00:09:17.039
<v Speaker 2>word processors like to.

201
00:09:17.039 --> 00:09:20.360
<v Speaker 1>Use gotcha, and a key property of strings immutable.

202
00:09:20.440 --> 00:09:23.440
<v Speaker 2>Yes. Immutable means once a string is created, you cannot

203
00:09:23.519 --> 00:09:24.879
<v Speaker 2>change its contents directly.

204
00:09:25.000 --> 00:09:27.120
<v Speaker 1>So I five Hello and I want jello. I can't

205
00:09:27.120 --> 00:09:27.799
<v Speaker 1>just swap the H.

206
00:09:27.840 --> 00:09:28.159
<v Speaker 3>For a J.

207
00:09:28.720 --> 00:09:32.279
<v Speaker 2>Nope. Any operation that seems to modify a string actually

208
00:09:32.279 --> 00:09:34.720
<v Speaker 2>creates a brand new string in memory with the changes.

209
00:09:35.120 --> 00:09:36.720
<v Speaker 2>The original Hello is untouched.

210
00:09:36.879 --> 00:09:39.720
<v Speaker 1>Okay. Good to know, especially for performance. If you're doing

211
00:09:39.919 --> 00:09:41.440
<v Speaker 1>lots of string changes.

212
00:09:41.120 --> 00:09:44.000
<v Speaker 2>It can be yeah. The book also mentions escape characters

213
00:09:44.240 --> 00:09:46.360
<v Speaker 2>using the backslash.

214
00:09:45.639 --> 00:09:48.080
<v Speaker 1>Right, like if you want a single quote inside a

215
00:09:48.120 --> 00:09:49.440
<v Speaker 1>single quoted string.

216
00:09:49.360 --> 00:09:52.120
<v Speaker 2>Don't exactly or end for a newline character T for

217
00:09:52.120 --> 00:09:52.919
<v Speaker 2>a tab, et cetera.

218
00:09:53.159 --> 00:09:56.279
<v Speaker 1>And joining strings together concatenation.

219
00:09:55.960 --> 00:09:58.759
<v Speaker 2>Just use the plus operator. Hello plus plus world gives

220
00:09:58.799 --> 00:09:59.559
<v Speaker 2>you Hello World.

221
00:10:00.000 --> 00:10:02.639
<v Speaker 1>Careful if you mix strings and numbers, very careful.

222
00:10:02.679 --> 00:10:05.679
<v Speaker 2>Five plus ten is fifteen, but five plus ten is

223
00:10:05.720 --> 00:10:09.320
<v Speaker 2>five to ten. JavaScript sees the string and decides to

224
00:10:09.320 --> 00:10:11.960
<v Speaker 2>do concatenation converting the number ten to the string ten.

225
00:10:12.039 --> 00:10:12.240
<v Speaker 3>Ah.

226
00:10:12.240 --> 00:10:13.720
<v Speaker 1>Okay, potential, gotcha.

227
00:10:13.440 --> 00:10:16.879
<v Speaker 2>There definitely strings also have built in properties and methods.

228
00:10:16.960 --> 00:10:18.159
<v Speaker 2>The book mentions.

229
00:10:17.879 --> 00:10:20.679
<v Speaker 1>Length absdef dot length would be six easy.

230
00:10:20.519 --> 00:10:24.080
<v Speaker 2>Enough, yep. And then parcent and pars float for converting

231
00:10:24.120 --> 00:10:25.000
<v Speaker 2>strings to numbers.

232
00:10:25.159 --> 00:10:28.200
<v Speaker 1>Right, so parsent one two three gives the number one

233
00:10:28.240 --> 00:10:31.360
<v Speaker 1>twenty three? What about parsent one towiny three guys.

234
00:10:31.279 --> 00:10:34.120
<v Speaker 2>Still gives one twenty three? It reads the numbers from

235
00:10:34.120 --> 00:10:36.480
<v Speaker 2>the start until it hits a non numeric character.

236
00:10:36.679 --> 00:10:39.559
<v Speaker 1>And parcent reygo ze one two three.

237
00:10:39.559 --> 00:10:43.279
<v Speaker 2>That would return nan, not a number, because it couldn't

238
00:10:43.279 --> 00:10:44.919
<v Speaker 2>find any valid number at the very beginning.

239
00:10:45.039 --> 00:10:49.080
<v Speaker 1>Okay, so nan is this special value indicating an invalid number?

240
00:10:49.120 --> 00:10:53.240
<v Speaker 2>Result exactly, and there's a function is nan to specifically

241
00:10:53.279 --> 00:10:55.360
<v Speaker 2>check if value is nan useful.

242
00:10:55.759 --> 00:10:58.440
<v Speaker 1>The book also quickly mentions booleans.

243
00:10:58.240 --> 00:11:02.440
<v Speaker 2>True and false the logical values fundamental for decisions in

244
00:11:02.559 --> 00:11:04.240
<v Speaker 2>statements loops.

245
00:11:04.080 --> 00:11:06.919
<v Speaker 1>Though not much detail in this chapter. And then null

246
00:11:07.000 --> 00:11:08.320
<v Speaker 1>and undefined.

247
00:11:07.919 --> 00:11:10.840
<v Speaker 2>Right two ways of representing nothing. Null is usually an

248
00:11:10.840 --> 00:11:14.159
<v Speaker 2>intentional assignment of no value, like saying this variable should

249
00:11:14.200 --> 00:11:15.360
<v Speaker 2>currently hold nothing.

250
00:11:15.159 --> 00:11:18.919
<v Speaker 1>Whereas undefined often means it hasn't been given a value.

251
00:11:18.720 --> 00:11:21.559
<v Speaker 2>Yet, often yes, or it's the default return value from

252
00:11:21.559 --> 00:11:25.600
<v Speaker 2>a function that doesn't explicitly return anything crucially undefined itself

253
00:11:25.679 --> 00:11:26.600
<v Speaker 2>isn't an error.

254
00:11:26.399 --> 00:11:28.279
<v Speaker 1>State, just means no value assigned.

255
00:11:28.279 --> 00:11:28.720
<v Speaker 3>Okay, all right?

256
00:11:28.720 --> 00:11:30.320
<v Speaker 2>That leads nicely into functions.

257
00:11:29.960 --> 00:11:32.200
<v Speaker 1>Reusable blocks of code. The book gives an example of

258
00:11:32.240 --> 00:11:33.679
<v Speaker 1>function twice in return number two.

259
00:11:33.960 --> 00:11:37.679
<v Speaker 2>Yeah, so twice is the function name. Number inside the

260
00:11:37.720 --> 00:11:41.879
<v Speaker 2>parentheses is a parameter, a placeholder for the input.

261
00:11:41.639 --> 00:11:45.120
<v Speaker 1>And when you call it like twice five, the five

262
00:11:45.240 --> 00:11:47.240
<v Speaker 1>is the argument passed in exactly, The.

263
00:11:47.320 --> 00:11:50.399
<v Speaker 2>Value five gets assigned to the number parameter inside the

264
00:11:50.399 --> 00:11:53.159
<v Speaker 2>function for that specific call, and the return keyword that

265
00:11:53.360 --> 00:11:56.960
<v Speaker 2>specifies the value the function should output or send back.

266
00:11:57.360 --> 00:11:59.759
<v Speaker 2>It also immediately stops the function's.

267
00:11:59.360 --> 00:12:01.960
<v Speaker 1>Execution, so twice five would return ten.

268
00:12:02.200 --> 00:12:05.159
<v Speaker 2>Correct. And here's the connection back to undefined. If a

269
00:12:05.200 --> 00:12:08.120
<v Speaker 2>function doesn't have a return statement, or if it reaches

270
00:12:08.159 --> 00:12:09.759
<v Speaker 2>the end without hitting.

271
00:12:09.480 --> 00:12:13.000
<v Speaker 1>One, it implicitly returns undefined, just like console dot log.

272
00:12:13.080 --> 00:12:17.720
<v Speaker 2>Precisely, all functions return something if you don't specify it's undefined.

273
00:12:17.840 --> 00:12:20.759
<v Speaker 1>Okay, makes sense now. The book briefly touches on those

274
00:12:20.879 --> 00:12:25.039
<v Speaker 1>pop up dialogue boxes alert prompt confirmed.

275
00:12:24.639 --> 00:12:27.080
<v Speaker 2>Yeah, the old school ways to interact directly alert shows

276
00:12:27.080 --> 00:12:30.840
<v Speaker 2>a message, prompt asks for text input, confirm asks the

277
00:12:30.919 --> 00:12:31.639
<v Speaker 2>yes no question.

278
00:12:31.799 --> 00:12:35.120
<v Speaker 1>But they're kind of limited, right They block everything else totally.

279
00:12:35.320 --> 00:12:38.559
<v Speaker 2>They freeze the browser until the user interacts, and you

280
00:12:38.559 --> 00:12:42.320
<v Speaker 2>can't style them. Modern web apps use better techniques, like

281
00:12:42.480 --> 00:12:46.720
<v Speaker 2>Htmail's dialogue element, but the book uses these for simplicity

282
00:12:46.720 --> 00:12:47.679
<v Speaker 2>in early examples.

283
00:12:47.720 --> 00:12:51.519
<v Speaker 1>Gotcha, Now, how does this JavaScript code actually get onto

284
00:12:51.600 --> 00:12:52.440
<v Speaker 1>a web page?

285
00:12:52.679 --> 00:12:56.639
<v Speaker 2>Two main ways described Inline scripts You put your JavaScript

286
00:12:56.639 --> 00:13:00.120
<v Speaker 2>code directly inside script tags within your htmail.

287
00:12:59.840 --> 00:13:02.639
<v Speaker 3>File file, often in the head section often yeah.

288
00:13:03.080 --> 00:13:06.000
<v Speaker 2>Or the second way, external scripts, You put your code

289
00:13:06.000 --> 00:13:07.200
<v Speaker 2>in a separate JS.

290
00:13:06.919 --> 00:13:09.720
<v Speaker 1>File and link to it from the ADSTML using script

291
00:13:09.840 --> 00:13:12.759
<v Speaker 1>src pathworre your script adscript.

292
00:13:12.279 --> 00:13:15.080
<v Speaker 2>Exactly and a crucial point. If a script tag has

293
00:13:15.080 --> 00:13:18.360
<v Speaker 2>a src attribute pointing to an external file, any code

294
00:13:18.399 --> 00:13:21.159
<v Speaker 2>you write between the opening and closing script tags is ignored.

295
00:13:21.279 --> 00:13:23.840
<v Speaker 1>Okay, so it's either in line or external with src,

296
00:13:23.960 --> 00:13:25.039
<v Speaker 1>not both in the same tag.

297
00:13:25.200 --> 00:13:28.639
<v Speaker 2>Correct, And the scriptags can have other attributes type textuscript

298
00:13:28.720 --> 00:13:30.120
<v Speaker 2>used to be commer but it's mostly default.

299
00:13:30.159 --> 00:13:32.279
<v Speaker 1>Now what about async and defer ah?

300
00:13:32.360 --> 00:13:35.679
<v Speaker 2>Those control how the script loads and runs relative to

301
00:13:35.799 --> 00:13:39.120
<v Speaker 2>the HTML page being parsed. By default, when the browser

302
00:13:39.200 --> 00:13:44.000
<v Speaker 2>hits a script tag, it stops parsing, HTML, downloads the script,

303
00:13:44.120 --> 00:13:47.399
<v Speaker 2>runs it, and then continues parsing. This can slow down

304
00:13:47.440 --> 00:13:48.519
<v Speaker 2>page rendering.

305
00:13:48.240 --> 00:13:49.960
<v Speaker 1>Right makes the page feel slow to load.

306
00:13:50.120 --> 00:13:53.360
<v Speaker 2>ACYNC tells the browser download the script in the background

307
00:13:53.399 --> 00:13:55.960
<v Speaker 2>while parsing and run it as soon as it's downloaded,

308
00:13:56.080 --> 00:13:59.759
<v Speaker 2>which might interrupt parsing briefly. Order isn't guaranteed if you

309
00:13:59.759 --> 00:14:03.159
<v Speaker 2>have more ultiple ACNC scripts and defer. Defer also downloads

310
00:14:03.159 --> 00:14:05.559
<v Speaker 2>in the background, but it guarantees the script will only

311
00:14:05.679 --> 00:14:08.960
<v Speaker 2>run after the HTML parsing is completely finished and in

312
00:14:09.000 --> 00:14:11.679
<v Speaker 2>the order the Defer scripts appear in the HTML.

313
00:14:11.879 --> 00:14:14.720
<v Speaker 1>So defer is often preferred for scripts that need the

314
00:14:14.759 --> 00:14:16.639
<v Speaker 1>whole page structure to be ready.

315
00:14:16.600 --> 00:14:20.840
<v Speaker 2>Generally yes, especially for scripts that manipulate the page content.

316
00:14:21.720 --> 00:14:23.440
<v Speaker 2>The book also mentions cross.

317
00:14:23.120 --> 00:14:26.240
<v Speaker 1>Origin right for loading scripts from different domains can cause

318
00:14:26.320 --> 00:14:28.799
<v Speaker 1>issues if you're testing locally without a web server.

319
00:14:28.960 --> 00:14:31.840
<v Speaker 2>Yes, browsers have security rules about that. You might need

320
00:14:31.840 --> 00:14:35.080
<v Speaker 2>to remove frosts origin anonymous if you're just opening HTML

321
00:14:35.159 --> 00:14:37.120
<v Speaker 2>files directly from your computer, okay.

322
00:14:37.559 --> 00:14:40.679
<v Speaker 1>Error handling JavaScript used to be quiet about errors.

323
00:14:41.080 --> 00:14:45.919
<v Speaker 2>Historically, yes, sometimes things would just break silently, making debugging

324
00:14:45.960 --> 00:14:46.600
<v Speaker 2>and nightmare.

325
00:14:46.759 --> 00:14:49.080
<v Speaker 1>But strict mode helps immensely.

326
00:14:49.399 --> 00:14:52.919
<v Speaker 2>It makes JavaScript throw more explicit errors for common mistakes,

327
00:14:53.279 --> 00:14:54.919
<v Speaker 2>much better for catching bugs early.

328
00:14:55.240 --> 00:14:59.200
<v Speaker 1>And the book provides a basic template comments strict mode, and.

329
00:14:59.159 --> 00:15:02.279
<v Speaker 2>A simple window a function. It's like a safety net.

330
00:15:02.279 --> 00:15:05.399
<v Speaker 2>If any uncaught error happens, this function runs and the

331
00:15:05.440 --> 00:15:09.960
<v Speaker 2>template just uses alert to display the error message. Very basic,

332
00:15:10.159 --> 00:15:10.480
<v Speaker 2>but a.

333
00:15:10.440 --> 00:15:14.039
<v Speaker 1>Starting point okay, that covers the foundational theory. Chapter two

334
00:15:14.120 --> 00:15:16.039
<v Speaker 1>jumps into a project YEP.

335
00:15:15.840 --> 00:15:18.879
<v Speaker 2>A simple number guessing game, putting the basics into practice.

336
00:15:19.039 --> 00:15:22.519
<v Speaker 1>Starts with HTML just a button with egged start.

337
00:15:22.279 --> 00:15:26.480
<v Speaker 2>Game right, and the JavaScript uses document dot query selector

338
00:15:27.159 --> 00:15:29.720
<v Speaker 2>button Halftag's start game to grab that button.

339
00:15:29.759 --> 00:15:33.440
<v Speaker 1>Query selector is the modern way using CSS selector exactly.

340
00:15:33.480 --> 00:15:36.240
<v Speaker 2>Hashtag start game means find the element with the id

341
00:15:36.320 --> 00:15:38.720
<v Speaker 2>start game. Very powerful, and then.

342
00:15:38.679 --> 00:15:40.919
<v Speaker 1>It attaches an on click listener, so when you click the.

343
00:15:40.840 --> 00:15:43.799
<v Speaker 2>Button, it runs the play game function. That function contains

344
00:15:43.840 --> 00:15:44.559
<v Speaker 2>the game's logic.

345
00:15:44.639 --> 00:15:47.320
<v Speaker 1>How does it get the user's guess using prompt again.

346
00:15:47.440 --> 00:15:51.039
<v Speaker 2>Yes, prompt guess a number. Remember Prompt returns the typed

347
00:15:51.080 --> 00:15:54.759
<v Speaker 2>string an empty string or null if they cancel right.

348
00:15:54.600 --> 00:15:56.399
<v Speaker 1>And the game needs to check if the guess is right,

349
00:15:56.440 --> 00:15:59.320
<v Speaker 1>too high, or too low using if statements yep.

350
00:15:59.120 --> 00:16:03.480
<v Speaker 2>If guess answer too low. So on basic conditional logic and.

351
00:16:03.440 --> 00:16:06.120
<v Speaker 1>To let the user keep guessing, a loop a do.

352
00:16:06.840 --> 00:16:10.039
<v Speaker 2>Wile, loop dot do bake it's guests give feedback. Wild

353
00:16:10.120 --> 00:16:11.159
<v Speaker 2>guests answer the do.

354
00:16:11.279 --> 00:16:14.120
<v Speaker 1>Dot wile runs the code inside the do block at

355
00:16:14.240 --> 00:16:16.519
<v Speaker 1>least once before checking the condition.

356
00:16:16.320 --> 00:16:18.919
<v Speaker 2>Correct, which makes sense here. You always want the user

357
00:16:18.960 --> 00:16:20.600
<v Speaker 2>to make at least one guess.

358
00:16:20.360 --> 00:16:24.000
<v Speaker 1>And the book stress is testing trying different inputs.

359
00:16:23.559 --> 00:16:27.039
<v Speaker 2>Crucial test guessing too high, too low, the right number,

360
00:16:27.120 --> 00:16:30.879
<v Speaker 2>canceling the prompt, entering non numbers. See how it behaves.

361
00:16:30.960 --> 00:16:34.080
<v Speaker 1>To get the secret number, it uses math dot random.

362
00:16:34.200 --> 00:16:37.080
<v Speaker 2>Yeah, that gives a random decimal between zero and almost one.

363
00:16:36.960 --> 00:16:38.440
<v Speaker 1>So you need to scale it and make it a

364
00:16:38.440 --> 00:16:39.039
<v Speaker 1>whole number.

365
00:16:39.120 --> 00:16:42.279
<v Speaker 2>Right, You multiply by the maximum number you want example max,

366
00:16:42.399 --> 00:16:45.240
<v Speaker 2>usemath dot floor to top off the decimal part and

367
00:16:45.279 --> 00:16:47.759
<v Speaker 2>then add one to get range from one to max.

368
00:16:47.879 --> 00:16:50.519
<v Speaker 1>And the book puts this logic into a reusable.

369
00:16:50.000 --> 00:16:54.559
<v Speaker 2>Function exactly function random max retunemath dot floor math lot

370
00:16:54.679 --> 00:16:57.879
<v Speaker 2>ran plus one. Good practice to encapsulate logic like.

371
00:16:57.840 --> 00:17:00.919
<v Speaker 1>That, and it warns you could accidentally overwrite built in

372
00:17:01.000 --> 00:17:03.960
<v Speaker 1>functions if you name yours the same, like if you

373
00:17:04.039 --> 00:17:05.759
<v Speaker 1>called your function math dot random.

374
00:17:05.799 --> 00:17:09.000
<v Speaker 2>Well, not quite math dot random because math is an object.

375
00:17:09.160 --> 00:17:12.039
<v Speaker 2>But if there was a global random function, Yeah, naming

376
00:17:12.079 --> 00:17:14.359
<v Speaker 2>collations can happen, so choose descriptive names.

377
00:17:14.559 --> 00:17:17.440
<v Speaker 1>Okay, what about when the user clicks cancel in the

378
00:17:17.519 --> 00:17:21.480
<v Speaker 1>prompt it returns null. How does the game handle that gracefully?

379
00:17:21.759 --> 00:17:25.640
<v Speaker 2>Using the oer operator for default values like let guess

380
00:17:25.680 --> 00:17:26.559
<v Speaker 2>prompt guests zero.

381
00:17:26.880 --> 00:17:30.759
<v Speaker 1>Ah, So if prompt returns null, which is falsey, the

382
00:17:30.839 --> 00:17:33.359
<v Speaker 1>operator makes guests become zero instead.

383
00:17:33.000 --> 00:17:35.440
<v Speaker 2>Exactly prevents trying to compare null to a number later,

384
00:17:35.440 --> 00:17:36.599
<v Speaker 2>which would cause errors.

385
00:17:36.720 --> 00:17:40.799
<v Speaker 1>Nice trick. Then organizing code, putting random into a separate

386
00:17:40.880 --> 00:17:42.519
<v Speaker 1>library dot js file.

387
00:17:42.359 --> 00:17:44.960
<v Speaker 2>Yep, creating a function library for reusable code.

388
00:17:45.079 --> 00:17:47.799
<v Speaker 1>Good structure at comments, link it in the HTML with

389
00:17:47.839 --> 00:17:50.000
<v Speaker 1>scripts src scriptslibrary, dot.

390
00:17:49.920 --> 00:17:53.119
<v Speaker 2>Js and remember that cross origin attribute again if testing

391
00:17:53.119 --> 00:17:54.079
<v Speaker 2>locally right?

392
00:17:54.400 --> 00:18:00.519
<v Speaker 1>And the chapter ends by summing up comments, organization, loops, conditional.

393
00:18:00.359 --> 00:18:02.799
<v Speaker 2>Dialogues, all applied in a simple working game.

394
00:18:02.920 --> 00:18:03.240
<v Speaker 3>Okay.

395
00:18:03.359 --> 00:18:06.799
<v Speaker 1>Chapter three and moves into manipulating the web page itself,

396
00:18:07.119 --> 00:18:08.359
<v Speaker 1>the DOM.

397
00:18:07.960 --> 00:18:11.759
<v Speaker 2>The document object model super important. It's the browser's internal

398
00:18:11.799 --> 00:18:16.000
<v Speaker 2>representation of the HTML page like a structured tree, and JavaScript.

399
00:18:15.559 --> 00:18:18.640
<v Speaker 1>Can interact with this tree change things absolutely.

400
00:18:18.720 --> 00:18:21.240
<v Speaker 2>That's how you make pages dynamic. First step is finding

401
00:18:21.279 --> 00:18:22.480
<v Speaker 2>the elements you want to change.

402
00:18:22.480 --> 00:18:25.680
<v Speaker 1>We saw document dot. Query selector already finds the first

403
00:18:25.720 --> 00:18:27.160
<v Speaker 1>match for a CSS selector.

404
00:18:27.279 --> 00:18:31.680
<v Speaker 2>Yes, like query selector gets the first paragraph. Query selector

405
00:18:31.720 --> 00:18:35.240
<v Speaker 2>hashtag my ideald gets the element with that id, Query

406
00:18:35.279 --> 00:18:37.359
<v Speaker 2>selector dot my class gets the first element with that.

407
00:18:37.319 --> 00:18:38.559
<v Speaker 1>Class, and document dot.

408
00:18:38.640 --> 00:18:42.119
<v Speaker 2>Query selectoral that finds all matching elements and returns them

409
00:18:42.200 --> 00:18:43.839
<v Speaker 2>as a collection a notalist.

410
00:18:44.000 --> 00:18:46.279
<v Speaker 1>So query selectoral gets you all the paragraphs on the

411
00:18:46.279 --> 00:18:47.000
<v Speaker 1>page direct.

412
00:18:47.240 --> 00:18:50.759
<v Speaker 2>The book also mentions older methods like get element by eyed,

413
00:18:50.799 --> 00:18:52.920
<v Speaker 2>get elements by tag name, get elements by.

414
00:18:52.799 --> 00:18:55.559
<v Speaker 1>Class name, less used now, but might see them in

415
00:18:55.640 --> 00:18:56.359
<v Speaker 1>older code.

416
00:18:56.480 --> 00:19:00.200
<v Speaker 2>Pretty much. Query selector and query selectoral are generally or

417
00:19:00.200 --> 00:19:04.279
<v Speaker 2>flexible because they use CSS selectors. Notice the elements plural,

418
00:19:04.279 --> 00:19:06.519
<v Speaker 2>and the older ones often returned collections too.

419
00:19:06.720 --> 00:19:09.519
<v Speaker 1>Okay, So if qreer selectoral gives you a collection, how

420
00:19:09.559 --> 00:19:11.119
<v Speaker 1>do you work with all those elements?

421
00:19:11.400 --> 00:19:14.559
<v Speaker 2>Two main ways shown A standard for loop using the

422
00:19:15.000 --> 00:19:17.839
<v Speaker 2>length property of the noted list and accessing elements by

423
00:19:17.839 --> 00:19:19.720
<v Speaker 2>index number. My nodalisty for the.

424
00:19:19.640 --> 00:19:20.519
<v Speaker 1>Four each method.

425
00:19:20.680 --> 00:19:23.880
<v Speaker 2>Yeah, often cleaner my nod list dot four each that

426
00:19:24.000 --> 00:19:25.920
<v Speaker 2>uses an aero function as the callback. Okay.

427
00:19:26.079 --> 00:19:28.519
<v Speaker 1>Once you found an element, how do you change its content?

428
00:19:28.759 --> 00:19:32.720
<v Speaker 2>Two main properties dot text content and dot inner html.

429
00:19:32.799 --> 00:19:33.519
<v Speaker 1>What's the difference.

430
00:19:33.759 --> 00:19:37.720
<v Speaker 2>Text content gets or sets only the raw text inside

431
00:19:37.720 --> 00:19:41.599
<v Speaker 2>an element, ignoring any HTML tags, and inner HTML gets

432
00:19:41.839 --> 00:19:44.759
<v Speaker 2>or sets the entire HTML markup inside an element. If

433
00:19:44.759 --> 00:19:48.400
<v Speaker 2>you set it, the browser parses the string as HTML.

434
00:19:48.519 --> 00:19:51.559
<v Speaker 1>The book warns about security with intern HTML. Right if

435
00:19:51.559 --> 00:19:52.599
<v Speaker 1>the content comes from a.

436
00:19:52.599 --> 00:19:56.519
<v Speaker 2>User, big time. If a user can inject malicious HTML

437
00:19:56.640 --> 00:20:00.000
<v Speaker 2>or script tags via inner HTML, it's a security rip.

438
00:20:00.359 --> 00:20:04.039
<v Speaker 2>Cross site SCRIPTINGXSS. Use dots content whenever you just need

439
00:20:04.079 --> 00:20:04.839
<v Speaker 2>to change text.

440
00:20:04.880 --> 00:20:05.279
<v Speaker 3>Got it?

441
00:20:05.319 --> 00:20:08.000
<v Speaker 1>Intertext is also mentioned, but text content is preferred.

442
00:20:08.079 --> 00:20:11.160
<v Speaker 2>Yeah. Text content has more predictable behavior regarding spacing and

443
00:20:11.240 --> 00:20:11.839
<v Speaker 2>hidden elements.

444
00:20:11.920 --> 00:20:15.759
<v Speaker 1>Okay. What about changing attributes like the src of an

445
00:20:15.799 --> 00:20:17.599
<v Speaker 1>image or the hrafh of a link.

446
00:20:17.839 --> 00:20:20.319
<v Speaker 2>Often you can access them directly as properties of the

447
00:20:20.400 --> 00:20:23.119
<v Speaker 2>element object my image dot src e wal goals new

448
00:20:23.119 --> 00:20:26.960
<v Speaker 2>dot jpg, my link, dot HRAF equals newpage dot HTML.

449
00:20:27.279 --> 00:20:29.839
<v Speaker 1>Simple enough. What about CSS classes?

450
00:20:29.920 --> 00:20:33.160
<v Speaker 2>There's the older dot class name property setting. It replaces

451
00:20:33.160 --> 00:20:35.720
<v Speaker 2>all existing classes on the element with a new string.

452
00:20:35.480 --> 00:20:37.559
<v Speaker 1>You provide, which might not be what you want.

453
00:20:37.599 --> 00:20:40.319
<v Speaker 2>Usually not. The modern way is dot class list. It's

454
00:20:40.359 --> 00:20:42.440
<v Speaker 2>an object with methods like dot.

455
00:20:42.200 --> 00:20:45.440
<v Speaker 1>Ad new class, dot remove old class, dot toggle active

456
00:20:45.480 --> 00:20:46.279
<v Speaker 1>class exactly.

457
00:20:46.359 --> 00:20:48.319
<v Speaker 2>Toggle adds to the class if it's missing, removes it

458
00:20:48.359 --> 00:20:51.079
<v Speaker 2>if it's present, and dot contains some class checks if

459
00:20:51.119 --> 00:20:53.200
<v Speaker 2>the class exists. Much more precise control.

460
00:20:53.319 --> 00:20:55.920
<v Speaker 1>Why dot class name and class list. Why not do

461
00:20:56.039 --> 00:20:57.240
<v Speaker 1>dot class.

462
00:20:56.960 --> 00:21:00.319
<v Speaker 2>Because class is a reserved keyword in Javacript, its self

463
00:21:00.920 --> 00:21:03.720
<v Speaker 2>used for defining JavaScript classes, so they had to use

464
00:21:03.720 --> 00:21:06.079
<v Speaker 2>slightly different names for the HTML attribute.

465
00:21:06.119 --> 00:21:09.359
<v Speaker 1>Ah okay. Now what if you want to create entirely

466
00:21:09.440 --> 00:21:11.799
<v Speaker 1>new elements and put them on the page.

467
00:21:12.119 --> 00:21:16.680
<v Speaker 2>You use document dot create element. For instance, document dot

468
00:21:16.720 --> 00:21:20.640
<v Speaker 2>create element creates a new carerograph element in memory.

469
00:21:20.680 --> 00:21:22.519
<v Speaker 1>It's not on the page yet not yet.

470
00:21:22.559 --> 00:21:25.440
<v Speaker 2>Then need to insert it somewhere. The book shows inserted

471
00:21:25.519 --> 00:21:28.279
<v Speaker 2>Jason element position new element.

472
00:21:28.079 --> 00:21:30.640
<v Speaker 1>And the position can be like before begin, after begin,

473
00:21:30.759 --> 00:21:33.559
<v Speaker 1>before and after end relative to an existing element.

474
00:21:33.680 --> 00:21:36.160
<v Speaker 2>Correct gives you fine grain control over where the new

475
00:21:36.200 --> 00:21:36.759
<v Speaker 2>element goes.

476
00:21:36.839 --> 00:21:38.599
<v Speaker 1>There's also inserted Jason HTML.

477
00:21:38.759 --> 00:21:41.319
<v Speaker 2>Yeah, that's a shortcut. You give it the position and

478
00:21:41.400 --> 00:21:44.680
<v Speaker 2>an HTML string. It purses the string and inserts the

479
00:21:44.720 --> 00:21:48.799
<v Speaker 2>resulting elements directly. Convenient, but you don't get a direct

480
00:21:48.799 --> 00:21:51.440
<v Speaker 2>reference to the newly created elements like you do with

481
00:21:51.519 --> 00:21:52.160
<v Speaker 2>create element.

482
00:21:52.400 --> 00:21:55.319
<v Speaker 1>Key takeaway. Creating an element isn't enough. You have to

483
00:21:55.359 --> 00:21:57.400
<v Speaker 1>explicitly add it to the dom to make it.

484
00:21:57.440 --> 00:21:58.759
<v Speaker 2>Visible absolutely from the metal.

485
00:21:58.880 --> 00:21:59.279
<v Speaker 3>All right.

486
00:21:59.759 --> 00:22:02.640
<v Speaker 1>Four applies this dom stuff to build a slide show.

487
00:22:02.960 --> 00:22:07.079
<v Speaker 2>Yeah. A practical example basic HTML, a DIFP container, maybe

488
00:22:07.119 --> 00:22:10.079
<v Speaker 2>id slides and emptymg tag inside.

489
00:22:09.839 --> 00:22:13.200
<v Speaker 1>JavaScript links the library dot js from before and a

490
00:22:13.200 --> 00:22:15.079
<v Speaker 1>new slideshow dot js.

491
00:22:14.720 --> 00:22:18.000
<v Speaker 2>And slideshow dot gs has the defer attribute on its script.

492
00:22:17.680 --> 00:22:20.920
<v Speaker 1>Deech, meaning it runs after the HTML is parsed. Library

493
00:22:21.000 --> 00:22:22.640
<v Speaker 1>dot js doesn't have differ.

494
00:22:22.599 --> 00:22:25.759
<v Speaker 2>Right, implying the library needs to be ready earlier. Maybe

495
00:22:25.759 --> 00:22:28.599
<v Speaker 2>because slideshow dot j as depends on functions in it. Yeah,

496
00:22:28.599 --> 00:22:30.440
<v Speaker 2>and again that cross origin note For.

497
00:22:30.400 --> 00:22:33.799
<v Speaker 1>Local testing inside slideshow dot js, first step is grabbing

498
00:22:33.839 --> 00:22:36.920
<v Speaker 1>the container dive and the MG element using query.

499
00:22:36.640 --> 00:22:40.359
<v Speaker 2>Selector standard practice get references to the elements you'll manipulate.

500
00:22:39.960 --> 00:22:42.440
<v Speaker 1>Then timing, set time out and set interval.

501
00:22:42.480 --> 00:22:45.480
<v Speaker 2>Setting out my function five thousand runs my function once

502
00:22:45.559 --> 00:22:47.200
<v Speaker 2>after five seconds five thousand doll.

503
00:22:47.119 --> 00:22:48.039
<v Speaker 3>Second, and set interval.

504
00:22:48.119 --> 00:22:50.759
<v Speaker 1>My function two thousand runs my function repeatedly every two

505
00:22:50.839 --> 00:22:51.759
<v Speaker 1>seconds exactly.

506
00:22:51.799 --> 00:22:54.200
<v Speaker 2>Set interval is key for the automatic slide changing.

507
00:22:54.359 --> 00:22:58.279
<v Speaker 1>So the basic slideshow logic have an array of image

508
00:22:58.279 --> 00:23:00.799
<v Speaker 1>file names. You set interval to call a function every

509
00:23:00.799 --> 00:23:03.920
<v Speaker 1>few seconds. That function updates the src attribute of the

510
00:23:03.920 --> 00:23:06.599
<v Speaker 1>imag tag to the next file name in the array.

511
00:23:06.920 --> 00:23:09.759
<v Speaker 2>Right, you need a variable, say slide number, to keep

512
00:23:09.799 --> 00:23:12.960
<v Speaker 2>track of which image index you're currently on and increment

513
00:23:13.039 --> 00:23:14.880
<v Speaker 2>it each time. Looping back to zero.

514
00:23:14.759 --> 00:23:15.880
<v Speaker 3>At the end makes sense.

515
00:23:16.160 --> 00:23:18.920
<v Speaker 1>The book then suggests making the delay configurable.

516
00:23:19.079 --> 00:23:21.920
<v Speaker 2>Yeah, adding a delay parameter to the function that starts

517
00:23:21.920 --> 00:23:26.240
<v Speaker 2>the slide show like does slides three thousand. Give it

518
00:23:26.279 --> 00:23:28.920
<v Speaker 2>a default value too, So old code still works good

519
00:23:28.960 --> 00:23:30.240
<v Speaker 2>for backward compatibility.

520
00:23:30.400 --> 00:23:32.839
<v Speaker 1>How do you stop and start it? Like a pause button?

521
00:23:33.359 --> 00:23:36.279
<v Speaker 2>Set interval returns a unique ID number. You store that

522
00:23:36.359 --> 00:23:38.799
<v Speaker 2>ID in a variable. Okay, to stop it, you call

523
00:23:38.880 --> 00:23:40.599
<v Speaker 2>clear interval the stored ID.

524
00:23:40.960 --> 00:23:43.440
<v Speaker 1>Ah, So a toggle function could check if the ID

525
00:23:43.559 --> 00:23:47.119
<v Speaker 1>variable holds a number, meaning it's running. If yes, call

526
00:23:47.200 --> 00:23:49.839
<v Speaker 1>clear interval and set the variable to null exactly.

527
00:23:50.000 --> 00:23:52.400
<v Speaker 2>And if the variables null it means it's starved, so

528
00:23:52.440 --> 00:23:54.839
<v Speaker 2>you call set interval again to start it and store

529
00:23:54.920 --> 00:23:55.400
<v Speaker 2>the new ID.

530
00:23:55.680 --> 00:23:57.759
<v Speaker 1>And you'd hook this toggle function up to a button

531
00:23:57.920 --> 00:24:01.200
<v Speaker 1>using either dot on click or event listener click.

532
00:24:01.039 --> 00:24:04.400
<v Speaker 2>Tuggle sisely ad. Event listener is generally more flexible if

533
00:24:04.440 --> 00:24:06.799
<v Speaker 2>you need multiple listeners on the same element to make.

534
00:24:06.680 --> 00:24:11.799
<v Speaker 1>It feel smoother. The book suggests prefetching the next image yeah.

535
00:24:11.559 --> 00:24:14.440
<v Speaker 2>While when image is showing, you create a new image

536
00:24:14.680 --> 00:24:16.680
<v Speaker 2>object in JavaScript in the background like.

537
00:24:16.720 --> 00:24:18.599
<v Speaker 1>Let next image in a new image yep.

538
00:24:19.119 --> 00:24:22.759
<v Speaker 2>Then set it's src to the next slides url nextimage

539
00:24:22.759 --> 00:24:26.440
<v Speaker 2>dot src images next line number. This tells the browser

540
00:24:26.480 --> 00:24:27.400
<v Speaker 2>to start downloading it.

541
00:24:27.480 --> 00:24:30.000
<v Speaker 1>So when set interval fires and you actually change the

542
00:24:30.039 --> 00:24:33.920
<v Speaker 1>main images src, the image data is likely already cashed.

543
00:24:33.640 --> 00:24:38.519
<v Speaker 2>Hopefully leading to a faster, smoother transition. Improves perceived performance. Cool.

544
00:24:38.839 --> 00:24:40.400
<v Speaker 1>What about keyboard control?

545
00:24:40.640 --> 00:24:43.799
<v Speaker 2>You can listen for keypresses on the whole document document

546
00:24:43.839 --> 00:24:46.759
<v Speaker 2>dot on keypress sec event.

547
00:24:46.599 --> 00:24:49.359
<v Speaker 1>And the event object tells you which key is pressed yes.

548
00:24:49.559 --> 00:24:52.359
<v Speaker 2>The event dot keep property is the modern reliable way

549
00:24:52.559 --> 00:24:56.000
<v Speaker 2>it gives you strings like body for spacebar, aerolaft, biahm,

550
00:24:56.000 --> 00:24:56.480
<v Speaker 2>et cetera.

551
00:24:56.799 --> 00:24:59.480
<v Speaker 1>And you might use event dot prevent default, like to

552
00:24:59.599 --> 00:25:01.720
<v Speaker 1>stop a space bar from scrolling the page if you're

553
00:25:01.799 --> 00:25:02.839
<v Speaker 1>using it to pause play.

554
00:25:02.799 --> 00:25:06.000
<v Speaker 2>Exactly take control away from the browser's default action for that.

555
00:25:06.119 --> 00:25:10.240
<v Speaker 2>Key errol functions work nicely here too, Document dot onkeypress

556
00:25:10.279 --> 00:25:11.960
<v Speaker 2>event to make it more informative.

557
00:25:12.000 --> 00:25:12.839
<v Speaker 1>Add captions.

558
00:25:13.039 --> 00:25:15.359
<v Speaker 2>Yeah, change the images array instead of just file names,

559
00:25:15.359 --> 00:25:18.200
<v Speaker 2>making an array of objects. Each object has image dot

560
00:25:18.319 --> 00:25:21.079
<v Speaker 2>jpg caption a lovely photo.

561
00:25:21.240 --> 00:25:23.400
<v Speaker 1>So when you change the image, you update the mg

562
00:25:23.519 --> 00:25:26.440
<v Speaker 1>dot src, but also find a caption element like p

563
00:25:26.599 --> 00:25:28.799
<v Speaker 1>tag and set its dot text content.

564
00:25:28.480 --> 00:25:31.359
<v Speaker 2>Perfect, and also update the img dot alt and maybe

565
00:25:31.440 --> 00:25:34.319
<v Speaker 2>mg dot title attributes for accessibility and tooltips.

566
00:25:34.359 --> 00:25:38.079
<v Speaker 1>Okay, so Chapter four summary timing, set time out, set interval,

567
00:25:38.119 --> 00:25:42.599
<v Speaker 1>controlling intervals, clearinterval, event listeners on click at, event listener

568
00:25:42.640 --> 00:25:46.200
<v Speaker 1>on keypress, and enhancing with prefetching and captions.

569
00:25:45.839 --> 00:25:48.440
<v Speaker 2>Putting dominipulation to work with timing and user interaction.

570
00:25:48.599 --> 00:25:51.400
<v Speaker 1>Chapter seven then shifts focus a bit, looking specifically at

571
00:25:51.440 --> 00:25:53.960
<v Speaker 1>interacting with CSS and event listeners more deeply.

572
00:25:54.160 --> 00:25:59.039
<v Speaker 2>Right starts with a quick reminder CSS controls the visual appearance, colors, sponts,

573
00:25:59.119 --> 00:26:00.079
<v Speaker 2>layout visibility, the.

574
00:26:00.240 --> 00:26:03.359
<v Speaker 1>Animations, and it mentions that CSS handles a lot more

575
00:26:03.400 --> 00:26:05.920
<v Speaker 1>visual stuff now than it used to, less need for

576
00:26:06.000 --> 00:26:07.960
<v Speaker 1>JavaScript for symple effects.

577
00:26:07.519 --> 00:26:12.200
<v Speaker 2>Definitely things like hover effects, basic animations, often pure CSS now.

578
00:26:12.559 --> 00:26:16.400
<v Speaker 2>The chapter revisits how CSS gets included external link tags,

579
00:26:16.440 --> 00:26:19.680
<v Speaker 2>internal style tags, or inline style attributes.

580
00:26:19.279 --> 00:26:22.119
<v Speaker 1>Inline styles being generally less.

581
00:26:21.920 --> 00:26:26.559
<v Speaker 2>Manageable usually yeah, harder to maintain consistency. It also teases

582
00:26:26.799 --> 00:26:29.960
<v Speaker 2>creating style tags with JavaScript itself, which comes later.

583
00:26:30.200 --> 00:26:34.119
<v Speaker 1>Event listeners again the bridge between user actions and JavaScript.

584
00:26:34.160 --> 00:26:35.839
<v Speaker 1>Mentions event bubbling.

585
00:26:35.559 --> 00:26:38.759
<v Speaker 2>Yeah, the idea that an event like a click starts

586
00:26:38.759 --> 00:26:42.960
<v Speaker 2>with the specific element clicked the target and then bubbles

587
00:26:43.039 --> 00:26:45.640
<v Speaker 2>up the dom tree to its parent, its parent's parent,

588
00:26:45.920 --> 00:26:47.920
<v Speaker 2>and so on up to the document.

589
00:26:47.599 --> 00:26:50.640
<v Speaker 1>And on click and default AD event listener listen during

590
00:26:50.680 --> 00:26:51.680
<v Speaker 1>this bubbling phase.

591
00:26:51.839 --> 00:26:54.960
<v Speaker 2>Correct. There's also a capture phase where the event travels

592
00:26:55.000 --> 00:26:57.720
<v Speaker 2>down the tree first, but bubbling is more commonly used.

593
00:26:58.039 --> 00:27:00.400
<v Speaker 2>You can listen in capture phase with AD event listener

594
00:27:00.440 --> 00:27:01.440
<v Speaker 2>type listener.

595
00:27:01.160 --> 00:27:04.559
<v Speaker 1>True okay, and clarifies event dot current target versus event.

596
00:27:04.359 --> 00:27:07.240
<v Speaker 2>Dot target crucial difference. Event dot target is the element

597
00:27:07.240 --> 00:27:11.079
<v Speaker 2>where the event originated ug The specific thing clicked event

598
00:27:11.119 --> 00:27:13.519
<v Speaker 2>dot current target is the element the listener is actually

599
00:27:13.519 --> 00:27:15.799
<v Speaker 2>attached to, which might be a parent element if you're

600
00:27:15.880 --> 00:27:17.559
<v Speaker 2>using event delegation. Got it?

601
00:27:18.000 --> 00:27:20.839
<v Speaker 1>How can JavaScript change CSS directly.

602
00:27:20.720 --> 00:27:24.519
<v Speaker 2>Through the element's style property my element dot style dot color.

603
00:27:24.720 --> 00:27:27.440
<v Speaker 2>It kills red my element dot style dot margin top

604
00:27:27.640 --> 00:27:28.640
<v Speaker 2>equals ten px.

605
00:27:28.839 --> 00:27:32.799
<v Speaker 1>So you access CSS properties as JavaScript object properties. What

606
00:27:32.880 --> 00:27:35.279
<v Speaker 1>about properties with hyphens like background color.

607
00:27:35.440 --> 00:27:37.960
<v Speaker 2>You can't use dot notation because the hyphen isn't valid

608
00:27:37.960 --> 00:27:39.279
<v Speaker 2>and JavaScript identifies there.

609
00:27:39.359 --> 00:27:39.680
<v Speaker 1>Yeah.

610
00:27:39.720 --> 00:27:43.119
<v Speaker 2>Two ways, either use CamelCase my element dot style dot

611
00:27:43.119 --> 00:27:47.440
<v Speaker 2>background color equals blue, or bracket notation my element dot

612
00:27:47.440 --> 00:27:49.200
<v Speaker 2>style background color equals blue.

613
00:27:49.400 --> 00:27:52.839
<v Speaker 1>CamelCase seems common, but the more recommended way is often

614
00:27:52.960 --> 00:27:55.559
<v Speaker 1>using classes right via dot class list.

615
00:27:55.720 --> 00:27:58.599
<v Speaker 2>Generally, yes, it keeps your styling rules neatly in your

616
00:27:58.640 --> 00:28:01.759
<v Speaker 2>CSS files. Script just toggles classes on and.

617
00:28:01.640 --> 00:28:04.160
<v Speaker 1>Off like the example. Add a listener to an H

618
00:28:04.240 --> 00:28:06.960
<v Speaker 1>one on click event dot target dot class.

619
00:28:06.680 --> 00:28:08.480
<v Speaker 3>List dot toggle different color.

620
00:28:08.279 --> 00:28:11.359
<v Speaker 1>And you'd have a CSS rule like H one dot differentcolor,

621
00:28:11.400 --> 00:28:14.200
<v Speaker 1>dot blue or whatever. Much cleaner separation of concerns.

622
00:28:14.400 --> 00:28:17.319
<v Speaker 2>Can you remove listeners to remove event listener?

623
00:28:17.519 --> 00:28:19.720
<v Speaker 1>Yes, but you need to pass the exact same function

624
00:28:19.799 --> 00:28:21.640
<v Speaker 1>reference that you used with ad event listener.

625
00:28:21.759 --> 00:28:24.160
<v Speaker 2>So if you use anonymous function like element dot ad

626
00:28:24.160 --> 00:28:27.000
<v Speaker 2>event listener, you can't easily remove it. Not easily, you

627
00:28:27.079 --> 00:28:30.240
<v Speaker 2>usually need to define the listener as a separate named function.

628
00:28:30.359 --> 00:28:33.799
<v Speaker 2>First function handle click element dot ad event listener look

629
00:28:33.799 --> 00:28:36.319
<v Speaker 2>at a handleclick, Then you can do element dot remove

630
00:28:36.319 --> 00:28:38.200
<v Speaker 2>event listener clickcandleclick okay.

631
00:28:38.599 --> 00:28:40.799
<v Speaker 1>CSS transitions for smooth changes.

632
00:28:41.000 --> 00:28:44.079
<v Speaker 2>Yeah. Instead of style snapping instantly, they animate over time.

633
00:28:44.480 --> 00:28:48.000
<v Speaker 2>You define the transition in CSS which property how long

634
00:28:48.039 --> 00:28:51.799
<v Speaker 2>it takes duration, maybe a timing function like ease in out.

635
00:28:51.920 --> 00:28:54.200
<v Speaker 1>Then JavaScript just changes the property value.

636
00:28:54.319 --> 00:28:57.319
<v Speaker 2>Yep. If you have transition background color point five's ease

637
00:28:57.759 --> 00:29:00.960
<v Speaker 2>on an element and JavaScript changes element dot style dot

638
00:29:00.960 --> 00:29:04.000
<v Speaker 2>background color, the browser animates the color change over half

639
00:29:04.000 --> 00:29:04.319
<v Speaker 2>a second.

640
00:29:04.400 --> 00:29:05.880
<v Speaker 1>Can you set the transition itself?

641
00:29:05.920 --> 00:29:06.640
<v Speaker 3>With JavaScript?

642
00:29:06.799 --> 00:29:09.480
<v Speaker 2>You can set element dot style dot transition of course

643
00:29:09.519 --> 00:29:13.759
<v Speaker 2>opacity ones linear and then change element dot style dot opacity.

644
00:29:13.880 --> 00:29:17.400
<v Speaker 1>What if you change a property multiple times quickly before

645
00:29:17.440 --> 00:29:19.000
<v Speaker 1>a transition finishes, it.

646
00:29:18.920 --> 00:29:22.559
<v Speaker 2>Can get complicated the browser might skip intermediate steps. The

647
00:29:22.559 --> 00:29:24.440
<v Speaker 2>book introduces the transition.

648
00:29:24.079 --> 00:29:25.880
<v Speaker 1>Event with fires when when a.

649
00:29:25.839 --> 00:29:29.400
<v Speaker 2>CSS transition completes, you can listen for it element dot

650
00:29:29.400 --> 00:29:32.519
<v Speaker 2>ad event list function to run code after the animation

651
00:29:32.599 --> 00:29:33.000
<v Speaker 2>is done.

652
00:29:33.240 --> 00:29:37.359
<v Speaker 1>Useful for chaining animations or cleaning up. Finally, creating CSS

653
00:29:37.440 --> 00:29:39.640
<v Speaker 1>rules dynamically advanced stuff.

654
00:29:40.000 --> 00:29:43.240
<v Speaker 2>You can create a style element in JavaScript let style

655
00:29:43.400 --> 00:29:45.839
<v Speaker 2>l document dot, create element style, depend it to the

656
00:29:45.880 --> 00:29:49.119
<v Speaker 2>head yep document dot head dot a pin child style call.

657
00:29:49.519 --> 00:29:52.240
<v Speaker 2>Then you can access its sheet property style l dot

658
00:29:52.279 --> 00:29:55.200
<v Speaker 2>sheet and use methods like insert rule dot dynamic class

659
00:29:55.240 --> 00:29:58.440
<v Speaker 2>coolor dot green to add CSS rules as strings.

660
00:29:58.519 --> 00:30:02.200
<v Speaker 1>Wow. Okay, so programmatic control over styles.

661
00:30:01.880 --> 00:30:05.240
<v Speaker 2>Powerful, but use with care. Usually managing classes is simpler.

662
00:30:05.440 --> 00:30:08.559
<v Speaker 1>Chapter eight focuses on showing and hiding content. Uses an

663
00:30:08.559 --> 00:30:11.400
<v Speaker 1>example page showing hiding dot HTML.

664
00:30:11.119 --> 00:30:13.559
<v Speaker 2>Right with sections initially hidden by CSS.

665
00:30:13.599 --> 00:30:17.000
<v Speaker 1>How do CSS hide things the display.

666
00:30:16.519 --> 00:30:19.759
<v Speaker 2>Proper displayed none. It's the common way. It completely removes

667
00:30:19.759 --> 00:30:20.519
<v Speaker 2>the element from.

668
00:30:20.359 --> 00:30:22.960
<v Speaker 1>The layout, and to show it again, display dot block

669
00:30:23.200 --> 00:30:26.359
<v Speaker 1>for block elements or display dot inline exactly.

670
00:30:26.599 --> 00:30:29.559
<v Speaker 2>The example uses CSS rules like hide the div right

671
00:30:29.599 --> 00:30:31.920
<v Speaker 2>after an H two, but if the H two also

672
00:30:31.960 --> 00:30:34.880
<v Speaker 2>has the class open, then show the following div using

673
00:30:34.880 --> 00:30:35.880
<v Speaker 2>display dot block.

674
00:30:36.119 --> 00:30:38.839
<v Speaker 1>So JavaScript's job is just to toggle that open class

675
00:30:38.920 --> 00:30:39.839
<v Speaker 1>on the H two when it's.

676
00:30:39.759 --> 00:30:43.240
<v Speaker 2>Click precisely get all the h twos with query selectoral,

677
00:30:43.519 --> 00:30:46.839
<v Speaker 2>add a click listener to each inside the listener dot event,

678
00:30:46.880 --> 00:30:50.440
<v Speaker 2>dot target, dot class list dot toggle open, Simple and effective.

679
00:30:50.680 --> 00:30:53.640
<v Speaker 1>The chapter then detours briefly into variable hoisting.

680
00:30:53.680 --> 00:30:54.400
<v Speaker 3>Again just a.

681
00:30:54.359 --> 00:30:59.119
<v Speaker 2>Reminder, var declarations and function declarations are hoisted conceptually moved up,

682
00:30:59.440 --> 00:31:01.160
<v Speaker 2>let and com okay.

683
00:31:01.319 --> 00:31:05.200
<v Speaker 1>Then a more complex example highlighting nested lists inside an

684
00:31:05.200 --> 00:31:05.720
<v Speaker 1>open section.

685
00:31:05.920 --> 00:31:08.319
<v Speaker 2>Yeah, if you click an H two to open its div,

686
00:31:08.559 --> 00:31:11.079
<v Speaker 2>maybe you also want any o inside the parent lie

687
00:31:11.079 --> 00:31:12.880
<v Speaker 2>of that div. To get a highlight class.

688
00:31:12.640 --> 00:31:16.079
<v Speaker 1>Requires navigating the dom tree using parent note to go up,

689
00:31:16.279 --> 00:31:18.680
<v Speaker 1>then query selector to find the full yep.

690
00:31:18.839 --> 00:31:21.799
<v Speaker 2>Bit a dom traversal. Then toggle the highlight class on

691
00:31:21.839 --> 00:31:22.400
<v Speaker 2>the nested doll.

692
00:31:22.519 --> 00:31:25.359
<v Speaker 1>And it addresses fixing the logic so highlighting is removed

693
00:31:25.359 --> 00:31:27.079
<v Speaker 1>correctly when the section is closed.

694
00:31:26.839 --> 00:31:29.200
<v Speaker 2>Right, making sure the state is managed properly on toggle.

695
00:31:29.440 --> 00:31:33.400
<v Speaker 1>Then it suggests putting this toggle logic into a reusable

696
00:31:33.480 --> 00:31:36.039
<v Speaker 1>toggless function in library dot JS.

697
00:31:36.079 --> 00:31:38.480
<v Speaker 2>Good practice abstracting common patterns.

698
00:31:38.599 --> 00:31:42.480
<v Speaker 1>The chapter finishes by enhancing radio buttons, making them de selectable.

699
00:31:42.599 --> 00:31:44.960
<v Speaker 2>Yeah, normally you can only switch radio buttons, not turn

700
00:31:45.000 --> 00:31:45.759
<v Speaker 2>the current one off.

701
00:31:45.960 --> 00:31:47.480
<v Speaker 1>How do you make it de selectable.

702
00:31:47.759 --> 00:31:51.039
<v Speaker 2>Get all the radio buttons in the group agmform dot

703
00:31:51.079 --> 00:31:54.240
<v Speaker 2>elements group name, add a click listener to each one.

704
00:31:54.359 --> 00:31:55.960
<v Speaker 1>Inside the listener, check of.

705
00:31:55.960 --> 00:31:59.279
<v Speaker 2>The button you just clicked event dot target was already

706
00:31:59.359 --> 00:32:03.039
<v Speaker 2>checked before the click event fully processed. This is slightly tricky.

707
00:32:03.400 --> 00:32:05.839
<v Speaker 2>Might need to store previous date briefly or check within

708
00:32:05.880 --> 00:32:09.319
<v Speaker 2>the listener carefully if it was already checked. Set its

709
00:32:09.440 --> 00:32:11.039
<v Speaker 2>jecked property to false.

710
00:32:11.480 --> 00:32:15.640
<v Speaker 1>Ah okay allows toggling off, and this logic also gets

711
00:32:15.720 --> 00:32:18.680
<v Speaker 1>moved to a reusable de selectable radio function in the

712
00:32:18.720 --> 00:32:19.599
<v Speaker 1>library YEP.

713
00:32:19.920 --> 00:32:24.359
<v Speaker 2>The chapter summary mentions using CSS display, but also maybe

714
00:32:24.440 --> 00:32:28.440
<v Speaker 2>max height or opacity for transitions and JavaScript class toggling

715
00:32:28.480 --> 00:32:30.119
<v Speaker 2>for show heid effects cool.

716
00:32:30.400 --> 00:32:34.279
<v Speaker 1>Chapter nine another big project a light box gallery wreck.

717
00:32:34.119 --> 00:32:36.599
<v Speaker 2>A thumbnail see a larger version in an overlay.

718
00:32:36.359 --> 00:32:40.200
<v Speaker 1>Basic htmail gallery of thumbnail images, probably wrapped in anchor

719
00:32:40.359 --> 00:32:42.920
<v Speaker 1>a tags. The A graph of the anchor points to

720
00:32:42.960 --> 00:32:44.720
<v Speaker 1>the large image URL and.

721
00:32:44.680 --> 00:32:47.960
<v Speaker 2>Maybe some CSS to style the thumbnails like desaturate them.

722
00:32:48.000 --> 00:32:51.359
<v Speaker 1>Initially, the JavaScript starts with a dawn light box function.

723
00:32:51.920 --> 00:32:55.400
<v Speaker 1>First step find all those thumbnail anchor tags using query

724
00:32:55.440 --> 00:32:56.440
<v Speaker 1>selectorol YEP.

725
00:32:56.680 --> 00:33:00.200
<v Speaker 2>Then dynamically create the light box elements in Java.

726
00:33:00.039 --> 00:33:03.480
<v Speaker 1>Script a background div hashtag, light box background to dim

727
00:33:03.480 --> 00:33:04.240
<v Speaker 1>the page.

728
00:33:04.119 --> 00:33:06.960
<v Speaker 2>Right and a container. Maybe have a figure eyed light

729
00:33:07.000 --> 00:33:09.519
<v Speaker 2>box to hold a big MG, and maybe.

730
00:33:09.279 --> 00:33:13.240
<v Speaker 1>A caption u CSS to style these fixed position centered

731
00:33:13.359 --> 00:33:15.240
<v Speaker 1>semi transparent background exactly.

732
00:33:15.279 --> 00:33:17.519
<v Speaker 2>Then appen these new elements to the document body.

733
00:33:17.599 --> 00:33:19.559
<v Speaker 1>How does clicking a thumbnail trigger it?

734
00:33:19.759 --> 00:33:22.880
<v Speaker 2>Attach a click listener to each thumbnail anger inside the.

735
00:33:22.839 --> 00:33:26.160
<v Speaker 1>Listener first event dot, prevent default to stop the link

736
00:33:26.240 --> 00:33:27.440
<v Speaker 1>navigating crucial.

737
00:33:27.759 --> 00:33:30.480
<v Speaker 2>Then get the ape ref from the clicked anchor, which

738
00:33:30.519 --> 00:33:32.079
<v Speaker 2>is the URL of the large image.

739
00:33:32.119 --> 00:33:34.960
<v Speaker 1>Set the ASRC of the light box's MG element.

740
00:33:34.680 --> 00:33:35.599
<v Speaker 3>To that r right.

741
00:33:35.680 --> 00:33:38.640
<v Speaker 2>Maybe set the alt attribute to Then make the lightbox

742
00:33:38.680 --> 00:33:40.960
<v Speaker 2>visible by setting the display style of the background and

743
00:33:41.000 --> 00:33:41.960
<v Speaker 2>the container to block.

744
00:33:42.160 --> 00:33:43.000
<v Speaker 1>How do you close it?

745
00:33:43.079 --> 00:33:46.240
<v Speaker 2>Add a click listener to the background div when clicked,

746
00:33:46.480 --> 00:33:49.039
<v Speaker 2>set the display of the background and container back to none.

747
00:33:49.240 --> 00:33:54.079
<v Speaker 1>Keyboard navigation, escape key to clothes, arrow keys to go next,

748
00:33:54.119 --> 00:33:55.319
<v Speaker 1>previous listen for.

749
00:33:55.319 --> 00:33:58.119
<v Speaker 2>Key up on the document, use event dot key.

750
00:33:58.359 --> 00:34:02.200
<v Speaker 1>In a switch statement case escape dot hide, light box,

751
00:34:02.519 --> 00:34:06.640
<v Speaker 1>break case arrow left, show previous image, break.

752
00:34:06.960 --> 00:34:10.039
<v Speaker 2>Like that exactly. Home key for first image and key

753
00:34:10.079 --> 00:34:11.199
<v Speaker 2>for last How does.

754
00:34:11.079 --> 00:34:13.559
<v Speaker 1>Show previous image. Work needs refactoring.

755
00:34:13.639 --> 00:34:16.079
<v Speaker 2>Yeah, The book suggests storing a reference to the currently

756
00:34:16.159 --> 00:34:19.519
<v Speaker 2>shown thumbnails anchor tag. Let's call it current anchor okay,

757
00:34:19.719 --> 00:34:22.320
<v Speaker 2>and create a separate load image anchor to show function.

758
00:34:22.800 --> 00:34:25.559
<v Speaker 2>This function takes an anchor element, gets its ATRAF, sets

759
00:34:25.599 --> 00:34:28.000
<v Speaker 2>the light box image src, maybe updates.

760
00:34:27.639 --> 00:34:30.079
<v Speaker 1>A caption so the errorkey listeners just figure out the

761
00:34:30.119 --> 00:34:32.559
<v Speaker 1>next or previous anchor element in the dom.

762
00:34:32.519 --> 00:34:34.840
<v Speaker 2>Using things like current anchor dot parent, noode dot, previous

763
00:34:34.840 --> 00:34:37.679
<v Speaker 2>elements sibling, or next element sibling to find the sibling

764
00:34:37.719 --> 00:34:40.880
<v Speaker 2>a's parent, say maybe, then the next prey sibling then

765
00:34:40.920 --> 00:34:41.639
<v Speaker 2>it's child A.

766
00:34:41.760 --> 00:34:44.239
<v Speaker 1>And then call load image with that new anchor element.

767
00:34:44.559 --> 00:34:47.280
<v Speaker 2>Precisely need to handle wrapping around at the start ten

768
00:34:47.360 --> 00:34:48.039
<v Speaker 2>of the gallery. Two.

769
00:34:48.360 --> 00:34:52.159
<v Speaker 1>What about ensuring the image is loaded before showing mg dot.

770
00:34:51.920 --> 00:34:55.159
<v Speaker 2>Onload Yes inside load image before setting the light box

771
00:34:55.199 --> 00:34:58.239
<v Speaker 2>displayed a block, You could set the mmg dot src

772
00:34:58.639 --> 00:35:01.719
<v Speaker 2>that attach an onload listener to the image inside the

773
00:35:01.719 --> 00:35:05.280
<v Speaker 2>onload handler. You then make the light box visible prevents

774
00:35:05.320 --> 00:35:06.519
<v Speaker 2>showing an empty box.

775
00:35:06.639 --> 00:35:09.480
<v Speaker 1>Adding fade effects CSS transitions on opacity.

776
00:35:09.599 --> 00:35:12.440
<v Speaker 2>Yeah, add a CSS transition rule for opacity to the

777
00:35:12.480 --> 00:35:14.000
<v Speaker 2>light box container. Or image.

778
00:35:14.119 --> 00:35:16.880
<v Speaker 1>Then in JavaScript, when showing, after setting the iss and

779
00:35:16.960 --> 00:35:20.199
<v Speaker 1>maybe inside the onload, add a class like open that

780
00:35:20.239 --> 00:35:21.440
<v Speaker 1>sets opacity one.

781
00:35:21.639 --> 00:35:24.280
<v Speaker 2>Right, and when hiding, maybe add a closed class that

782
00:35:24.320 --> 00:35:27.360
<v Speaker 2>sets opacity zero. Wait for the transition using transition door,

783
00:35:27.440 --> 00:35:30.199
<v Speaker 2>set time out, and then set display none.

784
00:35:30.320 --> 00:35:33.480
<v Speaker 1>Nice. The chapter also revisits the slide show to add

785
00:35:33.480 --> 00:35:34.239
<v Speaker 1>a cross fade.

786
00:35:34.280 --> 00:35:37.320
<v Speaker 2>Briefly, yeah, more complex. Setup two mm and tags one

787
00:35:37.320 --> 00:35:40.719
<v Speaker 2>on top of the other. Hashtag cross fade absolutely positioned

788
00:35:40.760 --> 00:35:42.679
<v Speaker 2>inside a relative container.

789
00:35:42.400 --> 00:35:44.760
<v Speaker 1>CSS transition on the opacity of the top image.

790
00:35:44.760 --> 00:35:46.800
<v Speaker 3>Hashtag crossfait right, triggered.

791
00:35:46.440 --> 00:35:50.000
<v Speaker 2>By a class, say fading, which sets opacity the JavaScript logic,

792
00:35:50.119 --> 00:35:54.320
<v Speaker 2>copy the current images src to hashtag crossfade, make sure

793
00:35:54.400 --> 00:35:57.760
<v Speaker 2>hashtag cry sat opacity is one, then add the fading

794
00:35:57.800 --> 00:35:59.880
<v Speaker 2>class to start the fade out of the top image.

795
00:36:00.079 --> 00:36:02.079
<v Speaker 1>Okay, revealing the main image underneath.

796
00:36:02.159 --> 00:36:05.880
<v Speaker 2>Well almost. After adding fading, you wait for the transition

797
00:36:05.960 --> 00:36:09.519
<v Speaker 2>duration for example using set time out. Then you update

798
00:36:09.519 --> 00:36:12.559
<v Speaker 2>the main underlying mag tag with the next slide's src,

799
00:36:13.280 --> 00:36:16.320
<v Speaker 2>and finally reset the hashtag cross fade image, Remove fading,

800
00:36:16.559 --> 00:36:19.079
<v Speaker 2>maybe copy the new main image src to it ready

801
00:36:19.079 --> 00:36:21.639
<v Speaker 2>for the next fade. It's a bit fiddly, might need

802
00:36:21.679 --> 00:36:23.039
<v Speaker 2>to force a reflow sometimes too.

803
00:36:23.199 --> 00:36:25.039
<v Speaker 1>Sounds complex but creates a nice effect.

804
00:36:25.239 --> 00:36:25.480
<v Speaker 3>Okay.

805
00:36:25.559 --> 00:36:28.280
<v Speaker 1>Last chapter covered Chapter ten introduction to.

806
00:36:28.239 --> 00:36:31.960
<v Speaker 2>AJX, a syncretist JavaScript and XML. They're now mostly Jason.

807
00:36:32.159 --> 00:36:35.320
<v Speaker 1>The key idea fetching data from a server without a

808
00:36:35.360 --> 00:36:36.800
<v Speaker 1>full page reload.

809
00:36:36.440 --> 00:36:40.599
<v Speaker 2>Exactly makes web apps feel much more responsive like desktop applications,

810
00:36:41.079 --> 00:36:44.920
<v Speaker 2>think dynamic updates, loading content on demand. The previous projects

811
00:36:44.960 --> 00:36:46.920
<v Speaker 2>already did a simple version by fetching images.

812
00:36:47.000 --> 00:36:51.519
<v Speaker 1>It mentions the shift from the old XML HTTP request object.

813
00:36:51.239 --> 00:36:53.920
<v Speaker 2>To the modern fetch API, using the fetch function much

814
00:36:53.960 --> 00:36:54.760
<v Speaker 2>cleaner syntax.

815
00:36:54.920 --> 00:36:58.679
<v Speaker 1>The big challenge is handling the asynchronous part. JavaScript doesn't wait.

816
00:36:58.880 --> 00:37:03.400
<v Speaker 2>Right fetch and JavaScript immediately moves on to the next line.

817
00:37:03.719 --> 00:37:05.159
<v Speaker 2>The server response arrives later.

818
00:37:05.320 --> 00:37:07.119
<v Speaker 1>How do you handle that delayed response?

819
00:37:07.320 --> 00:37:12.920
<v Speaker 2>Promises Yes, fetch returns a promise object. A promise represents

820
00:37:12.960 --> 00:37:15.480
<v Speaker 2>the eventual result of an asynchronous.

821
00:37:14.880 --> 00:37:18.360
<v Speaker 1>Operation, and you use dot then to say what should

822
00:37:18.400 --> 00:37:21.920
<v Speaker 1>happen when the promise resolves, I e. In the server response.

823
00:37:21.599 --> 00:37:24.760
<v Speaker 2>Exactly fetch my data dot Jason that handle response. Handle response.

824
00:37:24.840 --> 00:37:28.000
<v Speaker 2>The function inside only runs after the response arrives, and.

825
00:37:27.960 --> 00:37:30.960
<v Speaker 1>The response object isn't the data itself, yet no, it.

826
00:37:30.880 --> 00:37:33.800
<v Speaker 2>Represents the HTTP response. You need to call methods on

827
00:37:33.840 --> 00:37:36.440
<v Speaker 2>it to extract the body data like response dot text

828
00:37:36.480 --> 00:37:37.280
<v Speaker 2>or response.

829
00:37:36.960 --> 00:37:40.320
<v Speaker 1>Dot json, and those methods also return promises because reading

830
00:37:40.320 --> 00:37:41.920
<v Speaker 1>the body can also take time.

831
00:37:41.760 --> 00:37:44.639
<v Speaker 2>Correct so you often chain dot then calls dot fetch

832
00:37:44.760 --> 00:37:48.079
<v Speaker 2>data dot json, dot evil, then data out out data

833
00:37:48.159 --> 00:37:50.719
<v Speaker 2>holds the part Jason objectory.

834
00:37:50.760 --> 00:37:53.760
<v Speaker 1>Okay, that structure makes sense, and Jason is the common data.

835
00:37:53.519 --> 00:37:58.679
<v Speaker 2>Format very common JavaScript object notation, human readable text format

836
00:37:58.679 --> 00:38:01.880
<v Speaker 2>that looks just like JavaScript objects in arrays, easy for

837
00:38:01.960 --> 00:38:04.519
<v Speaker 2>JavaScript to parse, easy for servers to generate.

838
00:38:05.000 --> 00:38:08.320
<v Speaker 1>The chapter shows fetching a slides dot json file an

839
00:38:08.400 --> 00:38:10.159
<v Speaker 1>array of image objects.

840
00:38:09.800 --> 00:38:14.480
<v Speaker 2>YEP src, MMG one dot jpg caption. First netch uses

841
00:38:14.519 --> 00:38:18.159
<v Speaker 2>fetch and json to get this array into a JavaScript variable,

842
00:38:18.320 --> 00:38:18.760
<v Speaker 2>and then.

843
00:38:18.719 --> 00:38:22.719
<v Speaker 1>Uses this data to dynamically build the light box gallery exactly.

844
00:38:22.960 --> 00:38:26.119
<v Speaker 2>Instead of having the HTML hard coded, it loops through

845
00:38:26.159 --> 00:38:28.719
<v Speaker 2>the fetched deray. For each object, it creates the A

846
00:38:28.960 --> 00:38:32.559
<v Speaker 2>and MG elements using maybe insert adjason HTML.

847
00:38:32.159 --> 00:38:35.199
<v Speaker 1>Puts them into a containertiv hashtag catalog.

848
00:38:34.880 --> 00:38:37.360
<v Speaker 2>And then calls the do light box hashtag catalog function

849
00:38:37.400 --> 00:38:40.199
<v Speaker 2>we discussed earlier to make the newly created thumbnails.

850
00:38:39.760 --> 00:38:43.199
<v Speaker 1>Interactive, so the gallery content comes from the server on demand. Cool.

851
00:38:43.280 --> 00:38:45.760
<v Speaker 1>Final example populating a form with fetch data.

852
00:38:45.880 --> 00:38:48.960
<v Speaker 2>Yeah, an HTML form with outputs and a select drop down.

853
00:38:49.000 --> 00:38:51.920
<v Speaker 1>Step one fetch a list of countries, maybe IDs, and

854
00:38:52.039 --> 00:38:53.840
<v Speaker 1>names from the server as JSON.

855
00:38:54.039 --> 00:38:56.639
<v Speaker 2>Right loops through the fetched de array and dynamically create

856
00:38:56.639 --> 00:38:58.880
<v Speaker 2>option elements, adding them to the select dropdown.

857
00:38:59.119 --> 00:39:02.519
<v Speaker 1>Step two add an event listener to the select element.

858
00:39:02.880 --> 00:39:05.000
<v Speaker 1>When the user chooses a country.

859
00:39:04.960 --> 00:39:08.199
<v Speaker 2>The listener triggers another fetch request, this time asking the

860
00:39:08.199 --> 00:39:11.440
<v Speaker 2>server for detailed data about the selected country using its ID.

861
00:39:11.840 --> 00:39:16.440
<v Speaker 1>Step three. When that detailed data arrives, another promise resolution.

862
00:39:16.440 --> 00:39:20.599
<v Speaker 2>The JavaScript updates the output fields in the form output, span, etc.

863
00:39:21.280 --> 00:39:24.000
<v Speaker 2>With its specific details continent, currency, whatever.

864
00:39:24.199 --> 00:39:27.880
<v Speaker 1>So the form populates dynamically based on user selection, fetching

865
00:39:27.960 --> 00:39:29.239
<v Speaker 1>only the data needed.

866
00:39:29.119 --> 00:39:31.920
<v Speaker 2>Exactly, a very common pattern in modern web applications.

867
00:39:31.960 --> 00:39:35.599
<v Speaker 1>Wow okay, So wrapping this up, we've really gone from

868
00:39:35.639 --> 00:39:39.760
<v Speaker 1>the absolute basics variables syntax.

869
00:39:39.280 --> 00:39:42.039
<v Speaker 2>Through manipulating the page with the DOM, handling user.

870
00:39:41.800 --> 00:39:45.360
<v Speaker 1>Events, interacting with CSS for styling and transitions.

871
00:39:44.800 --> 00:39:47.199
<v Speaker 2>All the way to asynchronously fetching data from a server

872
00:39:47.719 --> 00:39:50.639
<v Speaker 2>using ajax and fetch. It's quite a journey.

873
00:39:50.719 --> 00:39:54.039
<v Speaker 1>It really lays the groundwork for understanding how modern interactive

874
00:39:54.079 --> 00:39:57.960
<v Speaker 1>websites are built. JavaScript is just everywhere under the hood.

875
00:39:58.119 --> 00:40:01.119
<v Speaker 2>It's incredibly powerful and versatile. This teep dive gives you,

876
00:40:01.159 --> 00:40:03.800
<v Speaker 2>hopefully a really solid conceptual map.

877
00:40:03.639 --> 00:40:06.480
<v Speaker 1>Absolutely and if you want to go deeper, definitely experiment

878
00:40:06.599 --> 00:40:09.559
<v Speaker 1>play with the code. The book mentions resources like MDM,

879
00:40:09.599 --> 00:40:10.960
<v Speaker 1>webdocs and stack.

880
00:40:10.639 --> 00:40:13.800
<v Speaker 2>Overflow indispensable resources for any web developer.

881
00:40:14.199 --> 00:40:17.119
<v Speaker 1>Cannot recommend them enough for sure, So as we finish,

882
00:40:17.159 --> 00:40:20.480
<v Speaker 1>here's something to think about. This ability for a webpage

883
00:40:20.559 --> 00:40:24.320
<v Speaker 1>to change itself dynamically, to talk to servers without reloading

884
00:40:24.679 --> 00:40:27.199
<v Speaker 1>it fundamentally changed the Internet, didn't it completely.

885
00:40:27.280 --> 00:40:29.679
<v Speaker 2>It's the foundation of web applications as we know them.

886
00:40:30.039 --> 00:40:34.199
<v Speaker 1>So consider how this power continues to evolve. What new

887
00:40:34.360 --> 00:40:38.039
<v Speaker 1>kinds of interactions, what new online experiences might this dynamic

888
00:40:38.079 --> 00:40:39.960
<v Speaker 1>capability make possible in the future.