The web browser communicates with the server using the HTTP protocol. Contents/details of this request can be found within Chrome's DevTools under the Network tab.

The browser fetches the HTML document. This document details the structure and textual contents of the page from the server. This document is created by the server somehow (either statically or dynamically).

The browser does one thing-- fetch HTML data from the server. All application logic is held on the server. There are several ways to create web servers-- this course uses Express and Node.js.

Logic is handled in JavaScript. A JS file is contained within a script tag in the head of the html. Immediately after fetching the script tag, the browser begins executing the code. The last two lines define the browser's HTTP GET request to the server's file data.json.

xhttp.open('GET', '/data.json', true)`
xhttp.send()

Within the JS code, JSON-data containing the notes is downloaded, parsed and used to create a bullet list (from the note contents) that is then appended to the div with the id "notes".

The code within main.js is worth dissecting:

Within this code, onreadystatechange is an event handler for the xhttp object that doing the request. The code contained within this handler first ensures that the readyState equals 4 (depicts that the operation is complete) and the HTTP status code of the response is 200.

Invoking event handlers is fundamental to JavaScript. These functions are referred to as Callback functions. They are invoked by the runtime environment (browser) at the time at which the event occurs.

The functioning of the browser is based on depicting HTML elements as a tree. The DOM is an Application Programming Interface (API) that enables programmatic modification of element trees corresponding to web pages.

Within the callback function, a node is created to the variable ul. Child nodes (li) are then added to ul. Eventually, ul to connected to the HTML tree by appending to the div with id="notes".

The document is the topmost node of the DOM tree. By assigning the entire list to the var list, we can append a child element (newElement) to it: list.appendChild(newElement). These changes were not pushed to a server-- so on reload, our changes will disappear.

Cascading Style Sheets, or CSS, is a markup language used to determine the appearance of web pages. CSS elements can be identified using the class attribute. JS elements can be identified using the id attribute.

A page is loaded in the following way:

Once the submit button is pressed, an HTTP POST request to the server address new_note is called. The server responds with HTTP status code 302-- a URL redirect where the server asks the browser to do a new GET request to the address within the location portion of the response header.

Code on the server is responsible for the POST request. Data is sent as the body of the POST request.

app.post('/new_note', (req, res) => {
  notes.push({
    content: req.body.note,
    date: new Date(),
  })

  return res.redirect('/notes')
})

The server does not save new notes to a database so they will be lost when the server is restarted.

Asynchronous JavaScript and XML-- a term introduced in early 2005 to describe a revolutionary approach that enabled fetching of contents to web pages using JavaScript included within the HTML without needing to re-render the page. In the examples above, AJAX is used to fetch the notes data while submitting the form uses the traditional methods of submitting web forms.

Traditional Web Page-- All logic is on the server, browser renders HTML as instructed.

The notes page, used as an example, gives the responsibility of generating HTML code for notes to the browser.

Single-page applications are relatively new. They comprise of one HTML page fetched from the server. The contents of this HTML are manipulated with JavaScript that executes in the browser.

A single-page application version of the note page differs only slightly from the earlier notes page. Within this document, the form has no action or method attributes. Additionally, when we submit the form-- only one HTTP request is performed. The action does NOT reload the entire page!

What happens here is POST request contains the new note as JSON-data. The content-type is recognized as a JSON so the servers knows how to parse the data. The status code 201 is created.

Full stack -- frontend (browser/JS), backend (server), and the database. In this course, we will code the backend with JavaScript, using the Node.js runtime environment.

All forms are contained within a form element. This element contains two key attributes-- action and method.

• The action element defines the URL where the collected data should be sent
• The method element defines the HTTP method to send the data with (GET or POST) This form will contain every text field necessary.

For our purposes, we need the user's name, email, and message. This requires three text boxes.

<form action="/my-handling-form-page" method="post">
 <ul>
  <li>
    <label for="name">Name:</label>
    <input type="text" id="name" name="user_name">
  </li>
  <li>
    <label for="mail">E-mail:</label>
    <input type="email" id="mail" name="user_email">
  </li>
  <li>
    <label for="msg">Message:</label>
    <textarea id="msg" name="user_message"></textarea>
  </li>
  <li class="button">
    <button type="submit">Send your message</button>
  </li>
 </ul>
</form>

The for attribute of should be used to identify the id of the input it is associated with. This is the bare bones HTML requires for a form of this nature. Styling is done via CSS.

This is the trickiest part of forms. For this, each widget must contain a name attribute. In this case, they are user_name, user_email, and user_message. This data will be sent to the URL "/my-handling-form-page" using the HTTP POST method.

As for the server side, the script at "/my-handling-form-page" will receive the data as a list of three key/value items contained in the HTTP request. How this data is handled is up to you and the server-side language.

browser->server: HTTP POST https://studies.cs.helsinki.fi/exampleapp/new_note
within the server: data is sent as the body of the POST request. the server accesses this data, creates a new note object and redirects it the /notes.
browser->server: HTTP GET https://studies.cs.helsinki.fi/exampleapp/notes
server->browser: HTML code
browser->server: HTTP GET https://studies.cs.helsinki.fi/exampleapp/main.css
server->browser: CSS code
browser->server: HTTP GET https://studies.cs.helsinki.fi/exampleapp/main.js
server->browser: JS code

within the browser: browser runs main.js which orders the browser to request JSON data from the server on the event (readyState == 4 && this.status == 200). 

browser->server: HTTP GET https://studies.cs.helsinki.fi/exampleapp/data.json
server->browser: data.json

within the browser:
browser executes the event handler
notes are assigned to div in HTML and rendered to display

This diagram is nearly identical to the diagram provided in the previous exercise. The only difference is the location at which the server resides and the HTTP status codes associated with the requests.

browser->server: HTTP GET https://studies.cs.helsinki.fi/exampleapp/spa
server-->browser: HTML-code
browser->server: HTTP GET https://studies.cs.helsinki.fi/exampleapp/main.css
server-->browser: main.css
browser->server: HTTP GET https://studies.cs.helsinki.fi/exampleapp/spa.js
server-->browser: main.js

note over browser:
browser starts executing js-code
that requests JSON data from server 
end note

browser->server: HTTP GET https://studies.cs.helsinki.fi/exampleapp/data.json
server-->browser: [{ content: "HTML is easy", date: "2019-05-23" }, ...]

note over browser:
browser executes the event handler
that renders notes to display
end note

Unlike traditional web apps, SPAs do not reload the entire page-- instead, when a new note is written, the following occurs:

Event handler: onSubmit
browser: creates a new note, adds it to the notes list, rerenders the note list on the page, and sends the new note to the server.
browser->server: HTTP POST https://studies.cs.helsinki.fi/exampleapp/new_note_spa