Hello and welcome to another new episode of learning simplified.
In this tutorial we are going to discuss on Event handlers.
In the previous tutorial we had discussed about the
onclick event Handler that we used in to our JavaScript project.
And in this tutorial we are going to learn about some more event Handlers
with examples.
So let's start.
So here comes the first thing, the onMouseover event.
As we had discussed the onclick event Handler into our previous tutorial,
we will be omitting it into this tutorial and
will be starting it with this onMouseover event handler.
So in this particular case all we have to do, if we get back into the body
part and we are creating...
So we have created a hyperlink reference into this segment, into our body part, and there
we are using this onMouseover event handler.
And here we are providing an alert box - here it goes.
Now the other thing, we have already used the double inverted comma.
So all we are going to do we are going to use
an inverted comma in this particular case..
There it goes.
So if we now get back to our project and reload, we can see that an alert
box is been created over here; it's time whenever we are moving or cursor in into this
link here, when we can see that a pop up dialogue box will be appearing.
So this is the purpose that is being served by this onmouseover
event handler.
Now we are just mentioning that instead of onMouseover, we are now using onmouseout.
Pay close attention over here.
If we just move our cursor in, nothing happens.
If we move our cursor out we can see that the same popup
dialogue box is appearing into your webpage Browser.
So this is the thing that will happen in case if you use this onmouseout
option with your ahref link; this popup dialogue box will appear over here.
Now instead of onmouseout, first of all let's keep it as it is over here and here with
this body tag we are now using onload Option.
Place here onload event Handler and if we now place another alert box..
Now if we just get back into our project and reload we can
see that here comes the dialogue box that says 'this dialogue box will be generated
before page loading'; that means we have used this onload event handler here which is
generating an alert box just prior to the loading of the page.
And that is being executed into our web project.
If we press ok the rest of the thing will be going as it was.
There's no, absolutely no problem with this.
So the thing is we have created here onload option.
Now let's get a little bit of complicated.
For say we have now created a form field over here...
Now we have created a input type text with a proper ID name of 'name' and a
placeholder with 'Enter name here'.
First of all get back to your project and reload and
you can see the form field has been produced with a particular input type text here with
enter name.
You may use some kind of <br /> tag here if you want.
As we are not using any kind of stylesheet.CSS file with this page,
hence we have to create this kind of things to make it a little bit more spacious.
Get back and you can see that the space is now
created.
We can see that this form field is been created over here.
Now our intention is whenever we put some values into this form
field after we are out of this form field, then these values will be transformed into
its uppercase letter.
So this is the main intention.
We are creating here....
Any value that is been inserted into this input type text will be transformed into its
upper case letter.
And that is why we have created this function, here,'to_upper_case()'.
We have created a variable a against which the value is fetched from this particular
input type name that means this ID name - this value is being fetched and is assigned
against this variable a; and now we are just using that particular value to transform
into the uppercase letter.
That is what is being depicted over here.
And now that we have finished all these things so let's get
back to our project..
Here let's reload; now we are entering some name here and now if we unselect this
particular ID name and we can see that everything is been transformed into its uppercase
letter.
When this input type text is been unchecked or been unfocused, only under this
condition the function is triggered and we can that all these things are now transformed
into it's uppercase letter.
Now the other thing is, the onFocus condition.
Onfocus condition practically works whenever we are selecting a particular text
field.
Whenever this input type text is been checked, in that particular case what will
be its behavior this is described by this particular thing onFocus, this particular
event Handler onFocus.
So all we are doing now we are using and onfocus event Handler; but
first of all we need to define all those particular functions, those particular attributes
or properties before we make any such kind of thing over here.
So first of all we are now getting back to our script tag again
and we are creating another function click_field();
So we have created another function over here which is known as click_field.
And inside we are starting now...
So what does this thing imply?
According to the statement we will have to select any document which has an idea
of what?
We want to change the background property of this particular input type text,
this one with an ID name of 'name'.
So all we need to do we need to copy this ID name
and we are pasting it this particular...
So here we are stating that we need to change
the background property to yellow to any element which has an ID of 'name'.
Now if we just get back into our project and here we
say that, first of all copy this function name that we have created...
Copy.
And now against this onfocus event handler all you
have to do you have to paste it here.
Now get back to your project and reload and now if
we select this particular input type and now we can see that the background colour is now
changed into yellow.
Again if we want to remove the background color whenever it is
not focused or whenever it is unfocused, in that particular case we need to create another
function over here.
We are just copying it and pasting it over here.
And we are now naming it as 'remove_field()'.
Now hear the input ID name will be the same, ' name'; style
background will be none.
With this quotation we're practically telling that when
about this particular form field won't be focused then it will retain its normal background
color that it had.
We are now using this function name.
Just copy this function name; and here comes another crucial
information.
We have to use this onblur function again as I have told you that this
onblur event Handler only acts when the desired form field is not being checked or not
being focused into.
Jasmine sandal this condition.
What we intend to do over here?
The first thing that we intend to do - whenever
this background color will be removed and that we have used previously that the input
value will be transformed into its uppercase letter - the same thing will be retained over
here.
So that is why we are now getting back to our project and we are pressing both
of them simultaneously side by side.
So that is what it is going to do over here.
This onblur event handler- it is going to Trigger both the functions; this 'to_upper_case()'
function and this 'remove_field()' function.
So let's Press control+ s and press Control + F5 and reload.
Now if we select this form field and say any name and now if
we click outside this form field, we can see that both the background color is now changed
into its normal color; that means this function is now into action.
Here it goes.
This function is now into action and on the other hand, 'to_upper_case()', this function
is also into action.
So both of them and now into action.
There it goes.
So that is why we can see that both the properties of
the input field when the form field is not focused is now been executed with background
color style property; it is now changing into normal color and the name is transformed
into uppercase letter.
So that's all for today's tutorial.
Hope you guys have like this tutorial video hope to
see you guys in our next tutorial.
Till then, bye.
Không có nhận xét nào:
Đăng nhận xét