1. UFCEWT-20-3 Advanced Topics in Web Development Lecture 4 : JavaScript, Browsers & the HTML DOM-API

2. browser objects and their hierarchy model

3. the dom object/event model

4. the html dom hierarchy visualized

5. the “window” Object  Represents the browser  The default object (the object is always "there")  Writing document.write("a test message"); alert("Hello"); foo = "bar"; has the same meaning as writing window.document.write("a test message"); window.alert("Hello"); window.foo = bar;

6. some of "window" properties and methods o alert(), prompt(), confirm() o open() o create a new window o close() o close the current window o setTimeout(expression, time) o evaluate "expression" after "time" (in millisecond)

7. example: opening a window o var winObj = window.open(url, window_name, attributes) o attributes is a string for specifying the following attributes AttributeDescription toolbarCreates the standard toolbar locationCreates the location entry field directoriesCreates standard directory buttons statusCreates the status bar menubarCreates the menu bar at the top of a window scrollbarsCreates scrollbars when the document exceeds the window size resizableEnables the user to resize the window widthSpecifies the width of the window heightSpecifies the height of the window

8. var myWin; function open_close_win() { if (!myWin) // if not yet opened, open a new window myWin = window.open( "http://www.w3schools.com", // Document URL "my_new_window", // Window Name "toolbar=yes,location=yes,directories=no," + "status=no,menubar=yes,scrollbars=yes," + "resizable=no,copyhistory=yes,width=400,height=400" ); else { // Otherwise close the opened window myWin.close(); myWin = null; } <input type="button" value="Open/close Window" onclick="open_close_win()">

9. properties of the "window" object o location o Represents the URL loaded into the window o navigator o Contains info about the browser (Its version, OS, etc.) o document o Holds the real content of the page o screen o Contains info about the client's display screen o history o Contains the visited URLs in the browser window

10. the “document” object o The document object represents a web document or a page in a browser window/frame. o Useful properties ocookie, URL, images[], forms[], anchors[], … o Useful methods owrite(), writeln(), getElementById(), getElementsByTagName(), open(), close(), …

11. function docOpen() { document.open();// Old contents are gone document.write(" Hello World! "); document.close(); } test <input type="button" onclick="docOpen()" value="Open a new document">

12. the “form” object o The "form" object belongs to the "document" object. o Contains other objects that represent the form elements (text input field, radio buttons) o Useful properties o action, method, target, elements[] o Useful methods o reset(), submit() o Form elements can be accessed as odocument.forms[idx] or document.forms[form_name] or document.form_name or document.getElementById(form_id)

13. function validate() { var x = document.myForm; var txt = x.myInput.value; if (txt >= 1 && txt <= 5) return true; else { alert("Must be between 1 and 5"); return false; } <form name="myForm" action="tryjs_submitpage.htm" onsubmit="return validate()"> Enter a value (1-5):

14. document object model (DOM) o The Document Object Model (DOM) is the model that describes how all elements in an HTML page, like input fields, images, paragraphs etc., are related to each other. o By calling the element by its proper DOM name, we can access and modify the element.

15. nodes This is a paragraph would give something like ---------------- | | -------------- ALIGN | | | This is a | | right | paragraph In the Level 1 DOM, each object, whatever it may be exactly, is a Node In an HTML document, element P would also have a parent.

16. walking through the DOM tree o Each node is modeled as an object. o Each node (except the root) has a parent ox.parentNode o Each node has zero or more children nodes o To get the # of child nodes ox.childNodes.length // childNodes is an array o To get the i th child ox.childNodes[i-1] // First child has index 0 o To get the first child, you can also write ox.firstChild or x.childNodes[0] o To get the last child ox.lastChild

17. getting an element o To get an array of all the elements odocument.getElementsByTagName("p") o To get the first element ovar x = document.getElementsByTagName("p")[0]; oor ovar parray = document.getElementsByTagName("p"); ovar x = parray[0]; o If you assigned an "id" attribute to the first element like " ", then you can get the element as ovar x = document.getElementById("someId");

18. nodes properties and methods o A node that represents an element is called an element node. o A node that represents only the text is called a text node o An element node object has methods to o set/get attributes o add / insert / remove / replace child nodes o and more … o An element node has properties which you can access/modify directly o id o innerHTML o and more …

19. methods for changing the structure of the document onewNode = document.createElement("name") o Creates a new element node with the tag name "name" onewNode = document.creatTextNode("string") o Creates a new text node with the node value of string onode.appendChild(newNode) o Adds newNode as a new child node to node, following any existing children of node onewNode = node.cloneNode(deep_copy) o Creates newNode as a copy of node. o If deep_copy is true, the clone includes clones of all the child nodes and attributes of the original

20. methods for changing the structure of the document onode.insertBefore(newNode, oldNode) o Inserts newNode as a new child node of node before oldNode onode.removeChild(oldNode) o Removes the child oldNode from node onode.replaceChild(newNode, oldNode) o Replaces the child node oldNode of node with newNode

21. the innerHTML property  A property (of type string ) of an element node that represents the content of the element.  Kept available for backward compatibilities  Easier to use but less efficient

22. event handlers o Specify JavaScript code to execute when a particular event is detected by the browser o Embedded in an HTML element as an attribute o Triggered by events associated with the attribute o Some examples EventEvent Handler clickonclick loadonload mouseoveronmouseover mouseoutonmouseout submitonsubmit unloadonunload Example in use: link

23. DOM: manipulating CSS styles o We can use the DOM to dynamically control content presentation via JavaScript and CSS o Every element on a web page has a style object that can be used to access various properties of an element o We can use the getElementById() method to do this window.document.getElementById('element ID').style.property ='value'  Note some JavaScript names for CSS properties are different document object document method page element id style object style propert y new propert y value

24. example – with event handling and style manipulation … <img id = "myImg" src = "offer.jpg" alt = "offer image" onclick = "document.getElementById('myImg').style.height='200px'; "/> onclick