Please enable JavaScript.

Coggle requires JavaScript to display documents.

JavaScript Fundamentals, language, The DOM - Coggle Diagram

- - - - JVM
- - - - jQuery
      - React
      - Vue
      - Svelte
      - AngularJS, Backbone, Ember
- - - - <NoScript>
      - fail-safe design
- - - - allows the developer to limit the scope
- - - - initially an empty object
    - - useful to assign properties to objects that you want available to all instances
- - - - built-in
      - property
      - method
      - dot notation
- - - - var are available globally
      - global identifiers
      - can cause namespace conflict problem
        
        C
        
        cannot have to classes withe the same name
        
        can group related classes in a namespace
        
        does not have namespaces, the new identifier replaces the old one
        
        important to minimize the number of global variables
    - - only available within a function
  - - - an object consisting of a function and the scope environment in which the the function is created
      - a function that has an implicitly permanent link between itself and its scope chain
      - a function defined within a closure "remembers" or "preserves" the scope in place when it is created
      - functions with preserved state
    - - callback functions will still need to "remember: the scope chain that was in place when they were defined, not when they run
- - - - Element Node object
        
        properties
        
        classList
        
        className
        
        id
        
        innerHTML
        
        style
        
        tagName
      - represents an HTML element in the hierarchy, contained between opening and closing tags
    - - href → a
      - name → a, input, textarea, form
      - src → img, input, iframe, script
      - value → input, textarea, submit
- - - - far from ideal
      - problem is that markup and logic are woven together
    - - benefit is that code can be written anywhere
      - uncouples the HTML from the Javascript
      - limitation is that only one handler can respond to any given element event
    - - it is the preferred approach
      - myButton.addEventListener('click', buttonOnClick)
      - properties of Event Object
        
        bubbles
        
        cancelable
        
        target
        
        type
        
        mouse events
        
        click
        
        dblclick
        
        mousedown
        
        mouseup
        
        mouseover
        
        mouseout
        
        mousemove
        
        keyboard
        
        keydown
        
        keypress
        
        keyup
        
        form
        
        blur
        
        change
        
        focus
        
        reset
        
        select
        
        submit
  - - - can access object by including it as a parameter to the callback function
      - div.addEventListener('click', function(e) { ... };
      - event object properties depend on event type
        
        bubbles, cancelable, preventDefault,
        
        mouse events
        
        keyboard events
        
        touch events
        
        form events
        
        frame events
    - - it is possible to assign a single listener to the parent and make use of event delegation
      - events in JS progress from the immediate object that generated the event, then up toward the document root
      - event bubbling, or event propogation
- - - - attributes
      - childNodes
      - firstChild, lastChild
      - nextSibling
      - nodeName, nodeType, nodeValue
      - parentNode
      - previousSibling
      - textContent
- - - - node.classList.toggle("hide")
      - common use of classList property
  - - - innerHTML, textContent
  - - - appendChild
      - createAttribute
      - createElement
      - createTextNode
      - InsertBefore
      - removeChild
      - replaceChild
- - - - e.g. set background color based on focus, blur
      - blur, focus events trigger whenever a form control loses focus
    - - may want to change the options available within a form based on earlier user entry
      - e.g. radio buttons (US and Europe)
    - - validation
        
        email, number, data
        
        empty field
      - submitting a form using JS requires having a node variable for the form element
        
        call the submit() method