WEBVTT

1
00:00:00.120 --> 00:00:03.960
<v Speaker 1>Welcome to the deep dive where your curiosity fuels are exploration.

2
00:00:04.519 --> 00:00:07.240
<v Speaker 1>You send us the sources and we distill them down

3
00:00:07.280 --> 00:00:11.480
<v Speaker 1>to the essential insights, saving you time and expanding your knowledge.

4
00:00:11.560 --> 00:00:12.519
<v Speaker 2>It's a great concept.

5
00:00:12.560 --> 00:00:15.480
<v Speaker 1>Today we're tackling a programmer's Quick Start Guide to Web

6
00:00:15.519 --> 00:00:20.559
<v Speaker 1>Development Quick JavaScript by David Metusek. Our mission, driven by

7
00:00:20.600 --> 00:00:24.239
<v Speaker 1>your need for efficient learning, is really to extract the

8
00:00:24.280 --> 00:00:28.480
<v Speaker 1>core concepts of JavaScript and the HTML dom that experienced

9
00:00:28.480 --> 00:00:31.000
<v Speaker 1>coders can grasp rapidly and thoroughly.

10
00:00:31.120 --> 00:00:33.719
<v Speaker 2>And we're using excerpt straight from the book itself exactly.

11
00:00:33.799 --> 00:00:36.399
<v Speaker 1>We'll be drawing straight from the book honestly. The idea

12
00:00:36.479 --> 00:00:40.320
<v Speaker 1>of making this corner stone of webin or activity more accessible,

13
00:00:40.439 --> 00:00:42.280
<v Speaker 1>that's well, that's what gets me going.

14
00:00:42.200 --> 00:00:45.079
<v Speaker 2>Indeed, and what's interesting right off the bat is who

15
00:00:45.079 --> 00:00:50.439
<v Speaker 2>this book isn't for. Yeah, Metusk explicitly advises programming beginners

16
00:00:50.439 --> 00:00:53.320
<v Speaker 2>to start with Python. That tells us a lot. It's

17
00:00:53.399 --> 00:00:56.159
<v Speaker 2>laser focused on bringing established developers up to speed with

18
00:00:56.240 --> 00:00:59.719
<v Speaker 2>JavaScript quickly. It assumes you already have a foundation in

19
00:00:59.759 --> 00:01:01.560
<v Speaker 2>promming principles exactly.

20
00:01:01.640 --> 00:01:04.000
<v Speaker 1>It assumes you know what a loop is, what a

21
00:01:04.079 --> 00:01:07.079
<v Speaker 1>variable is, and it's not trying to be the definitive

22
00:01:07.159 --> 00:01:08.040
<v Speaker 1>JavaScript Bible.

23
00:01:08.120 --> 00:01:11.680
<v Speaker 2>Right, No, not at all. Matustik himself points readers looking

24
00:01:11.760 --> 00:01:17.480
<v Speaker 2>for that really comprehensive reference towards Slannigan's JavaScript the Definitive

25
00:01:17.480 --> 00:01:21.680
<v Speaker 2>Guide a classic, right, So quick JavaScript is about getting

26
00:01:21.680 --> 00:01:25.480
<v Speaker 2>you hands on providing that crucial initial understanding of how

27
00:01:25.640 --> 00:01:29.799
<v Speaker 2>JavaScript talks to and manipulates web pages through the document

28
00:01:29.840 --> 00:01:33.319
<v Speaker 2>object model, the DOM. It's a targeted on ramp, and it's.

29
00:01:33.159 --> 00:01:37.280
<v Speaker 1>A necessary on ramp because well, JavaScript holds this unique position,

30
00:01:37.359 --> 00:01:37.959
<v Speaker 1>doesn't it.

31
00:01:37.959 --> 00:01:40.560
<v Speaker 2>It really does. It's the only language that web browsers

32
00:01:40.640 --> 00:01:41.519
<v Speaker 2>understand natively.

33
00:01:41.560 --> 00:01:42.920
<v Speaker 1>You can think about that for a second.

34
00:01:43.040 --> 00:01:46.959
<v Speaker 2>Yeah, it's ubiquity, isn't accidental. I mean sure, other languages

35
00:01:47.000 --> 00:01:49.560
<v Speaker 2>like Coffee, script or dark can be used for web development,

36
00:01:49.799 --> 00:01:52.159
<v Speaker 2>but they all need a translation step, a compilation into

37
00:01:52.200 --> 00:01:54.879
<v Speaker 2>JavaScript before a browser can actually execute them.

38
00:01:55.159 --> 00:01:58.640
<v Speaker 1>So JavaScript is fundamental. It's the base layer for client

39
00:01:58.719 --> 00:02:02.280
<v Speaker 1>side interactivity. Okay, so JavaScript is the lingua franca of

40
00:02:02.319 --> 00:02:05.640
<v Speaker 1>the browser. Now Metusk brings up something called strict mode

41
00:02:05.680 --> 00:02:09.919
<v Speaker 1>pretty early on. What's the essential insight there? What's the gist?

42
00:02:10.280 --> 00:02:15.039
<v Speaker 2>Think of you strict that exact string as like a

43
00:02:15.080 --> 00:02:18.080
<v Speaker 2>safety switch for your JavaScript code. It was introduced in

44
00:02:18.080 --> 00:02:22.759
<v Speaker 2>ekmascript twenty fifteen six. Okay, by putting that phrase at

45
00:02:22.800 --> 00:02:24.960
<v Speaker 2>the beginning of your script or maybe inside of function,

46
00:02:25.360 --> 00:02:28.319
<v Speaker 2>you're telling the JavaScript engine to enforce a stricter set

47
00:02:28.360 --> 00:02:33.080
<v Speaker 2>of rules. It basically eliminates some potentially problematic or error

48
00:02:33.120 --> 00:02:34.439
<v Speaker 2>prone parts of the language.

49
00:02:34.479 --> 00:02:36.719
<v Speaker 1>Ah, cleaning up some historical baggage sort of.

50
00:02:36.800 --> 00:02:41.000
<v Speaker 2>Yeah, METUSAC emphasizes that for all new JavaScript projects, using

51
00:02:41.000 --> 00:02:43.240
<v Speaker 2>strict mode isn't just a good idea, it's really the

52
00:02:43.280 --> 00:02:47.159
<v Speaker 2>recommended standard. Yeah, so for modern JavaScript you strict is

53
00:02:47.240 --> 00:02:48.879
<v Speaker 2>less of an option and more of a safety net.

54
00:02:48.879 --> 00:02:50.000
<v Speaker 2>You should just always deploy.

55
00:02:50.280 --> 00:02:52.000
<v Speaker 1>That makes sense a way to build more robust code

56
00:02:52.039 --> 00:02:54.479
<v Speaker 1>right from the start. Okay, let's get down to the bedrock,

57
00:02:54.599 --> 00:02:59.080
<v Speaker 1>the core language fundamentals. Where does Matusek begin. Assuming we're

58
00:02:59.080 --> 00:03:02.199
<v Speaker 1>coming from other language like Java or C plus plus.

59
00:03:01.960 --> 00:03:05.639
<v Speaker 2>All, he starts with the absolute essentials. And yeah, if

60
00:03:05.639 --> 00:03:08.840
<v Speaker 2>you're familiar with those languages, you'll find some immediate parallels

61
00:03:08.879 --> 00:03:12.960
<v Speaker 2>for supperate comments. Okay, single line comments using and multiline

62
00:03:12.960 --> 00:03:16.439
<v Speaker 2>comments enclosed in a selgy. Pretty standard stuff across the

63
00:03:16.439 --> 00:03:17.960
<v Speaker 2>programming landscape.

64
00:03:17.520 --> 00:03:21.080
<v Speaker 1>Right, no surprises there for experienced hods. What about the

65
00:03:21.240 --> 00:03:24.319
<v Speaker 1>fundamental types of data we'll be working with in JavaScript,

66
00:03:24.400 --> 00:03:25.280
<v Speaker 1>any quirks.

67
00:03:25.520 --> 00:03:29.919
<v Speaker 2>Well. JavaScript has eight primitive data types. One initial thing

68
00:03:29.919 --> 00:03:31.560
<v Speaker 2>to note, which can be a bit of a surprise,

69
00:03:32.159 --> 00:03:35.840
<v Speaker 2>is that all numbers, whether they look like integers or decimals,

70
00:03:36.240 --> 00:03:40.120
<v Speaker 2>are internally treated as double precision floating point numbers.

71
00:03:40.319 --> 00:03:44.159
<v Speaker 1>Ah okay, so no true integers under the hood unless

72
00:03:44.159 --> 00:03:45.280
<v Speaker 1>you use bigant.

73
00:03:44.960 --> 00:03:47.479
<v Speaker 2>Later exactly, except for bigot, which is newer.

74
00:03:47.560 --> 00:03:47.759
<v Speaker 1>Yeah.

75
00:03:47.919 --> 00:03:51.759
<v Speaker 2>And another interesting historical tidbit, a real quirk applying the

76
00:03:51.800 --> 00:03:55.240
<v Speaker 2>type of operator to noll actually returns the string object.

77
00:03:55.360 --> 00:03:56.840
<v Speaker 1>Uh huh, that's weird.

78
00:03:57.000 --> 00:03:58.879
<v Speaker 2>It is. It's a well known design flaw from the

79
00:03:58.919 --> 00:04:02.000
<v Speaker 2>language's early days. It's inconsistent, but it's just something you

80
00:04:02.000 --> 00:04:03.680
<v Speaker 2>have to be aware of, a historical hiccup.

81
00:04:03.680 --> 00:04:06.199
<v Speaker 1>We just have to live with, got it. What else

82
00:04:06.240 --> 00:04:07.560
<v Speaker 1>in the realm of data types?

83
00:04:07.800 --> 00:04:11.039
<v Speaker 2>So beyond those basic primitives, we have user defined objects.

84
00:04:11.479 --> 00:04:15.479
<v Speaker 2>Think of these as collections of named values or properties.

85
00:04:15.560 --> 00:04:18.399
<v Speaker 2>You define them using curly braces with key value.

86
00:04:18.079 --> 00:04:21.399
<v Speaker 1>Pairs, like dictionaries or maps and other languages.

87
00:04:21.439 --> 00:04:24.040
<v Speaker 2>Pretty much. Yeah, yeah, key is the property name, value

88
00:04:24.079 --> 00:04:26.800
<v Speaker 2>is the value. You access these values, usually with dot

89
00:04:26.839 --> 00:04:30.279
<v Speaker 2>notation object dot property name, which is very common, right,

90
00:04:30.519 --> 00:04:33.160
<v Speaker 2>Or you can use bracket notation object property name. That's

91
00:04:33.160 --> 00:04:35.360
<v Speaker 2>handy when the property name is dynamic like stored in

92
00:04:35.360 --> 00:04:39.639
<v Speaker 2>a variable, or maybe contains characters not allowed in dot notation.

93
00:04:39.959 --> 00:04:44.199
<v Speaker 1>Okay, and then provides some built in object types for

94
00:04:44.399 --> 00:04:46.680
<v Speaker 1>common data structures I assume exactly.

95
00:04:46.759 --> 00:04:49.800
<v Speaker 2>Yeah, JavaScript comes equipped with several built in object types.

96
00:04:50.240 --> 00:04:53.160
<v Speaker 2>You've got a raise for ordered lists, sets for collections

97
00:04:53.160 --> 00:04:56.399
<v Speaker 2>of unique items, maps for key value pairs, where keys

98
00:04:56.439 --> 00:04:57.519
<v Speaker 2>can be anything.

99
00:04:57.279 --> 00:04:59.600
<v Speaker 1>More flexible keys than plain objects.

100
00:04:59.759 --> 00:05:02.000
<v Speaker 2>Right. Keys can be any type in maps, And of

101
00:05:02.040 --> 00:05:04.839
<v Speaker 2>course there are building types for dates and regular expressions too.

