Week 2 summaries

[judithkoelewijn]

Chapter 15: Handling events

Some programs work with direct user input, for example mouse or keyboard actions. That kind of input isn't organized in a data structure , but piece by piece in realtime. And the programs needs to react when that happens.

Polling: constantly reading the state of a key to find out it's beeing pressed or not. Eventually move it into a queue, but not quite efficient.

A better way is for the system to actively notify our code when an event occurs. Browsers do this by allowing us to register functions as handlers for specific events.

A better mechanism is for the system to actively notify our code when an event occurs. Browsers do this by allowing us to register functions as handlers for specific events.

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

Event objects: Event handler functions are passed an argument: the event object. This object holds additional information about the event. For example, if we want to know which mouse button was pressed, we can look at the event object’s button property. The object’s type property always holds a string identifying the event (such as "click" or "mousedown").

• Key events: When a key on the keyboard is pressed, your browser fires a "keydown" event. When it is released, you get a "keyup" event.
• Pointer events: There are currently two widely used ways to point at things on a screen: mice (including devices that act like mice, such as touchpads and trackballs) and touchscreens. These produce different kinds of events. (mouse click, mouse motion, touch, scroll and focus)

Chapter 18: HTTP and forms

A browser will make a request when we enter a URL in its address bar. When the resulting HTML page references other files, such as images and JavaScript files, those are also retrieved. browsers will make several GET requests simultaneously, rather than waiting for the responses one at a time. This is becaues a webpage can contain 10 to 200 resources to load.

When a form is send and the button is pressed the content is packed into a HTTP request and the browser navigates to that specific result. When the

element’s method attribute is GET (or is omitted), the information in the form is added to the end of the action URL as a query string. GET requests should be used for requests that do not have side effects but simply ask for information.

Fetch: the interface through which browser JS can make HTTP request.

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. To get at the actual content of a response, you can use its text method.

fetch("example/data.txt")
.then(resp => resp.text())
.then(text => console.log(text));
// → This is the content of data.txt

There are several different ways to model communication between JavaScript and the browser. HTTP is just a vehicle for communication, and you will most likely write an abstraction layer that hides it entirely.

When the user has selected a file from their local file system in a file picker field, the FileReader interface can be used to access the content of this file from a JavaScript program.

The localStorage and sessionStorage objects can be used to save information in a way that survives page reloads. The first object saves the data forever (or until the user decides to clear it), and the second saves it until the browser is closed.