Web Programming CS333/CS614

Transcription

1 Web Programming CS333/CS614 Lecture 7 & Java Script 1

2 The HTML Document Object Model : HTML is an abstract model that defines the interface betweenhtml documentsand application programs. It defines language-agnostic interfaces which abstract HTML documents as objects and mechanisms to manipulate this abstraction. HTML Level 2 was published in late It introduced the "getelementbyid" function,3(april 2004). HTML defines a standard way for accessing and manipulating HTML documents. A language that supports the must have a binding to the constructs 2 2

3 Nodes Every piece of an HTML document (element,attribute,text, ) is modeled in the web browser by a node The Node object represents a node in the HTML document. A node in an HTML document is: The Document An element An attribute Text 3

4 Nodes Nodes are related to each other through child parent relationships An html element inside another element is said to be its child, the containing element is known as parent A node can have multiple children but only one parent Nodes with the same parent are known as siblings 4

5 JavaScript and HTML In the JavaScript binding, HTML elements are represented as objects and element attributes arerepresented as properties e.g., <input type = "text" name = "address"> would be represented as an Input Text object with two properties, type and name, with the values "text" and "address" JavaScript document Object Each HTML document loaded into a browser window becomes a Document object. The JavaScript document object provides access to all HTML elements in a page, from within a script. The Document object is also part of the Window object, and can be accessed through the window.documentproperty. DHTMLDemo1.HTML 5

6 JavaScript Execution Environment The Window object provides the largest enclosing referencing environment for scripts 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 6

7 HTML Objects Reference Document object Event object HTMLElement object Anchor object Area object Base object Body object Button object Form object Frame/IFrame object Textarea object Frameset object Image object Input Button object Input Checkbox object Input File object Input Hidden object Input Password object Input Radio object Input Reset object Input Submit object td object Input Text object Link object Meta object Object object Option object Select object Style object Table object th object tr object 7

8 HTML HTMLElement Object An HTML element is everything from the start tag to the end Tag <p> Hello World </p> <a href= cnn </a> <p><b>cloud Computing</b></p> The HTMLElement collections, properties, and methods can be used on all HTML elements. HTMLElement Properties innerhtml style Sets or returns the HTML contents (+text) of an element Sets or returns the style attribute of an element HTMLElement Methods focus () blur() select() Gives focus to an element Removes focus from an element select element 8

9 HTML Document Object Every Document object has: -forms - an array of references to the forms of the document Ø Each forms object has an HTML elements array, which has references to the form s elements - Property arrays for HTML elements like links, & images Property anchors[] forms[] images[] title Body links Method getelementbyid() Description Returns a collection of all <a> elements in the document that have a name attribute Returns an array of all the forms in the document Returns an array of all the images in the document The title of the document Returns the body element of the document Returns a collection of all <a> and <area> elements in the document that have a href attribute Description Accesses the first element with the specified id The Document object can also use the properties and methods of the Node object. DHTMLDemo1.HTML 9

10 HTML Form Object Collection elements[] Description Returns an array of all elements in a form Property action length method name Description Sets or returns the value of the action attribute in a form Returns the number of elements in a form Sets or returns the value of the method attribute in a form Sets or returns the value of the name attribute in a form Method Description reset() Resets a form submit() Submits a form Event The event occurs when... onreset The reset button is clicked onsubmit The submit button is clicked document.forms[0].submit() document.forms[0].reset() document.forms[0].action= the_other_script.pl ; 10

11 Element Access in JavaScript There are several ways to do it 1. address Use the implicit arrays, each form has an implicit array elements storing the elements in form Example (a document with just one form and one widget): <form action = ""> <input type = "button" name = "pushme"> </form> Var element=document.forms[0].elements[0] Problem: document changes 11

12 Element Access in JavaScript 2. Element names requires the element and all of its ancestors (except body) to have name attributes Example: <form name = "myform" action = ""> <input type = "button" name = "pushme"> </form> var element=document.myform.pushme Problem: name attribute is not valid starting from XHTML

13 Element Access in JavaScript 3. Access using I.D. i- using getelementbyid Method The method returns a reference to the object with the specified ID Example: <form action = ""> <input type = "button" id = "pushme"> </form> var element=document.getelementbyid("pushme") Form elements often have ids and names both set to the same value 13

