檳榔嶼

ATOM

What is JavaScript?
  - A little script to run interactive changes in CSS and HTLM documents.


How does JavaScript relate to Java? No relation

Navigating the Javascript landscape : EMCAScript

Tools :

  - Code text : Atom
  - Browsers : Crowme

==== The Basic ====

Browser console : only execute on the fly, not saved in the local file
  - ctrl-shift+i




Documents are read by order in HTLM

Add JavaScript in an external file







How to write a good JS
  1. JS is Case Sensitive
  2. Use camelCase
    i. Variables start with lc
    ii. Objects and classes start with uc
    iii. Constans are all-caps
  3. Whitespace Matters (to Humans)
  4. End Each Statement with Semicolon
  5. Use Comments Liberally
    i. //
    ii. /* ... */

Variables: The catch-all container of Javascript
  - var <var name>;
  - Data Type


  - Use "+" to concate strings
  - Logical Operations


  - Array

    - Operations
      - Length : <array name>.length
      - Reverse; : <array name>.reverse()
      - Remove the first value : <array name>.shift()
      - Add element to the front : <array name>.unshift("<1st>", "<2nd>", ...)
      - Remove the last item : <array name>.pop()
      - Add elements to the last : <array name>.push("<1st>", "<2nd>", ...)
      - Remove elements in the middle : <array name>.splice(pos, n), means specify the pos position, and remove the num after pos
        - a = [1, 2, 3, 4] --> a.splice(2, 1) --> a = [1, 2, 4]
      - Create a copy from an array : var <new array> = <array name>.slice();
      - Search : var result = <array name>.indexOf("<key word>", start index)
      - Join : <array name>.join("<connector>")

Functions : 

  - Initialize function :


  - New Types : const and let



  - Two ways to declare functions


Arrow function :



  - Arrow funciton and normal function will have different scope, if both functions return different values, something wrong



  - callback function
    - add callback into arguments
    - pass a function into a function for local usage

  - Conditional switch statement
    - switch (expr) {
         case <state a>:
         case <state b>:
         ....
         default :
       }



Class :

  - Declare an object/declare by constructor


  - Classes Array

  - Dot and Bracket notation

  - Closure :


Constructor :


Use function to declare class itself as a constructor

3 ways to create class
  1. class <class name> {
        construct (aa, bb, ...) {
          this.aa = aa;
          this.bb = bb;
        }
      }
  2. const <class name> = {
        aa : value_a,
        bb : value_b,
      };
  3. function <class name> (aa, bb, ...) {
        this.aa = aa;
        this.bb = bb;
      }

==== JavaScript and DOM  ====

document.body : the whole body
  - document.body.innerHTML : the content

DOM : The document object model




Target elements in the DOM
  - https://developer.mozilla.org/en-US/docs/Web/API
  - DOM Properties/Methods



CSS Query : name/class

  - document.querySelector(".masthead") : For the first selector
  - document.querySelector(".menu .has-children a")
  - document.querySelectorAll("a") : For all selectors
  - document.querySelectorAll(".social-nav a[href*='linkedin.com'])
  - document.querySelector("main li:last-child")
  - document.querySelector("main li")
    - document.querySelectorAll("main li").forEach(item => item.style.backgroundColor = "red");
    - document.querySelectorAll("main li:last-child").forEach(item => item.style.backgroundColor = "grey");
  
Access and change elements
  - https://developer.mozilla.org/en-US/docs/web/API/element
    - document.querySelector(".main-title").innerHTML
    - document.querySelector(".main-title").outerHTML
    - document.querySelector("#showcase").id = "slideshow"

    - Class
      - document.querySelector(".masthead")
      - document.querySelector(".masthead").className
      - document.querySelector(".masthead").classList


Access and change classes : for read only elements
  - add

  - Find elements : Old, use querySelector(All) is better
    - Use document.getElementByClassName
    - Use document.getElementByID

**  Shouldn't use className property in framework to avoid unexpected problems

Modifying element classes
  - document.querySelector().className


**  classList is much better instead of className

  - document.querySelector().classList
    - add/remove/toggle/replace/

Attributes
  - document.querySelector().attributes
  - document.querySelector().hasAttribute() : to check attribute exists or not
  - document.querySelector().getAttribute() : 
  - document.querySelector().setAttribute() : 
    - to add value to an attribute
    - to add a new attribute
  - document.querySelector().removeAttribute() : 

Inline Style :





Add DOM elements

**  Create a new article appended to main, not replace the original one (05_09)

  - document.createElement()
    - Create HTLM element like "<a></a>", if document.createElement("a")
  - ParentNode.append()



When we use JavaScript to create backpack element, the main content will be replaced. So add the backpack inside the main content, after the article, page-header.




  - Element.insertAdjacetElement()

Exercise : Add Menu decorated by CSS


  - list-style-type : head symbol
  - margin : outer distance to the frame, link
  - padding : inner distance to the fram, link
  - display : display behavior, link
  - justify-content : alignment, link
  - color : link

==== Sidebar: Variables and Data Types ====
- Containers for everything

==== Events ====

Event Listener :
  - target.addEventListener(target, callback, [, options])




this (09_05), call back function :


Pass arguments through event listeners : Pass arguments into callback function
  - 09_06, common pattern

Loop : 
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach






Map : Used to create a new array


Debuggin 
  - Use "source"
  - F9 step