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.</

Dynamic HTML HTML

Details

Download

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

Support