Polling is an approach where the computer needs to look at the queue very often to react to input. Because of this, software can feel unresponsive. Handlers are a better way for specific events. For example:

<p>Click this document to activate the handler.</p>
<script>
  window.addEventListener("click", () => {
    console.log("You knocked?");
  });
</script>

There is also a way to remove a eventlistener. For instance when the user pressed the button once:

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

The eventlistener gives automaticly the event. That way, you can look up which button has been pressed:

<button>Click me any way you want</button>
<script>
  let button = document.querySelector("button");
  button.addEventListener("mousedown", event => {
    if (event.button == 0) {
      console.log("Left button");
    } else if (event.button == 1) {
      console.log("Middle button");
    } else if (event.button == 2) {
      console.log("Right button");
    }
  });
</script>

Events propagate outwards. Which means that they start at the specific eventhandler. So if you have a button inside a paragraph. And both the paragraph and button have an eventlistener. The buttoneventlistener will be called first when you press the button. To completely stop the events outside the button. You can call the stopPropagation method in the event:

<p>A paragraph with a <button>button</button>.</p>
<script>
  let para = document.querySelector("p");
  let button = document.querySelector("button");
  para.addEventListener("mousedown", () => {
    console.log("Handler for paragraph.");
  });
  button.addEventListener("mousedown", event => {
    console.log("Handler for button.");
    if (event.button == 2) event.stopPropagation();
  });
</script>

With the target property, you can specify the type of event. That way you can have one listner for an array of buttons. And use the target property in an if else statement to specify which button does what:

<button>A</button>
<button>B</button>
<button>C</button>
<script>
  document.body.addEventListener("click", event => {
    if (event.target.nodeName == "BUTTON") {
      console.log("Clicked", event.target.textContent);
    }
  });
</script>

The browser has a lot of basic default actions (arrow down, click link, right-click etc). These default actions will be loaded first and after that the events. If you want to load your events first, you can use the preventDefault method on the event object:

<a href="https://developer.mozilla.org/">MDN</a>
<script>
  let link = document.querySelector("a");
  link.addEventListener("click", event => {
    console.log("Nope.");
    event.preventDefault();
  });
</script>

But only use this when you have a really good reason to.

whith the keydown and keyup event, you kan edit the behavior what happens when you press a key. You can also use shitKey, cntrlKey, altKey and metaKey to make easier keycombinations.

<p>This page turns violet when you hold the V key.</p>
<script>
  window.addEventListener("keydown", event => { //activates when pressed AND held down
    if (event.key == "v") {
      document.body.style.background = "violet";
    }
    else if (event.key == " " && event.ctrlKey) { //when both cntrl and a different key are pressed
     console.log("Continuing!");
  });
  window.addEventListener("keyup", event => {
    if (event.key == "v") {
      document.body.style.background = "";
    }
  });
</script>

Mouse clicks

• mousedown (press and hold the mousebutton)
• mouseup (release mousebutton)
• click (press and release mousebutton)
• dblclick (double click the mousebutton)
• clientX / clientY (coordinates in pixels of the top-left corner of the window)
• pageX / pageY (coordinates in pixels of the top-left corner of the whole document may be different when scrolled)

Mouse motion

• mousedown / mouseup etc (does something when mouse moved in direction)

Touch events For touch events you can use the mousedown, mouseup and click events. But there touch events. Like

• touchstart (when finger starts touching the screen)
• touchmove (when finger is moved)
• touchend (when finger is released)

Because there can be multiple fingers on screen, the event objects have a touches property. That property holds an array-like object of point which each has its own clientX, clientY, pageX and pageY properties. event.touches[0]

It is smart to use the preventDefault property in touch events.

Scroll events with scroll you can look at where the current user is on the page This code gives a progressbar on how far the user is on the page.

<style>
  #progress {
    border-bottom: 2px solid blue;
    width: 0;
    position: fixed;
    top: 0; left: 0;
  }
</style>
<div id="progress"></div>
<script>
  // Create some content
  document.body.appendChild(document.createTextNode(
    "supercalifragilisticexpialidocious ".repeat(1000)));

  let bar = document.querySelector("#progress");
  window.addEventListener("scroll", () => {
    let max = document.body.scrollHeight - innerHeight;
    bar.style.width = `${(pageYOffset / max) * 100}%`;
  });
