Intro to Full-Stack Javascript

Frontend Fundamentals:

MV* , DOM, and Browser (web) storage

Summer Semester 2020

Instructor: Taimur Khan

Summary session 3:
- Self-learning
  - Data Structures: Objects & Arrays
  - Homework 3
- Guided-learning
  - Some Backend concepts
Session 4 themes:
- Frontend Fundamentals:
  - Model-View-Controller (MVC),
  - Document Object Model (DOM),
  - Browser (web) storage

Session 4 - Overview

MV* Frameworks

MVC -- Model-View-Controller -- is an architectural design pattern.
Separates the an application down into three parts:
- Isolation of business data (Models) from user interfaces (Views), with a third component (Controllers) traditionally managing logic and user-input
JavaScript ‘MVC’ frameworks that can help us structure our code don’t always strictly follow the above pattern.
For this reason we refer to such frameworks as following the MV* pattern, that is, you’re likely to have a View and a Model, but more likely to have something else also included.

Source: MVC Overview.

Intro to MVC

MV* Frameworks

Source: TechTales.

Types of MV* Frameworks

DOm

Source: Javascript HTML DOM. w3 School

DOM -- Document Object Model
Browser creates a Document Object Model of the HTML page on page load
All HTML elements are defined as objects.

The HTML DOM Tree of Objects

DOM -- Document Object Model
Browser creates a Document Object Model of the HTML page on page load
All HTML elements are defined as objects.
- JavaScript can change all the HTML elements in the page
- JavaScript can change all the HTML attributes in the page
- JavaScript can change all the CSS styles in the page
- JavaScript can remove existing HTML elements and attributes
- JavaScript can add new HTML elements and attributes
- JavaScript can react to all existing HTML events in the page
- JavaScript can create new HTML events in the page

DOm

Source: Javascript HTML DOM. w3 School

In the DOM, all HTML elements are defined as objects.
A property is a value that you can get or set (like changing the content of an HTML element).
A method is an action you can do (like add or deleting an HTML element).

The HTML DOM Tree of Objects

DOm

Click "order" button to order your pie

Example: Pie World

<!DOCTYPE html>
<html>
<body>

<h2>Welcome to Pie World</h2>

<p>Click button to order your pie.</p>

<button id="order">Order</button>

<script>
document.getElementById("order").addEventListener("click", function() {
  alert("Your pie has been ordered!");
});
</script>

</body>
</html>

Browser (Web) Storage

Source: Taimur Khan

Local storage: simple key-value storage, the data is always stored as strings. The same data is accessible to all the pages of the domain and remains persistent even after you closed the browser.
Session storage: same but is local to one URL and to one browser session (deleted on browser close).
SQL database: (aka WebSQL): storage in a local DB you can access by SQL requests... seems already deprecated as IE and Firefox have stated they won't implement it.
Cookies: are simple, small files/data that are sent to client with a server request and stored on the client side. Every time the user loads the website back, this cookie is sent with the request. This helps us keep track of the user’s actions.
- Each cookie can be 4096 bytes, each domain can have 50 Cookies max

Browser (Web) Storage

/* 
* Author: Taimur Khan.2020.
*/

