JavaScript ... love it or hate it, here's how to use it
Tags: javascript, productivity
Published: 2020-03-19 17:49:57

---
title: JavaScript ... love it or hate it, here's how to use it
published: true
description: A combination reference guide and how to for common uses of js; from basic programitic uses to web app developement.
tags: javascript, productivity, 
series: Software Engineer Quick Reference Guides
---
# JavaScript
Ahhh JavaScript, the little DOM language that grew into a monster/beast/foundational web technical ... take your pick of terms.

It's light-weight, it _can be_ fast and nowadays it can do almost anything on any operating system and/or browser.

## "Quick" Reference Guide
Yeah, this is not going to be a short a list of functions or syntax. Below are my notes for mod 3 of my coding bootcamp that I refer back to often because I'm not going to memorize all of this anytime soon -- I will at some point because that's how I do.

---
### DOM & Just Enough JavaScript 
#### Document-Object Model 
- ask DOM to find or select HTML elements or elements in the rendered page
- remove and/or insert element(s)
- adjust a property of selected element(s)

#### JavaScript / DOM relationship
- DOM only knows js, js and DOM are linked at hip from start
- learning about DOM will require js
- "sight words" to do this

#### "Sight Words"
- basic vocab that forms foundation for more learning latter
- js Sight Words = brief code snippets that are foundational

#### Just Enough JavaScript
- learning sight words first is an interactive way of learning js
- MDN's JavaScript Reference 
- code, code, code, code, code

#### Coding in Chrome DevTools
- writing `1 + 1` is an expression
    - a valid unit of code that returns a value
- math expressions are "raw" in console
- literal text is wrapped in quotes

#### "Things" in JavaScript
- number (integer or float) are things
- string is a thing 
- reserved words
    var, let, const
    - var came first, now we have let and const
- Template Literals
    - with template literals use back ticks, not single quotes

#### JavaScript is Object-Oriented
- code i can talk to that know state and behavior
- all Things in js
  - objects
  - arrays
  - strings
  - numbers
- dot notation()

#### JavaScript has loops
- for each character in slytherin collection, I would like the harry_potter object to invoke expelliarmus method on each wizard passed in as an argument
```js
for (let i = 0; i <slytherins.length; i += 1)
  {
    harry_potter.expelliarmus(slytherins[i]);
  }
```

---

### Variables

*Multi-line Variable Assignment*
```js
var a = 5;
var b = 2;
var c = 3;
var d = {};
var e = [];
```
*Equivalent To:*
```js
var a = b;
    b = 2;
    c = 3;
    d = {};
    e = [];
```
*Can be Converted To:*
```js
var a = 5, b = 2, c = 3, d = {}, e = [];
```

Use `typeof` operator to check data type of value currently stored in a variable.

Using `const` and `let` instead of `var`
- scope issues with 'var'
- let will throw an error if declare same var more than once
- const cannot be reassigned
  - assign a primitive value (any data type except object)
  - a const will always point to same object
  - const is self commenting
- *NEVER USE VAR*
- USE LET WHEN I KNOW A VALUE NEEDS TO CHANGE (COUNTERS, LOOPS, ETC...)
- USER CONST FOR EVERY OTHER VARIABLE

---
### The DOM Tree

`document.querySelector(selector)`
- selector is like a query string lets me find things within HTML page

The DOM Tree:
(e) = element
(t) = text
(a) = attribute
Document
```
|--	<html> (e)
|---- <head> (e)
    |-- <title> (e)
      |-- <My title> (t)
  |-- <body>
      |-- <h1> (e)
          |-- <A heading> (t)
      |-- <a> (e) - <href> (a)
          |-- <Link text> (t)
```
Finding a Node
```js
document.getElementById()
document.getElementsByClassName()
document.getElementsByTagName()
```
DOM Tree:
```html
<main>
  <div>
    <div>
      <p>Hello!</p>
    </div>
  </div>
  <div>
    <div>
      <p>Hello!</p>
    </div>
  </div>
  <div>
    <div>
      <p>Hello!</p>
    </div>
  </div>
</main>
```
Find the `<main>` element: 
>`const main = document.getElementsByTagName('main')[0]`

Get the children of `<main>`
>`const div = main.children[1]`

Get and update the `<p>`
>`const p = div.getElementsByTagName('p')[0]`

Change `<p>`
>`p.textContent = "Goodbye!"`


---
### JS Fundamentals: Arrays