102
00:05:05.240 --> 00:05:08.120
<v Speaker 2>Let's maybe focus on a few key ones first, like arrays.

103
00:05:08.399 --> 00:05:10.040
<v Speaker 1>Sure, how do we make arrays?

104
00:05:10.199 --> 00:05:13.639
<v Speaker 2>Usually with square brackets with comma separated values inside there's

105
00:05:13.720 --> 00:05:17.000
<v Speaker 2>zero indexed like in many languages, and you can even

106
00:05:17.040 --> 00:05:19.120
<v Speaker 2>nest them to create multidimensional arrays.

107
00:05:19.199 --> 00:05:19.560
<v Speaker 1>Okay.

108
00:05:20.240 --> 00:05:23.519
<v Speaker 2>Now there's an older array constructor, but Modissek advises against

109
00:05:23.600 --> 00:05:26.800
<v Speaker 2>using it. It has this peculiar behavior. If you pass

110
00:05:27.040 --> 00:05:29.800
<v Speaker 2>just a single number, oh yeah, instead of treating an

111
00:05:29.879 --> 00:05:32.199
<v Speaker 2>array with that number in it, it creates an empty

112
00:05:32.279 --> 00:05:35.439
<v Speaker 2>array with that specified length. So called sparse array can

113
00:05:35.519 --> 00:05:37.399
<v Speaker 2>lead to some unexpected results down the line.

114
00:05:37.519 --> 00:05:40.720
<v Speaker 1>Sparse arrays sounds like a potential gotcha, So what's the

115
00:05:40.759 --> 00:05:41.279
<v Speaker 1>better way?

116
00:05:41.399 --> 00:05:45.160
<v Speaker 2>He recommends just using the array literals for direct initialization,

117
00:05:45.800 --> 00:05:46.959
<v Speaker 2>and also array.

118
00:05:46.800 --> 00:05:48.519
<v Speaker 1>Dot from array dot from.

119
00:05:48.600 --> 00:05:51.360
<v Speaker 2>Yeah, it's a static method, really powerful. You can convert

120
00:05:51.399 --> 00:05:54.839
<v Speaker 2>iterable objects like set, strings, even maps into proper arrays.

121
00:05:54.959 --> 00:05:56.959
<v Speaker 2>It's also a neat way to create a shallow copy

122
00:05:57.000 --> 00:06:00.000
<v Speaker 2>of an existing array. Okay, handy, And one key takeaway

123
00:06:00.000 --> 00:06:02.519
<v Speaker 2>about JavaScript arrays is their flexibility. They can hold a

124
00:06:02.560 --> 00:06:05.360
<v Speaker 2>mix of different data types. You can have numbers, strings,

125
00:06:05.439 --> 00:06:07.240
<v Speaker 2>objects all in the same array.

126
00:06:07.519 --> 00:06:11.040
<v Speaker 1>That dynamic nature is a recurring theme with JavaScript, isn't it.

127
00:06:11.560 --> 00:06:13.079
<v Speaker 1>What about sets? How are they useful?

128
00:06:13.160 --> 00:06:16.240
<v Speaker 2>Sets are all about uniqueness their collections of values where

129
00:06:16.279 --> 00:06:19.120
<v Speaker 2>each value can only appear once. Okay, and the order

130
00:06:19.120 --> 00:06:21.639
<v Speaker 2>of elements isn't guaranteed. You create them using you set,

131
00:06:21.879 --> 00:06:24.959
<v Speaker 2>often initializing them with an iterable like another array.

132
00:06:24.839 --> 00:06:26.000
<v Speaker 1>In common operations.

133
00:06:26.720 --> 00:06:30.680
<v Speaker 2>Key operations you'll use are has value to quickly check

134
00:06:30.720 --> 00:06:33.360
<v Speaker 2>if a value exists, add value to insert a new

135
00:06:33.439 --> 00:06:36.120
<v Speaker 2>value if it's already there, nothing happens, which is.

136
00:06:36.120 --> 00:06:38.879
<v Speaker 1>The point, maintains uniqueness exactly.

137
00:06:38.480 --> 00:06:42.399
<v Speaker 2>And delete value to remove a value. Delete actually returns

138
00:06:42.439 --> 00:06:45.639
<v Speaker 2>true if the value is found and removed false otherwise.

139
00:06:45.959 --> 00:06:50.759
<v Speaker 1>Unique unordered collections useful for things like removing duplicates quickly. Now,

140
00:06:50.879 --> 00:06:54.800
<v Speaker 1>regular expressions always a bit tricky. What's the initial take here?

141
00:06:55.240 --> 00:06:58.639
<v Speaker 2>Mighty Sick introduces them as patterns enclosed and forward slashes

142
00:06:58.879 --> 00:07:01.399
<v Speaker 2>like pattern okay, and these can be followed by optional

143
00:07:01.480 --> 00:07:04.879
<v Speaker 2>flags to modify their behavior, like g is for global

144
00:07:04.920 --> 00:07:08.439
<v Speaker 2>matching finding all occurrences, not just the first one, and

145
00:07:08.480 --> 00:07:12.680
<v Speaker 2>he makes the match case insensitive standard flags. Yeah. A

146
00:07:12.759 --> 00:07:16.519
<v Speaker 2>key concept within rejecks is capturing groups. You create these

147
00:07:16.560 --> 00:07:19.360
<v Speaker 2>by putting parts of the pattern in parentheses right to.

148
00:07:19.279 --> 00:07:21.439
<v Speaker 1>Pull out specific parts of the match precisely.

149
00:07:21.800 --> 00:07:24.680
<v Speaker 2>These groups are numbered from left to right, starting with one.

150
00:07:25.199 --> 00:07:28.439
<v Speaker 2>Group zero usually represents the entire match, and these captured

151
00:07:28.439 --> 00:07:32.319
<v Speaker 2>groups are incredibly useful. For instance, in a string's replace method,

152
00:07:32.560 --> 00:07:34.759
<v Speaker 2>you can use one dollar, two dollars, et cetera in

153
00:07:34.800 --> 00:07:38.319
<v Speaker 2>your replacement string to refer back to whatever those groups captured.

154
00:07:38.639 --> 00:07:42.199
<v Speaker 1>That bag referencing is really powerful. What about common string

155
00:07:42.240 --> 00:07:44.439
<v Speaker 1>methods that use regular expressions?

156
00:07:44.759 --> 00:07:49.120
<v Speaker 2>Several core string methods really leverage rejects. Search rejects gives

157
00:07:49.120 --> 00:07:51.360
<v Speaker 2>you the index of the first match, or make it

158
00:07:51.360 --> 00:07:55.480
<v Speaker 2>a one. If no match, replace rejects replacement substitutes matches.

159
00:07:55.959 --> 00:07:58.959
<v Speaker 2>If you use the G flag, it replaces all occurrences.

160
00:07:59.040 --> 00:07:59.439
<v Speaker 1>Makes sense.

161
00:07:59.519 --> 00:08:02.120
<v Speaker 2>Match read returns an array with the matches. If you

162
00:08:02.199 --> 00:08:05.800
<v Speaker 2>use G it's an array of all matched substrings. Without

163
00:08:05.839 --> 00:08:08.120
<v Speaker 2>G it's the first match plus any captured groups.

164
00:08:08.399 --> 00:08:10.079
<v Speaker 1>AH different behavior.

165
00:08:09.720 --> 00:08:13.279
<v Speaker 2>With G yep. Then there's match all pattern, which, especially

166
00:08:13.319 --> 00:08:16.079
<v Speaker 2>with a G flag, returns an iterator of all matches.

167
00:08:16.160 --> 00:08:19.560
<v Speaker 2>Really handy for four of flups and split regixt divides

168
00:08:19.600 --> 00:08:22.639
<v Speaker 2>a string into an array of substrings using the rejects

169
00:08:22.639 --> 00:08:25.279
<v Speaker 2>pattern as the delimitter. Plus there are methods directly on

170
00:08:25.279 --> 00:08:28.240
<v Speaker 2>the rigix object itself, like exec string, which finds an

171
00:08:28.240 --> 00:08:31.160
<v Speaker 2>next match in tracks position, and test ring, which is simpler,

172
00:08:31.279 --> 00:08:33.320
<v Speaker 2>just returns true or false if there's a match.

173
00:08:33.399 --> 00:08:36.240
<v Speaker 1>Okay, that gives us a solid initial grasp. Let's move

174
00:08:36.240 --> 00:08:40.080
<v Speaker 1>on to naming things identifiers. What are the basic rules?

175
00:08:40.320 --> 00:08:44.120
<v Speaker 2>Identifiers in the names for variables, functions, etc. Must start

176
00:08:44.120 --> 00:08:47.360
<v Speaker 2>with a letter, an underscore, ick, or a dollar sign.

177
00:08:47.639 --> 00:08:48.759
<v Speaker 1>No numbers at the start.

178
00:08:49.039 --> 00:08:53.080
<v Speaker 2>Correct subsequent characters can be letters, digits, underscores, or dollar

179
00:08:53.120 --> 00:08:57.639
<v Speaker 2>signs by convention. Variable and function names usually start lowercase

180
00:08:58.000 --> 00:09:00.480
<v Speaker 2>and use camel case like user profile.

181
00:09:00.600 --> 00:09:00.840
<v Speaker 1>Okay.

182
00:09:01.080 --> 00:09:05.159
<v Speaker 2>Class names typically start uppercase pascal case like user profile,

183
00:09:05.399 --> 00:09:08.000
<v Speaker 2>and constants are often written in all uppercase letters.

184
00:09:08.120 --> 00:09:10.039
<v Speaker 1>Standard conventions pretty much.

185
00:09:10.360 --> 00:09:13.480
<v Speaker 2>Of course, you can't use javascripts reserve keywords let, const, iff,

186
00:09:13.480 --> 00:09:15.240
<v Speaker 2>et cetera as identifiers.

187
00:09:15.639 --> 00:09:19.360
<v Speaker 1>Clear and consistent conventions are always helpful. Now, when we

188
00:09:19.440 --> 00:09:23.480
<v Speaker 1>declare variables, JavaScript gives us let and const. What's the

189
00:09:23.519 --> 00:09:26.000
<v Speaker 1>core difference a programmer needs to know? So?

190
00:09:26.080 --> 00:09:29.799
<v Speaker 2>JavaScript is dynamically typed, meaning you don't declare the type,

191
00:09:29.919 --> 00:09:32.840
<v Speaker 2>and variables can hold different types over time. You declare

192
00:09:32.919 --> 00:09:36.360
<v Speaker 2>variables using let, you can initialize them then or assign

193
00:09:36.360 --> 00:09:37.039
<v Speaker 2>a valulator.

194
00:09:37.120 --> 00:09:39.799
<v Speaker 1>Okay, let is for changeable variables.

195
00:09:39.879 --> 00:09:43.759
<v Speaker 2>Right. Cost is used to declare constants. Unlike lead. You

196
00:09:43.840 --> 00:09:45.879
<v Speaker 2>must assign a value to a const when.

197
00:09:45.720 --> 00:09:47.759
<v Speaker 1>You declare it, and it can't be reassigned.

198
00:09:47.919 --> 00:09:50.759
<v Speaker 2>The binding can't. Yes, yeah, but here's a key point.

199
00:09:51.159 --> 00:09:53.919
<v Speaker 2>If the cost variable holds an object or an array,

200
00:09:54.840 --> 00:09:57.960
<v Speaker 2>the contents of that object or array can still be modified.

201
00:09:58.080 --> 00:10:01.559
<v Speaker 1>Ah, So const protects the ass assignment, not the value itself.

202
00:10:01.559 --> 00:10:02.720
<v Speaker 1>If it's mutable.

203
00:10:02.399 --> 00:10:05.600
<v Speaker 2>Exactly, const means the binding is constant, not necessarily that

