Learn JS: FSFS – 10 Days of JS


Courses

Updated Dec 13th, 2021

Read through some chapter details here but notes and code should probably just be opened in VSCode at desktop/desktop-projects/10-days-of-js and the notes are in the scripts.js file.

Table of Contents

Section 1 & 2: Welcome and 10 Days of JavaScript

Section 3 – Server Basics

Chapter Details

Ch. 1 – Course Welcome

Ch. 2 – Getting Started

Ch. 3 – Functions

Computers are great at repetitive tasks. While loops are a great example.

In other programming languages you cannot pass a function as an argument.

Adding a function as a parameter to addEventListener is an example.

Functions return values

You can write to the browser by typing

document.write("Your text here")

Ch. 4 – Objects

Almost everything is an object in JavaScript.

Ch. 5 – Arrays

A lot of programming is just working with the arrays. An array is a special type of object. The method .push() adds to the end of an array. Can you put objects into array’s? Absolutely.

Ch. 6 – Making Decisions

.toFixed rounds to the nearest whole number and .toUpperCase does what it sounds like. Plus plus (++) increments by one.

Ch. 7 – Higher-Order Functions

Functions can return a function and you can assign a function to a variable

Common higher-order functions/methods all arrays have access to are .foreach(), map(), .filter()

Ch. 8 – Returning vs. Mutating

There’s a difference between returning and mutating mutating is changing or modifying. The .push method lives a double life in that it mutates and returns. map and filter are two methods that are extremely helpful but do not mutate the array map creates a new array based on another array and a filter allows you to kind of filter through the data. The methods of map and .filter do not mutate original array but create new array. For map and filter store in a variable so new array is not in no man’s land.

Ch. 9 – Scope & Context (Part 1)

Scope is the biggest source of confusion regarding variables. Context is the biggest source of confusion regarding objects.

Scope is 1-way street. Code can work outwards to reach variable but not inwards.

Let uses block scope and VAR uses function scope 99% of programmers use let because block scope is more conventional.

Ch. 10 – Scope & Context (Part 2)

Context is centered around the this keyword and the this keyword points towards the object that is executing the current function.

The this keyword points towards the object that is executing the current function. When calling a regular old function JS says it is the global object that is calling or executing the function.

What the this keyword points to changes based on context.

Why do we even bother with the “this” keyword? It allows our code to be flexible.

Can use .call() to help control the “this” keyword.

You can chain multiple actions together so for example:

pets.filter(onlyDogs).filter(onlyBabies).map(namesOnly)

Ch. 11 – Miscellaneous Info (Part 1)

You can use an anonymous function (function with no name) if that’s the only place where you’ll need the function.

An arrow function provides cleaner more-minimalist syntax. With an arrow function you can drop the word function and if everything is on the single line you can also drop the curly braces. Arrow functions automatically return so you don’t need the “return” keyword either. Arrow functions do not manipulate the “this” keyword.

Ch. 12 – Miscellaneous Info (Part 2)

Function hoisting is where line order won’t matter. This is only the case if the function is declared in the traditional way, i.e., it’s not an arrow function or an anonymous function.

Template literals help get around the awkward quotes and concatenation with plus sign so you use backticks instead of quotes and then put a variable in curly brackets with the dollar sign in front.

console.log(hello my name is ${yourNameVariable})

Semicolon’s are essentially the period at the end of a JavaScript statement. Line breaks create the same semicolon automatically with automatic insertion but if code is squished with a single line you have to have the semicolon. A lot of programmers recommend using the semicolon. The author doesn’t bother with semicolons.

Ch. 13 – Building To-Do App (Part 1)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>100 Days of JS</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>100 Days of Javascript</h1>
    <hr />
    <h2>To-Do App (Built in Day 10)</h2>
    <br />
    <form id="ourForm" action="#">
      <input id="ourField" type="text" autocomplete="off" />
      <button>Create Item</button>
    </form>
    <br />
    <h3>Things I Need To Do:</h3>
    <ul id="ourList"></ul>
    <script src="scripts.js"></script>
  </body>
</html>
let ourForm = document.getElementById("ourForm")
let ourField = document.getElementById("ourField")
let ourList = document.getElementById("ourList")

ourForm.addEventListener("submit", e => {
  e.preventDefault()
  createItem(ourField.value)
})

function createItem(x) {
  let ourHtml = `<li>${x} <button onclick="deleteItem(this)">Delete</button></li>`
  ourList.insertAdjacentHTML("beforeend", ourHtml)
  ourField.value = ""
  ourField.focus()
}

function deleteItem(elemToDelete) {
  elemToDelete.parentElement.remove()
}

Ch. 14 – Building To-Do App (Part 2)

You cannot add an event listener to something that doesn’t exist yet. Because of this fact, to delete item, we pass the “this” keyword to an inline “onclick” function and pass it the “this” keyword. We then use event bubbling (example: parentElement) and the remove() method to remove a list item from an un-orderd list.

