WEBVTT

00:00:06.970 --> 00:00:11.690
In this video we're going to learn how to respond to events using de Querrey.

00:00:11.810 --> 00:00:12.480
OK.

00:00:12.540 --> 00:00:20.260
We're using the same source code as in the previous file with just some of the scripts contents for

00:00:20.400 --> 00:00:21.250
for now.

00:00:21.270 --> 00:00:32.400
So to start we want to write some code so that we are able to click on the on any paragraph and change

00:00:32.760 --> 00:00:36.730
the color of all programs.

00:00:36.950 --> 00:00:37.410
OK.

00:00:37.650 --> 00:00:50.570
So because of all we are going to use our load action and then inside the function our rights are A.E.

00:00:50.580 --> 00:00:51.070
code.

00:00:51.240 --> 00:00:59.020
So we need to access all the programs so the syntax is Dolor forward by the selector.

00:00:59.040 --> 00:01:09.590
You know casemates B and the event is click OK so in J-curve it's a little bit different so in javascript

00:01:09.590 --> 00:01:13.110
we know that we used to use the On Click event.

00:01:13.150 --> 00:01:16.730
And in Jaker it's going to be click OK.

00:01:16.730 --> 00:01:23.470
And then following that we need to set a function.

00:01:24.010 --> 00:01:25.620
OK.

00:01:27.370 --> 00:01:27.940
OK.

00:01:27.990 --> 00:01:31.290
And now he writes the action.

00:01:31.290 --> 00:01:38.300
So first of all we need to access the elements that we want to change which is all the grabs we need

00:01:38.310 --> 00:01:40.490
the selector be.

00:01:40.680 --> 00:01:52.080
And we're going to use the yes method to set the background color to a specific value so the property

00:01:52.200 --> 00:02:00.460
we're looking at is background color and let's add that to a certain color.

00:02:01.420 --> 00:02:05.620
Let's go back to the example.

00:02:06.540 --> 00:02:12.320
Now if we click on any program we can see that's all paragraphs they turn pink.

00:02:12.570 --> 00:02:13.510
OK.

00:02:14.250 --> 00:02:17.520
All right so that's one example.

00:02:17.520 --> 00:02:21.820
So again so we selected the elements we want.

00:02:21.820 --> 00:02:28.620
And so we look in here as paragraphs and the event is click and then following the click we need to

00:02:28.860 --> 00:02:34.990
put the whole code of the function as we are sitting here between parentheses.

00:02:34.990 --> 00:02:41.040
They were just setting the function doesn't have any parameters and all the code goes between curly

00:02:41.040 --> 00:02:41.810
brackets.

00:02:42.360 --> 00:02:45.780
And we're accessing the paragraphs using the selection.

00:02:46.020 --> 00:02:49.130
And then we're using this as a method to change the background color.

00:02:49.390 --> 00:02:58.860
OK so we can go for another example so let's say that rather than changing the background color of all

00:02:58.860 --> 00:03:04.520
programs we only want to change the color of the paragraph that we clicked.

00:03:04.530 --> 00:03:04.980
OK.

00:03:05.100 --> 00:03:15.300
So if we Colman's that piece of code and just copy that OK just copy it here and now.

00:03:15.300 --> 00:03:21.300
So rather than selecting all the paragraphs and change the background color there is a simpler way we

00:03:21.300 --> 00:03:25.550
get to select the elements that we clicked.

00:03:25.620 --> 00:03:29.360
And for that we going to use the keyword this.

00:03:29.370 --> 00:03:30.420
So what do we mean by that.

00:03:30.420 --> 00:03:37.890
So this means that we're selecting all the paragraphs and we are we are saying here in the event of

00:03:37.890 --> 00:03:41.070
clicking gets this.

00:03:41.080 --> 00:03:48.100
OK so this refers to whatever elements we are clicking so the elements the elements as we click is going

00:03:48.170 --> 00:03:52.810
to see their success changed the background color is going to be changed.

00:03:52.950 --> 00:03:53.650
OK.

00:03:53.790 --> 00:03:58.980
So that's what we mean by this so let's try it and see what happens so if we click on a paragraph OK

00:03:59.010 --> 00:04:01.890
only the paragraph changes only the program changes.

00:04:02.100 --> 00:04:04.670
OK fine.

