1
00:00:00,060 --> 00:00:05,340
Java, this lesson is going to be a JavaScript refresher showing you and demonstrating how to create

2
00:00:05,340 --> 00:00:10,890
elements as well as how to create interaction and click events on elements that are on the page and

3
00:00:10,890 --> 00:00:18,900
the manipulations for the style contents of the elements and how we can use conditions and JavaScript

4
00:00:19,110 --> 00:00:22,180
to create interactions for Web users.

5
00:00:22,590 --> 00:00:25,020
So we've got a number of things that are happening here.

6
00:00:25,200 --> 00:00:28,750
And if we click this, then this is going to add in another page element.

7
00:00:29,100 --> 00:00:35,040
We also have a counter value for the page content, so that's updating as well.

8
00:00:35,220 --> 00:00:41,640
And we're also adding in event listeners on each one of these newly created elements dynamically so

9
00:00:41,640 --> 00:00:45,350
they all are either adding or removing the box class.

10
00:00:45,930 --> 00:00:48,330
So it's toggling the class when it does get clicked.

11
00:00:48,480 --> 00:00:51,150
And that's where you see the red background and the blue font.

12
00:00:51,570 --> 00:00:55,260
The each one is updating its tax content.

13
00:00:55,590 --> 00:01:00,820
The input field is going to be updating its data type, its type.

14
00:01:01,170 --> 00:01:04,170
So going from number to text that gets toggled.

15
00:01:04,410 --> 00:01:08,520
The Click Me button is going to be generated dynamically with JavaScript code.

16
00:01:08,730 --> 00:01:12,630
So we're using the document create element method.

17
00:01:12,960 --> 00:01:19,800
And this is also kind of an event listener where it's going to add the content that's contained within

18
00:01:19,800 --> 00:01:22,350
the input field and create a new div out of it.

19
00:01:22,650 --> 00:01:28,950
So that div has now just been added to the bottom of the Web page element's selection of some of the

20
00:01:28,950 --> 00:01:30,250
elements on the page.

21
00:01:30,270 --> 00:01:36,570
So what we learned in the last lesson where we can use the document object and in this case we want

22
00:01:36,570 --> 00:01:37,890
to select both of the diffs.

23
00:01:37,890 --> 00:01:43,550
So we're going to use query selector all for this and selecting each one of the matching selectors.

24
00:01:43,800 --> 00:01:46,860
So that gives us both of the divs within the selection.

25
00:01:47,100 --> 00:01:55,830
And for devs using for each will loop through and return back each item within the node list as a div.

26
00:01:55,920 --> 00:02:00,840
And for now we can just cancel, log it out just to make sure that we've selected the elements properly

27
00:02:02,460 --> 00:02:09,570
before we try to make a manipulation of the element so well, referencing that each element as div within

28
00:02:09,570 --> 00:02:10,670
the JavaScript code.

29
00:02:10,890 --> 00:02:17,520
So that means that we can make some updates to it and we can update some of the tax content that's contained

30
00:02:17,520 --> 00:02:21,050
within that element by using the tax content property.

31
00:02:21,390 --> 00:02:28,740
So setting that to if you want to say hello world, we can add that and that will output hello world.

32
00:02:28,890 --> 00:02:32,450
We can also reference and return back to index value.

33
00:02:32,730 --> 00:02:38,940
So concatenating the index value to Hello World so that will output those values.

34
00:02:39,180 --> 00:02:44,820
And another method that we're going to use, another what we're going to use in the upcoming lessons

35
00:02:44,820 --> 00:02:47,190
is going to be the tactics of the template literals.

36
00:02:47,520 --> 00:02:54,390
So this allow us to way to write JavaScript string values without having to worry about the different

37
00:02:54,390 --> 00:02:54,900
quotes.

38
00:02:55,140 --> 00:02:59,130
And if we want to include a variable, we can include it this way.

39
00:02:59,370 --> 00:03:03,870
And if we want to add some JavaScript code, we can include it that way as well.

40
00:03:03,870 --> 00:03:07,350
So we're outputting and then within the curly brackets.

41
00:03:07,620 --> 00:03:13,220
If I was to add one to this, then that would do the formula here.

42
00:03:13,230 --> 00:03:18,180
We're taking the value of index plus one and then that's the end result that we're outputting on the

43
00:03:18,180 --> 00:03:18,570
page.

44
00:03:18,960 --> 00:03:22,070
We can also update the inner HTML.

45
00:03:22,080 --> 00:03:29,610
So if we take the div and we set it's in our HTML and this can also take a string parameter.

46
00:03:29,880 --> 00:03:35,730
So for instance, if we want it to have a world wrapped within an H2.

