Browser Basics

DOM - Document Object Model

BOM - Browser Object Model

Terminology

Browser Layers
Browser Layers

Request/Response Cycle

Request/Response Cycle
Request/Response Cycle

window Object

How to load JS in our HTML pages

<!DOCTYPE html>
<html lang="en">
<head>
  <script type="text/javascript" src="entry.js"></script>
</head>
<!--------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------->


<!--------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------->


<body>
</body>
</html>

Remove Render-Blocking

<script type="text/javascript" src="entry.js"></script>
No Async or Defer
No Async or Defer
<script async type="text/javascript" src="entry.js"></script>
Async
Async
<script defer type="text/javascript" src="entry.js"></script>
Defer
Defer

Ways to prevent code from being executed until HTML page is loaded

  1. window.onload
window.onload = () => {
  console.log('this is printed only after all the HTML elements are displayed');
};
  1. DOMContentLoaded event listener
window.addEventListener('DOMContentLoaded', () => {
  console.log('this is printed only after all the HTML elements are displayed');
});
  1. Adding a script tag after the body of a page
<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
<!--------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------->


<!--------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------->


  <body>
  </body>
  <script async>
    console.log('this is printed only after all the HTML elements are displayed');
  </script>
</html>
  1. defer keyword in a script tag
<!DOCTYPE html>
<html lang="en">
  <head>
    <script defer type="text/javascript" src="entry.js"></script>
  </head>
<!--------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------->


<!--------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------->


  <body>
  </body>
</html>

Cookies

Learning Objectives

  1. Explain the difference between the BOM (browser object model) and the DOM(document object model).
  2. Given a diagram of all the different parts of the Browser identify each part. Use the Window API to change the innerHeight of a user’s window.
  3. Identify the context of an anonymous functions running in the Browser (the window).
  4. Given a JS file and an HTML file, use a script tag to import the JS file and execute the code therein when all the elements on the page load (using DOMContentLoaded)
  5. Given a JS file and an HTML file, use a script tag to import the JS file and execute the code therein when the page loads
  6. Identify three ways to prevent JS code from executing until an entire HTML page is loaded
  7. Label a diagram on the Request/Response cycle.
  8. Explain the Browser’s main role in the request/response cycle. (1.Parsing HTML,CSS, JS 2. Rendering that information to the user by constructing a DOM tree and rendering it)
  9. Given several detractors - identify which real-world situations could be implemented with the Web Storage API (shopping cart, forms saving inputs etc.)
  10. Given a website to visit that depends on cookies (like Amazon), students should be able to go to that site add something to their cart and then delete that cookie using the Chrome Developer tools in order to empty their cart.