00:04:05.070 --> 00:04:05.880
All right.

00:04:06.210 --> 00:04:09.560
OK so now let's try something else.

00:04:09.560 --> 00:04:15.090
It's common does go for another example.

00:04:17.190 --> 00:04:17.460
OK.

00:04:17.460 --> 00:04:27.750
Now we want want to be able to help on any barograph and have that paragraph changing their background

00:04:27.750 --> 00:04:28.280
color.

00:04:28.530 --> 00:04:29.220
OK.

00:04:29.220 --> 00:04:33.580
So he selects all paragraphs OK.

00:04:33.630 --> 00:04:40.990
Using the piece elixir and then the events this time is going to be mouse over again.

00:04:41.450 --> 00:04:50.220
And we know it's a function between the parentheses and the function is going to be sets like this.

00:04:50.220 --> 00:04:51.640
So no parameters.

00:04:51.690 --> 00:04:57.270
So MC penances and then open curly brackets and close curly brackets.

00:04:57.270 --> 00:04:58.460
All right.

00:04:58.880 --> 00:05:03.030
So we want to select this.

00:05:03.030 --> 00:05:11.850
OK so we selecting the barograph as we go over on and we want to change the CSX property which is the

00:05:12.210 --> 00:05:15.300
background color and we would say that

00:05:18.790 --> 00:05:25.330
too it go for that as well.

00:05:25.960 --> 00:05:26.590
So it's tough.

00:05:26.600 --> 00:05:30.960
And so now if we have any program we can see the list over.

00:05:31.120 --> 00:05:35.340
Well this one easy let's go over that one I want that one.

00:05:35.600 --> 00:05:36.100
OK.

00:05:36.440 --> 00:05:41.950
So it is working now we want to add something else we want to add another event.

00:05:42.170 --> 00:05:46.390
When the mouse leaves the Piver what happens.

00:05:46.390 --> 00:05:51.100
So rather than most most of what we're going to have most Outs.

00:05:51.800 --> 00:05:57.680
And we want the background color ok to

00:06:00.290 --> 00:06:05.270
return to its original status which is empty is a mistake.

00:06:05.360 --> 00:06:08.210
So most of it's so nice.

00:06:08.630 --> 00:06:09.490
OK.

00:06:09.760 --> 00:06:15.340
So no see when we have the most on the paragraph we can see that the color is mean.

00:06:15.380 --> 00:06:20.160
When we leave you know it returns to its original state.

00:06:20.260 --> 00:06:24.360
All right.

00:06:25.850 --> 00:06:26.570
Perfect.

00:06:26.880 --> 00:06:27.180
OK.

00:06:27.230 --> 00:06:31.880
Now let's move to foreign fields OK let's have a look at this input.

00:06:31.900 --> 00:06:39.870
We want to change the background color property of the inputs when it's focus.

00:06:39.980 --> 00:06:41.070
OK.

00:06:41.200 --> 00:06:41.530
All right.

00:06:41.530 --> 00:06:41.980
So

00:06:46.570 --> 00:06:47.740
we need to select

00:06:50.500 --> 00:06:52.630
all the inputs of the web page.

00:06:52.690 --> 00:06:53.290
OK.

00:06:53.640 --> 00:07:00.160
And the event is focus on rates and we are setting a function

00:07:04.850 --> 00:07:08.980
that will change the background color of this.

00:07:09.000 --> 00:07:10.730
OK.

00:07:11.180 --> 00:07:18.010
Because our you know the elements that we are changing is exactly the same elements that we are selecting

00:07:18.010 --> 00:07:18.130
.

00:07:18.130 --> 00:07:26.500
So this is then we're changing the background color to something really just copy paste.

00:07:26.940 --> 00:07:31.280
Let's change the background color to something like this.

00:07:31.440 --> 00:07:31.840
OK.

00:07:32.140 --> 00:07:34.480
So let's try it and see.

00:07:34.570 --> 00:07:39.600
When you focus we can see that the background color becomes blue gray.

00:07:39.820 --> 00:07:42.610
This is something different.

00:07:42.610 --> 00:07:50.470
Let's go for you know dark you know like you know an inspector.

00:07:50.600 --> 00:07:51.250
OK.