<html lang="en">  
<head>  
  <meta charset="utf-8" />  
  <title>HTML5/Web/DOM Storage Demonstrated</title>  
  <script language="javascript">  
  /*  
   * Indicate if this browser supports local storage.  
   */  
  function html5StorageSupported()  
  {  
     return ('localStorage' in window) && window['localStorage'] !== null;  
  }  
  /*  
   * Provide number of elements in storage.  
   */  
  function determineNumberStoredElements()  
  {  
     return html5StorageSupported() ? localStorage.length : "Not Applicable";  
  }  
  /*  
   * Provide indication on web page of whether this browser supports local storage.  
   */  
  function initialize()  
  {  
     document.form1.supported.value = html5StorageSupported() ? "Yes!" : "No (:";  
     document.form1.numStored.value = determineNumberStoredElements();  
  }  
  /*  
   * Save favorite movies to local storage.  
   */  
  function persistFavoriteMovies()  
  {  
     if (html5StorageSupported())  
     {  
        for (var i = 1; i <= 10; i++)  
        {  
           var movie = document.form1["movie" + i].value;  
           var storageIndex = "tkhan.FSjs'20.movie." + i;  
           //alert("Movie #" + i + " [" + storageIndex+ "]: " + movie);  
           localStorage[storageIndex] = movie;  
        }  
        document.form1.numStored.value = determineNumberStoredElements();  
     }  
     else  
     {  
        alert("Cannot save to local storage because it's not supported.");  
     }  
  }  
  /*  
   * Load favorite movies from local storage.  
   */  
  function loadFavoriteMovies()  
  {  
     if (html5StorageSupported())  
     {  
        for (var i = 1; i <= 10; i++)  
        {  
           document.form1["movie" + i].value = localStorage["tkhan.FSjs'20.movie." + i];  
        }  
     }  
  }  
  /*  
   * Clear favorite movies from both local storage and from form fields.  
   */  
  function clearFavoriteMovies()  
  {  
     if (html5StorageSupported())  
     {  
        // Clear favorite movies from local storage  
        localStorage.clear();  
  
        // Clear fields of movies content  
        for (var i = 1; i <= 10; i++)  
        {  
           document.form1["movie" + i].value = null;  
        }  
        document.form1.numStored.value = determineNumberStoredElements();  
     }  
  }  
  </script>  
</head>  
  
<body onload="initialize()">  
  
  <h1>HTML5/Web/DOM Storage</h1>  
  
  <form name="form1">  
     <table>  
        <tr>  
           <td>Does this browser support local storage?</td>  
           <td><input type="text" name="supported"></td>  
        </tr>  
        <tr>  
           <td>Number of Stored Elements</td>  
           <td><input type="text" name="numStored"></td>  
        </tr>  
     </table>  
     <table>  
        <tr>  
           <td colspan="2" style="font-weight: bold;" align="center">Favorite Movies</td>  
        </tr>  
        <tr>  
           <td>#1</td>  
           <td><input type="text" name="movie1"></td>  
        </tr>  
        <tr>  
           <td>#2</td>  
           <td><input type="text" name="movie2"></td>  
        </tr>  
        <tr>  
           <td>#3</td>  
           <td><input type="text" name="movie3"></td>  
        </tr>  
        <tr>  
           <td>#4</td>  
           <td><input type="text" name="movie4"></td>  
        </tr>  
        <tr>  
           <td>#5</td>  
           <td><input type="text" name="movie5"></td>  
        </tr>  
        <tr>  
           <td>#6</td>  
           <td><input type="text" name="movie6"></td>  
        </tr>  
        <tr>  
           <td>#7</td>  
           <td><input type="text" name="movie7"></td>  
        </tr>  
        <tr>  
           <td>#8</td>  
           <td><input type="text" name="movie8"></td>  
        </tr>  
        <tr>  
           <td>#9</td>  
           <td><input type="text" name="movie9"></td>  
        </tr>  
        <tr>  
           <td>#10</td>  
           <td><input type="text" name="movie10"></td>  
        </tr>  
        <tr>  
           <td colspan="2">  
              <input type="button" value="Load" onclick="loadFavoriteMovies()">  
              <input type="button" value="Save" onclick="persistFavoriteMovies()">  
              <input type="button" value="Clear" onclick="clearFavoriteMovies()">  
           </td>  
        </tr>  
     </table>  
  </form>  
  
</body>  
</html>

Websites use Frontend to:

1) Structure user interface (views) and data (models) in unique ways (controllers) ;

2) Render content and data (static or dynamic) on the browser through he DOM ;

3) Store data on the browser, taking it from the serve or generated by the user on the browser;

Frontend: in a nutshell

The Big overview

Source: Taimur Khan's Coggle -- video links from www.codecademy.com.

Closing Remarks

Frontend is only as good as the backend