`document.getElementsByClassName() =>` [...many elements...]
- HTMLCollection, not actually an Array
- HTMLCollection know its length, can be iterated over with for...in... loop
- HTMLCollection not technically an Array

`document.getElementsByTagName() => `[...multiple elements...]

`document.getElementById() =>` single element

---
### Looping and Iteration

```js
for ([initialization]; [condition]; [iteration]) {
    [loop body]
}
```
- use a for loop when I know exactly how many times I want/need the loop to run

---
### querySelector Methods


Learning Goals
1. Use document.querySelector() & document.querySelectorAll() to find nested nodes
2. Change value of targeted DOM nodes

Introduction
- essential skill, find elements in DOM
- document.getElementById() & document.getElementsByClassName() are good, using tree structure & tags is better

Use document.querySelector() & document.querySelectorAll() to find Nested Nodes
### document.querySelector() ###
- 1 arg, CSS-compatible selectors
- returns first instance of arg

example:
```html
<body>
    <div>
      <ul class="ranked-list">
        <li>1</li>
        <li>
          <div>
            <ul>
              <li>2</li>
            </ul>
          </div>
        </li>
        <li>3</li>
      </ul>
    </div>
    		 
    <div>
      <ul class="unranked-list">
        <li>6</li>
        <li>2</li>
        <li>
          <div>4</div> **
        </li>
      </ul>
    </div>
</body>
```
const li2 = document.querySelector('ul.ranked-list li ul li')

const div4 = document.querySelector('ul.unranked-list li div')

---
### document.querySelectorAll()
- 1 arg
- returns a NodeList collection
    - an Array, but not technically an Array

example:
```html
<main id="app">
    <ul class="ranked-list">
      <li>1</li>
      <li>2</li>
    </ul>
    		 
    <ul class="ranked-list">
      <li>10</li>
      <li>11</li>
    </ul>
</main>
```
document.getElementById('app').querySelectorAll('ul.ranked-list li')
> `// => list of Nodes: <li>1</li>, <li>2</li>, <li>10</li>, <li>11</li>`

---
## Removing, Altering & Inserting HTML

`document.querySelect('element-name').remove()`
- this is to remove an element

`document.classOrIdThing.remove('thing-name-here')`
- removes a class or id from an element, leaves the element in place

Explicit and Safe `.remove()` pattern
 ```js
 let x = document.querySelector('element#id');
 let y = x.parentNode;
 y.removeChild(x);
```

#### Explicit and Safe adding
We’ve been inundated by cat owners who are angry that we have missed their favorite species of pet. What JavaScript snippet will add an li with a span inside with the text "Nancy Drew (the cat)" inside to our ul?
```js
 base = document.getElementsByTagName("li")[0].parentNode;
 item = document.createElement("li"); 
 s = document.createElement("span"); 
 s.id = "cat"; 
 s.textContent = "Nancy Drew (the cat)"; 
 item.appendChild(s); 
 base.appendChild(item)
```

---
## JavaScript Everything

### Different Types of User Events
- mouse click
    - click, double-click, right-click, etc ...
- key press 
    - keypress, keydown, keyup
- form submission
    - submit
ton of browser events

---
## Functions in js

- most important thing in js
- a series of multiple tasks can be pulled into a function if the series can be generalized 
    - makes the tasks repeatable

---
## Scope

- global scope
    - accessible everywhere in js code
- block scope
    - let & const
    - only within their function
- variables declared w/out const, let, or (NO!!!!!) var are always globally-scoped
    - even within a block

---
## Chain Scope

- Chain Scope is using global vars in a local context 
- matters where it is declared, not invoked
- local vars can reference outer scoped vars all the way up the levels

---
## Lexical Scoping

- scope based on where vars & blocks defined by developer at writing, solidified when code is processed


---
## Hoisting


- by time js engine reaches execution phase all functions are in memory so order is not important in the code itself
- best way to avoid confusion, declare all functions at the top of my code
    - refactor as needed/on-going or otherwise
- use let & const as js engine !allow referenced before initialized

---
## Object Iteration

`for ... of`
- use with arrays, actual ordered data
```js
const myArray = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
		 
 for (const el of myArray) {
    console.log(el);
 }
```

`for ... in`
- use with objects where order is not required just the key/value pair
```js
 const address = {
    street1: '11 Broadway',
    street2: '2ns Floor',
    city: 'New York',
    state: 'NY',
    zipCode: 10004
 };
 for (const key in address) {
    console.log(address[key]);
    console.log(key);
 };
 // console.log(address[key]) will return the value of the key
 // console.log(key) will return the key
```