JavaScript BOM and DOM PDF

**The Browser Object Model** **Built-in Object - The Browser Object Model (BOM)** \- The Browser Object Model (BOM) allows JavaScript to \"talk to\" the browser. \- The BOM includes objects such as Window, Navigator, Location, History, and Screen. **The Window Object** Concept of the Window O...

**The Browser Object Model** **Built-in Object - The Browser Object Model (BOM)** \- The Browser Object Model (BOM) allows JavaScript to \"talk to\" the browser. \- The BOM includes objects such as Window, Navigator, Location, History, and Screen. **The Window Object** Concept of the Window Object \- The window object is supported by all browsers. \- It represents the browser\'s window. \- Global variables are properties of the window object. \- Global functions are methods of the window object. \- Even the document object (of the HTML DOM) is a property of the window object. A white background with black and red text Description automatically generated ** Window Size** \- Two properties can be used to determine the size of the browser window. \- Both properties return the sizes in pixels. - window.innerHeight : the inner height of the browser window (in pixels) - window.innerWidth : the inner width of the browser window (in pixels)  Other Window Methods -Some other methods A screenshot of a computer Description automatically generated Examples of the Window Object  ** Concept of the Window Screen** \- The window.screen object contains information about the user\'s screen. \- The window.screen object can be written without the window prefix. A screenshot of a computer Description automatically generated Examples of the Window Screen  ** Concept of the Window Location** \- The window.location object can be written without the window prefix. A screenshot of a computer Description automatically generated Examples of the Window Location -The window.location.href property returns the URL of the current page.  **The Window History** ** Concept of Window History** \- The window.history object contains the browser's history. \- The window.history object can be written without the window prefix. \- To protect the privacy of the users, there are limitations to how JavaScript can access this object. A screenshot of a computer Description automatically generated Examples of Window History - Create a back button on a page:  **The Window Popup Boxes** ** Alert Box** \- JavaScript has three kinds of popup boxes: Alert box, Confirm box, and Prompt box. \- An alert box is often used if you want to make sure information comes through to the user. \- When an alert box pops up, the user will have to click \"OK\" to proceed. A white background with black text Description automatically generated ** Confirm Box** \- A confirm box is often used if you want the user to verify or accept something. \- When a confirm box pops up, the user will have to click either \"OK\" or \"Cancel\" to proceed. \- The window.confirm() method can be written without the window prefix.  Confirm Box -If the user clicks \"OK\", the box returns true. If the user clicks \"Cancel\", the box returns false. A screenshot of a computer program Description automatically generated ** Prompt Box** \- A prompt box is often used if you want the user to input a value before entering a page. \- If the user clicks \"OK\" the box returns the input value. \- If the user clicks \"Cancel\" the box returns null.  **The Document Object Model** **Understanding of HTML DOM** ** Built-in Object - The Document Object Model (DOM)** \- We can also add events to these elements to make our page more dynamic. A diagram of a computer system Description automatically generated ** Concept of the HTML DOM** \- JavaScript can change all the HTML elements in the page \- JavaScript can change all the HTML attributes in the page \- JavaScript can change all the CSS styles in the page \- JavaScript can remove existing HTML elements and attributes \- JavaScript can create new HTML events on the page **DOM Document** ** Finding HTML Elements** \- The document object represents your web page. \- If you want to access any element in an HTML page, you always start with accessing the document object. \- Below are some examples of how you can use the document object to access and manipulate HTML.  ** Changing HTML Content** \- The HTML DOM allows JavaScript to change the content of HTML elements. \- The easiest way to modify the content of an HTML element is by using the innerHTML property. \- To change the content of an HTML element, use this syntax: A close-up of a website Description automatically generated ** Changing HTML Content** -HTML DOM properties are values (of HTML Elements) that you can set or change. -HTML DOM methods are actions you can perform (on HTML Elements).  ** Changing HTML Style** -The HTML DOM allows JavaScript to change the style of HTML elements. -To change the style of an HTML element, use this syntax: A screenshot of a computer Description automatically generated ** Using Events** \- The HTML DOM allows you to execute code when an event occurs. \- Events are generated by the browser when \"things happen\" to HTML elements.  **Learning Summary** **1. The Browser Object Model** \- The window object is supported by all browsers. \- JavaScript has three kinds of popup boxes: - Alert box - Confirm box - Prompt box. **2. The Document Object Model** \- The HTML DOM allows JavaScript to change the content of HTML elements. \- The HTML DOM allows JavaScript to change the style of HTML elements.