JavaScript IV.pptx

JAVASCRIPT IV Web Development LEARNING OBJECTIVES What is Document Object Model?  What is the usage of DOM?  How does it relate to a web page?  How does usage of Document Objects help in web applications development? What is Browser Object Model ?  What are the available Browser object...

JAVASCRIPT IV Web Development LEARNING OBJECTIVES What is Document Object Model?  What is the usage of DOM?  How does it relate to a web page?  How does usage of Document Objects help in web applications development? What is Browser Object Model ?  What are the available Browser objects?  How does usage of Browser Objects help in web applications development? DOCUMENT OBJECT MODEL When a browser loads a web page, it also remembers the structure of the web page. The structure contains information about the HTML tags, their attributes, and the order in which they appear in the file. Such structure or model is called the Document Object Model (DOM). Different documents are different in their structures. The DOM lets JavaScript communicate with and change a web page. DOCUMENT OBJECT MODEL paren t child siblin siblin g g Each of the tags/elements and text are called nodes. DOCUMENT OBJECT MODEL Example: Basic structure of a HTML page html hea A web d body page title h1 p A header A web Some page A header Some text important text g important (text node) DOCUMENT OBJECT MODEL Example (branch) bod y View the p ul DOM Tree View the span unordered li li list (text node) (text node) Unordered list item 1 DOM Tree Item Item item 2 1 (text node) 2 (text node)  DOCUMENT OBJECT MODEL tabl Example1 Heading e Heading 2 Heading 3 thea tfoot d tbod tr y tr tr Footer Heading 1 Heading (text node) 3 1 3 2 td 1 Heading 2 2 Footer 3 DOM – SELECT AN ELEMENT/NODE var special =document.getElementById("special"); or using CSS selector var special=document.querySelector(“#special"); DOM – SELECT A GROUP OF ELEMENTS/NODES var links =document.getElementsByTagName("a"); a is the first link in the group var sLinks =document.getElementsByClassName(“sLinks"); slinks is the second link in the group or using CSS selector var allPhotos=document.querySelectorAll(".myPhotos"); allPhotos is the first photo in the group If use document.querySelector(“.myPhotos”) will only get the first element of myPhotos class. DYNAMICALLY CHANGE TEXT CONTENT OF ELEMENT How To Cook Rice document.getElementById("topic").innerText="How to make coffee"; DYNAMICALLY CHANGE HTML CONTENT OF ELEMENT Nasi Lemak Ice Cream document.querySelector(".show > ol").innerHTML= "coffeeMilo"; Content will be taken as html tags but not text only. DYNAMICALLY VALUE OF INPUT ELEMENT Change the value of a input element: First Number var value1=document.getElementById("first").value; DYNAMICALLY CHANGE ATTRIBUTE OF ELEMENT I am a link var link = document.querySelector("a"); var destSite= link.getAttribute("href"); // get the destination link.setAttribute("href", "http://www.dogs.com"); // get the destination var img = document.querySelector("img"); img.setAttribute("src", "corgi.png");  DYNAMICALLY CHANGE CLASS NAME If only one class divShow=document.querySelector(".show"); divShow.setAttribute("class","hide"); If has element belongs to a list of classes divShow=document.querySelector(".show"); divShow.classList.remove("show"); divShow.classList.add("hide"); Note: classList may not be supported by all browsers yet DYNAMICALLY CHANGE STYLE OF ELEMENTS Style of element can be dynamically changed, for example: document.getElementById(“heading”).style.color=“red” document.getElementById(“heading”).style.display=“none” Note: Setting with the inline styles SETTING CSS STYLE IN JAVASCRIPT Properties that consists of more than one words that join with hyphen : For example: font-size The hyphen is to be taken away and replace the first character of the next word with capital letter, such as: document.getElementById(“p1”).style.fontSize DYNAMICALLY ADDING NEW ELEMENTS New elements in a document can be dynamically added by adding child nodes to existing nodes. Example of methods to be use for nodes operations: var node=document.createElement(“h1"); node.innerText=“Hottest”; document.getElementById(“newsDiv").appendChild(node); show  appendChild() body Id=“newsDiv”di inpu v t node=createElement(“h1”) element node h1 p h1 element node Something Nothing node.innerText=“Hottest” actually Hottest CREATE TEXTNODE VS SETTING INNERTEXT var node=document.createElement("h1"); var textnode=document.createTextNode("Hott est"); node.appendChild(textnode); Use innerText is document.getElementById("newsDiv").app more convenient endChild(node); appendChild() body if the node only has text. di inpu v t createElement(“h1”) element node h1 p h1 element node text node Something Nothing createTextNode(“Hottest”) actually Hottest text node appendChild() DYNAMICALLY REMOVE ELEMENTS To remove a node, need to find its parent. There is new way but not supported by all browsers yet Refer to https://www.w3schools.com/js/js_htmldom_nodes.asp for more info EVENTS Something happen  Actions that users perform, e.g.  Moving the mouse  Click on a button  Web browser operation, e.g.  Loading a document EVENTS (CONT.) Mouse Event  click, dblclick, mousedown, mouseup, mouseover, mouseout, mousemove Form Event  submit, reset, change, focus, blur, select Keyboard Event  keypress, keydown, keyup Others  load, unload, error, abort View https://developer.mozilla.org/en-US/docs/Web/Events for reference of events WAYS TO HANDLE EVENTS Through inline handler  Mixed with html tag (as an attribute of html element)  Easier to add, harder to maintain  One handler for one event Register listener  Separated from html tag  Easier to maintain  Allow the queuing of multiple handlers for one event HANDLING AN EVENT – ADD INLINE HANDLER show HANDLING AN EVENT – REGISTER LISTENER show JAVASCRIPT TIMING EVENTS setTimeout() - allows to run a function once after the interval of time. setInterval() - allows to run a function regularly with the interval between the runs. clearTimeout() - stop the execution of the function specified in the setTimeout() method. clearInterval() - stop the execution of the function specified in the setInterval() method. EXAMPLE: USAGE OF SETINTERVAL1. Count Down in 10 secs 2. Every one second update the display 3. When reach 10 secs, clear the timer Show EXAMPLE: USAGE OF SETTIMEOUT 2 secs later after the page load, turn off the light Show  TO SET TIMER AFTER DOCUMENT LOADED window.onload=function() { timer=setTimeout(turnOff,2000); } Can also be written as document.addEventListener("DOMContentLoaded",docIsReady); function docIsReady(){ timer=setTimeout(turnOff,2000); } Or set the timer at the end of the document timer=setTimeout(turnOff,2000); BROWSER OBJECTS Objects of browser, such as window, document, navigator, screen, history, location There is no official standard across all browsers Browser objects allow JavaScript to interface and interact with the browser itself BROWSER OBJECT MODEL (AN EXAMPLE) Source from:JavaScript Third Edition by Don Gosselin, publisher :Thomson BOM OBJECT - WINDOW function goNew(url){ var win1=window.open(url, "win1", "toolbar=no,resizable=no, width=900px, height=600px") } Example BOM OBJECT - LOCATION function go() { var index=document.getElementById("searchTool").selectedIndex; location.href=document.getElementById("searchTool").options[in dex].value; } select your search engine go google go yahoo go bing Example BOM OBJECT - NAVIGATOR document.write("Browser: " + navigator.appName); document.write("Version: " + navigator.appVersion); document.write("Platform: " + navigator.platform); Check browser BROWSER COMPATIBILITY ISSUES Different versions of browsers may be different in their support for such as  font availability  tags ( e.g. only supported by IE but not Netscape)  CSS styles & properties (not supported or appear differently)  DOM objects, methods…. http://www.netmechanic.com/products/Browser-Tutorial.shtml#1.2 Try to use the common standard tags and features(w3c) 35 SUMMARY What is Document Object Model?  What is the usage of DOM?  How does it relate to a web page?  How does usage of Document Objects help in web applications development What is Browser Object Model ?  What are the available Browser objects?  How does usage of Browser Objects help in web applications development?