47
00:03:38,450 --> 00:03:44,600
And for now, we want to do the inner HTML, so that Output's said, if we're doing text content, it's

48
00:03:44,600 --> 00:03:47,030
simply output's that as text content.

49
00:03:48,710 --> 00:03:51,670
I'm going to wrap the view so that we can see the full code.

50
00:03:52,130 --> 00:04:00,830
So if I was to take the same value and instead use the inner HTML, it will format the code as HTML

51
00:04:01,100 --> 00:04:02,210
for that element.

52
00:04:02,210 --> 00:04:03,670
And I would put it on the page.

53
00:04:03,680 --> 00:04:04,270
The result.

54
00:04:05,210 --> 00:04:13,910
There's also if we have inputs, so I'm going to add an input here and set the type of text and set

55
00:04:13,910 --> 00:04:15,500
the value of hello.

56
00:04:17,150 --> 00:04:25,280
So if we want to select the input, let's do a selection and get the input value and using the document

57
00:04:26,030 --> 00:04:27,250
query selector.

58
00:04:27,680 --> 00:04:32,320
And because we've only got the one input that we're selecting, we can make that selection.

59
00:04:32,660 --> 00:04:34,800
We can also be more specific.

60
00:04:34,820 --> 00:04:41,810
So if we wanted to select it with a class and typically you might see that with a class as well.

61
00:04:42,100 --> 00:04:44,600
So let's add in a class value here.

62
00:04:46,340 --> 00:04:52,260
And I'll give it a class of phal, so if one sided with the class, we can do that as well.

63
00:04:53,120 --> 00:05:00,760
And once we select the element as a variable value, then we can interact with it.

64
00:05:01,010 --> 00:05:08,690
So if we want to get the contents that are contained within the value, we can select the in value and

65
00:05:08,690 --> 00:05:10,110
get its property value.

66
00:05:10,340 --> 00:05:14,870
And this is going to return back whatever the current value input value is.

67
00:05:15,800 --> 00:05:22,130
So if I was to now write it, we get a value of Hello V three three thirty three.

68
00:05:22,880 --> 00:05:29,330
So we can also just as we can select the value, we can update the input value.

69
00:05:30,020 --> 00:05:34,550
So let's update the input value with whatever the value of index is.

70
00:05:36,620 --> 00:05:44,690
So it ends up at being zero one, because it starts at zero and then it's won and we can also dynamically

71
00:05:44,990 --> 00:05:55,010
select that value and use it within the JavaScript code so that we were concatenating to a string.

72
00:05:55,160 --> 00:06:00,140
And because we're adding to a string, that's where we get the zero one and one one.

73
00:06:00,290 --> 00:06:03,890
So we could convert this value actually to a number of value.

74
00:06:04,010 --> 00:06:10,970
But by default, coming from the input field, this is going to be a string value, let's add ability

75
00:06:10,970 --> 00:06:15,950
to interact with the elements with a click of the elements.

76
00:06:15,980 --> 00:06:17,300
So adding an event listener.

77
00:06:17,310 --> 00:06:21,430
So first we need to select the element and we'll select the each one.

78
00:06:22,220 --> 00:06:27,140
And then once we have it selected, then we can use it within the JavaScript code.

79
00:06:29,490 --> 00:06:36,330
So selecting the object and then let's add an event listener and then for the event listeners is a number

80
00:06:36,330 --> 00:06:38,370
of different event listeners that you can add.

81
00:06:38,910 --> 00:06:44,100
So the editor's giving me full selection of all the different event listeners.

82
00:06:44,250 --> 00:06:51,210
And mainly we are going to be using the click event and each event can pass over the event object so

83
00:06:51,210 --> 00:06:57,210
you can capture the event object by typing in E and the contents of the event object.

84
00:06:57,510 --> 00:06:59,750
Right now we're just going to output it onto the console.

85
00:06:59,940 --> 00:07:07,380
So now whenever I click the H1 tag, we're capturing the event object and the event object will give

86
00:07:07,380 --> 00:07:13,410
you information on what triggered the event and a whole bunch of information where it's located on the

87
00:07:13,410 --> 00:07:14,670
page for the element.

88
00:07:14,850 --> 00:07:21,660
And also when we look at event target, this will specify which element on the page initiated it.

89
00:07:22,080 --> 00:07:29,970
So if we do want to select the target, we can output the event target whenever it gets clicked and

90
00:07:29,970 --> 00:07:32,880
that's going to reference whatever initiated the click.

91
00:07:34,710 --> 00:07:44,100
If we want to add an event to multiple items on the page, we can do that as we're looping through them.

