1 / 23

JavaScript and the DOM

This guide introduces the three layers of web pages: the Structural Layer (XHTML), Presentation Layer (CSS), and Behavioral Layer (JavaScript and DOM). It explores how JavaScript enables interactive behaviors, event handling, and dynamic content modifications. Learn how client-side languages like JavaScript validate forms, respond to user events, and enhance user interfaces. The document covers essential topics such as document structure, browser events, and practical JavaScript examples, equipping developers with the skills to create engaging web experiences.

chidi
Télécharger la présentation

JavaScript and the DOM

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. JavaScript and the DOM Les Carr COMP3001

  2. Behavioral Layer Web pages have 3 layers… • Structural/Content Layer (XHTML) • The meat and potatoes • Presentational Layer (CSS) • How things look; garnishing the meat and potatoes on a pretty plate • Behavioral Layer (JavaScript and DOM) • How websites behave; the meat can jump off the plate if you want it to.

  3. http request http response Client-side Languages • User-agent (web browser) requests a web page • JavaScript is executed on PC • Can affect the Browser and the page itself • Web page (with JavaScript) is sent to PC

  4. Client-side What kind of things can you do with JavaScript? • Validating Form information, • i.e., making sure all the fields are complete before submitting data back to the server • Modifying a web page based on Mouse Events. • Can turn a web page into a user interface with interactive buttons and controls

  5. http request • Server detects PHP code in page, executes the code, and sends the output to the user http response Server-side Languages • User-agent (web browser) requests a web page • User never sees the PHP, only the output • Cannot affect the browser or client PC • Web page (with PHP Output) sent to PC

  6. Java Functions definitions are embedded in the <head> Function calls are placed in the <body> <html> <head> <script language=“javascript”> function myfun() { do something; } </script> </head> <body> <script language=“javascript”> myfun(); </script> </body> </html> JavaScript

  7. DOM Scripting Key Topics: • Event Handling • The Browser Object • Document Object Model • the document structure

  8. Event Handling • JavaScript code can be initiated by browser events • HTML 4.0 supports lots of events. • onclick, onchange, onmousedown, onmousemove, etc.

  9. Browser Events • onblur – an element loses focus, i.e., click on a text box, but then you click on something else; the text box is blurred • onchange – contents of an element is changed, i.e., changing the selection in a drop down menu • onfocus – an element is clicked or selected • onload – when the web page is initially loaded • onsubmit – when a form’s submit button is clicked

  10. More Browser Events • onkeydown – immediately when a key is pressed down • onkeypress – if the key is held down, i.e., not immediately released • onkeyup – immediately when a key is released. • Sometimes, you want something to happen when the key goes down vs. goes up • Sometimes, you want to detect a long key press SHIFT, CTRL, or ALT

  11. Even More Browser Events • onmousedown – a mouse button is pressed down • onmouseup – a mouse button is released • onmousemove – a mouse is moved • onmouseout – mouse is moved off an element (blur)* • onmouseover – mouse is moved on an element (focus, hover)* * Used for hover effects.

  12. Example <html> <body> <h1>Example Javascript Event Handler</h1> <p>Here is some text with a <span onClick="alert('Do not click here')"> sensitive patch</span> in it</p> </body> </html>

  13. Example 2 <html> <head><script language="JavaScript"> function log(s){window.status=s} </script></head> <body> <h1>Example Javascript Event Handler</h1> <p>Here is some text with a <span onMouseOver="log('Do not click here')" onMouseOut="log(' ')" > sensitive patch</span> in it</p> </body> </html>

  14. Example 3 <html> <head><script language="JavaScript"> function log(s){window.status=s} </script></head> <body> <h1>Example Javascript Event Handler</h1> <p>Here is some text with an <a href="javascript:log('Flip off out of here')"> insensitive patch</a> in it</p> </body> </html>

  15. DOM Scripting First a summary: • JavaScript can be initiated by browser events. • JavaScript can access and manipulate the browser object. What’s Next • JavaScript can access the document structure.

  16. DOM Example <p> This is a paragraph linking to <a href="http://www.soton.ac.uk">Southampton</a>. </p> Element Nodes TextNodes p AttributeNode This is a paragraph linking to a . href="http://www.soton.ac.uk/" Southampton

  17. DOM Script Example <body> <div id=“menu”> <h1>Main Menu</h1> </div> <div id=“content”> <h1>Page Title</h1> <p>Blaa blaa blaa.</p> </div> ... body div id=“menu” div id=“content” h1 h1 p Main Menu Page Title Blaa blaa blaa.

  18. DOM Script Example <html> <div id="menu"> <h1>Main Menu</h1> </div> <div id="content"> <h1>Page Title</h1> <p>Blaa blaa blaa.</p> </div> <script language="JavaScript"> var contentdiv = document.getElementById('content'); var pagetitle = contentdiv.getElementsByTagName('h1')[0]; pagetitle.setAttribute("style","color:red"); pagetitle.firstChild.nodeValue="The Red Page Title"; </script></html>

  19. DOM Script Example var themenu = document.getElementById(‘menu’); var thebody = menu.parent; var thecontent = menu.nextSibling; var contentnodes = thecontent.childNodes; var theh1 = contentnodes[0]; var firstparagraph = contentnodes[1]; body div id=“menu” div id=“content” h1 h1 p Main Menu Page Title Blaa blaa blaa.

  20. Modifying Structure insertBefore() appendChild() replaceChild() removeChild() cloneNode() Creating Elements createElement() createTextNode() Modifying Attributes getAttribute() / setAttribute() DOM Scripting Functions

  21. DOM and Forms • Every form in a page is held in an array • document.forms[0] is the first form • Every component (input, select or textarea element) is held in a subarray • document.forms[0].elements[0] is the first field <form name="personal"> <input type="text" name="name"> <input type="text" name="address"> <input type="text" name="city"> </form> either document.forms[0].elements[1] or document.forms["personal"].elements["address"] or document.personal.address

  22. DOM and Forms • Every component of the form has a value • document.personal.address.value • The value can be used in expressions or stored in an assignment statement • Specific components have specific methods or properties • a menu (ie a select) has property ‘selectedIndex’ • a checkbox has property ‘checked’ • An onsubmit event handler can check its form’s components and halt the submission by returning false

  23. DOM and Forms <form name="personal" onSubmit="validate()"> <input type="text" name="name"/> <input type="text" name="address"/> <input type="text" name="city"/> <input type="submit" value="Submit!"/> </form> <script lang="JavaScript"> function validate(){ if(document.personal.name.value.length==0){ alert("Missing name"); return false; } return true; } </script>

More Related