SY306 Web and Databases for Cyber Operations Slide Set #6: Dynamic HTML W3schools HTML DOM Intro, DOM Methods, DOM Document, DOM HTML, DOM CSS What is Dynamic HTML The combination of… 1. HTML 2. CSS 3. Javascript 4. DOM …Used together to make interactive web sites! DHTML is all about using Javascript and the DOM to manipulate HTML elements!! 1
What can we do with DHTML What can we do with DHTML? 2
Event-Driven Programming • Events • Event handlers Document Object Model • The HTML DOM is a standard for how to get, change, add, or delete HTML elements. It defines: • Many properties and methods associated with the DOM. 3
DHTML - What techniques do we need? • Find the HTML object we want to change var domLink = document.getElementById("linkToAnimal"); • Change the object’s content or presentation: – HTML properties domLink.href = "cat.html"; – CSS properties domLink.style.backgroundColor = "blue"; Event Listeners • When do we launch our JavaScript code? • Listen for user actions. • Register event handler <input type = "button" value = "change" onclick = "changeLink()"> or <input id = “ changeButton ” type = “button” value = “change”> domButton.addEventListener (“click”, changeLink) 4
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"> //function to addMoney to the total //parameter centsToAdd function addMoney(centsToAdd) { //add to total //change total content in table //change label to red if total multiple of 10, blue otherwise } </script> </head> <body> <table> <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> 5
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> Form Validation Example <script type = "text/javascript"> </script> </head> <body> <form method=“post" onsubmit="return confirmSubmit()" action="http://www.usna.edu/Users/cs/adina/teaching/sy306/tools/FormChecker/submit.cgi" > <p> <label>Last name: <input type="text" name="lastName"/></label> <br/><label>Number attending(1-100): <input type="text" name="numAttend" id="numAttend" onblur="return checkAttending()" /></label><span id = "numAttendError"></span> <br/><input type="submit" value="Sign Up" /> </p> </form> </body> </html> 6
<script type = "text/javascript"> // Returns true if the number of attending is between 1 and 100 function checkAttending() { var numDOM = document.getElementById("numAttend"); var numAttendError = document.getElementById("numAttendError"); var numAttend = numDOM.value; if ( (numAttend >= 1) && (numAttend <= 100) ){ numAttendError.innerHTML = ""; return true; } else { numAttendError.style.color = "red"; numAttendError.innerHTML = "*Attendance: Please enter a value between 1 and 100."; return false; } } // Asks user to confirm submission, returns true if ok function confirmSubmit() { if (!checkAttending()) return false; if (window.confirm("Are you sure you want to submit?")) return true; else return false; } </script> 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> 7
Exercise #3 – Write a form to read in a password from the user in two boxes. When they submit the form, proceed only if the passwords are the same. 8
Recommend
More recommend
![1 [TITLE SLIDE] From Cyber Skills to Resilient Cyberspace Talent: Advance Australia! Prepared](https://c.sambuz.com/250710/1-title-slide-from-cyber-skills-to-resilient-cyberspace-s.jpg)