204
00:10:05.639 --> 00:10:06.639
<v Speaker 2>the value is immutable.

205
00:10:06.639 --> 00:10:09.600
<v Speaker 1>Got it let for reassignable variables, costs for variables intended

206
00:10:09.639 --> 00:10:11.879
<v Speaker 1>to hold a constant reference. Now, how do we actually

207
00:10:11.919 --> 00:10:13.840
<v Speaker 1>operate on these values? Key operators?

208
00:10:14.000 --> 00:10:18.559
<v Speaker 2>JavaScript offers a pretty familiar set arithmetic plus kein ivelo percent,

209
00:10:19.120 --> 00:10:23.519
<v Speaker 2>remainder and exponentiation, boolean logic andy andy and di enda

210
00:10:23.639 --> 00:10:27.440
<v Speaker 2>nuts fame comparisons any dotic loose inequality, US strict inequality,

211
00:10:27.440 --> 00:10:31.000
<v Speaker 2>string concatenation uses plus rocks, assignment operators plus and so on,

212
00:10:31.240 --> 00:10:35.399
<v Speaker 2>the usual shorthand unary plus and ddea, and the ternary

213
00:10:35.440 --> 00:10:40.120
<v Speaker 2>operator condition value false value false for concise conditionals.

214
00:10:40.399 --> 00:10:45.240
<v Speaker 1>Okay, seems familiar. Any particular pitfalls or best practices with

215
00:10:45.360 --> 00:10:47.080
<v Speaker 1>these operators in JavaScript?

216
00:10:47.399 --> 00:10:51.320
<v Speaker 2>Yes, a couple of really crucial ones. First, be very

217
00:10:51.360 --> 00:10:55.360
<v Speaker 2>cautious comparing floating point numbers for exact equality using in.

218
00:10:56.039 --> 00:10:57.840
<v Speaker 1>Ah the classic floating point.

219
00:10:57.639 --> 00:11:01.360
<v Speaker 2>Issue exactly due to their internal representation, things might not

220
00:11:01.399 --> 00:11:04.919
<v Speaker 2>compare is equal when you expect them to. Matusex suggests

221
00:11:04.919 --> 00:11:08.039
<v Speaker 2>a workaround. Convert them to strings with a fixed number

222
00:11:08.039 --> 00:11:10.960
<v Speaker 2>of decimal places using to fixed in, and then compare

223
00:11:10.960 --> 00:11:11.480
<v Speaker 2>the strings.

224
00:11:11.799 --> 00:11:13.519
<v Speaker 1>Interesting workaround what's the second big one?

225
00:11:13.720 --> 00:11:17.639
<v Speaker 2>Understanding the difference between in at and endear. This is

226
00:11:17.799 --> 00:11:21.360
<v Speaker 2>huge in JavaScript, at least versus strict right. The loose

227
00:11:21.399 --> 00:11:25.279
<v Speaker 2>equality attempts type coercion. It tries to convert operands of

228
00:11:25.320 --> 00:11:28.720
<v Speaker 2>different types before comparing them. This leads to some surprising,

229
00:11:29.159 --> 00:11:34.279
<v Speaker 2>often undesirable results like undefined null is actually.

230
00:11:33.919 --> 00:11:35.840
<v Speaker 1>True WHOA okay.

231
00:11:35.960 --> 00:11:38.679
<v Speaker 2>Whereas the strict equality compares both the value and the

232
00:11:38.720 --> 00:11:42.320
<v Speaker 2>type without any type coercion, It's almost always the safer

233
00:11:42.360 --> 00:11:43.399
<v Speaker 2>and preferred choice.

234
00:11:43.679 --> 00:11:46.120
<v Speaker 1>So rule of thumb, use triple.

235
00:11:45.799 --> 00:11:50.720
<v Speaker 2>Equals generally yes. Also, remember object comparison. When you compare

236
00:11:50.799 --> 00:11:55.320
<v Speaker 2>objects including arrays and functions with eat or or, you're

237
00:11:55.399 --> 00:11:57.759
<v Speaker 2>checking if they are the exact same object in memory

238
00:11:57.919 --> 00:11:58.919
<v Speaker 2>now that they have the same.

239
00:11:58.679 --> 00:12:01.519
<v Speaker 1>Contents right so VERI one would be false.

240
00:12:01.360 --> 00:12:03.879
<v Speaker 2>Correct because there are two distinct array objects even though

241
00:12:03.919 --> 00:12:06.720
<v Speaker 2>they look the same and related to that object. Assignment

242
00:12:06.720 --> 00:12:10.679
<v Speaker 2>creates references. If you assign OBJA to OBJB, both variables

243
00:12:10.679 --> 00:12:14.279
<v Speaker 2>point to the same object, modifying through OBJA effects OBGB.

244
00:12:14.679 --> 00:12:18.080
<v Speaker 1>Those are critical distinctions, especially loose versus strict equality and

245
00:12:18.120 --> 00:12:20.919
<v Speaker 1>object identity versus value. Now, how do we structure our

246
00:12:20.919 --> 00:12:22.159
<v Speaker 1>code using statements.

247
00:12:22.440 --> 00:12:25.039
<v Speaker 2>Again, if you're coming from Java or C plus plus wave,

248
00:12:25.519 --> 00:12:29.440
<v Speaker 2>much of JavaScript's statement syntax will feel very familiar. You

249
00:12:29.480 --> 00:12:33.039
<v Speaker 2>have standard variable assignments, expressions used for side effects like

250
00:12:33.080 --> 00:12:36.240
<v Speaker 2>function calls, blocks of code grouped by curly braces to

251
00:12:36.279 --> 00:12:40.759
<v Speaker 2>define scope, and the usual control flow e false for

252
00:12:40.879 --> 00:12:44.440
<v Speaker 2>conditions while up and double loops, and the four loop

253
00:12:44.480 --> 00:12:49.000
<v Speaker 2>for iteration. Okay, one small detail. The initialization part of

254
00:12:49.039 --> 00:12:52.600
<v Speaker 2>a for loop in modern JavaScript typically uses lead to

255
00:12:52.639 --> 00:12:56.120
<v Speaker 2>declare the loop, counter scoping it nicely to just the loop.

256
00:12:56.320 --> 00:12:59.440
<v Speaker 2>Good practice, and JavaScript switch statement is maybe a bit

257
00:12:59.440 --> 00:13:03.360
<v Speaker 2>more flexible the case. Clauses can evaluate expressions, not just

258
00:13:03.440 --> 00:13:04.639
<v Speaker 2>constant values, so.

259
00:13:04.559 --> 00:13:07.559
<v Speaker 1>The fundamental control flow is quite similar. What about statements

260
00:13:07.600 --> 00:13:11.279
<v Speaker 1>that are more unique to JavaScript or have specific nuances.

261
00:13:11.519 --> 00:13:14.440
<v Speaker 2>There are a few that stand out. Four of specifically

262
00:13:14.480 --> 00:13:17.480
<v Speaker 2>designed for iterating over the values of iterable.

263
00:13:17.039 --> 00:13:20.080
<v Speaker 1>Objects, like a raise sets strings.

264
00:13:19.679 --> 00:13:23.120
<v Speaker 2>See exactly A ray sets map strings. Plain user defined

265
00:13:23.159 --> 00:13:26.120
<v Speaker 2>objects aren't itterable by default, that you can make them miserable.

266
00:13:25.840 --> 00:13:28.679
<v Speaker 1>Okay, And four in fian iterates over.

267
00:13:28.879 --> 00:13:32.720
<v Speaker 2>The property names or keys of an object. Yeah, you

268
00:13:32.720 --> 00:13:35.519
<v Speaker 2>can use it with user defined objects. A raise where

269
00:13:35.519 --> 00:13:39.440
<v Speaker 2>it iterates index names as strings. Even strings iterating indices,

270
00:13:39.600 --> 00:13:43.320
<v Speaker 2>but be aware it iterates over inherited innumerable properties too,

271
00:13:43.480 --> 00:13:46.639
<v Speaker 2>and it might skip missing elements and sparse arrays. So

272
00:13:46.679 --> 00:13:49.399
<v Speaker 2>it has its uses, But Forurian is often preferred for

273
00:13:49.440 --> 00:13:51.200
<v Speaker 2>iterating values in collections.

274
00:13:51.240 --> 00:13:52.200
<v Speaker 1>Gotcha, what else?

275
00:13:52.559 --> 00:13:56.240
<v Speaker 2>The throw statement lets you intentionally raise an exception. Interestingly,

276
00:13:56.240 --> 00:13:58.679
<v Speaker 2>in JavaScript you can throw a value of any type,

277
00:13:58.799 --> 00:13:59.919
<v Speaker 2>not just specific.

278
00:13:59.559 --> 00:14:01.360
<v Speaker 1>Air object, really any type.

279
00:14:01.519 --> 00:14:04.840
<v Speaker 2>Yep, And there isn't a strict distinction like checked versus

280
00:14:04.879 --> 00:14:06.960
<v Speaker 2>unchecked exceptions found in some other languages.

281
00:14:07.080 --> 00:14:10.759
<v Speaker 1>And how do we handle these thrown values, these exceptions.

282
00:14:10.799 --> 00:14:13.440
<v Speaker 2>That's where the tricatch finally block comes in code that

283
00:14:13.519 --> 00:14:16.000
<v Speaker 2>my throw goes in the try block. Standard If an

284
00:14:16.000 --> 00:14:19.159
<v Speaker 2>exception happens, control jumps to the catch block. You can

285
00:14:19.200 --> 00:14:22.440
<v Speaker 2>have an optional variable in catch to hold the throne value. Okay,

286
00:14:22.480 --> 00:14:25.360
<v Speaker 2>and the finally block, if you include it, always executes

287
00:14:25.440 --> 00:14:28.440
<v Speaker 2>after trying cash whether an exception occurred or not. Great

288
00:14:28.440 --> 00:14:31.840
<v Speaker 2>for cleanup makes sense. An interesting quirk If try or

289
00:14:31.919 --> 00:14:35.799
<v Speaker 2>catch has a return, break or continue, its execution is

290
00:14:35.840 --> 00:14:38.240
<v Speaker 2>sort of paused until the finally block finishes.

291
00:14:38.440 --> 00:14:42.159
<v Speaker 1>Oh, okay, finally really means finally pretty much.

292
00:14:42.440 --> 00:14:46.759
<v Speaker 2>JavaScript also has labeled statements label name that statement. They're

293
00:14:46.799 --> 00:14:49.480
<v Speaker 2>mainly useful with break and continue inside nest of loops

294
00:14:49.559 --> 00:14:53.360
<v Speaker 2>or switch statements. Break label name exits the specific label

295
00:14:53.399 --> 00:14:56.879
<v Speaker 2>loop or switch continue label name jumps to the next

296
00:14:56.919 --> 00:14:58.159
<v Speaker 2>iteration of the labeled loop.

297
00:14:58.240 --> 00:15:02.000
<v Speaker 1>Allows for more fine grained control in nested structures.

298
00:15:01.440 --> 00:15:04.639
<v Speaker 2>Exactly and Finally, the return statement sends a value back

299
00:15:04.679 --> 00:15:07.679
<v Speaker 2>from a function. If there's no return, or just return,

300
00:15:08.039 --> 00:15:11.840
<v Speaker 2>the function implicitly returns undefined functions mainly used for side

301
00:15:11.840 --> 00:15:13.600
<v Speaker 2>effects are sometimes called procedures.

302
00:15:13.919 --> 00:15:16.519
<v Speaker 1>That's a good overview of JavaScript's control flow. Let's move

303
00:15:16.519 --> 00:15:18.000
<v Speaker 1>on to functions. A cornerstone.

304
00:15:18.080 --> 00:15:20.720
<v Speaker 2>Absolutely the most common way to define what is function?

305
00:15:20.840 --> 00:15:22.679
<v Speaker 2>Function name, param one, PERM.