14 3. Access using I.D ii-you can pass the id as string to a function, The function will receive it as a reference to the object with the specified ID Example: <form action = ""> <input type = "button" id = "pushme"> onclick=m(pushme); </form> function m(elm) { //elm here is a reference to the button } 14

15 HTML Document Object. Method createattribute() createelement() createtextnode() Description Creates an attribute node Creates an Element node Creates a Text node (inner html) appendchild() Adds a new child node, to the specified node, as the last child node 15

16 Example: Adding a paragraph element <!DOCTYPE html> <html> <body> <p>click the button to add a paragraph element.</p> <div id="div1"> <p>initial line </p> </div> <button onclick="myfunction()">try it</button> <script> function myfunction() { var para=document.createelement("p"); var node=document.createtextnode("this is new."); para.appendchild(node); div2=document.getelementbyid("div1"); div2.appendchild(para); } </script></body></html> addelementdemo.html 16

17 Example: Adding a list item element <!DOCTYPE html> <html> <body> <ul id="mylist"><li>coffee</li><li>tea</li></ul> <p id="demo">click the button to append an item to the list</p> <button onclick="myfunction()">try it</button> <script> function myfunction() { var node=document.createelement(li"); var textnode=document.createtextnode("water"); node.appendchild(textnode); document.getelementbyid("mylist").appendchild(node); } </script> </body> </html> addelementdemo2.html 17

18 HTML Text Object Ø The Text object represents a single-line text input field in an HTML form. Ø For each <input type="text"> tag in an HTML form, a Text object is created. The Text object can also use the properties/methods of: The Node object The Element object Text Object Properties value Sets or returns the value of the value attribute of the text field 18

19 Example: accessing a text field.. <head> <script type = "text/javascript" > function greeting() { name=document.form1.txt1.value; window.alert("hello " +name); } </script> <body> <form name="form1"> <input type="text" name="txt1"> <input type="button" value="click Me" onclick="greeting();" > </form>. Demo1.html SelectDemo.html 19

20 <form name="calc"> <input type="text" name="txt1" size="16"> Example: Calculator Calculater.html <input type="button" value=" 1 " OnClick="Calc.txt1.value += '1'"> <input type="button" value=" 2 " OnCLick="Calc.txt1.value += '2'"> <input type="button" value=" 3 " OnClick="Calc.txt1.value += '3'"> <input type="button" value=" + " OnClick="Calc.txt1.value += ' + '"> <input type="button" value=" 4 " OnClick="Calc.txt1.value += '4'"> < input type="button" value=" 5 " OnCLick="Calc.txt1.value += '5'"> <input type="button" value=" 6 " OnClick="Calc.txt1.value += '6'"> <input type="button" value=" - " OnClick="Calc.txt1.value += ' - '"> <input type="button" value=" 7 " OnClick="Calc.txt1.value += '7'"> <input type="button" value=" 8 " OnCLick="Calc.txt1.value += '8'"> <input type="button" value=" 9 " OnClick="Calc.txt1.value += '9'"> <input type="button" value=" x " OnClick="Calc.txt1.value += ' * '"> <input type="button" value=" c " OnClick="Calc.txt1.value = ''"> <input type="button" value=" 0 " OnClick="Calc.txt1.value += '0'"> <input type="button" value=" = " OnClick="Calc.txt1.value = eval(calc.txt1.value)"> <input type="button" name="div" value=" / " OnClick="Calc.txt1.value += ' / '"> 20

21 Example: Money Exchanger <script > function calculate() { var input1=window.document.form1.txt1.value; var output=(parsefloat(input1))/6; output=output.tofixed(2); window.document.form1.txt2.value=output+"$"; } </script> <body> <h3> Transfer from L.E. to $ </h3> <form name="form1"> Value in L.E.<input type="text" size="4" name="txt1"/> <input type="button" value="transfer " onclick="calculate()"/> Value in $ <input type="text" disabled="disabled" size="4" name="txt2" /> </form> moneyexchanger.html 21

22 Example :Log In demo function login(){ var username=document.myform.username.value; var password=document.myform.pass.value; if ((username.length==0) (password.length==0)) { window.alert("empty user name or password!");} else { switch(password) { case "12345" : window.location="page1.html"; break; case "1234" : window.location="page2.html"; break; case "123": window.location="page3.html"; break; default: window.alert("invalid Password"); document.myform.pass.select(); }// end switch case } Logindemo.html 22

23 Example: Dynamic Clock function clock() { date=new Date(); time=date.tolocaletimestring(); document.form1.txt1.value=time; today=date.todatestring() document.form1.txt2.value=today; window.settimeout("clock()",1000); } JavaScript Date Object tolocaletimestring() : Return the time portion of a Date object as a string, using locale conventions Convert the time portion of a Date object to a string: tolocaledatestring() : Return the Date object as a string, using locale conventions totimestring() Convert the time portion of a Date object to a string todatestring() Converts the date portion of a Date object into a readable string DynamicClock.html 23

24 Window setinterval() Method Syntax setinterval(function,milliseconds) Parameter function milliseconds Description Required. The function that will be executed (anonymous or name) Required. The intervals (in milliseconds) on how often to execute the code Return Value: A Number, representing the ID value of the timer that is set. Use this value with the clearinterval() method to cancel the timer The setinterval() method calls a function or evaluates an expression at specified intervals (in milliseconds). The setinterval() method will continue calling the function until clearinterval() is called, or the window is closed. The ID value returned by setinterval() is used as the parameter for the clearinterval() method. Example Alert "Hello" every 3 seconds (3000 milliseconds): setinterval(function(){ alert("hello"); }, 3000); 24

25 Window clearinterval() Method Definition and Usage The clearinterval() method clears a timer set with the setinterval() method. The ID value returned by setinterval() is used as the parameter for the clearinterval() method. Example Toggle between two background colors once every 300 milliseconds, until it is stopped by clearinterval(): var myvar = setinterval(function(){ setcolor() }, 300); function setcolor() { var x = document.body; x.style.backgroundcolor = x.style.backgroundcolor == "yellow"? "pink" : "yellow"; } function stopcolor() { clearinterval(myvar); } togglebackground.html 25

26 Example: Dynamic Clock2 <!DOCTYPE html> <html> <body> <p>a script on this page starts this clock:</p> <p id="demo"></p> <button onclick="mystopfunction()">stop time</button> <script> var myvar = setinterval( mytimer, 1000); //var myvar = setinterval( mytimer(), 1000); will not work //var myvar = setinterval( mytimer(), 1000); o.k. function mytimer() { var d = new Date(); var t = d.tolocaletimestring(); document.getelementbyid("demo").innerhtml = t; } function mystopfunction() { clearinterval(myvar); } </script> </body> </html> DynamicClock2.html 26

27 Example :Automatic Filling of text input <head> <script type = "text/javascript" > function getfullname() { firstname=document.form1.firstname.value; lastname=document.form1.lastname.value; name=firstname+" "+lastname; document.form1.fullname.value=name; } </script> <body onload="document.form1.firstname.focus()"> <form name="form1"> <table> <tr><td > First Name </td> <td> <input type="text" name="firstname" onchange="getfullname();" > </td> </tr> <tr><td> Last Name </td> <td> <input type="text" name="lastname" onchange="getfullname();"> </td> </tr> <tr><td> Full Name</td> <td> <input type="text" name="fullname"> </td> </tr> 27 </table></form> Dr Walid M. OnChangeDemo.html Aly

28 Accessing a check box/radio button For each instance of an <input type="checkbox"> tag in an HTML form, a Checkbox object is created. For each instance of an <input type="radio"> tag in an HTML form, a radio object is created. You can access a Checkbox / radio button object by searching through the elements[] array of a form, or by using document.getelementbyid(). Property checked value Description Sets or returns the checked state of a checkbox/radio button Sets or returns the value of the value attribute of a checkbox/radio button Reading the state of a checkbox if (document.form1.checkbox1.checked) { user_input = document.form1.checkbox1.value; } Setting the state of a checkbox document.form1.checkbox1.checked = true Checkboxes and radio button have an implicit array, which has their name checkbocdemo1.html checkbocdemo2.html radiodemo1.html 28

29 HTML Select Object Collection options Description Returns a collection of all the options in a drop-down list Property length selectedindex Description Returns the number of options in a dropdown list Sets or returns the index of the selected option in a dropdown list <select> <option value="volvo">volvo</option> <option value="saab">saab</option> <option value="mercedes">mercedes</option> <option value="audi">audi</option> </select> 29

30 Example : Reading value from Select <script type="text/javascript"> function ShowCity(elm){ var val = elm.options[elm.selectedindex].value; window.alert("city Population : " +val);} </script> /////////////////////////////////////////////////// <title>millionaire Cities</title> </head> <body> <h3>millionaire Cities</h3> Select City <select name="query" id="query" style="width:273px;"> <option value="20,464,000">new York</option> <option value="5,232,000">milan</option> <option value="11,547,000">lagos</option> <option value="17,311,000">beijing</option> <option value="10,755,000">paris</option> <option selected="selected" value="37,126,000">tokyo</option> <option value="17,816,000">cairo</option> <option value="14,374,000">calcutta</option> <option value="20,186,000">sao Paulo</option> <option value="5,427,000">madrid</option> </select> <input type="submit" name="cmdshow" value="view Population onclick="showcity(query);" id="cmdshow" /> </body> SelectReadDemo.html 30

31 Validation Validation isa good use of JavaScript, because it finds errors in form input before it is sent to the server for processing Things that must be done: 1. Detectthe error and producean alert message 2. Put the element in focus (the focus function) - puts the cursor in the element 3. Select the element (the select function) - highlightsthe text in the element A Whole form can be checked before submitting using the onsubmit event To prevent the form submitting data, the event handler for onsubmitmust return false 31

32 Example Text Field Validation function check() { data=document.form1.txt1.value; if(isnan(data)) window.alert( " Please Enter a number"); else if(data.length==0) window.alert( " You did not eneter a Value "); else window.alert( " Data is correct, Thanks "); } </script> <form name="form1"> <input type="text" name="txt1"> <input type="button" value="send" onclick="check();" > </form> TextValidation.html 32

33 HTML Form Object Collection elements[] Description Returns an array of all elements in a form Property action length method name Description Sets or returns the value of the action attribute in a form Returns the number of elements in a form Sets or returns the value of the method attribute in a form Sets or returns the value of the name attribute in a form Method Description reset() Resets a form submit() Submits a form Event The event occurs when... onreset The reset button is clicked onsubmit The submit button is clicked document.forms[0].submit() document.forms[0].reset() document.forms[0].action= the_other_script.pl ; 33

34 Example : comparing passwords <form id = "myform" action = "" onsubmit="return chkpasswords();"> <p> Your password <input type = "password" id = "initial" size = "10" /> <br /><br /> Verify password <input type = "password" id = "second" size = "10" /> <br /><br /> <input type = "reset" name = "reset" /> <input type = "submit" name = "submit" /> </p> </form> pswd_chk.html 34

35 function chkpasswords () { var init = document.getelementbyid("initial"); var sec = document.getelementbyid("second"); if (init.value == "") { alert ("You did not enter a password \n" + "Please enter one now"); init.focus(); return false; } if (init.value!= sec.value) { alert("the two passwords are not the same \n" + "Please re-enter both now"); init.focus(); init.select(); return false; } else { window.alert("submitting Information"); return true; } } 35

36 Example: Validation <head> <script type = "text/javascript" > function check() { =document.form1.txt1.value; x= .indexof("@"); if(x==-1) window.alert( + : Invalid "); else window.alert( +" :valid "); } </script> <body> <form name="form1"> <input type="text" value=" " name="txt1"> <input type="button" value="check " onclick="check();" > </form> </body> </html> Validation.html 36

37 The JavaScript this keyword In JavaScript this always refers to the owner of the function we're executing, or rather, to the object that a function is a method of. <input type=button id= bt1 onclick= m(this) /> In previous example this refer to the button with id= bt1: <form action=" " name="demoform" onsubmit= "return valid(this.menu,this.choicetext)"> In previous example this refer to the form with name = demoform : 37

38 Example :Select Validation <form action="" onsubmit="return valid(this.menu,this.choicetext)"> <div> <select name="menu"> <option value="0" selected>(please select:)</option> <option value="1">one</option> <option value="2">two</option> <option value="3">three</option> <option value="other">other, please specify:</option> </select> <input type="text" name="choicetext"></div> <div><input type="submit" value="submit"></div> </form> ComboBoxValidation.html 38

39 <script > //check if user chose to enter a value function last_choice(selection) { return selection.selectedindex==selection.length - 1; } Function valid(menu,txt) { //check if user did not make a selection if(menu.selectedindex == 0) { alert('you must make a selection from the menu'); return false;} //check if user did not write a value in text input if(txt.value == '') { if(last_choice(menu)) { alert('you need to type your choice into the text box'); return false; } else { return true; } }//end if else { //check if user entered text although he did not select last option if(!last_choice(menu)) { alert('incompatible selection'); return false; } else { return true; } } } 39

40 Note on HTML5 Validation If you want to disable client side validation for a form in HTML5 add a novalidate attribute to the form element. Ex: <form method="post" action="/foo" novalidate>...</form> 40

41 Review of Event Registration model 1-inline event registration model: event handlers are added as attributes to the HTML elements they were working on, like: <input type= Button onclick= m1() > 2-Traditional event registration model : The onclick, onmouseover and all other event properties of the HTML element are completely accessible through JavaScript. After you have properly accessed the HTML element through a you can write your function into the property of your choice, like: element.onclick = dosomething; note that in the registration of an event handler you do not use parentheses Ø To remove the event handler, simply make the onclick method empty: element.onclick = null; Ø The handler can be also an anonymous function element.onclick = function () {startdragdrop(); spyonuser()}

42 If an element and one of its ancestors have an event handler for the same event, which one should fire first? If the user clicks on element2 he causes a click event in both element1 and element2. But which event fires first?

43 3-The W3C event registration model :Advanced event registration models object.addeventlistener (eventname, function, usecapture); Ø to register dosomething() function to the onclick of an element you do: element.addeventlistener('click',dosomething,false) Ø we can add as many event listeners as we want to the element. element.addeventlistener('click',startdragdrop,false) element.addeventlistener('click',spyonuser,false) Ø You can also use anonymous functions element.addeventlistener('click', function () { this.style.backgroundcolor = '#cc0000' },false) Ø As to the true or false that is the last argument of addeventlistener, it is meant to state whether the event handler should be executed in the capturing (true) or in the bubbling phase Web Ref: Programming CS333 CS614