dhtml
advertisement
SY306 Web and Databases for Cyber Operations Slide Set #8: Dynamic HTML 5th and 4th ed: some from chapters 9, 12, 13 What is Dynamic HTML The combination of… 1. HTML- static mark up language to describe the structure and content of a web site 2. CSS- defines ‘how’ display HTML elements. Adds presentation to HTML 3. Javascript- Client side scripting language to make pages dynamic and interactive by accessing the…. 4. DOM (Document Object Model)- standard way to control, access, and manipulate HTML elements …Used together to make interactive web sites! DHTML is all about using Javascript and the DOM to manipulate HTML elements!! Event-Driven Programming and DOM • Events User interaction such as... – – – – User presses a key User enters form data User moves the mouse Etc…. • Event handlers- Functions that handle events. Event-Driven Programming and DOM The HTML DOM is a standard for how to get, change, add, or delete HTML elements. It defines: • The HTML elements as objects • The properties of all HTML elements • The methods to access all HTML elements • The events for all HTML elements Many properties and methods associated with the DOM. For now, we will primarily use these two: 1. getElementById(‘id’): The easiest way to reference a particular element 2. innerHTML: The easiest way to reference an element’s contents. getElementsByClassName(‘class’):ref all elements with class name as an array DHTML - What techniques do we need? 1. Find the HTML object we want to change <a href="dog.html" id="linkToAnimal"> • var domLink = document.getElementById("linkToAnimal"); 2. Change the object’s content (html property) or presentation (CSS property): HTML properties • domLink.href = "cat.html"; CSS properties • domLink.style.backgroundColor = "blue"; 3. Register event handler ie(assign a function handle the element’s event). 2 ways to do this: A. <input type="button" value="change" onclick="changeLink()"> B. <input id=“myButton” type=“button” value=“change”> document.getElementById(‘myButton’).addEventListener(“click”, changeLink) //event name w/o the ‘on’, event handler (function) w/o the () All Kinds of Events • • • • • • • onblur onfocus onchange onclick ondblclick onload (<body> only) onmousedown, onmouseup, onmouseout, onmouseover, onmousemove • onselect (<input>, <textarea> only) • onsubmit (<form> only) • onunload (<body> only) Cash Register Example <script type = "text/javascript"> </script> </head> <body> <table border="1"> <tr> <td id ="moneyLabel" > Total money: </td> <td colspan = "2" id="moneyTotal" >$0.00</td> </tr> <tr> <td class= " cents " >$0.05</td> <td class= " cents " >$0.10</td> <td class= " cents " >$0.25</td> </tr> </table> </body> </html> Exercise #1 – Change this code to make the <p> element have a large font when you move the mouse over it. <!DOCTYPE html> <html> <head> <meta charset = "utf-8" /> <title>Bigger</title> <script type = "text/javascript"> </script> </head> <body> <p> Welcome to my page! </p> </body> </html> Exercise #2 – Modify so that clicking on the button changes target of <a> element to “dog.html” <!DOCTYPE html> <html><head> <meta charset = "utf-8" /> <title>Change Link</title> <script type = "text/javascript"> </script> </head> <body> <p><a href="cat.html">See some animals!</a></p> <form> <input type="button" value="Change animal " /> </form> </body> </html>