306
00:15:22.519 --> 00:15:23.759
<v Speaker 1>Two standard syntax.

307
00:15:23.840 --> 00:15:26.600
<v Speaker 2>When working in HTMOL, it's generally good practice to define

308
00:15:26.600 --> 00:15:29.960
<v Speaker 2>functions in script tags inside the head. This ensures they're

309
00:15:30.000 --> 00:15:32.320
<v Speaker 2>defined before any code in the body tries to call them.

310
00:15:32.480 --> 00:15:32.960
<v Speaker 1>Makes sense.

311
00:15:33.159 --> 00:15:36.440
<v Speaker 2>Functions can be recursive call themselves. They can be nested

312
00:15:36.480 --> 00:15:41.919
<v Speaker 2>inside other functions. Variables declared inside, including parameters, have local scope,

313
00:15:42.440 --> 00:15:46.000
<v Speaker 2>but functions can access variables from their outer environment up

314
00:15:46.000 --> 00:15:48.720
<v Speaker 2>to the global scope unless shadowed.

315
00:15:48.240 --> 00:15:50.799
<v Speaker 1>Locally standard lexical scoping right.

316
00:15:51.320 --> 00:15:52.799
<v Speaker 2>One key concept to knowe is.

317
00:15:52.759 --> 00:15:54.720
<v Speaker 1>Hoisting ah hoisting.

318
00:15:54.919 --> 00:15:59.000
<v Speaker 2>Function declarations and variables declared with var the older way

319
00:15:59.279 --> 00:16:03.399
<v Speaker 2>are conception moved to the top of their scope during compilation.

320
00:16:03.519 --> 00:16:07.000
<v Speaker 1>So you can sometimes call a function before its definition appears.

321
00:16:06.600 --> 00:16:09.759
<v Speaker 2>In the code. Technically yes, but it's generally much better

322
00:16:09.840 --> 00:16:12.600
<v Speaker 2>practice to define functions before you use them, just for

323
00:16:12.679 --> 00:16:13.960
<v Speaker 2>clarity and predictability.

324
00:16:14.480 --> 00:16:18.200
<v Speaker 1>Hoisting another one of JavaScript's interesting behaviors to keep in mind. Now,

325
00:16:18.279 --> 00:16:21.120
<v Speaker 1>testing is crucial. Does Matischik's touch on that.

326
00:16:21.440 --> 00:16:23.960
<v Speaker 2>He does include a brief introduction. He mentions using the

327
00:16:24.000 --> 00:16:26.600
<v Speaker 2>Mocha testing framework and the Chai assertion.

328
00:16:26.360 --> 00:16:28.200
<v Speaker 1>Library common tools yeah for.

329
00:16:28.159 --> 00:16:31.080
<v Speaker 2>Writing and running tests, often within a browser. For client

330
00:16:31.159 --> 00:16:34.960
<v Speaker 2>side code. He outlines the basic structure describe blocks to

331
00:16:35.000 --> 00:16:38.399
<v Speaker 2>group tests, it blocks for individual test cases with descriptive

332
00:16:38.480 --> 00:16:42.759
<v Speaker 2>names inside it. Use assertions from Chi's assert object to

333
00:16:42.919 --> 00:16:46.360
<v Speaker 2>check if your code behaves as expected. He shows examples

334
00:16:46.480 --> 00:16:49.799
<v Speaker 2>like assert dot is true, assert dot is false, assert

335
00:16:49.799 --> 00:16:52.919
<v Speaker 2>dot equal for loose equality.

336
00:16:52.559 --> 00:16:54.480
<v Speaker 1>AH, loose again. Is there a strict one?

337
00:16:54.600 --> 00:16:58.240
<v Speaker 2>Yes, assert dot strict equal and not equal not strict equal.

338
00:16:58.480 --> 00:17:01.960
<v Speaker 2>He also mentions assert dot org approximately for comparing floats

339
00:17:01.960 --> 00:17:03.080
<v Speaker 2>within a tolerance.

340
00:17:03.320 --> 00:17:06.559
<v Speaker 1>Good for those floating point comparisons we talked about exactly.

341
00:17:06.680 --> 00:17:09.240
<v Speaker 2>He briefly covers setting up Mocha and Chai in an

342
00:17:09.359 --> 00:17:12.960
<v Speaker 2>HTML page, maybe using CD in links, and initializing Mocha

343
00:17:13.000 --> 00:17:13.759
<v Speaker 2>to run the tests.

344
00:17:13.880 --> 00:17:16.079
<v Speaker 1>A quick taste of the testing landscape. Good to know

345
00:17:16.119 --> 00:17:19.599
<v Speaker 1>it's covered. Now the book moves into JavaScript in more detail.

346
00:17:20.119 --> 00:17:23.440
<v Speaker 1>What key enhancements and deeper concepts does it explore there?

347
00:17:23.599 --> 00:17:26.400
<v Speaker 2>Right? This section builds on the basics getting nuance in

348
00:17:26.400 --> 00:17:29.759
<v Speaker 2>introducing more advanced features. It starts with destructuring.

349
00:17:29.880 --> 00:17:31.640
<v Speaker 1>Destructuring I like the sound of that.

350
00:17:31.759 --> 00:17:34.880
<v Speaker 2>It's really elegant. A concise way to extract values from

351
00:17:34.880 --> 00:17:38.480
<v Speaker 2>objects and arrays and assign them directly to variables you

352
00:17:38.559 --> 00:17:40.960
<v Speaker 2>use for objects and for arrays on the left side of.

353
00:17:40.880 --> 00:17:43.160
<v Speaker 1>An assignment, so you can pull out just the pieces

354
00:17:43.160 --> 00:17:44.319
<v Speaker 1>you need exactly.

355
00:17:44.480 --> 00:17:47.039
<v Speaker 2>You can pull out specific properties or elements. You can

356
00:17:47.039 --> 00:17:50.839
<v Speaker 2>even rename properties during extraction, like let username nice, and

357
00:17:50.880 --> 00:17:53.319
<v Speaker 2>you can provide default values if a property might be

358
00:17:53.400 --> 00:17:57.519
<v Speaker 2>missing nice. It's especially powerful in function parameter lists. You

359
00:17:57.519 --> 00:18:00.440
<v Speaker 2>can destructure an object passed as an argument right in

360
00:18:00.480 --> 00:18:01.519
<v Speaker 2>the parameter definition.

361
00:18:01.759 --> 00:18:05.519
<v Speaker 1>Destructuring sounds like a great tool for cleaner, more readable code.

362
00:18:05.880 --> 00:18:08.160
<v Speaker 1>What about revisiting data types? With a more in depth

363
00:18:08.200 --> 00:18:10.480
<v Speaker 1>look any more nuances.

364
00:18:10.039 --> 00:18:14.039
<v Speaker 2>Yes, numbers again reiterated. They're mostly sixty four bit i

365
00:18:14.200 --> 00:18:17.039
<v Speaker 2>ee seven hundred and fifty four floats except for bigot.

366
00:18:17.559 --> 00:18:21.519
<v Speaker 2>He mentions the special values infinity, infinity, and nan not

367
00:18:21.599 --> 00:18:24.880
<v Speaker 2>a number right nan, and the is finite function to

368
00:18:24.960 --> 00:18:28.079
<v Speaker 2>check for actual finite numbers. Also useful constants like number

369
00:18:28.079 --> 00:18:31.640
<v Speaker 2>dot mn value, number dot x value and number dot

370
00:18:31.680 --> 00:18:33.480
<v Speaker 2>epsilon that tiny difference.

371
00:18:33.279 --> 00:18:35.559
<v Speaker 1>Value okay, strings.

372
00:18:35.240 --> 00:18:39.160
<v Speaker 2>Key point is immutability. Once created, you can't change individual characters.

373
00:18:39.200 --> 00:18:42.920
<v Speaker 2>You can access characters by index read only. He details

374
00:18:43.000 --> 00:18:45.240
<v Speaker 2>escape characters like n and unicode escapes.

375
00:18:44.920 --> 00:18:47.200
<v Speaker 1>Too right, and symbols you mentioned those briefly.

376
00:18:47.519 --> 00:18:52.359
<v Speaker 2>Symbols are unique, immutable primitive values oh created with symbol

377
00:18:52.920 --> 00:18:55.160
<v Speaker 2>even symbol desks create two different.

378
00:18:54.960 --> 00:18:57.480
<v Speaker 1>Symbols guaranteed uniqueness. What are they used for?

379
00:18:57.720 --> 00:19:00.839
<v Speaker 2>Often used as unique property keys on odds. Maybe to

380
00:19:00.880 --> 00:19:04.759
<v Speaker 2>add metadata or behavior without risking name collisions with other

381
00:19:04.799 --> 00:19:06.640
<v Speaker 2>properties or future language editions.

382
00:19:06.759 --> 00:19:10.920
<v Speaker 1>Clever. What about advanced array and set operations for arrays?

383
00:19:11.079 --> 00:19:14.720
<v Speaker 2>He mentions unshift and shift for adding removing from the beginning,

384
00:19:15.039 --> 00:19:17.440
<v Speaker 2>but notes they can be less efficient than push pop.

385
00:19:17.480 --> 00:19:22.160
<v Speaker 2>At the end, he also highlights Han's own property. It's

386
00:19:22.160 --> 00:19:25.000
<v Speaker 2>a reliable way to check if an object, including an

387
00:19:25.079 --> 00:19:28.480
<v Speaker 2>array actually has a property directly on itself, not inherited,

388
00:19:28.799 --> 00:19:32.559
<v Speaker 2>and useful for distinguishing real elements from undefined slots in

389
00:19:32.640 --> 00:19:35.880
<v Speaker 2>sparse arrays. Such JavaScript doesn't have built in methods for

390
00:19:35.920 --> 00:19:40.200
<v Speaker 2>standard set operations like union, intersection, difference. Oh really yeah,

391
00:19:40.240 --> 00:19:43.039
<v Speaker 2>but metwusex shows how you can implement them yourself, using

392
00:19:43.039 --> 00:19:46.039
<v Speaker 2>the spread syntax to convert sets to arrays and then

393
00:19:46.160 --> 00:19:49.720
<v Speaker 2>using array methods like filter along with the sets as method.

394
00:19:49.960 --> 00:19:52.880
<v Speaker 1>So a bit of manual work for those. What about

395
00:19:53.119 --> 00:19:55.079
<v Speaker 1>maps and weak maps? How do they differ?

396
00:19:55.400 --> 00:19:58.559
<v Speaker 2>Maps are key value collections where keys can be any

397
00:19:58.640 --> 00:20:03.000
<v Speaker 2>data type, objects, function primitives. Key equality is based on identity.

398
00:20:03.359 --> 00:20:03.720
<v Speaker 1>Okay.

399
00:20:04.160 --> 00:20:07.160
<v Speaker 2>He cautions that if you use object literals as keys

400
00:20:07.319 --> 00:20:09.920
<v Speaker 2>at one and ad on one are different keys because

401
00:20:09.960 --> 00:20:12.119
<v Speaker 2>they're different objects in memory, you need to use the

402
00:20:12.119 --> 00:20:13.640
<v Speaker 2>same object instance right.

403
00:20:13.720 --> 00:20:14.720
<v Speaker 1>Identity matters.

404
00:20:14.839 --> 00:20:18.440
<v Speaker 2>Week maps week maps are specialized. Keys must be objects

405
00:20:18.519 --> 00:20:19.480
<v Speaker 2>and they're held.

406
00:20:19.400 --> 00:20:21.400
<v Speaker 1>Weekly weekly meaning.

407
00:20:21.400 --> 00:20:23.160
<v Speaker 2>Meaning if the object used as a key is no

408
00:20:23.240 --> 00:20:26.119
<v Speaker 2>longer referenced anywhere else, it can be garbage collected and

