The 3 Pillars of Web Programming

The three essential pillars of Web Programming are:

1. Recognizing Events

• Actions that make JavaScript do work.

1. Manipulating the DOM

• The update Javascript was told to do.

1. Communicating with the Sever

• JSON

What is the DOM?

When HTML document gets loaded into the browser, the browser creates the DOM: Document Object Model. DOM allows JavaScript to interact with the HTML document. When we make changes to the DOM, the DOM will make changes to the document, or our webpage.

The DOM is a "middle layer" that presents the HTML, CSS and JavaScript loaded by the browser when we visit a page. We normally interact with it through the document object.

All items in the DOM are defined as nodes. The document itself is a document node, which is the root of all other nodes.

The DOM consists of a tree structure of nested nodes, which is often referred to as the DOM tree. The nodes in the DOM are referred to as parents, children, and siblings, depending on their relation to other nodes.

The HTML DOM is a standard for how to get, change, add, or delete HTML elements.
DOM programming is using JavaScript to:

Ask the DOM to find or select an HTML element or elements in the rendered page
Remove the selected element(s) and/or insert new element(s)
Adjust a property of the selected element(s)

There are 2 ways you can add elements to the page:

1. append() is the method we use to add elements to the body.

• With append(), you can append strings and multiple things.

1. appendChild() is another way.

• With appendChild(), you can only append one thing at a time.

How do you make an element?
document.createElement('') and pass the element you want to create.

You must append the elements!
body.append(div)

Select an Element With JavaScript
In the Console type:
document.querySelector('div');
It will return something like this:

When we run document.querySelector('div');, it returns the DOM node, which is also a JavaScript object. This means that it can now have methods called on it! This is called method chaining. Let's use method chaining to remove our node from the DOM.

We can store the node references in the variables like this:
const div = document.querySelector('div');

Delete an Element with JavaScript
If we type:
document.querySelector('div').remove();
We can delete the div.

An event in JavaScript is an action the user has taken. When the user hovers their mouse over an element, or clicks on an element, or presses a specific key on the keyboard, these are all types of events. In this particular case, we want our button to listen and be ready to perform an action when the user clicks on it. We can do this by adding an event listener to our button.

HTTP Overview
Communication between different clients and different servers is only possible because the way browsers and servers talk is controlled by a contract, or protocol. Your server will receive requests from the browser that follow HTTP. It then responds with an HTTP response that all browsers are able to parse.

HTTP is the "language" browsers speak. Every time you load a web page, you are making an HTTP request to the site's server, and the server sends back an HTTP response. When you use fetch in JavaScript, you are also making an HTTP request.

HTTP Verbs
When making a web request, in addition to the path, you also need to specify the action you would like the server to perform. We do this using HTTP Verbs (Links to an external site.), also referred to as request methods.

Using the Fetch API
The Fetch API provides a JavaScript interface for accessing and manipulating parts of the HTTP pipeline, such as requests and responses. It also provides a global fetch() method that provides an easy, logical way to fetch resources asynchronously across the network.

fetch('http://example.com/movies.json')
.then(response => response.json())
.then(data => console.log(data));

Here we are fetching a JSON file across the network and printing it to the console. The simplest use of fetch() takes one argument — the path to the resource you want to fetch — and does not directly return the JSON response body but instead returns a promise that resolves with a Response object.

The Response object does not directly contain the actual JSON response body but is a representation of the entire HTTP response. So, to extract the JSON body content from the Response object, we use the json() method, which returns a second promise that resolves with the result of parsing the response body text as JSON.