00:07:51.500 --> 00:07:58.490
So now we want to do something different when the elements doesn't have focus anymore.

00:07:58.810 --> 00:07:59.310
OK.

00:07:59.530 --> 00:08:05.400
So the events this time is going to be blur.

00:08:05.600 --> 00:08:17.000
Rather than focus on right and let's say it's the background color this time to yellow he's going to

00:08:17.000 --> 00:08:17.300
go

00:08:20.300 --> 00:08:21.340
six times.

00:08:21.380 --> 00:08:26.560
So no focus and we'll leave these guys back.

00:08:26.560 --> 00:08:27.770
All right.

00:08:28.690 --> 00:08:37.480
All right so now we want to change the CSSA of the inputs when we are typing.

00:08:37.750 --> 00:08:40.840
So we're going to need another event here.

00:08:41.230 --> 00:08:44.030
So it's something that we call key up.

00:08:44.020 --> 00:08:46.700
So when we click on a button on the keyboard.

00:08:47.020 --> 00:08:47.590
OK.

00:08:47.670 --> 00:08:48.970
And we just leave the button.

00:08:49.120 --> 00:08:50.570
That's a key up.

00:08:50.580 --> 00:08:51.190
All right.

00:08:51.520 --> 00:08:53.860
So these events

00:08:57.380 --> 00:09:02.250
we can see it an action to respond to these events.

00:09:02.500 --> 00:09:10.670
So rather than blur we're going to have keyed up OK and we want for example the background color to

00:09:10.720 --> 00:09:15.850
turn for example blue something painless.

00:09:15.880 --> 00:09:23.250
Let's try so let's refresh so no one because we can see the yellow color.

00:09:23.440 --> 00:09:24.300
OK.

00:09:24.520 --> 00:09:33.650
If we leave turns white and if we write something becomes blue OK if relief becomes white.

00:09:33.670 --> 00:09:34.860
OK.

00:09:35.020 --> 00:09:47.370
One final change we want is when we click on the Submit button we'd like the value to be reset to nothing

00:09:47.390 --> 00:09:47.570
.

00:09:47.750 --> 00:09:48.150
OK.

00:09:48.350 --> 00:09:53.070
So you want any value as we input that to disappear.

00:09:53.270 --> 00:09:56.830
Ok to be reset to the empty string.

00:09:57.080 --> 00:10:10.370
So what we need to do is to get its copy paste the same code previously and now we are accessing the

00:10:10.730 --> 00:10:15.480
button of ID submit.

00:10:15.810 --> 00:10:16.430
OK.

00:10:16.500 --> 00:10:18.720
It's called ID submit.

00:10:18.770 --> 00:10:31.120
And the event is click OK and the function is going to change properties of the elements of ID inputs

00:10:31.130 --> 00:10:32.440
.

00:10:33.730 --> 00:10:34.460
All right.

00:10:34.930 --> 00:10:37.610
So it needs to be a string.

00:10:38.090 --> 00:10:38.730
All right.

00:10:38.750 --> 00:10:46.660
And we are basically setting the background color to whites.

00:10:47.610 --> 00:10:56.640
And also we are changing the value of the input so.

00:10:57.410 --> 00:11:00.130
So again we need to access the inputs

00:11:03.500 --> 00:11:07.820
and so Id inputs

00:11:10.550 --> 00:11:15.510
and we are changing the value so the function this time is going to be Voll.

00:11:15.620 --> 00:11:16.340
All right.

00:11:16.850 --> 00:11:23.570
And we are setting the value to the barometer because we are going to use in the method parameter.

00:11:23.570 --> 00:11:26.230
So it's going to be an empty string.

00:11:26.380 --> 00:11:27.270
All right.

00:11:27.400 --> 00:11:29.660
So let's try it now and see what up.

00:11:29.660 --> 00:11:38.860
So now we focus right then and we click on submit and we can see that the values is resets to a an empty

00:11:38.870 --> 00:11:39.330
string.

00:11:39.460 --> 00:11:43.800
And also the color the background color is reset to White's color.

00:11:44.000 --> 00:11:44.490
All right.

00:11:44.650 --> 00:11:52.240
So that's how the syntax of events and responding to events work in a next video will learn how to change

00:11:52.900 --> 00:11:55.840
a shemale contents and attributes