409
00:20:26.160 --> 00:20:28.319
<v Speaker 2>the entry automatically disappears from the weak.

410
00:20:28.119 --> 00:20:30.680
<v Speaker 1>Map ah for memory management.

411
00:20:30.279 --> 00:20:34.039
<v Speaker 2>Exactly because of this week, maps aren't iterable and have

412
00:20:34.160 --> 00:20:38.880
<v Speaker 2>limited methods get said has delete. Their state can be

413
00:20:38.920 --> 00:20:41.400
<v Speaker 2>nondeterministic due to garbage collection timing.

414
00:20:41.720 --> 00:20:45.960
<v Speaker 1>Niche but potentially powerful. Let's move to promises fundamental for

415
00:20:46.039 --> 00:20:47.079
<v Speaker 1>async JavaScript.

416
00:20:47.279 --> 00:20:51.480
<v Speaker 2>Yes, promises handle results of asynchronous operations like network requests.

417
00:20:51.480 --> 00:20:55.359
<v Speaker 2>You create one with new promise function resolve, reject.

418
00:20:55.160 --> 00:20:56.799
<v Speaker 1>The executor function right it.

419
00:20:56.759 --> 00:21:00.799
<v Speaker 2>Gets resolved, and reject functions You call resolvevol with the

420
00:21:00.839 --> 00:21:04.480
<v Speaker 2>result on success, reject with an error on failure. Promises

421
00:21:04.559 --> 00:21:07.920
<v Speaker 2>capture their surrounding environment. When created. You handle the results

422
00:21:08.000 --> 00:21:12.839
<v Speaker 2>using then unfulfilled, unrejected or then unfulfilled catch unrejected.

423
00:21:13.359 --> 00:21:16.039
<v Speaker 1>Chaining the dot chain is key very much.

424
00:21:15.880 --> 00:21:17.960
<v Speaker 2>So it's how you sequence asynchronous actions.

425
00:21:18.039 --> 00:21:22.039
<v Speaker 1>Okay, what about the finer points of type conversions coercion.

426
00:21:22.200 --> 00:21:25.519
<v Speaker 2>JavaScript does a lot of automatic conversion coercion. You can

427
00:21:25.559 --> 00:21:29.799
<v Speaker 2>also do explicit conversions using number straing, boolean big, and

428
00:21:30.000 --> 00:21:34.119
<v Speaker 2>parson pars float. He warns against using new with number

429
00:21:34.319 --> 00:21:38.240
<v Speaker 2>string or boolean That creates wrapper objects not primitives, which

430
00:21:38.240 --> 00:21:39.160
<v Speaker 2>can cause confusion.

431
00:21:39.200 --> 00:21:39.680
<v Speaker 1>Good tip.

432
00:21:40.200 --> 00:21:43.400
<v Speaker 2>All objects have a toe string method. Good practice to

433
00:21:43.440 --> 00:21:47.359
<v Speaker 2>override it. For custom objects, parsint and parse float try

434
00:21:47.359 --> 00:21:49.759
<v Speaker 2>to parse numbers from the start of a string, stopping

435
00:21:49.759 --> 00:21:52.799
<v Speaker 2>at the first non numeric character, or non numeric after

436
00:21:52.839 --> 00:21:53.400
<v Speaker 2>a decimal.

437
00:21:53.440 --> 00:21:55.160
<v Speaker 1>For pars float, good to know how they handle non

438
00:21:55.240 --> 00:21:58.559
<v Speaker 1>numeric parts. The book lists keywords too. Any key advice

439
00:21:58.599 --> 00:21:59.759
<v Speaker 1>there besides.

440
00:21:59.440 --> 00:22:03.200
<v Speaker 2>The obvious don't use keywords as names. He suggests avoiding

441
00:22:03.240 --> 00:22:06.880
<v Speaker 2>older reserved words, even if not strictly enforced. Now built

442
00:22:06.880 --> 00:22:11.200
<v Speaker 2>in object property method names, htmail, element attribute names and

443
00:22:11.319 --> 00:22:16.039
<v Speaker 2>event handler names basically choose descriptive names that won't clash.

444
00:22:16.319 --> 00:22:19.920
<v Speaker 1>Sound advice. Now you mentioned good and bad operators earlier,

445
00:22:19.960 --> 00:22:20.920
<v Speaker 1>can you elaborate?

446
00:22:21.680 --> 00:22:26.079
<v Speaker 2>He discusses operator precedence, order of operations, and associativity for

447
00:22:26.160 --> 00:22:29.480
<v Speaker 2>operators with same precedence. There's a table outlining this. For

448
00:22:29.559 --> 00:22:32.960
<v Speaker 2>key operators, he highlights logical and A and R as

449
00:22:33.000 --> 00:22:34.079
<v Speaker 2>short circuiting.

450
00:22:33.799 --> 00:22:37.000
<v Speaker 1>Meaning they don't always evaluate the second part exactly.

451
00:22:36.599 --> 00:22:39.519
<v Speaker 2>And aaran stops if the left side is falsey yeah

452
00:22:39.559 --> 00:22:42.400
<v Speaker 2>stops if the left side is truthy. They often return

453
00:22:42.440 --> 00:22:44.839
<v Speaker 2>the value of the operand that determine the result not

454
00:22:44.880 --> 00:22:46.079
<v Speaker 2>necessarily true orful right.

455
00:22:46.119 --> 00:22:48.119
<v Speaker 1>The Y five default value trick yep.

456
00:22:48.480 --> 00:22:51.440
<v Speaker 2>Then there's the nullish coalescing operator. Yeah. It returns the

457
00:22:51.519 --> 00:22:54.200
<v Speaker 2>right operad only if the left one is null or undefined.

458
00:22:54.359 --> 00:22:56.720
<v Speaker 2>Otherwise it returns the left operand.

459
00:22:56.480 --> 00:23:01.160
<v Speaker 1>So it's stripter than which triggers on any falsey correct.

460
00:23:01.559 --> 00:23:05.319
<v Speaker 2>He stresses using parentheses when mixing with milan or due

461
00:23:05.319 --> 00:23:09.400
<v Speaker 2>to precedence rules. As for bad operators, he references Crockford's

462
00:23:09.480 --> 00:23:13.680
<v Speaker 2>JavaScript The good parts. For instance, the prefixed postfix increment,

463
00:23:13.720 --> 00:23:17.880
<v Speaker 2>plus plus and decrement operators are sometimes discouraged. Why is

464
00:23:17.920 --> 00:23:21.000
<v Speaker 2>that they can make code less clear, especially when used

465
00:23:21.039 --> 00:23:24.799
<v Speaker 2>inside complex expressions. Using plus one or nakeld one is

466
00:23:24.839 --> 00:23:27.359
<v Speaker 2>often more explicit and less aero prone.

467
00:23:27.599 --> 00:23:31.799
<v Speaker 1>Readability and avoiding subtle bugs good principles. Let's revisit functions

468
00:23:31.799 --> 00:23:32.799
<v Speaker 1>more details in this section.

469
00:23:32.920 --> 00:23:36.039
<v Speaker 2>Definitely several ways to define them. The standard function declaration

470
00:23:36.319 --> 00:23:39.799
<v Speaker 2>function expressions. Assigning function to a variable can be anonymous

471
00:23:39.880 --> 00:23:43.720
<v Speaker 2>or named. The function constructor takes code as strings. Generally

472
00:23:43.720 --> 00:23:46.519
<v Speaker 2>bad idea right, avoid that one and erow functions which

473
00:23:46.519 --> 00:23:49.759
<v Speaker 2>have concise syntax and crucially lexical this binding.

474
00:23:49.799 --> 00:23:51.000
<v Speaker 1>Welcome back to this right.

475
00:23:51.319 --> 00:23:54.160
<v Speaker 2>All functions have a name property. JS tries to infer

476
00:23:54.200 --> 00:23:59.000
<v Speaker 2>it parameter versus argument distinction parameters and definition arguments in

477
00:23:59.039 --> 00:24:02.720
<v Speaker 2>the call JS doesn't enforce matching counts. Extra ARGs ignored

478
00:24:02.759 --> 00:24:04.599
<v Speaker 2>missing ones are undefined.

479
00:24:04.400 --> 00:24:07.519
<v Speaker 1>Flexible, but potentially error prone if you're not careful.

480
00:24:07.640 --> 00:24:11.759
<v Speaker 2>True. The older arguments object array like list of all

481
00:24:11.880 --> 00:24:15.640
<v Speaker 2>orgs and traditional functions is mentioned, but rest parameters dot

482
00:24:15.720 --> 00:24:16.759
<v Speaker 2>org are generally preferred.

483
00:24:16.759 --> 00:24:17.279
<v Speaker 1>Now okay.

484
00:24:17.440 --> 00:24:21.519
<v Speaker 2>Key concept functions are first class data. Assign them to variables,

485
00:24:22.000 --> 00:24:25.759
<v Speaker 2>put them in a raise, pass them as arguments callbacks.

486
00:24:26.319 --> 00:24:30.559
<v Speaker 2>A function's toastring returns its source code. Its length property

487
00:24:30.599 --> 00:24:33.400
<v Speaker 2>is the number of declared parameters excluding rest.

488
00:24:33.400 --> 00:24:37.079
<v Speaker 1>Functions as values is super powerful it is He revisits

489
00:24:37.119 --> 00:24:39.079
<v Speaker 1>recursion with a factorial example.

490
00:24:39.519 --> 00:24:42.599
<v Speaker 2>You can add properties directly to a function object itself,

491
00:24:42.640 --> 00:24:46.200
<v Speaker 2>like myfunk dot counter equals zero as an alternative to

492
00:24:46.240 --> 00:24:49.920
<v Speaker 2>globals sometimes and he briefly mentions dot call, dot ply

493
00:24:50.079 --> 00:24:54.160
<v Speaker 2>and dot bind for controlling this value during invocation.

494
00:24:53.880 --> 00:24:58.279
<v Speaker 1>Right controlling execution context. Now generators function what's the deeper doug.

495
00:24:58.319 --> 00:25:01.640
<v Speaker 2>Generators are special functions that can pause and resume. Defined

496
00:25:01.640 --> 00:25:04.519
<v Speaker 2>with function calling one doesn't run it, but returns a

497
00:25:04.559 --> 00:25:08.119
<v Speaker 2>generator object, which is an iterator inside the yield keyword

498
00:25:08.160 --> 00:25:12.319
<v Speaker 2>returns a value and pauses execution. Calling next on the

499
00:25:12.359 --> 00:25:15.400
<v Speaker 2>generator object resumes it until the next yield or the end,

500
00:25:15.559 --> 00:25:20.000
<v Speaker 2>and next returns an object like the yielded value done false.

501
00:25:20.680 --> 00:25:24.279
<v Speaker 2>When the generator finishes, reaches an end or hits a return,

502
00:25:24.559 --> 00:25:29.039
<v Speaker 2>next returns value final value or undefined done through. Once done,

503
00:25:29.119 --> 00:25:32.039
<v Speaker 2>it's done, can't restart it, Nope. They're great for creating

504
00:25:32.039 --> 00:25:35.920
<v Speaker 2>custom iterators easily. He shows a simple half end generator example.

505
00:25:36.079 --> 00:25:39.839
<v Speaker 1>Generators sound useful for sequences and that ties into iterators

506
00:25:39.920 --> 00:25:41.160
<v Speaker 1>and iterables exactly.

507
00:25:41.200 --> 00:25:44.720
<v Speaker 2>An object is iterable if it implements the iterable protocol.

508
00:25:44.839 --> 00:25:47.480
<v Speaker 2>That means having a method keyed by the special symbol

509
00:25:47.759 --> 00:25:50.960
<v Speaker 2>symbol dot iterator. This method must return an iterator object

510
00:25:51.000 --> 00:25:53.759
<v Speaker 2>which has a next method. Often the easiest way to

