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

• 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" ;

< img src="lightoff.gif" alt= "light off" id= "img1" /> } head

< p>

This < span >example is lovely.

But < span >this oneis even more! body 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-

This text can be hidden! body sheet rules applied over the element

This technique is more stable w.r.t. document changes (why?)

2 Event Example

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 ></p><p>Event Example (cont) Event Model</p><p><body > • Events usually occur due to users actions <p> - For example, pressing the keyboard, changing a text • 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 ></p><p>Event Model (cont) Inline Listener Registration</p><p>• 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 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</p><p>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 ></p><p>Form Validation Form Validation - Simple Example</p><p>• 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 ></p><p>Form Validation - Simple Example Form Validation - Another (cont) Example</p><p><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 ></p><p>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 ></p><p>Mouse -Click Events Event Flow</p><p>• 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()" > </ p> </ div > </ body ></p><p>Event Flow (cont) Microsoft Model</p><p>• 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 , <a href="/tags/Opera_(web_browser)/" rel="tag">Opera</a> 7 , Konqueror )</p><p>5 W3C Model Event Flow (cont)</p><p>• 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</p><p>An Example Dynamic Listener Registration</p><p>• 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</p><p>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</p><p>6 Structure Manipulation DOM Tree Manipulation</p><p>• 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 ")</p><p>DOM Tree Manipulation (cont) An Example</p><p>• 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.</ p> - element .removeChild (child ) <div id ="d1" >< p id ="p1" >Second paragraph.</ p></ div > - element .replaceChild (newChild , oldChild ) <p> <input type ="button " value ="replace" onclick ="replace (this )" /> </ p> </ body > </ html ></p><p>An Example (cont) The innerHTML Property function replace (button ) { • The attribute innerHTML attribute of an element d = document .getElementById ("d1" ); is the HTML code embedded inside that element p = document .getElementById ("p1" ); • Hence, you can replace existing content by h = document .createElement ("h1" ); setting this attribute: text = document .createTextNode ("This is a header." ); - element .innerHTML = " new HTML code " h.appendChild (text ); • Not recognized by W3C specifications, but d.replaceChild (h,p); supported by Web browsers</p><p> button .disabled =true ; }</p><p>7 Previous Example with innerHTML</p><p> function replace (button ) { d = document .getElementById ("d1" ); The window Object d.innerHTML = "<h1>This is a header< \/h1>" ;</p><p> button .disabled =true ; }</p><p>The window Object Dialog Boxses</p><p>• Built-in object called window • alert( "warning!!!" ); • Represents the browser window of the • confirm( "are you sure?" ); document - returned value is Boolean • Several window objects may co-exist • prompt( "enter your name" ); - Separate windows/tabs - returned value is either a - Separate frames string or a null object • Default object – need not specify window to access its properties and methods - window.alert() and alert() are the same Rendering stops until box closure!</p><p>An Example The location Object</p><p><script type="text/javascript"> • The object window.location represents the current URL of the window alert ("You are about to start" ); • For example: document .write ("Started<br/>" ); - location. href - the current URL (can be changed!) - location. hostname conf = confirm ("Should I continue?" ); - location. pathname if (conf ) { name = prompt ("Enrer your name" ) • Also has methods: document .write ("Your name is " + name +" .<br/>" ); - location. reload() , } - location. replace(‘URL ’) </ script ></p><p>8 Opening New Windows Accessing Window Frames</p><p>• window. open (" URL ") - opens URL in a • window. top - the topmost window new window • window. frames - a collection of the frames - you can specify other properties, like size, in the window whether it is resizable, etc. - returns the new window object • For example, in a specific <a href="/tags/Frame_(World_Wide_Web)/" rel="tag">frame</a>, use window. top .frames [i] to get to another frame</p><p>The navigator Object The history Object</p><p>• The object window.navigator contains • The object window.history enables navigation information about the browser according to the navigation history • For example: • For example: - history. back() - same as clicking the back - navigator. appName - the name of the browser button - navigator. appVersion - the version of the - history. forward() - same as clicking the browser forward button - navigator. cookieEnabled - history. go( i) - go forward i times - navigator. platform - the OS name • If i is negative, go back -i times</p><p>9</p> </div> </article> </div> </div> </div> <script type="text/javascript" async crossorigin="anonymous" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8519364510543070"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script> var docId = 'bafadb1720a1833338710331b80ddf5a'; var endPage = 1; var totalPage = 9; var pfLoading = false; window.addEventListener('scroll', function () { if (pfLoading) return; var $now = $('.article-imgview .pf').eq(endPage - 1); if (document.documentElement.scrollTop + $(window).height() > $now.offset().top) { pfLoading = true; endPage++; if (endPage > totalPage) return; var imgEle = new Image(); var imgsrc = "//data.docslib.org/img/bafadb1720a1833338710331b80ddf5a-" + endPage + (endPage > 3 ? ".jpg" : ".webp"); imgEle.src = imgsrc; var $imgLoad = $('<div class="pf" id="pf' + endPage + '"><img src="/loading.gif"></div>'); $('.article-imgview').append($imgLoad); imgEle.addEventListener('load', function () { $imgLoad.find('img').attr('src', imgsrc); pfLoading = false }); if (endPage < 7) { adcall('pf' + endPage); } } }, { passive: true }); </script> <script> var sc_project = 11552861; var sc_invisible = 1; var sc_security = "b956b151"; </script> <script src="https://www.statcounter.com/counter/counter.js" async></script> </html>