UFCEWT-20-3 Advanced Topics in Web Development Lecture 4 : JavaScript, Browsers & the HTML DOM-API.
-
Upload
damon-wade -
Category
Documents
-
view
224 -
download
2
Transcript of UFCEWT-20-3 Advanced Topics in Web Development Lecture 4 : JavaScript, Browsers & the HTML DOM-API.
![Page 1: UFCEWT-20-3 Advanced Topics in Web Development Lecture 4 : JavaScript, Browsers & the HTML DOM-API.](https://reader030.fdocuments.in/reader030/viewer/2022032708/56649e725503460f94b70c25/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 Lecture 4 : JavaScript, Browsers & the HTML DOM-API.](https://reader030.fdocuments.in/reader030/viewer/2022032708/56649e725503460f94b70c25/html5/thumbnails/2.jpg)
browser objects and their hierarchy model
![Page 3: UFCEWT-20-3 Advanced Topics in Web Development Lecture 4 : JavaScript, Browsers & the HTML DOM-API.](https://reader030.fdocuments.in/reader030/viewer/2022032708/56649e725503460f94b70c25/html5/thumbnails/3.jpg)
the dom object/event model
![Page 4: UFCEWT-20-3 Advanced Topics in Web Development Lecture 4 : JavaScript, Browsers & the HTML DOM-API.](https://reader030.fdocuments.in/reader030/viewer/2022032708/56649e725503460f94b70c25/html5/thumbnails/4.jpg)
the html dom hierarchy visualized
![Page 5: UFCEWT-20-3 Advanced Topics in Web Development Lecture 4 : JavaScript, Browsers & the HTML DOM-API.](https://reader030.fdocuments.in/reader030/viewer/2022032708/56649e725503460f94b70c25/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 Lecture 4 : JavaScript, Browsers & the HTML DOM-API.](https://reader030.fdocuments.in/reader030/viewer/2022032708/56649e725503460f94b70c25/html5/thumbnails/6.jpg)
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)
![Page 7: UFCEWT-20-3 Advanced Topics in Web Development Lecture 4 : JavaScript, Browsers & the HTML DOM-API.](https://reader030.fdocuments.in/reader030/viewer/2022032708/56649e725503460f94b70c25/html5/thumbnails/7.jpg)
example: opening a window
o 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 Lecture 4 : JavaScript, Browsers & the HTML DOM-API.](https://reader030.fdocuments.in/reader030/viewer/2022032708/56649e725503460f94b70c25/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 Lecture 4 : JavaScript, Browsers & the HTML DOM-API.](https://reader030.fdocuments.in/reader030/viewer/2022032708/56649e725503460f94b70c25/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 Lecture 4 : JavaScript, Browsers & the HTML DOM-API.](https://reader030.fdocuments.in/reader030/viewer/2022032708/56649e725503460f94b70c25/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 Lecture 4 : JavaScript, Browsers & the HTML DOM-API.](https://reader030.fdocuments.in/reader030/viewer/2022032708/56649e725503460f94b70c25/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 Lecture 4 : JavaScript, Browsers & the HTML DOM-API.](https://reader030.fdocuments.in/reader030/viewer/2022032708/56649e725503460f94b70c25/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 Lecture 4 : JavaScript, Browsers & the HTML DOM-API.](https://reader030.fdocuments.in/reader030/viewer/2022032708/56649e725503460f94b70c25/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 Lecture 4 : JavaScript, Browsers & the HTML DOM-API.](https://reader030.fdocuments.in/reader030/viewer/2022032708/56649e725503460f94b70c25/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 Lecture 4 : JavaScript, Browsers & the HTML DOM-API.](https://reader030.fdocuments.in/reader030/viewer/2022032708/56649e725503460f94b70c25/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 Lecture 4 : JavaScript, Browsers & the HTML DOM-API.](https://reader030.fdocuments.in/reader030/viewer/2022032708/56649e725503460f94b70c25/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.parentNode
o Each node has zero or more children nodeso To get the # of child nodes
o x.childNodes.length // childNodes is an arrayo To get the ith child
o x.childNodes[i-1] // First child has index 0o To get the first child, you can also write
o x.firstChild or x.childNodes[0]o To get the last child
o x.lastChild
![Page 17: UFCEWT-20-3 Advanced Topics in Web Development Lecture 4 : JavaScript, Browsers & the HTML DOM-API.](https://reader030.fdocuments.in/reader030/viewer/2022032708/56649e725503460f94b70c25/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 Lecture 4 : JavaScript, Browsers & the HTML DOM-API.](https://reader030.fdocuments.in/reader030/viewer/2022032708/56649e725503460f94b70c25/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 Lecture 4 : JavaScript, Browsers & the HTML DOM-API.](https://reader030.fdocuments.in/reader030/viewer/2022032708/56649e725503460f94b70c25/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 Lecture 4 : JavaScript, Browsers & the HTML DOM-API.](https://reader030.fdocuments.in/reader030/viewer/2022032708/56649e725503460f94b70c25/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 Lecture 4 : JavaScript, Browsers & the HTML DOM-API.](https://reader030.fdocuments.in/reader030/viewer/2022032708/56649e725503460f94b70c25/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 Lecture 4 : JavaScript, Browsers & the HTML DOM-API.](https://reader030.fdocuments.in/reader030/viewer/2022032708/56649e725503460f94b70c25/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 Handler
click onclick
load onload
mouseover onmouseover
mouseout onmouseout
submit onsubmit
unload onunload
Example in use:<p><a href = "..." onmouseover = "alert('Message!')");">link</a></p>
![Page 23: UFCEWT-20-3 Advanced Topics in Web Development Lecture 4 : JavaScript, Browsers & the HTML DOM-API.](https://reader030.fdocuments.in/reader030/viewer/2022032708/56649e725503460f94b70c25/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 Lecture 4 : JavaScript, Browsers & the HTML DOM-API.](https://reader030.fdocuments.in/reader030/viewer/2022032708/56649e725503460f94b70c25/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