SY306 Web and Databases for Cyber Operations Slide Set #6: Dynamic - - PDF document

▶

Sep 30, 2023 464 likes •554 views

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

SLIDE 1

1

W3schools HTML DOM Intro, DOM Methods, DOM Document, DOM HTML, DOM CSS

SY306 Web and Databases for Cyber Operations Slide Set #6: Dynamic HTML

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!!

SLIDE 2

2

What can we do with DHTML What can we do with DHTML?

SLIDE 3

3

Event-Driven Programming

Events
Event handlers
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.

Document Object Model

SLIDE 4

4

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()">

<input id = “changeButton” type = “button” value = “change”> domButton.addEventListener(“click”, changeLink)

SLIDE 5

5

All Kinds of Events

onblur
onfocus
onchange
onclick
ondblclick
onload (<body> only)
onmousedown, onmouseup, onmouseout,
nmouseover, onmousemove
onselect (<input>, <textarea> only)
onsubmit (<form> only)
onunload (<body> only)

Cash Register Example

SLIDE 6

6 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

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"

nblur="return checkAttending()" /></label><span id = "numAttendError"></span>

SLIDE 7

7

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>

SLIDE 8

1