ufcewt-20-3 advanced topics in web development
DESCRIPTION
UFCEWT-20-3 Advanced Topics in Web Development. Lecture 4 : JavaScript , Browsers & the HTML DOM-API. b rowser objects and their hierarchy model. t he dom object/event model. the html dom hierarchy visualized . t he “window” Object. Represents the browser - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: UFCEWT-20-3 Advanced Topics in Web Development](https://reader035.vdocuments.mx/reader035/viewer/2022062315/56815e45550346895dccb980/html5/thumbnails/1.jpg)
UFCEWT-20-3 Advanced Topics in Web Development
Lecture 4 : JavaScript, Browsers & the HTML DOM-API
![Page 2: UFCEWT-20-3 Advanced Topics in Web Development](https://reader035.vdocuments.mx/reader035/viewer/2022062315/56815e45550346895dccb980/html5/thumbnails/2.jpg)
browser objects and their hierarchy model
![Page 3: UFCEWT-20-3 Advanced Topics in Web Development](https://reader035.vdocuments.mx/reader035/viewer/2022062315/56815e45550346895dccb980/html5/thumbnails/3.jpg)
the dom object/event model
![Page 4: UFCEWT-20-3 Advanced Topics in Web Development](https://reader035.vdocuments.mx/reader035/viewer/2022062315/56815e45550346895dccb980/html5/thumbnails/4.jpg)
the html dom hierarchy visualized
![Page 5: UFCEWT-20-3 Advanced Topics in Web Development](https://reader035.vdocuments.mx/reader035/viewer/2022062315/56815e45550346895dccb980/html5/thumbnails/5.jpg)
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;
![Page 6: UFCEWT-20-3 Advanced Topics in Web Development](https://reader035.vdocuments.mx/reader035/viewer/2022062315/56815e45550346895dccb980/html5/thumbnails/6.jpg)
some of "window" properties and methodso 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)
![Page 7: UFCEWT-20-3 Advanced Topics in Web Development](https://reader035.vdocuments.mx/reader035/viewer/2022062315/56815e45550346895dccb980/html5/thumbnails/7.jpg)
example: opening a windowo var winObj = window.open(url, window_name, attributes)o attributes is a string for specifying the following attributes
Attribute Description
toolbar Creates the standard toolbar
location Creates the location entry field
directories Creates standard directory buttons
status Creates the status bar
menubar Creates the menu bar at the top of a window
scrollbars Creates scrollbars when the document exceeds the window size
resizable Enables the user to resize the window
width Specifies the width of the window
height Specifies the height of the window
![Page 8: UFCEWT-20-3 Advanced Topics in Web Development](https://reader035.vdocuments.mx/reader035/viewer/2022062315/56815e45550346895dccb980/html5/thumbnails/8.jpg)
<!-- Opening a window with specified characteristics --><html><head><script type="text/javascript">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; }}</script></head><body><form><input type="button" value="Open/close Window" onclick="open_close_win()"></form></body></html>
![Page 9: UFCEWT-20-3 Advanced Topics in Web Development](https://reader035.vdocuments.mx/reader035/viewer/2022062315/56815e45550346895dccb980/html5/thumbnails/9.jpg)
properties of the "window" object
o locationo 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 historyo Contains the visited URLs in the browser window
![Page 10: UFCEWT-20-3 Advanced Topics in Web Development](https://reader035.vdocuments.mx/reader035/viewer/2022062315/56815e45550346895dccb980/html5/thumbnails/10.jpg)
the “document” object
o The document object represents a web document or a page in a browser window/frame.
o Useful propertieso cookie, URL, images[], forms[], anchors[], …
o Useful methodso write(), writeln(), getElementById(), getElementsByTagName(), open(), close(), …
![Page 11: UFCEWT-20-3 Advanced Topics in Web Development](https://reader035.vdocuments.mx/reader035/viewer/2022062315/56815e45550346895dccb980/html5/thumbnails/11.jpg)
<!-- Create new document content --><html><head><script type="text/javascript">function docOpen(){ document.open(); // Old contents are gone document.write("<h3>Hello World!</h3>"); document.close();}</script></head>
<body>test<form><input type="button" onclick="docOpen()" value="Open a new document"></form></body>
</html>
![Page 12: UFCEWT-20-3 Advanced Topics in Web Development](https://reader035.vdocuments.mx/reader035/viewer/2022062315/56815e45550346895dccb980/html5/thumbnails/12.jpg)
the “form” objecto The "form" object belongs to the "document" object.
o Contains other objects that represent the form elements (text input field, radio buttons)
o Useful propertieso action, method, target, elements[]
o Useful methodso reset(), submit()
o Form elements can be accessed aso document.forms[idx] or document.forms[form_name]
or document.form_name or document.getElementById(form_id)
![Page 13: UFCEWT-20-3 Advanced Topics in Web Development](https://reader035.vdocuments.mx/reader035/viewer/2022062315/56815e45550346895dccb980/html5/thumbnails/13.jpg)
<!– Validate the range of input in a text field --><html><head><script type="text/javascript">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; }}</script></head><body><form name="myForm" action="tryjs_submitpage.htm" onsubmit="return validate()"> Enter a value (1-5): <input type="text" name="myInput" size="20"> <input type="submit" value="Submit"></form></body></html>
![Page 14: UFCEWT-20-3 Advanced Topics in Web Development](https://reader035.vdocuments.mx/reader035/viewer/2022062315/56815e45550346895dccb980/html5/thumbnails/14.jpg)
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.
![Page 15: UFCEWT-20-3 Advanced Topics in Web Development](https://reader035.vdocuments.mx/reader035/viewer/2022062315/56815e45550346895dccb980/html5/thumbnails/15.jpg)
nodes
<P ALIGN="right">This is a <B>paragraph</B></P>
would give something like
<P> ---------------- | | -------------- ALIGN | | | This is a <B> | | 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.
![Page 16: UFCEWT-20-3 Advanced Topics in Web Development](https://reader035.vdocuments.mx/reader035/viewer/2022062315/56815e45550346895dccb980/html5/thumbnails/16.jpg)
walking through the DOM tree
o Each node is modeled as an object.o Each node (except the root) has a parent
o x.parentNodeo Each node has zero or more children nodes
o To get the # of child nodeso x.childNodes.length // childNodes is an array
o To get the ith childo x.childNodes[i-1] // First child has index 0
o To get the first child, you can also writeo x.firstChild or x.childNodes[0]
o To get the last childo x.lastChild
![Page 17: UFCEWT-20-3 Advanced Topics in Web Development](https://reader035.vdocuments.mx/reader035/viewer/2022062315/56815e45550346895dccb980/html5/thumbnails/17.jpg)
getting an element
o To get an array of all the <p> elementso document.getElementsByTagName("p")
o To get the first <p> elemento var x = document.getElementsByTagName("p")[0];o oro var parray = document.getElementsByTagName("p");o var x = parray[0];
o If you assigned an "id" attribute to the first <p> element like "<p id="someId">", then you can get the <p> element aso var x = document.getElementById("someId");
![Page 18: UFCEWT-20-3 Advanced Topics in Web Development](https://reader035.vdocuments.mx/reader035/viewer/2022062315/56815e45550346895dccb980/html5/thumbnails/18.jpg)
nodes properties and methodso 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 too set/get attributeso add / insert / remove / replace child nodeso and more …
o An element node has properties which you can access/modify directlyo ido innerHTMLo and more …
![Page 19: UFCEWT-20-3 Advanced Topics in Web Development](https://reader035.vdocuments.mx/reader035/viewer/2022062315/56815e45550346895dccb980/html5/thumbnails/19.jpg)
methods for changing the structure of the document
o newNode = document.createElement("name")o Creates a new element node with the tag name "name"
o newNode = document.creatTextNode("string")o Creates a new text node with the node value of string
o node.appendChild(newNode)o Adds newNode as a new child node to node, following any
existing children of node
o newNode = 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
![Page 20: UFCEWT-20-3 Advanced Topics in Web Development](https://reader035.vdocuments.mx/reader035/viewer/2022062315/56815e45550346895dccb980/html5/thumbnails/20.jpg)
methods for changing the structure of the document
o node.insertBefore(newNode, oldNode)o Inserts newNode as a new child node of node before oldNode
o node.removeChild(oldNode)o Removes the child oldNode from node
o node.replaceChild(newNode, oldNode)o Replaces the child node oldNode of node with newNode
![Page 21: UFCEWT-20-3 Advanced Topics in Web Development](https://reader035.vdocuments.mx/reader035/viewer/2022062315/56815e45550346895dccb980/html5/thumbnails/21.jpg)
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
![Page 22: UFCEWT-20-3 Advanced Topics in Web Development](https://reader035.vdocuments.mx/reader035/viewer/2022062315/56815e45550346895dccb980/html5/thumbnails/22.jpg)
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
Event Event Handlerclick onclickload onloadmouseover onmouseovermouseout onmouseoutsubmit onsubmitunload onunload
Example in use:<p><a href = "..." onmouseover = "alert('Message!')");">link</a></p>
![Page 23: UFCEWT-20-3 Advanced Topics in Web Development](https://reader035.vdocuments.mx/reader035/viewer/2022062315/56815e45550346895dccb980/html5/thumbnails/23.jpg)
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 property
new property value
![Page 24: UFCEWT-20-3 Advanced Topics in Web Development](https://reader035.vdocuments.mx/reader035/viewer/2022062315/56815e45550346895dccb980/html5/thumbnails/24.jpg)
example – with event handling and style manipulation
…<div id = "imageArea"> <img id = "myImg" src = "offer.jpg" alt = "offer image"
onclick = "document.getElementById('myImg').style.height='200px'; "/> <span id ="ImgTxt"></span></div></body></html>
onclick