5 th and 4 th ed: some from chapters 9, 12, 13 sy306 web and databases for cyber operations slide...
DESCRIPTION
What can we do with DHTML?TRANSCRIPT
5th and 4th ed: some from chapters 9, 12, 13
SY306 Web and Databases for Cyber Operations
Slide Set #8: Dynamic HTML
What can we do with DHTML
What can we do with DHTML?
Event-Driven Programming and DOM
• Events
• Event handlers
• DOM
DHTML - What techniques do we need?
• Find the HTML object we want to changevar domLink = document.getElementById("linkToAnimal");
• Change the object’s:– HTML properties domLink.href = "cat.html";
– CSS propertiesdomLink.style.backgroundColor = "blue";
• Register event handler<input type = "button" value = "change" onclick = "changeLink()">
<input id = “changeButton” type = “button” value = “change”> domButton.addEventListener(“click”, changeLink)
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>
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" id = "lastName“ onblur=“return
checkLastName()“ /></label><span id = "lastNameError"></span><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>
<script type = "text/javascript">//check if last name is filled outfunction checkLastName(){
var lastNameDOM = document.getElementById("lastName");var lastNameError = document.getElementById("lastNameError"); var lastName = lastNameDOM.value;//something in the last name fieldif (lastName){
lastNameError.innerHTML = "";return true;
}//nothing in the last name fieldelse{
lastNameError.style.color = "red";lastNameError.innerHTML = "*Please fill in the last name";return false;
}}
// Returns true if the number of attending is okayfunction 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 okfunction confirmSubmit() {
if (!checkAttending() || !checkLastName())return false;
if (window.confirm("Are you sure you want to submit?"))return true;
else return false; }</script>
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)
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>
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.