92
00:07:44,220 --> 00:07:50,700
And just as we've got to develop here, we can select the div object and add an event listener and add

93
00:07:50,700 --> 00:07:52,770
a click event to each one.

94
00:07:54,330 --> 00:07:59,790
So as it loops through, it's going to add the click event and then we can output the target content

95
00:08:00,000 --> 00:08:00,560
as well.

96
00:08:01,020 --> 00:08:02,790
So let's see how that works.

97
00:08:02,790 --> 00:08:09,710
So I click it at selecting the element that initiated the click and it's outputting it on the page.

98
00:08:09,900 --> 00:08:15,490
If we select the output area, it also outputs those.

99
00:08:15,810 --> 00:08:21,870
So depending on which part of the elements and which element is triggering the click event, we can

100
00:08:21,870 --> 00:08:24,740
output the target information on the page itself.

101
00:08:26,280 --> 00:08:34,700
So with the event listeners, we can do quite a bit where we can change the value of the output.

102
00:08:35,190 --> 00:08:44,010
So, for instance, we can check to see if the current target or the tag if we only have the one element

103
00:08:44,010 --> 00:08:53,610
that's represented so we can check to see if each tag text content is equal to JavaScript and have a

104
00:08:53,610 --> 00:09:03,300
condition that if it is equal to JavaScript, then where updates and change the content to equal to

105
00:09:03,300 --> 00:09:03,930
test.

106
00:09:06,280 --> 00:09:14,320
And otherwise, we're going to change it and equal it to JavaScript, so that will give us that toggling

107
00:09:14,320 --> 00:09:21,220
effect where we can when we click on it, it can toggle the values there.

108
00:09:22,000 --> 00:09:26,350
You can also add classes and we do have a class of box.

109
00:09:26,620 --> 00:09:31,030
So we're going to add in and we're going to toggle the class list on the event target.

110
00:09:31,330 --> 00:09:32,940
So in this case, it's a div.

111
00:09:33,430 --> 00:09:38,950
So either way, whether we use the E target or the div, it's going to be referencing the same element

112
00:09:38,950 --> 00:09:40,850
object from the DOM.

113
00:09:41,320 --> 00:09:51,100
So let's select the div and then using the method class list, we can either add, we can remove or

114
00:09:51,100 --> 00:09:52,830
we can toggle a class.

115
00:09:53,410 --> 00:09:55,990
So we're going to toggle the class of box.

116
00:09:56,170 --> 00:10:05,830
So every time it gets clicked, it's going to either add or remove the class from the element and going

117
00:10:05,830 --> 00:10:12,450
into the live view of the current content and see it being updated.

118
00:10:12,460 --> 00:10:15,610
We're adding the classes and we're removing the classes.

119
00:10:16,120 --> 00:10:21,920
In addition to the classes, there's a lot that we can do with the elements and the element of manipulation.

120
00:10:22,420 --> 00:10:26,590
So one of the other things that we're going to be doing in the upcoming lessons is we're going to be

121
00:10:26,590 --> 00:10:29,260
updating the style properties.

122
00:10:29,680 --> 00:10:40,270
So let's once this element gets clicked, we're going to update the color of the tag so each tag and

123
00:10:40,270 --> 00:10:42,380
set the style properties.

124
00:10:43,150 --> 00:10:47,140
And this is another object that has a lot of different property values.

125
00:10:47,530 --> 00:10:54,610
So under style, we can update the background color and if we want to do the background color to red

126
00:10:55,240 --> 00:10:56,200
when it gets clicked.

127
00:10:58,500 --> 00:11:05,760
And you can also have this toggling effect where we can have different values depending on if it gets

128
00:11:06,270 --> 00:11:07,620
toggled and clicked.

129
00:11:09,590 --> 00:11:18,460
We can also update the color value, so if we wanted to color and using either the hex or the named

130
00:11:18,460 --> 00:11:24,850
values, so all of them are available for us, we can also update the attribute types.

131
00:11:25,300 --> 00:11:31,260
So let's select the in value and we'll add an event listener to the in value.

132
00:11:31,900 --> 00:11:36,000
And if it's we'll just keep click as well.

133
00:11:38,970 --> 00:11:46,500
So whenever it gets clicked, we're going to take the input and will update the attribute type so we

134
00:11:46,500 --> 00:11:56,820
can get that attribute, so a console log and using a method from the in value from the elements and

135
00:11:56,820 --> 00:12:02,070
get attribute and the attribute that we want to get is type.

136
00:12:02,100 --> 00:12:04,420
So that's going to right now it's going to put into the console.

137
00:12:04,890 --> 00:12:07,500
So let's go back to the console, clear the console.

