Intro to the Browser & the DOM

Nick Whyte | @nickw444 | @nickw444

5 Minute HTML Refresher

Simple HTML5 Document


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title Goes Here</title>
</head>
<body>
  Hello World
</body>
</html>

Adding CSS

Inline Styles


<head>
  <meta charset="UTF-8">
  <title>Title Goes Here</title>
  <style>
  /* your CSS here */
  </style>
</head>

CSS File


<head>
  <meta charset="UTF-8">
  <title>Title Goes Here</title>
  <link rel="stylesheet" href="src/index.css">
</head>

Adding Scripts

Inline Scripts


<head>
  <meta charset="UTF-8">
  <title>Title Goes Here</title>
  <script>
  /* your code here */
  </script>
</head>

Script Files


<head>
  <meta charset="UTF-8">
  <title>Title Goes Here</title>
  <script src="src/index.js"></script>
</head>

Basic HTML Elements

div: A container element that can contain zero or more child elements. A block level element.
p: A paragraph element
span: generic inline container for phrasing content. Similar to div, except span is an inline element
h1, h2, h3, h4, h5, h6: A heading element
...and many more!

Let's start building our app!

Devtools

(Google Chrome)

Programming For the Browser

### What is the DOM
          - An API for HTML (or XML) documents.
          - Represents the page so that Javascript can change the structure, style and content of it.
          - The DOM represents the document as nodes and objects in a tree.

![](images/dom-structure.gif)

<div class="footnotes">
            <a class="footnote" target="_blank"
               href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction">
              https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction
            </a>
          </div>

Note:
          Let's start with the DOM.

Can I get a show of hands, who has heard of the DOM before?

So, for those of you who don't know, the DOM is an API for HTML documents that the browser exposes to you.

The DOM represents the page and allows our Javascript code to traverse it, change it's structure, and
          modify the style and content of elements within it.

The DOM represents the document as nodes and objects in a tree-like structure.

### Query the DOM

```html
          <button id="my-button">Hello</button>
          ```

##### Using `getElementById`
          ```js
          const button = document.getElementById('my-button')
          ```

##### Using `querySelector`:

```js
          const button = document.querySelector('#my-button')
          ```
          Both of these find the element inside the DOM tree with `id="my-button"` and returns it.

Note:
          It's often useful to be able to locate an element in the DOM so that we can manipulate it in some way.

We can do this using the query API.

Say we have a button on our HTML document with the `id`, `my-button`. We can use `document.getElementById`
          with the `id` of the element to obtain a reference to the node.

Additionally, we can also do something similar using `document.querySelector`, uses a CSS selector to
          find the node within the document.

As you can imagine, both the examples here have the same result.

`window.alert`


window.alert('Hello World!')

`window.location`

`console.log()`


console.log('Hello World!')

n.b. You'll need to open your console to see the output of this demo!

`console.?`

The console can do a lot more than just plain old strings:


          console.clear()
          console.log()
          console.error()
          console.warn()
          console.table()
          console.group()

Console Introspection

You can also log JS objects to the console and introspect them:

Events & Interactions

`onClick` event (html)


          <button onClick="window.alert('Hello COMP2041!')">
            Say Hello
          </button>

Binding an event

target.addEventListener(type, listener[, options]);

type: 'click', 'focus', 'blur', 'keydown', etc
listener: The function to execute when the event occurs.

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

`onClick` event (html/js)


          <button id="hello-button">Say Hello</button>


          const helloButton = document.getElementById('hello-button');
          helloButton.addEventListener('click', () => {
            window.alert('Hello COMP2041 from JS!');
          });

`mouseMove` event


          window.addEventListener('mousemove', ({x, y}) => {
            console.log({x, y});
          });

Timers

`setTimeout` / `clearTimeout`


          document.setTimeout(() => {
            window.alert('Done!')
          }, 1000);

https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout

