Download presentation
Presentation is loading. Please wait.
1
so Subject Name: Programming the Web Subject Code: 10CS73
Prepared By: Vanshika Rastogi, Madhuleena Das, Deepa Department: ISE Date: 10/9/2014 10/9/2014
2
JAVA SCRIPT AND XHTML DOCUMENTS
UNIT -4 JAVA SCRIPT AND XHTML DOCUMENTS 10/9/2014
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 10/9/2014
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" 10/9/2014
5
several ways to address objects,
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. 10/9/2014
6
<form action=“ “> <input type=“button” name=“turnItOn”>
<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]; 10/9/2014
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; 10/9/2014
8
Another approach for element addressing is through getElement ById.
problem with this is that XHTML1.1 doest not support name attribute in form. Another approach for element addressing is through getElement ById. 10/9/2014
9
-Such as the user performs an action (mouse click or enters data)
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/9/2014
10
Events, Attributes and Tags
TAG ATTRIBUTE Blur Onblur change onchange Click onclick dblclick ondblclick Focus onfocus Keydown onkeydown keypress onkeypress keyup onkeyup load onload 10/9/2014
11
EVENT TAG ATTRIBUTE Mousedown onmousedown Mousemove onmousemove
Mouseout onmouseout Mouseover onmouseover Mouseup onmouseup Reset onreset select onselect Submit onsubmit Unload onunload 10/9/2014
12
ATTRIBUTE TAG DESCRIPTION
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. ATTRIBUTE TAG DESCRIPTION Onblur <a> The link loses the input focus <button> The button loses the input focus <input> Input element loses the input focus <textarea> Text area loses the input focus <select> Selection element loses the input focus Onchange Input element is changed and loses the focus Text area is changed and the input focus Selection element is changed Onclick The user clicks on the link The input lement is clicked 8/14/2014 8/14/2014 10/9/2014
13
ATTRIBUTE TAG DESCRIPTION
Ondblclick Most elements User double clicks the left mouse button Onfocus <a> Link acquires the input focus <input> Input element receives the input focus <textarea> Text area receives the input focus <select> Selection element receives the focus Onkeydown <body>,form elements A key is pressed down Onkeypress A key is pressed and released Onkeyup A key is released Onload <body> The document is finishing loading Onmousedown The user clicks the left mouse button Onmousemove The user moves the mouse cursor Onmouseout The mouse cursor is moved away Onmouseover Mouse cursor is moved over the element Onmouseup The left mouse button is unclicked 10/9/2014
14
assign the event handler script to an event tag attribute.
DESCRIPTION Onreset <form> The reset button is clicked Onselect <input> The mouse cursor is moved over the element <textarea> The text area is selected Onsubmit The submit button is pressed Onunload <body> The user exits the document 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; 10/9/2014
15
events created by the body element are load and unload.
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’’ ‘’ <html xmlns=“ <head> <title>load and unload</title> <script type=“text/javascript” src=“l1.js”> </script> </head> <body onload=“load_greet( );”> <p /> </body> </html> 10/9/2014
16
function load_greet( ) { alert(“demo for load and unload”); }
L1.js function load_greet( ) { alert(“demo for load and unload”); } 10/9/2014
17
the most commonly used event through buttons is click.
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" " <html xmlns=“ <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> 10/9/2014
18
10/9/2014
19
changes to a text box can be prevented by the event handler.
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. 10/9/2014
20
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns = " <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> 10/9/2014
21
10/9/2014
22
if the validation is done at the client side it saves time.
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. 10/9/2014
23
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. 10/9/2014
24
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//w3c/DTD XHTML 1.1//EN" " <html xmlns = " <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" /> <br /><br /> <input type="reset" name="reset" /> <input type="submit" name="submit" /> </p> </form> <script type="text/javascript" src="pswd_chk.js"> </body> </html> 10/9/2014
25
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.select(); else return true; 10/9/2014
26
document.getElementById("second").onblur=chkPasswords;
document.getElementById("myform").onsubmit=chkPasswords; 10/9/2014
27
10/9/2014
28
10/9/2014
29
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}$/ 10/9/2014
30
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//w3c/DTD XHTML 1.1//EN" " <html xmlns = " <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) <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> 10/9/2014
31
var myName=document.getElementById("custName");
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}$/); alert("phone no.("+phone.value+") is not in correct format"); phone.focus(); phone.select(); 10/9/2014
32
10/9/2014
33
10/9/2014
34
different from DOM0 model. more powerful than DOM0 model.
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. 10/9/2014
35
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. 10/9/2014
36
indicates browser used for viewing the XHTML document.
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" " <html xmlns = " <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> 10/9/2014
37
10/9/2014
38
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) 10/9/2014
39
Dynamic Documents with JavaScript
10/9/2014
40
Cascading Style Sheets –Positioning (CSSP) released by W3C in 1997.
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. 10/9/2014
41
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//w3c/DTD XHTML 1.1//EN" " <html xmlns = " <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 </body> </html> 10/9/2014
42
10/9/2014
43
<?xml version="1.0" encoding="utf-8"?>
Relative Positioning <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//w3c/DTD XHTML 1.1//EN" " <html xmlns = " <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> 10/9/2014
44
10/9/2014
45
if absolute: moves to the new value of top and left.
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. 10/9/2014
46
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//w3c/DTD XHTML 1.1//EN" " <html xmlns = " <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" /> <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> 10/9/2014
47
function move(movee,newTop,newLeft) {
dom=document.getElementById(movee).style; dom.top=newTop+"px"; dom.left=newLeft+"px"; } 10/9/2014
48
10/9/2014
49
10/9/2014
50
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 10/9/2014
51
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//w3c/DTD XHTML 1.1//EN" " <html xmlns = " <head> <title>changing colors</title> <script type="text/javascript" src="colors.js"> </script> </head> <body> <p style="font-family:times; font-style:italic; font-size:32pt"> MVJ College of Engineering, Bangalore </p> <form action=""> <p> <label> Background color: <input type="text" name="background" size="10" onchange="setColor('background',this.value)" /> </label> <br /> <label>foreground <input type="text" name="foreground" size="10" onchange="setColor('foreground',this.value)" /> </form> </body></html> 10/9/2014
52
function setColor(where, newColor) { if(where=="background")
//colors.js function setColor(where, newColor) { if(where=="background") document.body.style.backgroundColor=newColor; else document.body.style.color=newColor; } 10/9/2014
53
Changing Fonts font style and size of a link can be changed by placing the mouse over it. can be reset to its original form with the help of mouseout event. <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//w3c/DTD XHTML 1.1//EN" " <html xmlns = " <head> <title>changing fonts</title> <style type="text/css"> .regtext{font:times; font-size:32pt;} </style> </head> <body> <p class="regtext"> MVJ College of <a style="color:blue;" onmouseover="this.style.color='red';this.style.font='italic 32pt times';" onmouseout="this.style.color='green';this.style.font='normal 32pt times';"> Engineering </a> </p> </body> </html> cc 10/9/2014
54
DYNAMIC CONTENT changing XHTML content.
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//w3c/DTD XHTML 1.1//EN" " <html xmlns = " <head> <title>changing content</title> <script type="text/javascript" src="content.js"> </script> </head> <body> <form action=""> <p style="font-weight:bold"> <span style="font-style:italic"> details: </span> <br /> <label> Name: <input type="text" onmouseover="messages(0)" onmouseout="messages(1)" /> </label> 10/9/2014
55
put the cursor on the text to get advice.</textarea>
<br /> <label> password <input type="password" onmouseover="messages(1)" onmouseout="messages(1)" /> </label> <textarea id="adviceBox" rows="3" cols="50" style="position:absolute; left:250px; top:0px"> put the cursor on the text to get advice.</textarea> <input type="reset" value="reset" /> <input type="submit" value="submit" /> </p> </form> </body> </html> 10/9/2014
56
LOCATING THE MOUSE CURSOR
mouse-click event: implementation of MouseEvent interface, providing coordinates of the displayed element that created the object. REACTING TO A MOUSE CLICK mousedown and mouseup events are used to show and hide the messages under mouse cursor whenever the mouse is clicked. SLOW MOVEMENT OF ELEMENTS by setting small amounts many times. two window methods. setTimeout takes two parameters: string to be executed and time(in milliseconds) delay before executing the string code. setTimeout(“mover()”,30); setInterval has two forms; one same as setTimeout; the other takes variable number of parameters. First, name of the called function, second, time in between calling the function and the remaining used as actual parameters to the called function. 10/9/2014
57
DRAG AND DROP <?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//w3c/DTD XHTML 1.1//EN" " <html xmlns = " <head> <title>drag and drop</title> <script type="text/javascript" src="dd.js"> </script> </head> <body style="font-size:24;"> <p> MVJ College Of Engineering <br /> <span style="position:absolute; top:200px; left:0px;background-color:lightgrey;" onmousedown="grabber(event);">ISE</span> <span style="position:absolute; top:200px; left:70px;background-color:lightgrey;" onmousedown="grabber(event);">CSE</span> <span style="position:absolute; top:200px; left:150px;background-color:lightgrey;" onmousedown="grabber(event);">EEE</span> </p> </body> </html> 10/9/2014
58
dd.js var diffX,diffY,theElement; function grabber(event) {
theElement=event.currentTarget; var posX=parseInt(theElement.style.left); var posY=parseInt(theElement.style.top); diffX=event.clientX-posX; diffY=event.clientY-posY; document.addEventListener("mousemove",mover,true); document.addEventListener("mouseup",dropper,true); event.stopPropogation(); event.preventDefault(); } function mover(event){ theElement.style.left=(event.clientX-diffX)+"px"; theElement.style.top=(event.clientY-diffY)+"px"; function dropper(event){ document.removeEventListener("mouseup",dropper,true); document.removeEventListener("mousemove",mover,true); 10/9/2014
Similar presentations