138
00:12:07,740 --> 00:12:11,340
So whenever we click it, we can get the attribute type.

139
00:12:11,640 --> 00:12:16,880
And we saw from before, if we can have a method to get it, we can also set it.

140
00:12:17,160 --> 00:12:18,960
So let's do a condition.

141
00:12:20,530 --> 00:12:27,910
Where if the attribute type is equal to taxed, which we saw on the console, it is they were going

142
00:12:27,910 --> 00:12:38,890
to change it and or change the attribute type of in value using that attribute and set the type and

143
00:12:38,890 --> 00:12:40,120
will set the type to No.

144
00:12:43,340 --> 00:12:52,070
And otherwise, we'll set it back to text, so this is going to actually toggle the type of input.

145
00:12:53,600 --> 00:12:55,550
So let's look that out on the bigger screen.

146
00:12:56,330 --> 00:12:59,480
So as we're clicking it, it's updating the type.

147
00:12:59,750 --> 00:13:04,040
And you can also see so the type is down here within the HTML.

148
00:13:04,430 --> 00:13:08,360
And as we're clicking at, we're updating the type and then there's also the different properties for

149
00:13:08,360 --> 00:13:08,810
the type.

150
00:13:09,050 --> 00:13:14,300
So we've got the number, then we've got the indicators to go up or down.

151
00:13:14,540 --> 00:13:18,440
And if we've just got the text, then we don't have the indicators.

152
00:13:18,590 --> 00:13:19,860
So that's the text type.

153
00:13:20,840 --> 00:13:23,030
You can also make it bigger if you want as well.

154
00:13:23,600 --> 00:13:34,190
So if we want it to take the H tag and apply the style and let's do text and actually it's to font size.

155
00:13:36,090 --> 00:13:44,240
So three and also four to apply to in value, then we just need to change the element that we're making

156
00:13:44,250 --> 00:13:45,060
updates to.

157
00:13:45,990 --> 00:13:49,740
So now we've got the input field with a different size.

158
00:13:50,020 --> 00:13:52,830
And just as we saw, we can select elements.

159
00:13:52,830 --> 00:13:57,250
We can also append and create elements dynamically with code.

160
00:13:57,810 --> 00:14:05,100
So if we want to add in a button just next to the input or if we are to append it to the output, we

161
00:14:05,100 --> 00:14:12,400
can do that as well, where we can select the element and add creating a brand new element for the page.

162
00:14:13,080 --> 00:14:14,520
So let's add a button.

163
00:14:17,340 --> 00:14:25,860
So this is the name and then using the document and create element method, specify that type of element

164
00:14:25,860 --> 00:14:33,990
that we want to create and if I cancel log out button, see that we're creating a button, but we don't

165
00:14:33,990 --> 00:14:35,090
have it on the page yet.

166
00:14:35,700 --> 00:14:41,460
You can also add text content to the button and this will just say click me.

167
00:14:42,930 --> 00:14:49,410
So the button is created, so button object is created, but it's not on the page yet, in order to

168
00:14:49,410 --> 00:14:53,660
add it to the page, we need to specify where exactly we want to add it.

169
00:14:53,940 --> 00:14:55,500
So adding it to the page.

170
00:14:56,870 --> 00:14:59,660
And whatever element we want to append it to.

171
00:15:02,330 --> 00:15:12,290
So if we want to spend it to buy each one tag or whatever, for whatever reason and add the button into

172
00:15:12,290 --> 00:15:15,200
the each one, we can use the pend method.

173
00:15:17,050 --> 00:15:25,840
And add the object to the H1, so that will append the content into the H1 and we are updating the inner

174
00:15:26,080 --> 00:15:28,370
turmoil of each one when we click it.

175
00:15:28,400 --> 00:15:29,800
So that's why it's disappearing there.

176
00:15:30,280 --> 00:15:33,920
So right now, the button is there when the page loads, when I click it.

177
00:15:33,970 --> 00:15:36,490
We're updating the H1 and that's why it's being removed.

178
00:15:37,000 --> 00:15:42,400
So let's create another element on the page that we're not updating.

179
00:15:42,430 --> 00:15:49,670
So this can be and I'll just create a span there, so make a selection of the span.

180
00:15:51,100 --> 00:15:53,140
So this is just one span.

181
00:15:53,770 --> 00:16:00,550
And because I am updating the devs interest of creating a brand new element, and now that we've got

182
00:16:00,550 --> 00:16:06,380
the element object, let's append the button to the spane instead of the tag.

183
00:16:07,480 --> 00:16:10,060
So there's our button appended to the spane.

