Java Script Event Handling

Event handling in JavaScript. So main focus now is going to be on how we can make the web pages interactive by handling the events which are supported by JavaScript. So these are the list of basic events. I'm not saying this is the complete list of events on focus. Actually, event name is focus, but we will write an attribute for an input element or for a tag as on focus and this event is applicable for select tag, text and text area. So when is on focus event raised on focus event is raised when the form field gets the focus. Likewise, Blur event is raised. When the form loses the focus change. When you change the content of the text box and then lose the focus, then Onchange event will be raised. And of course all these three events are applicable for select text box and text area like that. When you do some selection within the text box, if you select some text on select event is going to be raised on mouse over on mouse out. When you take the mouse cursor over the element on Click Yes, when you click on the item with the mouse, it can be a tag button, check box, radio reset, submit, and so on. onLoad is an event. Basically load is an event which is going to execute when the page is completely loaded by the browser, including the dependent content like images and other things. After everything is loaded by the browser on the client, then onLoad event is going to execute and on unload. When from the out page you are navigating to another page. Basically you are opening a new document, so you're navigating away from the current document. In such case, unload event is going to be raised. Remember, load and unload events are handled at body tag level. So for body tag we have to give onload is equal to some value, and for body tag only we have to give on. Unload is equal to. And finally we have got submit event which is going to be raised when the form tag for form tag we write submit on submit is equal to some method and that is going to execute when the form is submitted. Anyways, all these things I want to demonstrate with simple examples so that you get more clarity. So I go back to my studio. This time let's take a new project or rather new file HTML page. And we'll have a form tag name. Let's say form one with some action, which right now is going to be nothing. Same file, only current file only. We can give it as action because we do not have anything right now. So just close it followed by this we will give inside form tag. Let us begin with a simple input which is type is equal to button name of the button is. Be BTN say hello and value of the button I'll give is say hello now close this. Save it as JS two dot HTML. Now we should open this file js two dot HTML in browser. So modifier from JS one to JS two. We have simple button, nothing else. Now what is my requirement when I click on this button I should get Hello. Basically a alert. Basically a message box should come with. Hello there. Now how can we do this for this? We know that for button we have got a click event. So here we should write on click is equal to the JavaScript code. Now how do you write JavaScript? You're actually supposed to write JavaScript colon and followed by that the relevant JavaScript code for showing the message box, which is in JavaScript. There is a function called as alert and in brackets. Here you're supposed to give the message now because the whole attribute is as it is given in double quote here, let me give single quote. Let us say hello in JavaScript, but mind you, we can use single quotes or double quotes can be used interchangeably. I repeat something something different, especially for C-sharp programmers in C-sharp. We know that strings must be always enclosed in double quotes only, but in JavaScript a string can be enclosed, either in double quotes or in single quotes. Both are okay. So because attribute value here is in double quotes this string we are putting it in single quote. Alternatively, you can put attributes in single quote. The whole thing here can be put as single quote, but here you may want to put double quotes even this is fine. Both are okay. Now come back to browser again, refresh the page and click on this. See we got hello message box to get message box. What we need is JavaScript. Now let me. Fine tune this. This was actually a requirement in the initial stages of the JavaScript where we had to write JavaScript colon and that, but of late they made it as optional. That means now I don't need to write JavaScript. We can keep it as simple alert. It is understood that the value of onClick is supposed to be a script only and hence we don't need to write. So this will also give me the same output. Just refresh it, click and still we get the same output. Now back. What if I want to have multiple statement? Right now it is alert. Hello only. But what? What if there are many statements which I want to execute here? In such case what is recommended is in the head section of a HTML page we write script and in this we write a function. Now the syntax for writing a JavaScript function is start with a keyword called as function. You have to start with the function keyword followed by that some function name. Let us say say hello is the function name I want to call and then floor braces within this function. Now let us say I move this code alert cut from here and put it here. And this function we can call from onClick symbol. So the onClick attribute, which actually maps the click event for this button to a function called as, say, hello and where do we write the function? Do not write function within the body. Specifically write all the functions which we want to use from the code inside body in script section, which is placed inside head. So in head I am writing a script and that's where I want to use it. Now save this, come back refresh. You will still get the same output. Output is not changing. Just one more improvement we have done advantage is what here. If needed, we can comfortably write many statements one after the other. Let's say for example, I say first alert hello and then I will say alert by save it, come back, refresh now click on the button first will get hello, click on okay and then we'll get by. So multiple statements when you want to execute mapping to the event handler. In such case, it is recommended to have a separate function rather than complicating the whole thing here itself. It's a recommendation, not a compulsion here itself. I can write alert. Hello. Semicolon alert by possible, but we have to keep separating by semicolon and it becomes very congested and difficult to manage. Now, my intention is little more than this here. I just don't want. Hello. What I want to do is in this I would like to provide name followed by that I will give input tab text. Let's say txt name and here I'll give BR break. Now come back to browser and see how it is. Yes. Now what my requirement is if I give here some name when I click on say hello in the alert here I want to display hello, followed by that name demo I want here. So how do we get that? Hello. Followed by that name here. So now we need to access the value of this text box. Now, where is this text box? This text box is inside a form. And where is the form? Form is inside the document. So let us say, suppose if you are in a particular location, let us say you are in a particular room of a building. Now, where is the room? On a particular floor. Where is the floor? In the building? Where is the building? On a street. Where is the street? In a city. Where is the city? In state. So if I want to go to a particular room, can I say country dot, state, dot street, dot country, dot state, dot city, dot street dot a building name, dot floor number dot, room number. That means from big we are getting closer and closer to the actual thing where we are interested in. So here also we can actually start with document, document, inside document. What do we have a form, but there can be many forms. So which form we are interested in the first form. So you can write here forms of zero inside document. We are interested in forms of zero inside form. There are many input elements, so we can generally say dot elements of which element. Here again, input element is the first element and this is the second element. So can I give you a zero? Yes. So can I say now? Document dot forms of zero dot elements of zero is referring to this input element. Now, from this input element, we are interested in picking up the value attribute. So say dot value. IntelliSense will not show properly, but just type whatever is the attribute name give here. So this is the value of text box. So where name is equal to so and so. And this I can concatenate with hello as a variable. So name is a variable whose value I'm getting from document which has forms, but we know it is the first form we are talking about dot in that form, the first element its value attribute. Save this now come back, refresh, give your demo, say hello, we got hello demo give your a we get hello. A whatever we give here, that value is going to be displayed in the message box. Now let's improve upon this same line. I can write a little shortcut. I can say var name is equal to document dot. We already know the name of the form, so I can write here dot forms of rather than using index form one likewise dot elements of what form text box so txt name. Dot value. So this is also what we can do. Let's save it. Come back, refresh, give your a value and we still should get the same result, you see. So either write index here or the name of the element. You still get the same output. Same thing can be further written like this. Var name is equal to shortcut. This is document dot. Directly we can say form one dot in that form one. What do we have? TXT name in that? What do we have? Value directly write document dot form one dot txt name dot value. Come back, refresh, give your a click on, say hello. We still get the same output. So all the three means the same. And I believe this is the simplest. So this is precisely proper document object model. So what I told you earlier was document object model is going to construct a tree of object wherein document is the root from document. We reached form one, next level from form one, we reached next level. So basically we are going from one level to the other level and going deeper like this. So that's how we reach the value attribute. And we got the name, hello, concatenate with name. So any, any input element, any attribute can be read programmatically using this object model. So just observe again all these things. The syntax is very important and the worst part of JavaScript is it is case sensitive. Every case has to match properly. If you would have written your uppercase forms gone, it would not work. It is going to work only if you give lowercase forms here. Now let us do one more small example. What I want to do here. Here. Only I'll put some char just separating the form. I'll have to input elements. Text. Let's say this is t one and then I'll have one more text box. This is t two requirement is simple. Whatever I type in the text box one as it is in uppercase, it should appear in text box two. Whatever I type in text box one in uppercase it should appear in text box two. So which event I should handle every time I change the text in the text box, the event which is going to be changed is change event. So the attribute name will be on change. And now let us map it to some function is equal to some function. What is that? Copy text to t to something relevant name you give copy text from t1 to T2. Now copy this function name and where should I write this function in head section? So in JavaScript we always write function beginning with function followed by that function name and then the flower braces and write the code here. Now what should be the code? First I should get the value of T one and then I should copy that value into t two. So how to get value of t one. Just say var value of T1V1 document dot. Can I say form one direct? Yes. Dot the name of the text box t one dot value like this. This v one. I should now convert to uppercase and put it in document dot form 1.2. value. So v 1.2 upper is the function which will convert a string to uppercase. So right now to upper has not come. Ideally what you do is see v one is equal to some string dummy. Now your editor knows v one is string now type dot to upper rather to uppercase, you see. But if you just write like this it will not know that it is string. So dummy string you put into it. So studio knows that v one now has string, so automatically it will show you the IntelliSense of string. So to upper is wrong. What I should use is to uppercase. That is the right function. Now delete this effectively use it to upper case. You have to type it. T is lowercase mind you there too. T is lowercase. Uppercase u and C are uppercase. Now save this, come back to browser, refresh it. We have two text boxes as I type here. Anything. It's not coming now. It is not coming. Very important thing you should know as we change the text in the textbox Onchange event is not immediately raised. Onchange event is raised only when we type the text in the text box and lose the focus. So now on keyboard I'm pressing tab tab. See only when you lose the focus. Onchange event is raised as you keep typing. It is not Onchange event. Instead, there is another event for that which is going to be raised which is on key press. On key press is the event. Now come back here to browser refresh. Now type here. As you keep typing, the text will appear there. Now what is important here, you see I type. A no problem is all text is not clearing. Now type B, c, the last character will not appear. C C is not appearing. But when I type D, c will appear. When I type E last character is not appearing. The reason being on keypress event is going to be raised and when the Onkeypress event is raised at that time the character has not appeared in the text box. The character will appear in the text box only when you have up the key. I mean you have released your key from the keyboard. Now refresh it. Now type a C immediately on key up. This is the right place, so you should know this difference. Now put everything in lowercase here. A, B, C, D, Here it is. All uppercase, whatever you type here. Here we put lowercase uppercase on the right hand side. It's all uppercase. So on key up, on key, down on change, I repeat on change or rather change event is going to be raised only when you change the text in the text box and lose. The focus on key down event is raised. But when an on key down event is raised, the text has not yet appeared in the text box. Only after key down it will appear and after key down you release the key at that time on key up event will be raised, but the text has already appeared in on Key Up. So if you want to take the latest key which has been pressed, yes, you will have to handle on key up and before the text has appeared in the text box on Key Down, that's how you should differentiate. So yes, it's not just this events which are there. There are more events, I told you, but these are the basic ones which are commonly used in JavaScript. Dom. See. And so on like the two upper have used you can use to lower also. Next let's say I go back to the same example again. This time I put a break. I want to provide now two text boxes. This first one is let's say txt n one. And second is txt n two. Default value. And this is ten. This default value. And this is to no event here. Followed by this I want to provide a dropdown list. Now how do we get dropdown list for dropdown list? The tag we have to use is select tag. And for select I would like to give options as plus that is addition. Subtraction, multiplication, division, subtraction, multiplication and division. Let's give some name to select because that's going to be the reference point. Say we call it as select operation. See, I'm following proper naming convention for text box. I'm beginning with text for button. I'm beginning with BTN like that for Select. I begin with Select. You can as well call it as DDL also because we know it is dropdown list. We are not giving size. Remember select when given with size becomes list box select without size is dropdown list. And then I will provide here one more input element which is let us say txt result. Now result. I will mark it as read only. It should not be editable. I'm going to provide value in n one value in n two and that operation will perform based on the selected value in select. Let us see. Let us see the HTML first, let's give VR instead of VR. Let's give actually save this, come back refresh. Now what is my requirement when I add right now default value of result we can give is 12, ten plus two, add is 12 like that. So save this first, come back refresh. Now if I change from add to subtract, I want to display here eight. Similarly, when I change here multiply it should display 20 and when I display here select here div it should display five based on these two values, operation should be performed and result should be displayed in the third text box. So a lot of things we are going to learn in this particular example. First, we have to learn how we can get the selected value here because based on the selected value, only operation will be performed. And of course we already know how to get the value of N one and two and how to set the value of text box. This this part we have learned. So for dropdown list for select tag we have got change event. So we write here on change is equal to some function. Now that function can be something like calculate close it now where should I write this function again? On top in head function calculate what to calculate first let us get the value of n one How to get document dot form one dot. Form one is the name of the element text box txt n one dot value we lowercase. Same thing I should do for n two. So I got n one. I got n two. Now the most important aspect how do we get the value of option which is selected? This is the option which is selected. Then I should get minus. If this is the option which is selected, then I should get Star. So how do we get the value of the option which is selected now? Where is option? Option is inside select. Where is select inside form. So first go to form, then go to select. Then from select we have to reach option. Now the problem is option does not have name. So under select options is going to become a property because multiple options are here. So under select options will become a property. Let's try I give now what is the requirement now selected option. So document dot form one dot. Selected, which is drop down operation Dot in select. Basically in select tag, we have a property called as selected index. So right now we got the selected index. Now once I get selected index with that index I should get the option. So now I will say selected option is equal to again document dot form one dot drop down operation dot. Options. Now under dropdown list, we have got options. Which option? The option with the selected index. So we now get the selected option that is going to represent the option tag under select options. There are many which option? The one which is selected. How to get selected selected index is the property for it. How should I know? I just know you also learn that way you have to figure out. Now, once I get the selected option based on the selected option value, every option has two properties. This is text and this is value. So we don't want text. We want to do something based on value. So we want to perform an action based on value. So right here switch tab tab selected option dot value. What to do? I want to calculate the result and display it in the third text box which is document dot form one dot txt result dot value is equal to I will give n1 plus N2 and then we should end switch with break. Same syntax as in c sharp. This is case plus for case plus do this like that. I should have different other cases minus multiplication division. Minus multiplication division and same is the operator we should use here minus multiplication division. Save it. Plus minus multiplication division plus, minus multiplication division. And now let us test it. Come back to browser. Save it, refresh it. Change it to subtract. Perfectly working. Change it to multiply. Perfectly working. Change it to divide. Perfectly working. Now change it to add. You will see that the value will get is 102. Now why is it 102? Problem is plus operator works for both numbers and strings. And here it is assuming n one and two value as string value is string value is string. So it is assuming it is string concatenation. So somehow I have to tell JavaScript interpreter that in this particular case the value of N one and the value of N two is not string but integer. How to do that? Pass int and give here. N one like that here also pass n So pass int is a function in JavaScript which is responsible for converting the value to integer. Like that. We have got pass float also pass int pass float. If you have a double value basically point value, then you should use pass float. If you don't have a decimal part, then you should use pass int. Why? It is not required here because minus is not overloaded for string multiplication is not overloaded for string. Now save this and execute for refresh this first, change it to some other value. Then go back to add and this time you see 12 will come. Perfect. Now give this as zero for subtract and all it is fine. But what happens for div infinity division by zero is not an exception. It is infinity. Just remember that. What if this is also zero? We will get not a number first, change the value and then go back to again. Div we will get not a number is a name, so same as C-sharp rule actually same as Java, same as C-sharp we have got here also. So what all we have learned in this example, many things actually we learned how we can get a reference to a dropdown list, select index. Then based on the selected index, how can we get reference to the particular option for that option? How can we get value and based on the value, we can perform operations. And we have also learned how to convert a string to integer in JavaScript in C sharp it is int dot pass, but here it is passing like that. We have also seen an example of switch, how to use a switch statement wherein for every case we have to give a break. So very, very descriptive, very, very useful example many concepts covered in one single place. Most importantly, at this point of time, you are very clear about how various input elements can be accessed. Of course, we are going to continue with few more input elements like checkbox radio button, but yes, in general we know now how can we access input elements of the form? Let me add a small value to the program. We have this two text boxes T1T2. Now what I want to do is in between t one and T two, I will provide two radio buttons, one for lowercase, one for uppercase. How to do that input type is equal to radio. We want to group them. So I will say RB in case uppercase lowercase value of uppercase is let's say you and here I'll give two upper like this one more radio button here L two lower both the radio buttons have same name first, save this and see the output. Now my requirement is simple. If I put a check mark here and when I type the text here, it should come in uppercase, which is happening now. But when I put a check mark here, that means when I select to lower and if I type the text here, this should be in lowercase. So point is actually I want to teach you how to find out whether a particular radio button is checked or not. Now, by default, I. Want to offer to be checked. So we already know we have a attribute called as checked is equal to checked here. Just do that. Now where to write the code. We already have this copy text from t1 to T2 in that only I should write the code because that is the place where we are setting the value of T2. Yes. So let's go to that method now. Now here it should be either this or this. Now, which one to execute? Let's do this. If. Now, how to find out whether the first radio button is checked or not. There is a challenge here. Document dot Form one dot RB case. Now RPN case is referring to which check box because RPN case is two times. Case is for this radio button also. And this radio button also. So which radio button are we referring to now when we say RPN case? See, when I say document dot form one dot t one, we are very sure that we are referring to this text box only because there is no other element with same name. But when we are having this, which radio button are we referring to? Are we referring to the first one or are we referring to the second one? Now what happens in JavaScript is when more than one element has same name automatically, with that name, one array will be created. That means our case now becomes an array. So this becomes our case of zero and this becomes our case of one. That's how they will become two different radio button references. So here, if I want to get the first one, it will be RB in case of zero, that radio button. We want to know whether it is checked or not. And we have ready made property. Just say Dot checked. If checked then we'll convert to uppercase. Else we already know we will convert to lowercase. Save this. So you understood whenever it is a radio button because radio buttons have same name automatically with that name, an array will be created. And with that array we have to access a particular radio button in the list. Now refresh here, type something. It's all uppercase, change it, type something. It's all lowercase. Even if you type uppercase, it will be lowercase. Now, immediately, it's not changing. If you want to immediately change, you have to handle onClick. Let's do that. For radio button we can handle on click is equal to. And good thing is we can make use of the same function there. Just copy and paste it here and same on click. We will also give it for to lower. We don't have to write one more function separately. Now run type. It's all lowercase. Now click here. Uppercase Lowercase. So like this, radio buttons have to be programmed and so is the case with checkbox input. Type is equal to checkbox. You can say document dot form one dot name of the checkbox dot checked to know whether it is checked or unchecked. Now something very important here. The value we write is checked is equal to checked, but in code checked is of type boolean in JavaScript checked will be either true or false like we have used it here. On top dot checked. I've used it as boolean. I did not say. Basically I'm saying I do not write is equal to checked like this. Don't write because this is not of type string. This will be of type boolean. That's how the Dom object model works though. In scripting we are writing here. Checked is equal to checked. And I told you in HTML video that this is only for the reason of making it as proper well-formed document. Otherwise even that is not needed. Just check is sufficient, but it will give you warning when you don't write. So better always write it. So this is how. Yes. With this we are much more clear about how to access different input elements of the form and read the content of it through their attributes. And of course, we have seen most importantly, how to handle events for the controls. That's all in this video.