511
00:25:53.759 --> 00:25:55.640
<v Speaker 2>implement symble dot iterator is just to make it a

512
00:25:55.720 --> 00:25:59.440
<v Speaker 2>generator function. Mitisek shows an example making an object with start,

513
00:25:59.640 --> 00:26:01.839
<v Speaker 2>step and iterable using a generator.

514
00:26:02.000 --> 00:26:04.400
<v Speaker 1>So that's the magic behind how four off works on

515
00:26:04.440 --> 00:26:07.079
<v Speaker 1>different things. Finally, let's really get into the details of

516
00:26:07.119 --> 00:26:08.160
<v Speaker 1>objects themselves.

517
00:26:08.359 --> 00:26:12.200
<v Speaker 2>Right, objects are fundamental collections of key value pairs. Create

518
00:26:12.240 --> 00:26:16.000
<v Speaker 2>them with literals key dot value meat keyser useles, strings

519
00:26:16.039 --> 00:26:18.599
<v Speaker 2>or symbols, access with dot, a bracket and notation.

520
00:26:18.759 --> 00:26:20.039
<v Speaker 1>We covered the shorthand.

521
00:26:20.160 --> 00:26:22.759
<v Speaker 2>Yeah. If you have a variable let make toyota and

522
00:26:22.880 --> 00:26:25.720
<v Speaker 2>want an object make toyota, you just write that make

523
00:26:26.279 --> 00:26:30.039
<v Speaker 2>nice shortcut cool. Checking for properties, the in operator checks

524
00:26:30.039 --> 00:26:33.480
<v Speaker 2>if a property exists, including inherited ones. Fore end loops

525
00:26:33.519 --> 00:26:38.119
<v Speaker 2>over innumerable property names including inherited okay. Creating objects literals,

526
00:26:38.359 --> 00:26:43.680
<v Speaker 2>object adding properties dynamically, constructor functions with new using this

527
00:26:43.759 --> 00:26:46.759
<v Speaker 2>inside yeah and object dot create prototype, which creates a

528
00:26:46.759 --> 00:26:49.400
<v Speaker 2>new object with a specific prototype you provide.

529
00:26:49.039 --> 00:26:50.759
<v Speaker 1>And copying objects still just.

530
00:26:50.759 --> 00:26:55.359
<v Speaker 2>References, still just references. Assignment copies the reference, not the object.

531
00:26:55.839 --> 00:26:57.680
<v Speaker 2>Modifying one effects the other if they point to the

532
00:26:57.680 --> 00:27:00.799
<v Speaker 2>same object. Methods are just functions that are are properties

533
00:27:00.799 --> 00:27:03.319
<v Speaker 2>of an object. Concise syntax and literals.

534
00:27:03.519 --> 00:27:07.920
<v Speaker 1>My method, got it now? This keyword always a fun

535
00:27:07.960 --> 00:27:09.440
<v Speaker 1>one has it explained here.

536
00:27:09.759 --> 00:27:13.319
<v Speaker 2>Its value is determined by how a function is called,

537
00:27:13.680 --> 00:27:17.559
<v Speaker 2>the call site evaluated at run time. Inside a method

538
00:27:17.599 --> 00:27:20.920
<v Speaker 2>called like UBJ dot method, this is usually object. In

539
00:27:20.960 --> 00:27:23.880
<v Speaker 2>a constructor called with new, this is the new object

540
00:27:23.920 --> 00:27:27.680
<v Speaker 2>being created. Makes sense in a regular function called directly,

541
00:27:27.839 --> 00:27:30.759
<v Speaker 2>not as a method in non strict mode, this is

542
00:27:30.799 --> 00:27:34.880
<v Speaker 2>the global object window and browsers, but in strict mode

543
00:27:34.960 --> 00:27:35.839
<v Speaker 2>it's undefined.

544
00:27:36.000 --> 00:27:37.880
<v Speaker 1>AH. Strict mode changes things again.

545
00:27:38.000 --> 00:27:41.880
<v Speaker 2>Yes, and a function inside another function. This inside the

546
00:27:41.880 --> 00:27:45.559
<v Speaker 2>inner one follows the regular function rules. It doesn't automatically

547
00:27:45.559 --> 00:27:49.599
<v Speaker 2>inherit the outer this unless unless it's an erowfunction. Erofunctions

548
00:27:49.960 --> 00:27:55.160
<v Speaker 2>capture this value from their surrounding lexical scope. They don't

549
00:27:55.160 --> 00:27:56.359
<v Speaker 2>have their own this binding.

550
00:27:56.480 --> 00:27:58.519
<v Speaker 1>That's a key difference for EROW functions.

551
00:27:58.559 --> 00:28:02.279
<v Speaker 2>Event handlers femail event handlers. This usually refers to the

552
00:28:02.400 --> 00:28:04.200
<v Speaker 2>htmail element that triggered.

553
00:28:03.799 --> 00:28:06.200
<v Speaker 1>The events, so context is everything for this. You've mentioned

554
00:28:06.279 --> 00:28:08.039
<v Speaker 1>prototypes a lot. Let's nail that down.

555
00:28:08.160 --> 00:28:11.640
<v Speaker 2>Every JavaScript object has an internal link to another object,

556
00:28:11.640 --> 00:28:14.559
<v Speaker 2>its prototype. You can get it with object dot get prototype.

557
00:28:14.720 --> 00:28:17.880
<v Speaker 2>When you access a property, If the object doesn't have

558
00:28:17.920 --> 00:28:21.519
<v Speaker 2>it directly, JavaScript looks at its prototype. If it's not there,

559
00:28:21.519 --> 00:28:23.799
<v Speaker 2>it looks at the prototypes prototype, and so on up

560
00:28:23.880 --> 00:28:24.240
<v Speaker 2>the chain.

561
00:28:24.319 --> 00:28:26.400
<v Speaker 1>The prototype chain exactly.

562
00:28:26.400 --> 00:28:28.480
<v Speaker 2>Until it finds the property or hits the end where

563
00:28:28.519 --> 00:28:31.839
<v Speaker 2>the prototype is null. Object dot prototype is the base

564
00:28:31.880 --> 00:28:35.440
<v Speaker 2>for most objects. Setting a property always happens directly on

565
00:28:35.480 --> 00:28:38.559
<v Speaker 2>the object, never modifies the prototype chain directly like.

566
00:28:38.519 --> 00:28:43.200
<v Speaker 1>That and properties have hidden attributes descriptors Yes, properties.

567
00:28:42.759 --> 00:28:46.240
<v Speaker 2>Have attributes like innumerable, does it show and foreign writeable?

568
00:28:46.400 --> 00:28:49.640
<v Speaker 2>Can its value be changed? And configurable? Can it be

569
00:28:49.680 --> 00:28:52.920
<v Speaker 2>deleted or its attributes changed? You can control these with

570
00:28:53.079 --> 00:28:54.799
<v Speaker 2>object dot defined property.

571
00:28:54.480 --> 00:28:58.400
<v Speaker 1>Fine grained control. Now, how do classes fit in with prototypes?

572
00:28:58.519 --> 00:29:01.759
<v Speaker 2>Classes from e S twenty fifteen are mostly syntactic sugar

573
00:29:02.000 --> 00:29:05.079
<v Speaker 2>over the existing prototype based inheritance. They provide a clear

574
00:29:05.160 --> 00:29:08.200
<v Speaker 2>or more familiar syntax from many programmers, a blueprint kind

575
00:29:08.200 --> 00:29:12.079
<v Speaker 2>of my class constructor. Defining a class essentially creates a

576
00:29:12.079 --> 00:29:16.759
<v Speaker 2>constructor function and adds methods to its prototype property new

577
00:29:16.920 --> 00:29:21.160
<v Speaker 2>my class calls the constructor this inside refers to the instance,

578
00:29:21.319 --> 00:29:26.400
<v Speaker 2>and inheritance uses the extends keyword. Class subclass extends superclass.

579
00:29:26.880 --> 00:29:30.720
<v Speaker 2>The subclass prototype is linked to the superclass prototype inheriting methods.

580
00:29:31.119 --> 00:29:35.279
<v Speaker 2>You can override methods if no extends it implicitly extends object.

581
00:29:35.440 --> 00:29:38.160
<v Speaker 1>So classes organize the prototype stuff. Can we still mess

582
00:29:38.200 --> 00:29:40.480
<v Speaker 1>with prototypes directly with classes?

583
00:29:40.559 --> 00:29:43.240
<v Speaker 2>Yes, The my class dot prototype object holds the method

584
00:29:43.319 --> 00:29:46.559
<v Speaker 2>definition shared by all instances. You can still add methods

585
00:29:46.559 --> 00:29:49.240
<v Speaker 2>directly to my class dot prototype after the class definition

586
00:29:49.640 --> 00:29:53.039
<v Speaker 2>and all instances will get it. Object prototype of instance

587
00:29:53.039 --> 00:29:56.880
<v Speaker 2>still works. Object I creates still works. The underlying mechanism.

588
00:29:56.440 --> 00:30:01.400
<v Speaker 1>Is prototypes that clarifies the class prototype relationship. Now JavaScript evolves.

589
00:30:01.599 --> 00:30:04.559
<v Speaker 1>How do we handle older browsers that don't support new features?

590
00:30:04.559 --> 00:30:09.359
<v Speaker 2>Two main tools, transpilers and polyfills. Transpilers like Babble convert

591
00:30:09.400 --> 00:30:14.640
<v Speaker 2>newer syntax hegany aerofunctions classes into older compatible syntax. Polyfills

592
00:30:14.640 --> 00:30:17.599
<v Speaker 2>are pieces of code that provide implementations for features missing

593
00:30:17.640 --> 00:30:21.039
<v Speaker 2>in older environments, like if a browser doesn't have the

594
00:30:21.160 --> 00:30:24.000
<v Speaker 2>raate oup prototype dot includes method, you can include a

595
00:30:24.000 --> 00:30:24.960
<v Speaker 2>polyfil that adds it.

596
00:30:25.240 --> 00:30:30.200
<v Speaker 1>So transpilers handle syntax. Polyphils handle missing functions objects exactly.

597
00:30:30.640 --> 00:30:33.279
<v Speaker 2>Services like polyfil that io can even serve only the

598
00:30:33.279 --> 00:30:36.759
<v Speaker 2>polyfills needed by the specific browser making the request, but

599
00:30:36.799 --> 00:30:38.480
<v Speaker 2>you need to be mindful of download size.

600
00:30:38.599 --> 00:30:42.720
<v Speaker 1>Essential tools for cross browser compatibility. Last language topic before

601
00:30:42.720 --> 00:30:43.799
<v Speaker 1>the DOM.

602
00:30:43.480 --> 00:30:48.720
<v Speaker 2>Json json JavaScript object notation lightweight text format for data exchange,

603
00:30:48.920 --> 00:30:49.519
<v Speaker 2>very common.

604
00:30:49.640 --> 00:30:50.759
<v Speaker 1>How do we use it in JS?

605
00:30:51.000 --> 00:30:54.839
<v Speaker 2>Built in methods? Jsonstring ifi object converts a JS object

606
00:30:54.920 --> 00:30:59.160
<v Speaker 2>value into a Jason string. Json dot parse jsonstring converts

607
00:30:59.200 --> 00:31:01.400
<v Speaker 2>a jsonstring and do a JAS object value.

608
00:31:01.480 --> 00:31:03.599
<v Speaker 1>Simple enough any limitations.

609
00:31:03.039 --> 00:31:06.880
<v Speaker 2>Yes, Functions, symbols undefined are generally lost or become null

610
00:31:07.000 --> 00:31:11.319
<v Speaker 2>During stringification, dates become ISO format strings, infinity and nan

611
00:31:11.440 --> 00:31:15.559
<v Speaker 2>become null. Non innumerable properties and symbol keys are ignored, so.