`setInterval` / `clearInterval`


          let timer = undefined;
          let counter = document.getElementById('counter');

          function tick() {
            counter.innerText = parseInt(counter.innerText) + 1;
          }

          function onStartClick() {
            timer = window.setInterval(tick, 1000);
          }
          function onStopClick() {
            window.clearInterval(timer);
          }

Counter: 0

Clock Drift Demo

Actual Time

0.000

Interval Time

0.000

https://johnresig.com/blog/how-javascript-timers-work/ https://www.sitepoint.com/creating-accurate-timers-in-javascript/ https://www.reddit.com/r/learnjavascript/comments/3aqtzf/issue_with_setinterval_function_losing_accuracy/

Here is a demo that shows how timers can be affected by other computational work on the main thread.

The left timer shows the actual time elapsed. We'll get to how that is computed on the next slide.

On the right, we have the time elapsed which is ticked forward using a timer.

When we run a slow blocking task on the main thread, we notice that the UI locks up.

This is because the Javascript runtime is single threaded and no further UI updates can occur whilst
            the slow task is occurring. Additionally all invocations of the timer's callback were skipped because
            the main thread was busy doing other computational work.

A slide later in this deck explains Javascript's run to completion model which is why the UI cannot be
            updated.

The important thing to note here is once the UI becomes responsive again, we notice that the counter on
            the right hasn't incremented.

It's not just computational work that'll skew the clock though, watch this, I'll change tab and we can see
            that the timer becomes suspended and only resumes when we return.

Lets fix the clock drift in our application

Behind the Scenes

(How JS gets executed in your browser)

### IIFE's

- Immediately-invoked function expression
          - Produces a lexical scope using JavaScript's function scoping
          - Stops global `window` pollution, since all variables sit within the function scope.

```js
          (function() {
            let foo = 'whatever'
            // More code here
          })();
          // foo is unreachable here
          ```

<div class="footnotes">
            <a class="footnote" target="_blank"
               href="https://en.wikipedia.org/wiki/Immediately-invoked_function_expression">
              https://en.wikipedia.org/wiki/Immediately-invoked_function_expression
            </a>
          </div>

Note:
          An IIFE essentially is an anonymous function which we invoke immediately.

It takes advantage of the lexical scope produced by the function.

All variables declared within the function cannot be accessed outside of the function, which means it stops
          polluting the global namespace.

### Execution Order
          This is an easy problem to solve in a few different ways;

- Move the script below the HTML elements it targets (or to the bottom of the source)
          - Use an event listener in JS to listen to when the document is ready (`DOMContentLoaded`):

```js
          function init() {
            console.log('Document loaded!');
          }
          document.addEventListener('DOMContentLoaded', init);
          ```

<div class="footnotes">
            <a class="footnote" target="_blank"
               href="https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded">
              https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
            </a>
          </div>

Note:

We can solve the execution order problem by either

