Javascript 02 bom and dom

JavaScript BOM & DOM Content BOM & DOM? Object Hierarchy HTML DOM Cookies & Web Storage Page Actions BOM & DOM?  JavaScript is an object-based language that manipulates an object by changing one or more of its properties or by applying a method that affects the object’s behavior within the web page or web browser  There are four kinds of JavaScript objects: – built-in objects that are intrinsic to the JavaScript language – browser objects that are part of the browser – document objects that are part of the web document – customized objects that are created by the programmer for use in his or her application  Browser objects and document objects are organized in hierarchical structures respectively called the browser object model (BOM) and the document object model (DOM) Object hierarchy  Document: contains objects found within the web page document  History: contains the browser’s history list  Screen: contains information about the computer screen  Navigator: contains information about the browser application  Location: contains information about the current URL HTML DOM 3.1 HTML DOM? 3.2 HTML DOM - Document Object 3.3 HTML DOM - Elements 3.4 HTML DOM - Changing HTML 3.5 HTML DOM - Changing CSS 3.6 HTML DOM Events 3.1 HTML DOM?  When a web page is loaded, the browser creates a Document Object Model (DOM) of the page  The HTML DOM model is constructed as a tree of objects  With the object model, JavaScript gets all the power to: – change the content, attributes or styles (CSS) of HTML elements – react to HTML DOM events – add and delete HTML elements  The HTML DOM can be accessed with JavaScript  In the DOM, all HTML elements are defined as objects  The programming interface is the properties and methods of each object  A property is a value that you can get or set (like changing the content of an HTML element)  A method is an action you can (like add or deleting an HTML element)  The getElementById Method – The most common way to access an HTML element is to use the id of the element – In the example, the getElementById method used id="demo" to find the element  The innerHTML Property – The easiest way to get the content of an element is by using the innerHTML property – The innerHTML property is useful for getting or replacing the content of HTML elements 4.1 Cookies  What are Cookies? – Cookies are data, stored in small text files, on your computer – When a web server has sent a web page to a browser, the connection is shut down, and the server forgets everything about the user – Cookies were invented to solve the problem "how to remember information about the user": • When a user visits a web page, his/her name can be stored in a cookie • Next time the user visits the page, the cookie "remembers" his/her name  JavaScript can create, read, and delete cookies with the document.cookie property  Create a Cookie with JavaScript  Read a Cookie with JavaScript document.cookie will return all cookies in one string much like: cookie1=value; cookie2=value; cookie3=value;  Change a Cookie with JavaScript The same way as you create the cookie  Delete a Cookie with JavaScript Set the expires parameter to a past date  Example 4.2 localStorage Object  The localStorage object stores the data with no expiration date The data will not be deleted when the browser is closed 4.3 sessionStorage Object  The sessionStorage object is similar to the localStorage object, but it stores the data for only one session The data is deleted when the user closes the specific browser tab 4.4 Cookies vs Local Storage vs Session Storage Cookies Local Storage Session Storage Capacity 4KB 5M / 10M 5M Browsers HTML4 / HTML5 HTML5 HTML5 Accessible from Any windows Any windows Same tab Expires Manually set Never On tab close Browser & Server Browser only Browser only Yes No No Storage Location Sent with requests Page Actions 5.1 Refreshing Page 5.2 Redirecting Page 5.3 Opening in new Tab 5.1 Refreshing Page  Use location.reload() method to refresh the page 5.2 Redirecting Page  Use location.href property to redirect to another page 5.3 Opening in new Tab  window.open Cannot Reliably Open Popups in a New Tab in All Browsers Different browsers implement the behavior of window.open in different ways THE END ... current URL HTML DOM 3.1 HTML DOM? 3.2 HTML DOM - Document Object 3.3 HTML DOM - Elements 3.4 HTML DOM - Changing HTML 3.5 HTML DOM - Changing CSS 3.6 HTML DOM Events 3.1 HTML DOM?  When a web...Content BOM & DOM? Object Hierarchy HTML DOM Cookies & Web Storage Page Actions BOM & DOM?  JavaScript is an object-based language that manipulates... DOM events – add and delete HTML elements  The HTML DOM can be accessed with JavaScript  In the DOM, all HTML elements are defined as objects  The programming interface is the properties and