612
00:31:15.519 --> 00:31:16.920
<v Speaker 1>It's mainly for plain data.

613
00:31:16.759 --> 00:31:20.400
<v Speaker 2>Structures pretty much. You can customize serialization by defining it

614
00:31:20.480 --> 00:31:23.359
<v Speaker 2>low chasm method on an object JSON dot string offy

615
00:31:23.440 --> 00:31:24.599
<v Speaker 2>will call that if it exists.

616
00:31:24.839 --> 00:31:27.759
<v Speaker 1>Good to know. Okay, let's shift gears to client side

617
00:31:27.799 --> 00:31:30.640
<v Speaker 1>JavaScript and the DOM. This is where it gets visual exactly.

618
00:31:30.960 --> 00:31:32.720
<v Speaker 2>The rest of the book focuses on guys and the

619
00:31:32.759 --> 00:31:35.240
<v Speaker 2>browser and using the DOM to interact with the page.

620
00:31:35.599 --> 00:31:38.519
<v Speaker 2>It starts with some essential HTML review right the structure

621
00:31:38.680 --> 00:31:41.480
<v Speaker 2>HML page is a text file with tags container tags,

622
00:31:41.519 --> 00:31:45.720
<v Speaker 2>tag content tag, empty tags like BR basic structure doctri

623
00:31:45.839 --> 00:31:50.880
<v Speaker 2>type HDL HTML head with title body. Tags can have

624
00:31:51.119 --> 00:31:55.079
<v Speaker 2>attributes name value like AID HTML tags attributes are case

625
00:31:55.079 --> 00:31:58.200
<v Speaker 2>in sensitive, but JS is case sensitive, CSS handles is

626
00:31:58.200 --> 00:31:59.039
<v Speaker 2>styling and.

627
00:31:59.000 --> 00:32:01.039
<v Speaker 1>How do we connect our jawas script to the HTML.

628
00:32:01.119 --> 00:32:04.599
<v Speaker 2>A few ways embedcode directly in script tags in header body, Yeah,

629
00:32:04.640 --> 00:32:07.720
<v Speaker 2>link to external JS files using script as rc URLJS

630
00:32:07.799 --> 00:32:11.160
<v Speaker 2>script usually in head if you use src code inside

631
00:32:11.160 --> 00:32:12.079
<v Speaker 2>the tags is ignored.

632
00:32:12.200 --> 00:32:14.720
<v Speaker 1>External files are generally better for organization.

633
00:32:14.599 --> 00:32:17.759
<v Speaker 2>Yes, especially for larger scripts. You can also use evan

634
00:32:17.799 --> 00:32:21.920
<v Speaker 2>handler attributes like on click JS code directly on HTML elements,

635
00:32:21.960 --> 00:32:26.000
<v Speaker 2>though separating JS is often cleaner. Function definitions best in head,

636
00:32:26.359 --> 00:32:29.920
<v Speaker 2>scripts and body execute as the page loads. NoScript provides

637
00:32:29.920 --> 00:32:31.599
<v Speaker 2>fallback content if JS is off.

638
00:32:31.759 --> 00:32:35.160
<v Speaker 1>Okay, Now, the dom itself a tree of nodes.

639
00:32:35.519 --> 00:32:37.880
<v Speaker 2>Think of it as a live interactive map or tree,

640
00:32:38.000 --> 00:32:42.680
<v Speaker 2>representing everything on the page. Elements, attributes, text. JavaScript can

641
00:32:42.720 --> 00:32:45.279
<v Speaker 2>read and change this tree. Any changes JavaScript makes to

642
00:32:45.279 --> 00:32:48.240
<v Speaker 2>the damber reflected immediately in the browser window. That's the

643
00:32:48.240 --> 00:32:49.400
<v Speaker 2>core of dynamic web.

644
00:32:49.200 --> 00:32:51.519
<v Speaker 1>Pages, a live tree we can modify. Let's start building

645
00:32:51.559 --> 00:32:54.000
<v Speaker 1>things widgets and events. Buttons.

646
00:32:54.279 --> 00:32:57.839
<v Speaker 2>The two skip covers buttons. First two ways input type,

647
00:32:57.839 --> 00:33:00.440
<v Speaker 2>button value click me or button click me button. The

648
00:33:00.440 --> 00:33:02.960
<v Speaker 2>button tag is newer, more flexible, can contain images, et cetera.

649
00:33:03.079 --> 00:33:06.200
<v Speaker 2>Requires a closing tag. JS can change button text value

650
00:33:06.200 --> 00:33:07.759
<v Speaker 2>for input inner HTML for button.

651
00:33:07.839 --> 00:33:09.519
<v Speaker 1>How do we find these buttons in our code?

652
00:33:09.599 --> 00:33:12.359
<v Speaker 2>Need to find the widgets document dot G element B

653
00:33:12.519 --> 00:33:15.759
<v Speaker 2>I E E finds the single element with a unique ID.

654
00:33:16.400 --> 00:33:19.839
<v Speaker 2>Document dot G elements be by tag name. Tagname gets

655
00:33:19.839 --> 00:33:21.720
<v Speaker 2>a live collection of all elements with that tag.

656
00:33:21.960 --> 00:33:24.799
<v Speaker 1>Get element by i'd for specifics, get elements by tag

657
00:33:24.880 --> 00:33:28.119
<v Speaker 1>name for groups text fields for user input use.

658
00:33:27.920 --> 00:33:30.960
<v Speaker 2>Input type text can set size for a visible width

659
00:33:31.240 --> 00:33:34.680
<v Speaker 2>value for initial text. To get user input, find the

660
00:33:34.720 --> 00:33:38.200
<v Speaker 2>element again by ID and read its dot value property

661
00:33:38.200 --> 00:33:41.400
<v Speaker 2>in JavaScript simple enough? How do HTML forms fit in

662
00:33:41.640 --> 00:33:44.440
<v Speaker 2>form acts as a container for related inputs, usually for

663
00:33:44.440 --> 00:33:48.880
<v Speaker 2>submitting data. Submit buttons type submit, trigger, submission, reset buttons

664
00:33:48.880 --> 00:33:52.480
<v Speaker 2>type reset clear the form plain buttons type button do

665
00:33:52.599 --> 00:33:55.759
<v Speaker 2>nothing by default. A button inside a form default to

666
00:33:55.839 --> 00:33:59.559
<v Speaker 2>type submit if unspecified. Okay forms define a scope for

667
00:33:59.599 --> 00:34:03.240
<v Speaker 2>the name attribute on inputs. This name identifies the data

668
00:34:03.279 --> 00:34:06.119
<v Speaker 2>when submitted. I must be unique on the whole page.

669
00:34:06.200 --> 00:34:09.519
<v Speaker 2>Forms can't be nested. Pressing it entering an input field

670
00:34:09.599 --> 00:34:11.800
<v Speaker 2>often submits the form if there's a submit put.

671
00:34:11.880 --> 00:34:14.800
<v Speaker 1>Forms group inputs for submission. How about validation? Making sure

672
00:34:14.840 --> 00:34:15.280
<v Speaker 1>input is.

673
00:34:15.280 --> 00:34:18.880
<v Speaker 2>Okay HTAM all five added built in validation attributes required,

674
00:34:18.960 --> 00:34:22.760
<v Speaker 2>makes a field mandatory, pattern rejects checks input against a

675
00:34:22.760 --> 00:34:25.519
<v Speaker 2>regular expression. Placeholder text gives a hint, and.

676
00:34:25.559 --> 00:34:26.639
<v Speaker 1>Built in checks are nice.

677
00:34:26.760 --> 00:34:29.960
<v Speaker 2>Custom validation use the unsubmitted vent handler on the form tag,

678
00:34:30.159 --> 00:34:33.079
<v Speaker 2>set it to return my function. If my function returns false,

679
00:34:33.119 --> 00:34:36.400
<v Speaker 2>submission is canceled. Inside the function. You can use event

680
00:34:36.440 --> 00:34:37.559
<v Speaker 2>dot prevent to fall two.

681
00:34:37.920 --> 00:34:41.679
<v Speaker 1>Client side validation gives quick feedback what happens on successful submission.

682
00:34:41.840 --> 00:34:44.760
<v Speaker 2>The action you URL attribute on the form says where

683
00:34:44.760 --> 00:34:48.079
<v Speaker 2>to send data, method says how Usually get or post.

684
00:34:48.719 --> 00:34:51.440
<v Speaker 2>Get appens data to URL, post sends it in the

685
00:34:51.480 --> 00:34:52.199
<v Speaker 2>request body.

686
00:34:52.519 --> 00:34:55.880
<v Speaker 1>Okay, any other useful text widgets.

687
00:34:55.440 --> 00:34:59.039
<v Speaker 2>Input type email, checks for at, input type, numbers, spinners,

688
00:34:59.400 --> 00:35:04.360
<v Speaker 2>input type earl, basic, url, check textteria for multiline input

689
00:35:04.599 --> 00:35:06.519
<v Speaker 2>daytime inputs exist, but support varies.

690
00:35:06.639 --> 00:35:10.840
<v Speaker 1>Good range. What about non text inputs, radio, buttons, checkboxes.

691
00:35:10.280 --> 00:35:12.599
<v Speaker 2>Input type radio used in groups with the same name.

692
00:35:13.119 --> 00:35:15.360
<v Speaker 2>Selecting one d selects others in the group. Input type

693
00:35:15.400 --> 00:35:19.280
<v Speaker 2>checkdocs are independent selections others. Input type image src images,

694
00:35:19.320 --> 00:35:24.360
<v Speaker 2>submit button, input type color colorpicker, input type hidden data

695
00:35:24.400 --> 00:35:27.000
<v Speaker 2>smitted but not visible, input type range slider.

696
00:35:27.079 --> 00:35:30.960
<v Speaker 1>Lots of input types. Now how do these react to users? Events?

697
00:35:31.280 --> 00:35:36.000
<v Speaker 2>Events are actions user clicks, keypresses, pageloads handled by attributes

698
00:35:36.039 --> 00:35:39.000
<v Speaker 2>like on click JS code. Event names are a lowercase

699
00:35:39.039 --> 00:35:42.079
<v Speaker 2>in HTML attributes on click often CamelCase and JS on

700
00:35:42.599 --> 00:35:47.159
<v Speaker 2>click common events dot onload onload for bodyframes, mouse dot on,

701
00:35:47.239 --> 00:35:49.159
<v Speaker 2>click on, be able to click on mouse down on

702
00:35:49.199 --> 00:35:51.599
<v Speaker 2>mouse up on mouseover on mouse out on mass move,

703
00:35:51.880 --> 00:35:55.000
<v Speaker 2>pointer events on pointer out, unify, mouse touch, focus, dot on,

704
00:35:55.079 --> 00:35:58.159
<v Speaker 2>focus on, blur, change on, change on select form, dot on,

705
00:35:58.199 --> 00:36:01.719
<v Speaker 2>reset on submit return false, camp image, dot on a

706
00:36:01.800 --> 00:36:04.960
<v Speaker 2>board on error, keyboard dot donkey down on keypress, event

707
00:36:04.960 --> 00:36:06.039
<v Speaker 2>dot key on KIAP.

708
00:36:06.239 --> 00:36:08.440
<v Speaker 1>That's a lot of events. What's in the event object?

709
00:36:08.559 --> 00:36:11.000
<v Speaker 2>The event object pass to Handlers have info like event

710
00:36:11.039 --> 00:36:14.960
<v Speaker 2>dot type ag click, and event dot target the element.

711
00:36:14.639 --> 00:36:16.400
<v Speaker 1>That triggered the A M bubbling. What's that?

712
00:36:16.679 --> 00:36:18.679
<v Speaker 2>When an event happens on an element, it bubbles up

713
00:36:18.719 --> 00:36:21.000
<v Speaker 2>the DOM tree. First the target handles it, then its parent,