The problem with this basic data is on a page refresh the data is lost. The data also cannot be accessed across multiple devices.

We need to manage two completely different things: raw data (for servers and databases) and digital user interface.

Libraries help but don’t learn too much too fast.

Section 3 – Server Basics

Ch. 15 – Why Do We Need a Server

Need to manage raw data for servers and databases. Also need to manage Visual UI for users. Why do we need a server? A server is needed to let users access our app. Also needed for a trusted environment. A server runs decision-making code that cannot be accessed and tampered with. JavaScript in front-end code can be accessed and manipulated.

What about severless apps? Matter of semantics: serverless apps still use servers. the cloud provider companies host your individual “server side code functions” on their own servers, (AWS, Google Cloud, Azure).

Ch. 16 – Node.js Intro

Node runs server-side code. Learning Node opens many doors. After learning Node you can legitimately call yourself a full-stack developer. Node.js is JS environment. The web browser does browser-ish things. Node is open-ended and can do general computer-ish things.

Enter into node mode in cmd by typing node into console (never use). You do execute files with the “node yourFilenameHere” command

Ch. 17 – Text Editor Software

Download and use VSCode

Ch. 18 – Our First Basic Server

Creating simple server that listens for incoming requests and can send back a simple response. After running code below you can visit localhost:3000 to see the message.

const http = require("http")
let ourApp = http.createServer(function (req, res) {
  res.end("Hello and Welcome to our website")
})
ourApp.listen(3000)

Different responses based on url visited. Log “req.url” to see the url path requested – “localhost:3000/about” logs “/about.” Use “if statements” to handle different routes and have a fallback in case the route doesn’t exist.

const http = require("http")

let ourApp = http.createServer(function (req, res) {

  if (req.url === "/") {
    res.end("Hello and Welcome to our homepage")
  }

  if (req.url === "/about") {
    res.end("Hello and Welcome to our about page")
  }

  res.end("We cannot find the page you are looking for")

})

ourApp.listen(3000)

You are the only person that can see your server in this example whereas in the real world you host this code to make the server publicly available.

Working with user-submitted form data is crucial to being a full-stack developer.

Ch. 19 – Express Intro (Part 1)

Node is open-ended and can build anything including a web server. May want to use a tool that is specifically designed to build a web server. Enter “express,” a fast unopinionated minimalist web framework for Node JS. Express takes care of a 1000 details for us but is not too opinionated. Express is the industry-standard over 5m weekly downloads. Install with “npm install express” and we get node-modules folder and package-lock.json. NPM installs in whatever directory you are pointing to.

Ch. 20 – Express Intro (Part 2)

Give an input a “name” attribute to access via req.body.whatEvs but tell “express” to enable this feature with the line of code:

ourApp.use(express.urlencoded({ extended: false }))

Express has a slightly different way to setup server with express. Use “.get(a, b)” for basic viewing of a page whereas “.post()” is another way to visit page.

let express = require("express")
let ourApp = express()

ourApp.use(express.urlencoded({ extended: false }))

ourApp.post("/answer", function (req, res) {
  if (req.body.skyColor.toUpperCase() == "BLUE") {
    res.send(`
    <p>Congrats! That is the correct answer</p>
    <a href="/">Back to homepage</a>
    `)
  } else {
    res.send(`
    <p>Sorry that is incorrect</p>
    <a href="/">Back to homepage</a>
    `)
  }
})

ourApp.get("/answer", function (req, res) {
  res.send("We cannot find what you are looking for")
})

ourApp.get("/", function (req, res) {
  res.send(`
  <form id="ourForm" action="/answer" method="POST">
    <p>What color is the sky on a clear and sunny day?</p>
    <input name="skyColor" autocomplete="off">
    <button>Submit Answer</button>
  </form>
  `)
})

ourApp.listen(3000)

The code above is a big step. Receiving incoming request, computing some logic, and handling response is insanely powerful. What we do in the middle of the sandwich is the real meat and potatoes. How do we build more advanced apps? What is missing ingredient? missing ingredient is a database for data persistence where we can store user data, have user-registration, user-specific data, etc.

Ch. 21 – What’s Next (Big Picture)

Servers and databases want raw data but visual user interfaces require different data i.e. html markup. This creates the need for two things to be managed which is why React and Angular or a library comes into play.

Learning a library early in your education is not recommended because of information-overload / overwhelm, resulting in walking away.

The rest of this course builds two apps:

App #1: Has a db but not too complex (simple to-do app). App #1 can found on my local machine in “desktop/desktop-projects/simple-app” All users share the same list.

App #2: More complex with template engines, user registration, user auth, security, error handling, staying organized, etc. (blog-journal-social-media-like app with following/search/chat/crud features). App #2 can be found in desktop/desktop-projects/complex-app