</script>

Focus event Focus and blur events are used when the user moves form or to the browser tab or window in which the document is shown. Focus events do not propagate like the other events. It parrents don't know that one does become focus or blur.

Load event When a page finishes loading, the load event fires on the window and the document body objects. When a user navigates away of closed a page, a beforeunload event fires. If you prevent default behavior on this event and set the returnValue to a string, the browser will show the user a dialog asking if they really want to leave the page.

Beside the setTimeout(), you can also use the setInterval and clearInterval to set timers:

let bombTimer = setTimeout(() => {
  console.log("BOOM!");
}, 500);

if (Math.random() < 0.5) { // 50% chance
  console.log("Defused.");
  clearTimeout(bombTimer);
}

let ticks = 0;
let clock = setInterval(() => {
  console.log("tick", ticks++);
  if (ticks == 10) {
    clearInterval(clock);
    console.log("stop.");
  }
}, 200);

Requests can have different kinds of methods: GET = get the specified resource DELETE = delete a resource PUT = create or replace a resource POST = Send information to the resource

The server is not obliged to carry out every request it gets. When you remove the main page, the server will probably refuse.

HTTP/1.1 = indicates the version of the HTTP protocol it is using.

After that there will be a few headers:

HTTP/1.1 200 OK

Content-Length: 65585 //65,585 bytes Content-Type: text/html Last-Modified: Thu, 04 Jan 2018 14:05:30 GMT

URL's have endoced URI componentents. A question mark ? will be printed as %3F. To encode or decode URI's, you can use the decodeURIComponent and encodeURIComponent methods:

console.log(encodeURIComponent("Yes?"));
// → Yes%3F
console.log(decodeURIComponent("Yes%3F"));
// → Yes?

The interface through which browser JavaScript can make HTTP requests is called fetch.

fetch("example/data.txt").then(response => {
  console.log(response.status);
  // → 200
  console.log(response.headers.get("Content-Type"));
  // → text/plain
});

Calling fetch returns a promise that resolves to a Response object holding information about the server’s response, such as its status code and its headers.

You can use range in the header to specify which part you want out of a response:

fetch("example/data.txt", {headers: {Range: "bytes=8-19"}})
  .then(resp => resp.text())
  .then(console.log);
// → the content

Browsers protoect us by desallowing scripts to make HTTP requests to other domains like your bank.

HTTPS uses cryptographic certificates and encryption to prevent eavesdropping and tampering. The browsers should recognize these certificates and this prevents other people from impersonating the website.

you can access forms like arrays with the [ ]

<form action="example/submit.html">
  Name: <input type="text" name="name"><br>
  Password: <input type="password" name="password"><br>
  <button type="submit">Log in</button>
</form>
<script>
  let form = document.querySelector("form");
  console.log(form.elements[1].type);
  // → password
  console.log(form.elements.password.type);
  // → password
  console.log(form.elements.name.form == form);
  // → true
</script>

You can change the tabindex with the following code:

<input type="text" tabindex=1> <a href=".">(help)</a>
<button onclick="console.log('ok')" tabindex=2>OK</button>

You can overwrite words with selectionStart and selectionEnd:

<textarea></textarea>
<script>
  let textarea = document.querySelector("textarea");
  textarea.addEventListener("keydown", event => {
    // The key code for F2 happens to be 113
    if (event.keyCode == 113) {
      replaceSelection(textarea, "Khasekhemwy");
      event.preventDefault();
    }
  });
  function replaceSelection(field, word) {
    let from = field.selectionStart, to = field.selectionEnd;
    field.value = field.value.slice(0, from) + word +
                  field.value.slice(to);
    // Put the cursor after the word
    field.selectionStart = from + word.length;
    field.selectionEnd = from + word.length;
  }
</script>

With the input tag you can use focus and blue methods to tell the browser when the input can recieve inputs:

<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
</script>

But in this case the code you see above is already being handled by autofocus by HTML

For the source: https://eloquentjavascript.net/18_http.html#forms