184
00:16:12,470 --> 00:16:19,310
And if you want to make the button clickable, just as we did before with the ADD event listener, we

185
00:16:19,310 --> 00:16:26,390
can add that listener and then whenever it gets clicked, whatever we want to do with the click.

186
00:16:27,110 --> 00:16:34,430
So in this case, maybe what we want to do is create a new element, a new div appended to the body

187
00:16:34,430 --> 00:16:35,580
of the document.

188
00:16:36,440 --> 00:16:45,020
So let's do that where we'll create a new div and using the document to create elements and the elements

189
00:16:45,020 --> 00:16:50,510
type of tag that we're using is creating a div and then the new div.

190
00:16:52,020 --> 00:17:00,510
So you can also use the document body and append to the document body.

191
00:17:02,330 --> 00:17:03,990
And will depend on you, Dave.

192
00:17:05,850 --> 00:17:12,810
And because this is an object, so we can update the content afterwards as well, and it will be reflected

193
00:17:12,810 --> 00:17:14,220
into the div that was appended.

194
00:17:14,790 --> 00:17:19,290
So let's take the content will in text content.

195
00:17:19,560 --> 00:17:26,040
And this content is going to be whatever we have within the input value at this current time.

196
00:17:26,820 --> 00:17:28,800
So it's just going to pen that to the page.

197
00:17:30,890 --> 00:17:33,230
So now it's adding in a bunch of the diffs.

198
00:17:34,930 --> 00:17:36,640
If we look at the page content.

199
00:17:41,100 --> 00:17:47,970
We've got a bunch of diffs that now are appended to the page if we have a value for something like a

200
00:17:47,970 --> 00:17:56,190
counter, so every time we click, it will increment counter, will reset the value.

201
00:17:59,660 --> 00:18:03,440
Or actually, we can append the d'Hiv content.

202
00:18:05,130 --> 00:18:10,500
And using the tactics, so wrap it with the curly brackets.

203
00:18:13,440 --> 00:18:17,940
And let's output the value of counter within that element as well.

204
00:18:18,600 --> 00:18:27,960
So now we're adding a bunch of diffs there and also notice that it's only these elements that were the

205
00:18:27,960 --> 00:18:34,080
original device on the page that have the event listener, because we added that listener afterwards

206
00:18:34,080 --> 00:18:35,220
within the for each.

207
00:18:36,060 --> 00:18:39,180
So there's another way to do this, where we create a function.

208
00:18:42,080 --> 00:18:52,220
My click, and it's going to pass in the event object, and then we can take this content and run this

209
00:18:52,220 --> 00:18:59,000
function code instead of using the div, we need to use the target to toggle the box class.

210
00:19:00,530 --> 00:19:05,150
And then within the click event, we can just add the click event.

211
00:19:05,330 --> 00:19:11,210
And then as we create the new device, let's add the click event to these new device.

212
00:19:13,480 --> 00:19:17,660
So that way, all of the devs on the page will have the same functionality.

213
00:19:18,310 --> 00:19:20,350
So let's see if we can add the new device.

214
00:19:20,770 --> 00:19:26,440
And now when we click the new device, we're able to toggle the class on those elements.

215
00:19:29,160 --> 00:19:35,220
So there's the elements and we can click it and they're working the same way as the initial device did,

216
00:19:35,400 --> 00:19:43,710
we were able to toggle the classes on those elements and there is a difference between append and append

217
00:19:43,710 --> 00:19:44,250
child.

218
00:19:44,910 --> 00:19:56,250
So with append, do a vowel one and consed vowel to and for most of the lessons, we are going to be

219
00:19:56,250 --> 00:20:03,810
using the append child, but we can also append where we're using append not append child.

220
00:20:04,290 --> 00:20:11,970
And the difference between the two is that the append is going to doesn't have a callback, whereas

221
00:20:11,970 --> 00:20:14,770
the Pend child does have a callback.

222
00:20:15,060 --> 00:20:21,710
So if we do Val, when it comes back undefined and Val to will reference that element that was appended.

223
00:20:22,140 --> 00:20:25,650
So that's another way to create the reference to the element.

224
00:20:25,740 --> 00:20:30,990
If you want to create another variable that references the element that was created, then you could

225
00:20:30,990 --> 00:20:32,880
use the append child method.

226
00:20:36,080 --> 00:20:43,070
So I know we've covered quite a bit, and this was meant as a refresher and a quick overview of the

227
00:20:43,070 --> 00:20:48,470
JavaScript code that we're going to be needing in the upcoming lessons in order to manipulate the page

228
00:20:48,470 --> 00:20:53,120
content with the JSON data and the JavaScript object contents.