 Now, we are going to see about a java script, ok. So, now we previously we have some given information about a JSP. For JSP we want to develop any web page we have to use JSP, but interact with the server. Whatever the data you are giving will interact with the server and then the process it and send back to the browser. But before interact with the server we have to give some validation in a browser page itself. So, if you want to do any validation of a page not only that we can create a dynamic content in java script also, ok. Actually then another one the where the java script will be executed. The server page if you done any validation that is the client side. If you are doing any validation in server page what are the thing we can do it in a client side validation for checking the whether email address is valid or name have any numbers. So, this kind of stuff we can do it in a client side. In server side checking your correct users then yeah if the user and password is same or before inserting any data in a database other than that all the data are valid. So, this kind of this kind of thing we can done in a server side validation, ok. So, now we going to focus on client side validation, ok. This where we can write a java script in your html page. There is no restriction to write a java script in your html page. Wherever you want we can write before html tag or end of html tag and in between the body and inside head wherever you want we can write. The best practice of writing a java script is where inside head that is a before body, ok. That is the way the best way of writing a java script in head, ok. So, java script is supposed to add your java script element in your tag what is the tag script we have to mention a type of the script, ok. Text dot java script we have to add, ok. In this program what I have to do is what is actually the thing is going on here. We have a one button then one what is that paragraph tag, ok. But initially there is a paragraph tag nothing is inside, ok. When you are press the button what will happen? It will invoke the method display date then the date will be where it is in where it is displayed in paragraph tag, ok. With the help of the attribute name is called inner html, ok. The inner html we have to know it is a very important attribute for most of the elements like do you want to dynamically change any content or you want to dynamically post the content we can use this attribute inner html. So, I am taking the particular tab using a id get element by id then inside that I am the putting the date, ok. Then using external java script what is the external java script whatever the content you are using inside the same page that is the inner inside java script external what it mean? We can separately write your java script as a dot js file. If you want to include that file in your html we have to add it using a src, ok. We have to specify the part of the particular js file, ok. We use to have semicolon in java script that is not a mandatory thing. If you want we can use this is optional one, ok. If you want to in a single line if you want to write multi statement we have to use semicolon, ok. Here also the java script also we have a command like what we are using in C. If you want to it is a single line we have to use double slash if it is a multiple line we have to use slash star then star slash, ok. Alert the pop-up box. What is the pop-up box? If you want to alert any messages, ok. We have a three type of pop-up box over there. Person is a alert, alert simply it will alert the message that is it. Second one what is that? Confirm. Confirm. It will get whether it is ok or cancel. If you are press ok it will return true else it is false. Based on the true false we can do some action that is why we are getting a confirmation. Then third one prompt. If you want to get any data from user we can use prompt. We can get the data whatever you have enter in a prompt, ok. The simple is the demo alert it will simply display the alert message then confirm it will ask whether it is ok or cancel then prompt it will get the information from user, ok. Then next one is the JavaScript event. It is a main thing we have to focus on event. You are writing in a JavaScript at what time it is supposed to execute it is a very important. At the time of pressing your button or at the time of loading your page, at the time of closing your page, ok. At the time of key up, key down or mouse up, mouse down, ok. Based on the particular event we have to perform some action, ok. That is the thing of using JavaScript event. For example if I want to display my name, ok, before entering into the page what I have to do? Unload. Unload what we can do? This simply in a page I want to display my name whatever I enter in a text box or whatever it is. How we can do? We can use prompt. According to this scenario we can use prompt whatever data you enter we can store it in a particular variable that variable we can print it in a particular div or paragraph, ok. Where we can write an unload function in body of your HTML. So, unload I am invoking a prompt pop up, ok. Then inside body of your HTML I have added one div. What is a div? With id name, ok. So, when the page is loading what will happen? Unload event it will invoke the method prompt. The prompt what it will do? Simply it will get the name from user using a prompt window. Then that value will be available in name, ok. So, with help of this value where you want to put that value in our division? How to access the division? Get element by id. So, document dot get element by id what is the id name? Name. Then I want to put inside the div. So, for the inner HTML. So, what happened? Why it is not coming previously? Catch. Catch. That is the main problem in catch it. If you are developing any web publication here maximum we have to avoid to have catches. It will make lot of problem, ok. So, try to remove your catch it. I have entered RA. So, RA will be displaying your page, ok. JavaScripts, ok. If you want to do any validation circuit field what we have to do? If you have for example, I have a login page username and password. User supposed to enter username and password. How to check? How we can check? Each and every text field we can have we can define a id. With help of this id we can get that value whether we have to check whether the value is empty. We have to alert the message which enter the name. So, ok. This is the way we can use required field validation. If you go for email validation we have to use some logic inside a JavaScript method. What is the logic we have to use? The whatever the value the value supposed to have to constraint. The main important character supposed to be there. What are they? At and dot. And then the position also it is supposed to in correct place, ok. If you are using at before at supposed to have some characters after we have must have some characters. The dot also you must have minimum number of characters after dot, ok. So, these are some with the help of this logic we can check the validation. So, we have a here I have have added to text field whether it is visible, ok little bit, ok fine. The first one is a name, ok. If I entered, so if there is a value. So, it will not throw any alert for name it will throw only for email, ok. If I not entered any value. So, it will check for name. It is not valid because I am not added dot, ok. Input is valid. So, what I have done here further simple the same thing in valid function. When you are I have added to input fields there is a text another one is a button. When you are perform any action there is a click on the button it will invoke the method valid form. When you are doing a valid form I am taking the data of text field the text if the text field is empty it will throw the alert then it will return it will not go for where email. So, it will first let you complete the name then you go for email, ok. If the text field is ok then it will go for email validation. That was tip some little bit that one like timing. If you go for any website there will be some frequently if you go for ispn.crickinfo.com what is happening in that one we can show the score. But whether we want to every time we want to refresh the page whether it is necessary for refreshing page to get the current score no need. After 3 seconds it will be auto refresh the page. So, if you want to do any the refreshment or if you want to do any message alert or whatever the thing based on the some specific time we can use set time out, ok. After particular time if you want to do any action repeatedly. So, we can use set time out and then we can clear the time. Just use it on the variable we are using for set time out, ok. Then another one is the object what is the object in Java what is the object instance of a class. So, if we have any class the class have lot of variables. If you want to use that variable we can use object to access the variable. Likewise in Java script also we have a object we can have a more number of variables with values pair, ok. Variable and value pairs with help of that object we can refer the particular values based on the name, ok. For example, here we have a person object the first name last name and then age, I color these are all name of the object the value we have mentioned in double quotes that is the zone. So, everything if we can mention in a double quotes, ok. The value want to access simply we can use that object dot name of the attributes which one you want to get cookies already knows that is a temporary storage in your vendor machine. These are the though that is a document object model. The simple whatever we have discussed that is a simple way of just simply we are validation or how to access the data how to just check whether the value is entered or not. So, this kind of stuff the document object model that is a document object. If you want to access the specific part of in your HTML file you want to access the anchor tag you want to access the div. With help of document object we can access all your component in your HTML page, ok. For example, the first one document dot anchor. So, it will return a what will return? It will return the number of anchors in your HTML page with help of the square bracket we can mention a index value to get the particular anchor. For example, if you have a five anchors, ok. If you want to access the fourth one. So, we can access document dot anchors square bracket of three. This is start with index start with zero. So, three if you get the values we can get the value. If you want to get the value that is a with help of dot inner HTML we can get the value of anchor, ok. So, likewise we have we can use the document object for all the components in your HTML file or it is a button or input or if it is a division or paragraph tag whatever we have we can use. I have one function, ok. The same fields like text input name and email, ok. In text field one that is a name I have added one key up. When you are pressing the key board key, so what will happen? It will invoke the method which button. So, there is a even we can pass the even for the particular JavaScript method. With the help of that even we can get the which key the value the ASCII value we can retry, ok. So, that is why a lot even dot key code. So, I have entered g. So, it shows the ASCII value for g, ok. I have entered enter key. So, that is why it shows that team, ok. So, likewise we can pass event value to your Java script function. We are working with that animation kind of stuff, correct. For learning portal some of them they developing the applet. For all working going to work for applet what you going to do in applet. With not only that we going to go with some demos also, no. I think you going to for like simulation kind of stuff, ok. How the chemical is transferred to one thing to another. So, likewise it should be happen with an animation. Likewise in JavaScript itself we can have a animation kind of stuff. If you want to draw the line or if you want to draw any shape, if you want to move the shapes to one place to another place we can do it in our JavaScript itself, ok. So, if you want to use this kind of features we must have to add the libraries, pre-defined libraries, ok. We have if want to draw the 2D animation, 2D shapes we have to use the existing library. What is that? js draw 2D dot js. It is an open source, it is available in code dot Google, ok. So, not only this we can have lot of j queries. What is the j queries? It is a j query is a library, but it is a pure JavaScript only. But it is fully tested and they have lot of features. We can use it as a library, that is it. Likewise here also it is like a library. We can use our feature whatever the thing we want. For example, you want to draw the line or shape, field, circle. So, this kind of stuff. For example, if you want to use this library first we have the main thing. Before that we have to draw the line, we have to create object for 2D animation. So, for that for creating an object we have to use new js graphics. What we have mentioned inside the bracket that is a bar to draw the shape. Here I have mentioned a div id. For example, if you have a division, ok. Inside the division you want to draw the line or circle or shape. We have to mention the particular id, the corresponding component you have to mention, ok. Then after that with help of that object we can draw the lines. We want to draw the line before that we have to set some parameters. Like we have to create a colors, we have to set the pen of the particular object to draw. So, for that if you want to set the color. So, we have to use js color. We have to mention a name of the color. Then we want to set the pen. What is the pen? Now, we have set the color. We have for drawing we must to have pen. So, we have to set the color to the pen. So, for that pen color plus this is the one that is the depth of the pen. For example, we are going to draw the line we have to use. What is that? We have before drawing line suppose to have 2 points. So, we have to create a point. So, for creating a point js point we have to mention a x and y coordinate. Likewise second point also x and y coordinates. After that with help of this 2 point we can draw the line, ok. GR what is the GR? GR the object for the graphics, ok. With help of that object we can invoke the method draw line, ok. Likewise we want to draw the filled circle GR dot filled circle. We have to mention a point color then radius. Likewise here we have drawn 2 circle, ok. With help of this how we can do the animation? Whether it is possible to do the animation with simply drawing the shape? It is supposed to be like it is a expanding in some time I am correct. So, instead of drawing deleting we can increase the size simply. How to increase the size? Associate with time. So, specific time the radius supposed to increase. So, how we can combine with time and shape? If you are combining time and shape it is getting a animated effort that is it. For that I show you the code, ok. This is the code we have a division. What is the division? Required. Where is the place you want to draw the shape? Then I have a 2 button one is a start and stop, ok. Then next one we have mentioned a parameter for drawing a circle. We have drawn 2 circle over here. The first circle have some coordinates, second circle have some coordinates. The both circle has the different radius. One is a 40 another one is a 30, but both are initially in different places. But it is in a same y axis, ok. So, what I am going to do? I am going to try to one circle is in a static position another circle going to cross the static circle. So, for that what we have to do? We have to at the base on the time we have to increase the x coordinate or y coordinate. Why? x coordinates. x coordinates, ok. Because x is a different. So, we have to increase the x coordinates. But initially x coordinates of the first circle is 50 second one minus 40. So, minus 40 is somewhere. So, if you are increasing it will move towards the right, ok. So, how we can do? So, at the time of start button I am invoking a method that is called what is the method? It is a method, ok. Time, count, ok. So, initially p is a point of y axis that is a minus 30, ok. Then still the p is less than 150. I have set the limit. So, it should not move after some certain space, ok. So, that I check the constraint. If it is less than 150 what it will do? It will increase. Then after that else what you will do? It will clear the time out. What is the clear time out? It will stop the time, ok. Then after what is this? Same thing. I have created an object. Then I have set the color and everything. But here we have to look at this. What is this p? Now I am using a p. So, every time you are invoking the p value, the y axis will be increment. And then you shift to right. So, it is shift to right. It is like a paint. What will happen? So, paint will be there. Again it will be paint. So, its object will be crossing over there. The previous painted color should be there. It will not be removed. So, what we can do? So, previous you want to get the previous y axis. There you want to paint white color. So, here I have used f f f. So, this is the color for white. I am taking the previous point here. See after assigning a point to previous then I am incrementing p. So, after that what is this? It is equal to set time out. Now 50 seconds is a 50 milliseconds. Every 50 milliseconds it invokes the same function. This function is written in a time count. So, it will not slip. It will be increment. So, it will be after 50 milliseconds it will invoke same. It will come again it will invoke the same. So, it will be continuously invoking. So, what will happen? The object will be moved further. So, now what is the second circle? It was in minus 40. So, it will not comes to the screen. So, when you start it will come. So, it is like crossing to the particular circle that is it. So, but it is not big deal. But we have done with shapes and time. So, that is animation what is that? Based on the time it will be do some other different different action that is it. That is it about Java script. These are the reference we can get some more information. The last three we can get more number of animated kind of effort. Not only the JS draw 2D we can get more libraries. I have taken from net. What is happening? The ball is moving to your screen. But it is not a thing. We have used only JavaScript and HTML. So, with the help of this only we can do lot of animated effort. If you go for a JavaScript just people are thinking that in the simple JavaScript we cannot do more. But it is not a case. With the help of JavaScript we can do lot of things. But we have to correctly use the JavaScript. That is a very important. Because if you are all the validation if you are done before getting to the server page most of the our process is this it will be complete before getting to the server page. We can do everything in server page. It is some disadvantages. What is that? For example the server page will be not used by single user. It will be used by multi users. So, all users data will be validated there. It is not a good way of doing the validation. If you are all validation done in different different machine that is it the client side validation will take care of the particular browser will not take care of the server page. So, it will be best way of validation do it in client side. Then important code like logins or password if you want to check that thing we have to definitely we have to check in server page. That is all about this today's session.