- Moving the script tag down below the HTML elements it targets, or just to the bottom of the source
          - Or alternatively, use an event listener in JS to listen to when the document is ready.
          ```

### Run to Completion

- Each message is processed completely before any other message is processed.
          - Your functions cannot be preempted by another
          - Your function will run entirely before any other code runs

<div class="footnotes">
            <a class="footnote" target="_blank"
               href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop#Run-to-completion">
              https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop#Run-to-completion
            </a>
          </div>

Note:
          Another thing that is handy to know about is the run to completion model that the Javascript runtime uses.

I touched on this earlier in the clock drift demo. This is the reason timers and other callbacks may be
          delayed.

Each unit of work (or message) is processed completely before any other message is processed.

This means that your function cannot be preempted by another. For example, if a timer is due, it cannot
          run until the current task is completely finished.

This means your function will run entirely before any other code runs, which fortunately for us,
          eliminates a whole class of problems to do with concurrency.

Example


          const s = new Date().getSeconds();

          setTimeout(function () {
            // prints out "2", meaning that the callback is not called immediately after 500 milliseconds.
            console.log("Ran after " + (new Date().getSeconds() - s) + " seconds");
          }, 500);

          while (true) {
            if (new Date().getSeconds() - s >= 2) {
              console.log("Good, looped for 2 seconds");
              break;
            }
          }

https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop#Run-to-completion

Querying the DOM

### Finding Elements

<ul style="font-size: 0.7em; margin-bottom: 1em;">
            <li>`getElementById`: Finds an element by it's `id` attribute. Returns an `Element` object.</li>
            <li>`getElementsByClassName`: Finds elements with a matching `class` attribute. Returns an array-like object.</li>
            <li>`getElementsByTagName`: Finds elements with a matching tag name.</li>
            <li>`querySelector`: Magical jQuery-like DOM query method. Returns the first element matching the CSS selector given.</li>
          </ul>

##### Using `querySelector`

```js
          // id="my-button"
          const button = document.querySelector('#my-button')
          // class="my-button"
          const button = document.querySelector('.my-button')
          // class="my-button" nested inside <body>
          const button = document.querySelector('body > .my-button')
          ```

Note:
          We touched on this in an earlier section with `querySelector` and `getElementByID`, however I think it's
          important to identify a few of the different ways we can query the DOM.

- `getElementById` finds an element by it's `id` attribute
          - `getElementsByClassName` finds a set of elements with a matching `class` attribute.
          - `getElementsByTagName` finds elements with a matching tag name.
          - `querySelector` is the magical jquery-like DOM query method. It returns the first element matching the
          CSS selector given.

There's a quick snippet on how we can use querySelector to find elements.

Querying Element Content

Sometimes you may want to read the content of an element

Hello World!


          <p id="text">Hello World!</p>


          const text = document.getElementById('text');
          console.log(text.innerText);

Querying Element Bounds

Hello World!


          <p id="text">Hello World!</p>


          const text = document.getElementById('text');
          console.log(text.getBoundingClientRect());

Manipulating the DOM

Adding a CSS class

This demo adds a class to a span node.

Hello World!


          .red { color: red; }


          <p>Hello <span id="worldSpan">World!</span></p>


          const worldSpan = document.getElementById('worldSpan');
          span.classList.add('red');

Modifying Inline Styles

Hello World!


          <p>Hello <span id="worldSpan">World!</span></p>


          const worldSpan = document.getElementById('worldSpan');
          span.style.fontSize = '2em';

Modifying innertext

It's also easy to update the content of a HTML Element

Hello World!


          <p id="text">Hello World!</p>


          const text = document.getElementById('text');
          text.innerText = 'Goodbye World!';

Now that we know how to manipulate the DOM, lets render the stopwatch on the page.

60FPS

#### `window.requestAnimationFrame()`

- Tells the browser that you wish to perform an animation and to call the given function before the next repaint.
          - Call this method whenever you're ready to update your animation onscreen.
          - The number of callbacks is usually 60 times per second, but should match the display refresh rate.

<div class="footnotes">
            <a class="footnote" target="_blank"
               href="https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame">
              https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
            </a>
          </div>

Note:
          An API exists called `requestAnimationFrame` which helps you batch UI updates into frames.

Using this API tells the browser you wish to perform an animation or UI update and to call the function
          before the next repaint.

The number of batches that occur are usually 60 times per second, but as per the W3C spec, should match the
          display refresh rate.

`requestAnimationFrame` demo


          const box = document.getElementById('box');
          let offset = 0;

          function renderFrame() {
            requestAnimationFrame(() => {
              offset += 10;
              box.style.transform = `translateX(${offset}px)`;

              // Enqueue a subsequent render cycle for the next frame.
              renderFrame();
            });
          }

          renderFrame();

Using `requestAnimationFrame` lets improve our application to have 60fps updates

Thanks

Nick Whyte | @nickw444 | @nickw444

p.s. we are looking for summer interns and 2019 graduates!
Please email [email protected] if you are interested