714
00:36:21.039 --> 00:36:23.079
<v Speaker 2>then its parent's parent, all the way up.

715
00:36:23.159 --> 00:36:25.400
<v Speaker 1>So a click on a button also clicks the div

716
00:36:25.480 --> 00:36:28.159
<v Speaker 1>it's inside and the body potentially yes.

717
00:36:28.639 --> 00:36:31.119
<v Speaker 2>Each ancestor gives a chance to handle the event unless

718
00:36:31.119 --> 00:36:34.840
<v Speaker 2>a handler stops propagation. It's useful for event delegation, handling

719
00:36:34.880 --> 00:36:37.679
<v Speaker 2>events for many children by listening on a parent efficient.

720
00:36:37.840 --> 00:36:41.159
<v Speaker 1>Okay, let's dive deeper into using the dom manipulating that

721
00:36:41.239 --> 00:36:42.039
<v Speaker 1>tree right.

722
00:36:42.000 --> 00:36:45.000
<v Speaker 2>Starts with a window object. It's the global object. In browsers,

723
00:36:45.119 --> 00:36:47.360
<v Speaker 2>document is actually a property of window.

724
00:36:47.159 --> 00:36:49.599
<v Speaker 1>So window, dot, document and document are the same.

725
00:36:49.760 --> 00:36:53.159
<v Speaker 2>Usually yes, because window is the global scope, window represents

726
00:36:53.199 --> 00:36:57.360
<v Speaker 2>the browser. Window itself has properties like location, kurt url

727
00:36:57.360 --> 00:37:01.320
<v Speaker 2>can change it to navigate history, back, forward, navigateator, browser info.

728
00:37:01.760 --> 00:37:03.760
<v Speaker 1>What about methods on window.

729
00:37:03.599 --> 00:37:08.719
<v Speaker 2>User interaction, dot alert, proft, confirmed timers, dot delay runs

730
00:37:08.760 --> 00:37:13.400
<v Speaker 2>funk once after delay milliseconds, set interval, fagigible runs funk

731
00:37:13.440 --> 00:37:16.960
<v Speaker 2>repeatedly every interval milliseconds. Both return IDs to use with

732
00:37:17.039 --> 00:37:19.840
<v Speaker 2>clear timeout or clear interval to stop them. My two

733
00:37:19.880 --> 00:37:22.559
<v Speaker 2>sex shows using set timeout with window dot location for

734
00:37:22.599 --> 00:37:23.599
<v Speaker 2>a time to redirect.

735
00:37:23.760 --> 00:37:26.440
<v Speaker 1>Timers are key for dynamic stuff. What about finding nodes

736
00:37:26.480 --> 00:37:27.360
<v Speaker 1>Beyond the basics, we.

737
00:37:27.320 --> 00:37:30.679
<v Speaker 2>Have document dot body the body element, document the document

738
00:37:30.679 --> 00:37:34.360
<v Speaker 2>element to the HTML element. More finding methods. Document dot

739
00:37:34.400 --> 00:37:37.280
<v Speaker 2>elements by class name gets elements by class. Document dot

740
00:37:37.320 --> 00:37:41.000
<v Speaker 2>query selector gets the first element matching a CSS selector.

741
00:37:41.400 --> 00:37:45.599
<v Speaker 1>H ah, CSS selectors powerful very.

742
00:37:46.000 --> 00:37:49.719
<v Speaker 2>And document dot query selectoral selector gets all elements matching

743
00:37:49.760 --> 00:37:53.800
<v Speaker 2>the CSS selector, returning a static notalist. Much more flexible.

744
00:37:53.320 --> 00:37:56.079
<v Speaker 1>Targeting so we can find things precisely. How do we

745
00:37:56.159 --> 00:37:58.719
<v Speaker 1>create and add new things to the dawn.

746
00:37:58.480 --> 00:38:02.039
<v Speaker 2>Document dot create element tag name creates a new element node,

747
00:38:02.079 --> 00:38:05.199
<v Speaker 2>set its tech content with no dot text content equals text.

748
00:38:05.559 --> 00:38:09.159
<v Speaker 2>Add attributes with element dot set attribute name value.

749
00:38:09.199 --> 00:38:11.239
<v Speaker 1>Okay, create the node, How to put it on the page.

750
00:38:11.400 --> 00:38:13.199
<v Speaker 2>Use methods on the parentode where you want to add it.

751
00:38:13.199 --> 00:38:15.840
<v Speaker 2>Parentode dot penchild child node adds it at the end.

752
00:38:15.880 --> 00:38:19.039
<v Speaker 2>Parentnode dot insert before new nodes. Existing node inserts before

753
00:38:19.079 --> 00:38:22.760
<v Speaker 2>another child parentnode dot remove child noode removes it parentode

754
00:38:22.760 --> 00:38:25.239
<v Speaker 2>dot replaced child new noode. Old nodes swaps one for another.

755
00:38:25.400 --> 00:38:28.559
<v Speaker 1>Standard premanipulation copynotes.

756
00:38:27.960 --> 00:38:30.679
<v Speaker 2>No dot clone node deep. If deep is true, it

757
00:38:30.760 --> 00:38:33.079
<v Speaker 2>copies the node and everything inside it. If false, just

758
00:38:33.119 --> 00:38:34.320
<v Speaker 2>the node itself got it.

759
00:38:34.599 --> 00:38:37.719
<v Speaker 1>What about properties and methods specific to element objects.

760
00:38:37.960 --> 00:38:41.760
<v Speaker 2>Elements have element dot tag name oopcase element dot inner

761
00:38:41.880 --> 00:38:45.400
<v Speaker 2>HTML get sets the HTML content inside the element element

762
00:38:45.440 --> 00:38:48.840
<v Speaker 2>dot or HTML get sets the elements full HTML, including

763
00:38:48.880 --> 00:38:51.760
<v Speaker 2>its own tags. Element dot attributes is a collection of

764
00:38:51.800 --> 00:38:55.239
<v Speaker 2>attribute nodes. Element dot class name is the string of classes.

765
00:38:55.519 --> 00:38:58.159
<v Speaker 2>Element dot class list is better a list object with

766
00:38:58.239 --> 00:39:02.800
<v Speaker 2>ad remove toggle contains methods for classes. Element dot style

767
00:39:02.840 --> 00:39:04.559
<v Speaker 2>accesses inline styles.

768
00:39:04.360 --> 00:39:08.239
<v Speaker 1>Classless sounds much easier for managing classes elements specific methods.

769
00:39:08.280 --> 00:39:10.599
<v Speaker 2>They have their own get elements by class name, querity

770
00:39:10.679 --> 00:39:14.760
<v Speaker 2>selector query selectoral that search only within that element's descendants.

771
00:39:14.800 --> 00:39:17.519
<v Speaker 2>Also element dot, get attribute, element dot or room attribute,

772
00:39:17.760 --> 00:39:21.559
<v Speaker 2>and element dot insert adjacent HTML where htmail inserts HTML

773
00:39:21.599 --> 00:39:25.159
<v Speaker 2>strings relative to the element before begin after begin before whatever.

774
00:39:25.440 --> 00:39:28.920
<v Speaker 1>Insert adjacent HTML seems handy for adding chunks of HTML.

775
00:39:29.360 --> 00:39:31.159
<v Speaker 1>What about text nos character data.

776
00:39:31.239 --> 00:39:34.639
<v Speaker 2>Textnodes represent the actual text content. They have properties like data,

777
00:39:34.800 --> 00:39:36.719
<v Speaker 2>the text, and length. They have methods like a pen

778
00:39:36.840 --> 00:39:40.199
<v Speaker 2>data delete, data, replaced, data, and removed to manipulate or

779
00:39:40.239 --> 00:39:40.840
<v Speaker 2>remove the text.

780
00:39:41.039 --> 00:39:43.679
<v Speaker 1>Okay, the show tree example. What does that illustrate?

781
00:39:43.800 --> 00:39:47.280
<v Speaker 2>It's a practical demo. Usually a button click triggers JS

782
00:39:47.320 --> 00:39:50.840
<v Speaker 2>that recursively traverses the dom tree from document dot body down.

783
00:39:51.199 --> 00:39:55.920
<v Speaker 2>It logs info about each node name, attributes content to

784
00:39:56.000 --> 00:39:59.360
<v Speaker 2>the console. It really helps visualize that tree structure and

785
00:39:59.400 --> 00:40:00.719
<v Speaker 2>how JS can walk through it.

786
00:40:01.039 --> 00:40:04.400
<v Speaker 1>Seeing that tree logged out makes the dom much more concrete.

787
00:40:04.480 --> 00:40:07.639
<v Speaker 1>It sounds like, as the book's afterward notes, this is

788
00:40:07.679 --> 00:40:10.159
<v Speaker 1>a strong foundation for just a starting point.

789
00:40:10.440 --> 00:40:13.159
<v Speaker 2>Absolutely my t sake. It's clear it's not exhaustive, it's

790
00:40:13.199 --> 00:40:15.920
<v Speaker 2>an entry point for much more learning in the vast

791
00:40:15.960 --> 00:40:17.519
<v Speaker 2>world of JavaScript and webdev.

792
00:40:17.719 --> 00:40:19.960
<v Speaker 1>Well that brings us towards the end of this deep dive.

793
00:40:20.159 --> 00:40:23.199
<v Speaker 1>My key takeaway from quick JavaScript is its effectiveness for

794
00:40:23.280 --> 00:40:27.079
<v Speaker 1>experienced programmers needing a fast, targeted intro to JS and

795
00:40:27.159 --> 00:40:30.199
<v Speaker 1>the DOM. But you absolutely have to understand its scope,

796
00:40:30.239 --> 00:40:32.800
<v Speaker 1>who it's for, and what it deliberately leaves out.

797
00:40:33.039 --> 00:40:35.280
<v Speaker 2>Yeah, and it's fascinating reflecting on some of those Jamas

798
00:40:35.280 --> 00:40:37.320
<v Speaker 2>specific things we hit on, like it being the only

799
00:40:37.440 --> 00:40:40.960
<v Speaker 2>native browser language that type of null oddity, and the

800
00:40:40.960 --> 00:40:44.800
<v Speaker 2>whole prototype system underpinning objects, and even the newer class syntax.

801
00:40:45.039 --> 00:40:48.320
<v Speaker 1>And for you, our listener, we hope this dive gave

802
00:40:48.360 --> 00:40:51.679
<v Speaker 1>you that quick yet thorough understanding you needed, hitting the

803
00:40:51.800 --> 00:40:54.559
<v Speaker 1>essentials without getting bogged down in exhaustive detail.

804
00:40:55.039 --> 00:40:57.599
<v Speaker 2>We definitely encourage you now to explore the areas that

805
00:40:57.679 --> 00:41:01.880
<v Speaker 2>sparked your interest. Was it promise and async? Yeah, dug

806
00:41:01.920 --> 00:41:06.599
<v Speaker 2>deeper there, dom manipulation for interactivity, start building things robust code,

807
00:41:06.840 --> 00:41:08.960
<v Speaker 2>maybe look more into testing with Mocha and Chai.

808
00:41:09.239 --> 00:41:11.400
<v Speaker 1>And a final thought to leave you with, think about

809
00:41:11.519 --> 00:41:15.159
<v Speaker 1>JavaScript's journey. A language often described as being maybe hastily

810
00:41:15.199 --> 00:41:18.960
<v Speaker 1>put together initially has become this absolute powerhouse driving modern

811
00:41:19.000 --> 00:41:22.199
<v Speaker 1>web experiences. What does that evolution tell us about the

812
00:41:22.239 --> 00:41:26.440
<v Speaker 1>balance between say, initial design perfection versus continuous adaptation and

813
00:41:26.480 --> 00:41:29.719
<v Speaker 1>community driven growth and technology Something to ponder. Thanks for

814
00:41:29.800 --> 00:41:30.960
<v Speaker 1>joining us on this deep dive.