Dynamic HTML HTML

Dynamic HTML XHTML appearance CSS Dynamic HTML Dynamic HTML content style rules manipulate manipulate Scripting Language DHTML • A combination of technologies used to create animated documents • Not a W3C standard! HTML DOM - Originally, a marketing term used by Netscape and Microsoft • Using scripts , we manipulate HTML content and style properties in reaction to events HTML DOM DOM and JavaScript From W3C: • Combined with JavaScript , every element in the HTML document is represented by an “A platform- and language-neutral interface that object allows programs and scripts to dynamically access and update the content and structure of • Elements can be manipulated using the HTML and XHTML documents. ” properties and methods of the corresponding objects • Changes in the element properties are immediately reflected by the browser 1 Accessing HTML Elements HTML DOM Tree • All HTML elements (objects) are accessed through the document object • document itself is automatically created • Several ways to access a specific element - paths in the DOM tree - retrieval by tag - retrieval by ID Accessing Elements by Paths Accessing Elements by Tags function execute() { var img = document .images [0] ; img.src="lighton.gif" function execute() { var inx = document .forms [0] .elements [0] ; inx.value="xx" var spans = document. getElementsByTagName ("span"); var iny = document .forms ["form1"] .elements ["y"] ; iny.value="yy" spans[0] .style.color= "red" ; spans[1] .style.color= "blue" ; } head spans[1] .style.fontVariant= "small-caps" ; <p>< img src="lightoff.gif" alt= "light off" id= "img1" /></ p> } head <form id= "form1" method= "get " action= "nosuch">< p> <input type= "text " name= "x" /> <p>This < span >example</ span > is lovely.</ p> <input type= "text " name= "y" /> <p>But < span >this one</ span >is even more!</ p> body <input type= "reset "/></ p> </ form > body Accessing Elements by ID Element Properties function execute() { • Elements of different types have different var theDiv = document. getElementById ("div1" ); sets of properties and methods if (theDiv.style.visibility== "hidden" ) • See www.w3schools.com/htmldom / for a {theDiv.style.visibility="visible" } detailed list of element properties and methods else {theDiv.style.visibility="hidden" } • Most elements have the style member } head • style is an object that represents the style- <div id= "div1" > This text can be hidden! </ div > body sheet rules applied over the element This technique is more stable w.r.t. document changes (why?) 2 Event Example <html > <head > <title >Simple Events </ title > Events <script type= "text/javascript"> function focusInput() { var theInput = document.getElementsByTagName( "input" )[0] theInput.style.background="yellow" } function blurInput() { theInput = document.getElementsByTagName( "input" )[0] theInput.style.background="white" } </ script > </ head > Event Example (cont) Event Model <body > • Events usually occur due to users actions <p> - For example, pressing the keyboard, changing a text <img src="lighton.gif" alt= "light bulb" field, moving the mouse over an element, etc. onmouseover="alert('Mouse Over')" /> • An event is represented by an event object </ p> <p> that is created upon the event occurrence <input type= "text " onfocus="focusInput()" • Every event has an associated target onblur="blurInput()" /> </ p> element </ body > - For example, the image over which the mouse clicks </ html > Event Model (cont) Inline Listener Registration • Elements can have registered event • The simplest (and most common) way to register listeners which are associated with certain a listener is by an attribute assignment: types of events on type = "JavaScript code " • When an event takes place, the listeners • For example: that are registered for this event are <img src="img.gif" onmouseover ="alert('!')" /> invoked • The JavaScript code has access to the following objects: • Typically, a listener is described by a - this - the element (e.g., the image defined above) scripting code (e.g., JavaScript) - event - the event object - This code is executed upon listener invocation 3 Some Event Types Another Example <html > load click reset <head >< title >Event Object Example </ title > unload dblclick select <script type= "text/javascript"> abort mousedown submit function execute( e) { mousemove alert( " x: " + e.clientX + ", y: " + e.clientY + keydown mouseup change " mouse button: " + e.button); } keypress mouseover blur </ script ></ head > keyup focus <body onmousedown="execute( event )" style= "cursor: pointer ; position:absolute; width:100%; height:100%" > </ body > </ html > Form Validation Form Validation - Simple Example • In the form element, onsubmit=" code " defines a <html> listener with a special functionality <head >< title >Form Validation</ title > • When the form is supposed to be <script type= "text/javascript"> function validate() { submitted, code is executed before var theX = document.forms[0].x.value; submission var theY = document.forms[0].y.value; • The code can return a Boolean value if( theX != theY ) { alert( "x != y!!" ); return false ; } - e.g., onsubmit=" return function() " else { return true ; } } • If code returns false , submission is </ script > cancelled! </ head > Form Validation - Simple Example Form Validation - Another (cont) Example <body > <head >< title >Form Validation</ title > <form id= "email-form" action= "myurl" method= "get " <script type= "text/javascript"> onsubmit="return validate()" > function validateEmail( form ) { <p> var emailRegExp = /^\w+\@\w+\.\w+$/ ; x: < input type= "text " name= "x" /> var theEmail = form .email.value; y: < input type= "text " name= "y" /> if(theEmail.match( emailRegExp )) { return true ; } <input type= "submit " /> alert(theEmail + " is not a valid email!" ); </ p> return false ; </ form > } </ body > </ script > </html> </ head > 4 Form Validation - Another Form Submission Example (cont) • A form can be submitted without the <body > special submission button <form id= "email-form" action= "myurl" method= "get " onsubmit="return validateEmail()" > • Use the function form. submit() to submit a <p> specific form from JavaScript code Name: < input type= "text " name= "Name:" /> < br /> Email: < input type= "text " name= "email" /> <input type= "submit " /> </ p> </ form > </ body > Mouse -Click Events Event Flow • To register a listener for the click event, use can <script type= "text/javascript"> use the onclick attribute of the element function f1() { alert( "1" ) } - Apply the style rule cursor: pointer to the element in function f2() { alert( "2" ) } order to get the pointer effect function f3() { alert(" 3" ) } </ script > <body > • Alternatively, you can link to a JavaScript code: <div onclick="f1()" > - <a href=" javascript: code ">Click here</a> <p onclick="f2()" > <img src="lighton.gif" alt= "light" onclick="f3()" /> </ p> </ div > </ body > Event Flow (cont) Microsoft Model • When we click on the image, which of the • Event Bubbling : events propagate through the functions should be executed? elements in bottom-up order - Answer: all of them! - i.e., from the most specific to the most general • In what order? • Whenever an element is visited, its listeners are triggered • Two different models: - Microsoft (impl. in IE ) • In our example: img → p → div - W3C (impl. in Mozilla , Opera 7 , Konqueror ) 5 W3C Model Event Flow (cont) • In the W3C model, there are 2 traversals: • A listener can be registered in either the 1. Event capturing : top-down capturing or the bubbling phase • e.g., div → p → img • By default, listeners register in the bubbling 2. Event bubbling : bottom-up phase • e.g., img →p → div - So, what will be the result of the example code? • An element may choose to stop the flow at any Element 1 listener execution, by calling event. stopPropagation() Element 2 - In IE: event. cancelBubble = true An Example Dynamic Listener Registration • What will happen if we replace f2 with the • A listener can be dynamically registered by following? using JavaScript code • Microsoft: element .on type = functionName function f2(e) { alert( "2" ); element. attachEvent ("on type ", functionName ) if(e. stopPropagation ) e. stopPropagation() ; • Note that the function is given as an object if(e. cancelBubble != undefined ) e. cancelBubble =true; • The function is called without arguments } • The event can be accessed using window.event Dynamic Listener Registration (cont) • W3C: element .on type = functionName element .addEventListener (" type ", functionName , isCapture ) Manipulating the • The function is called with event as an argument Document Structure • If isCapture is true , the listener is registered for the capturing phase 6 Structure Manipulation DOM Tree Manipulation • In structure manipulation, we • In this approach, we explicitly - add /remove /replace HTML elements - create new nodes - change the text under elements - add created nodes to the DOM tree - remove old nodes • Two approaches: - DOM tree manipulation (W3C specification) • To create new nodes, use these methods of document : - Setting the innerHTML attribute (not a specification) - document .createElement (" tag ") - document .createTextNode (" text ") - document. createAttribute (" attname ") DOM Tree Manipulation (cont) An Example • To add and remove children of a specific element, use <html > the following methods: <head >< script type ="text/javascript">...</ script ></ head > - element .appendChild (newChild ) <body > - element .insertBefore (newChild , child ) <p>First Paragraph.</

Load more