1 / 58

Subject Name: Programming the Web Subject Code: 10CS73

so. Subject Name: Programming the Web Subject Code: 10CS73 Prepared By: Vanshika Rastogi, Madhuleena Das, Deepa Department: ISE Date: 10/9/2014. UNIT -4 JAVA SCRIPT AND XHTML DOCUMENTS. THE JAVASCRIPT EXECUTION ENVIRONMENT

sandyc
Download Presentation

Subject Name: Programming the Web Subject Code: 10CS73

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. so Subject Name: Programming the Web Subject Code: 10CS73 Prepared By: Vanshika Rastogi, Madhuleena Das, Deepa Department: ISE Date: 10/9/2014

  2. UNIT -4 JAVA SCRIPT AND XHTML DOCUMENTS

  3. THE JAVASCRIPT EXECUTION ENVIRONMENT • The JavaScript Window object represents the window in which the browser displays documents. • All global variables are properties of Window. • The JavaScript Document object represents the displayed XHTML document. • Document object:When an HTML document is loaded into a web browser, it becomes a document object. • Implicitly defined Window properties: • document a reference to the Document object that the window displays • frames an array of references to the frames of the document • Every Document object has: • forms an array of references to the forms of the document • Each Form object has an elements array, which has references to the form’s elements • Document also has anchors, links, images, style

  4. THE DOCUMENT OBJECT MODEL • under development by W3C since 1990’s. • is an application programming interface (API) that defines the interface between the XHTML documents and application programs. • A language that supports the DOM must have a binding to the DOM constructs. • In the JavaScript binding, HTML elements are represented as objects and element attributes are represented as properties • e.g.,<input type = "text" name = "address"> • would be represented as an object with two properties, type and name, with the values "text" and "address"

  5. ELEMENT ACCESS IN JAVASCRIPT • XHTML elements have corresponding objects that are visible to an embedded JavaScript. • the address of the objects is required for event handling and make changes dynamically. • several ways to address objects, • DOM uses the form and element array of the Document object, referenced through object property of the Window object.

  6. <html> • <head> • <title> • element access • </title> • </head> • <body> • <form action=“ “> • <input type=“button” name=“turnItOn”> • </form> • </body> • </html> • address of javascript object associated with XHTML is DOM address. • the address for the above using forms and elements arrays is: • Var dom=document.forms[0].elements[0];

  7. addressing can also be done using element names. • <html> • <head> • <title> • element access • </title> • </head> • <body> • <form name=“ myform“ action=“ “> • <input type=“button” name=“turnItOn”> • </form> • </body> • </html> • var dom=document.myform.turnItOn;

  8. problem with this is that XHTML1.1 doest not support name attribute in form. • Another approach for element addressing is through getElement ById.

  9. EVENTS AND EVENT HANDLING • Events are the actions that occur as a result of browser activities or user interactions with the web pages. • -Such as the user performs an action (mouse click or enters data) • -We can validate the data entered by a user in a web form • JavaScript reacts to the activities of the user and does computation for them, these are specified using a special form of programming called event-driven programming. • parts of the program are executed at different times based on user interaction. • An event-handler is the script that is executed implicitly in response to any triggered event. • Events are JavaScript objects, so are CASE-SENSITIVE. • Registration is the process of connecting an event to an event-handler.

  10. Events, Attributes and Tags

  11. elements can get focus with the use of focus method. • when a text element has focus the input can be given to it. • only one element at a time can have the focus, the other will becom blur. 8/14/2014 8/14/2014

  12. there are two ways to register an event handler in the DOM event model. • assign the event handler script to an event tag attribute. • <input type=“button” id=“submit” onclick=“alert(‘you clicked it’);” /> • event handler can also be registered by assigning the associated property on the button object. • document.getElementById(“submit”).onclick=onSubmitHandler;

  13. HANDLING EVENTS FROM BODY ELEMENTS • events created by the body element are load and unload. • <?xml version=“1.0” encoding=“utf-8”?> • <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN’’ ‘’http://www.w3.org/TR/XHTML11/DTD/XHTML11.dtd’’> • <html xmlns=“http://www.w3.org/1999/xhtml”> • <head> • <title>load and unload</title> • <script type=“text/javascript” src=“l1.js”> • </script> • </head> • <body onload=“load_greet( );”> • <p /> • </body> • </html>

  14. L1.js function load_greet( ) { alert(“demo for load and unload”); }

  15. HANDLING EVENTS FROM BUTTON ELEMENTS • the most commonly used event through buttons is click. • <?xml version=“1.0” encoding=“utf-8”?> • <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN" • "http://www.w3.org/TR/XHTML11/DTD/XHTML11.dtd"> • <html xmlns=“http://www.w3.org/1999/xhtml”> • <body> • <p>Click the button to display the date.</p> • <button onclick="displayDate()">The time is?</button> • <script> • function displayDate() { • document.getElementById("demo").innerHTML = Date(); • } • </script> • <p id="demo"></p> • </body> • </html>

  16. HANDLING EVENTS FROM TEXT BOX AND PASSWORD ELEMENTS • Text boxes and passwords can create four different events; blur, focus, change , select. • The Focus event • changes to a text box can be prevented by the event handler. • blurs the text box when the user tries to get focus on it. • blur method is used for this. • In the example, whenever the user tries to get focus to the text box, it gets blurred with the help of blur method.

  17. <?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>blur method</title> <script type="text/javascript" src="script.js"> </script> </head> <body> <form action=""> <input type="text" size="5" id="cost" onfocus="this.blur();" /> <input type="submit" value="submit order" onclick= "compute();" /> </form> </body> </html>

  18. Validating Form Input • JavaScript is commonly used for checking the completeness and correctness of the form. • if the validation is done at the client side it saves time. • whenever the JavaScript finds any data missing or any incorrect input, the event handler needs to take various steps. • error message to be produced. • input element to be in focus, with the help of focus method, through the DOM address of the element. • finally, the function selects the element that highlights the element using select. • if an event handler returns false, no action has to be taken by the browser. • example, • - click on submit • - default action: submit form to server for processing • - user input validation: input incorrect • - return false: stops from sending the data to the server.

  19. password: taken twice for verification. • javascript can be called two times to check the password. • through onsubmit event on clicking the submit button. • when second text box loses focus using blur method. • this function performs two tests: • - checks the first input box for the password against the empty string. If no password is found; sends an alert message, calls focus and returns false. • - matches the two passwords. If different; returns an alert message; calls focus and select on the first field and returns false.

  20. <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//w3c/DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>password check</title> <script type="text/javascript" src="password_chk.js"> </script> </head> <body> <form id="myform" action=""> <p> <label>Enter Password: <input type="password" id="initial" size="10" /> </label> <br /><br/> <label>Re-enter Password: <input type="password" id="second" size="10" /> </label> <br /><br /> <input type="reset" name="reset" /> <input type="submit" name="submit" /> </p> </form> <script type="text/javascript" src="pswd_chk.js"> </script> </body> </html>

  21. function chkPasswords() { var init=document.getElementById("initial"); var sec=document.getElementById("second"); if(init.value=="") { alert("You did not enter a password;please enter!!"); init.focus(); return false; } if(init.value!=sec.value) { alert("the two passwords do not match!!!!"); init.focus(); init.select(); return false; } else return true; }

  22. document.getElementById("second").onblur=chkPasswords; document.getElementById("myform").onsubmit=chkPasswords;

  23. Validating the input to the form from text widgets. • values of the text boxes needs to be checked for each input. • detected through the event change. • if error is found: alert message is sent and focus and select are called to correct the input. • alert has the correct format. • Example, • First and last must begin with uppercase letter and have atleast one lowercase letter, must be followed with a comma and possibly a space, middle name initial should be uppercase. • /^[A-Z][a-z]+, ?[A-Z][a-z]+, ?[A-Z]\.?$/ • Circumflex(^) anchor one or more repetitions one or none repetition treated as . only • Pattern can match only • at the beginning of the string • pattern for matching phone no. • /^d{3}-\d{3}-\d{4}$/

  24. <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//w3c/DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>form validation</title> <script type="text/javascript" src="validator.js"> </script> </head> <body> <form action=""> <p> <label>Enter name: <input type="text" id="custName" />(Last name, first name, middle name) </label> <br /><br/> <label>Phone No.: <input type="text" id="phone" />(ddd-ddd-dddd) </label> <br /><br /> <input type="reset" id="reset" /> <input type="submit" id="submit" /> </p> </form> <script type="text/javascript"> <!-- document.getElementById("custName").onchange=chkName; document.getElementById("phone").onchange=chkPhone; --> </script></body></html>

  25. function chkName() { var myName=document.getElementById("custName"); var pos=myName.value.search(/^[A-Z][a-z]+, ?[A-Z][a-z]+, ?[A-Z]\.?$/); if(pos!=0){ alert("the name you entered ("+myName.value+")is not in the correct format"); myName.focus(); myName.select(); return false; } else return true; } function chkPhone() { var myphone=document.getElementById("phone"); var pos=phone.value.search(/^d{3}-\d{3}-\d{4}$/); if(pos!=0){ alert("phone no.("+phone.value+") is not in correct format"); phone.focus(); phone.select(); return false; } else return true; }

  26. The DOM2 Event Model • different from DOM0 model. • more powerful than DOM0 model. • a modularized interface. • Events is a module that has several submodules. • Event Propagation • an event object is created at a node in the document tree, that node is the target node for the event. • as soon as an event is created, a three phase process begins. • capturing phase: event starts at the root node and moves to the target node. If there is a event handler encountered in between, excluding the target node, are checked whether they are enabled or not. • if any handler is encountered then it is executed. • reaching the target node, second phase starts. • registered event handlers at the target node are executed. • third phase; bubbling phase: events bubble back up the document tree to the document node.

  27. Event Handler Registration • events are registered with the help of addEventListener, implemented by all objects descending document. • the addEventListener method has three parameters. • first, name of the event as a string literal. • second, handler function ; defined as the function code. • third, boolean value specifying whether the handler is enabled for event propogation. • when the handler is called, only one value is passed; the event object. • removeEvenetListener method deletes the event registration.

  28. The navigator object • indicates browser used for viewing the XHTML document. • appName property: name of the browser. • appVersion property: version of the browser. • <?xml version="1.0" encoding="utf-8"?> • <!DOCTYPE html PUBLIC "-//w3c/DTD XHTML 1.1//EN" • "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> • <html xmlns = "http://www.w3.org/1999/xhtml"> • <head> • <title>navigator</title> • <script type="text/javascript"> • function nav() • { • alert("the browser is:"+navigator.appName+ "\n" + • "the version is : "+navigator.appVersion+ "\n"); • } • </script> • </head> • <body onload="nav()"> • </body> • </html>

  29. DOM Tree Traversal and Modification • parentNode: DOM address of the parent node of the calling node. • previousSibling: DOM address of the previous sibling of the calling node. • nextSibling: DOM address of the next sibling node of the calling node. • firstChild and lastChild • nodeType: type of the calling node. • insertBefore(newChild, refChild) • replaceChild(newChild, oldChild) • removeChild(oldChild)

  30. Dynamic Documents with JavaScript

  31. POSITIONING ELEMENTS • Cascading Style Sheets –Positioning (CSSP) released by W3C in 1997. • position a document at a particular place also move dynamically. • Absolute Positioning • element to be placed at a particular position irrespective of other elements. • <p style = “position: absolute; left=100px; top=200px”> • ………………… • </p> • can also superimpose text over some other text just like watermark.

  32. <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//w3c/DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>absolute positioning</title> <style type="text/css"> .regtext{font-family:arial; font-size:20pt; width:500px} .abstext{position:absolute; top:25px; left:30px; font-family:arial; font-size:18pt; font-style:italic; letter-spacing:2em; color:rgb(102,102,102); width=400px} </style> </head> <body> <p class="regtext"> Welcome to MVJ College Of Engineering. The college is located near ITPB, Channasndra. The college provides degree in engineering and also has polytechnic course in various streams. </p> <p class="abstext"> MVJ College of Engineering, Bangalore </p> </body> </html>

  33. Relative Positioning • <?xml version="1.0" encoding="utf-8"?> • <!DOCTYPE html PUBLIC "-//w3c/DTD XHTML 1.1//EN" • "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> • <html xmlns = "http://www.w3.org/1999/xhtml"> • <head> • <title>relative positioning</title> • </head> • <body style="font-family:times; font-size:24pt;"> • <p> • <span style="position:relative; top:10px;font-family:times;font-size:32pt;font-style:italic;color:red;"> • MVJ </span> • College of Engineering • </p> • </body> • </html>

  34. MOVING ELEMENTS • XHTML element having position set to absolute or relative can be moved. • changing the top or left value makes the element move onto the display. • if absolute: moves to the new value of top and left. • if relative: moves to the distance to the new value for top and left.

  35. <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//w3c/DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>moving elements</title> <script type="text/javascript" src="move.js"> </script> </head> <body> <form action=""> <p> <label>x-coordinate <input type="text" id="leftcoord" size="5" /> </label> <br /> <label>y-coordinate <input type="text" id="topcoord" size="5" /> </label> <br /> <input type="button" value="move it" onclick="moveIt('star', document.getElementById('topcoord').value, document.getElementById('leftcoord').value)" /> </p> </form> <div id="star" style="position:absolute; top=115px; left:0;"> <img src="images.jpg" alt="star" /></div> </body></html>

  36. function move(movee,newTop,newLeft) { dom=document.getElementById(movee).style; dom.top=newTop+"px"; dom.left=newLeft+"px"; }

  37. CHANGING COLORS AND FONTS • the foreground and background colors of the document can be changed dynamically. • Changing colors • calls the handler function through XHTML box elements. • this variable is used as a reference to javascript object. • cc

More Related