Please enable JavaScript.

Coggle requires JavaScript to display documents.

Java script notebook, Object and can nest sub-object and have method that…

- - - - Allow changing properties
  - - - backpack.straplength
    - - backpack.straplength ['straplength']
      - allow more advanced action
        
        var query='straplength'
        console.log(backpack[query])
        
        can handle context out from the rules 'varname-hyphen'
  - - - keyword: Function
      - arrrow function
  - - - Generate objects with a shorter way
        
        function Backpack (var1, var 2,..) {
        this.var1 = var1;
        ....}
    - - Able to export/import multiple classes
      - in Index.html
        
        must have attribute "type = 'module'" to <script>
    - - class Name {
        constructor()
        {this.a=a;} // prototype method
        other methods (can not use arrow functions here) }
- - - - querySelectorAll('main li')
      - querySelector('.CSSclass_name')
      - kết hợp với forEach()
        
        querySelectorAll('main li').forEach(items=>items.style.backgroundColor='red')
  - - - element.Classlist
        
        return a list of class, use indexing to change class name
        
        this Property goes with many other methods
        
        <code>.classList.add('new-class')
        
        <code>.classList.toggle('new-class')
        
        add if not there, remove if already there
        
        <code>.classList.replace('new-class', 'old-class')
  - - - querySelector.getAttribute('src')
      - querySelector.setAttribute('alt','this is alt text to this img')
  - - - <div class="scas" style="color: rebeccapurple;">
    - - Return the HTML code under the class or element
    - - Thay đổi text trong element đó
  - - - Populate the existent tag with new classes
    - - tạo ra một node, node này mới đi với các method khác như "appendChild('tên node')
      - Tạo ra xong thì append nó thôi
        
        ParrentNode.append()
        
        append nó bằng cách sử dụng querySelector
        
        ví dụ muốn append nó vào sau tag có class ".maincontent"
        
        const mainElement=document.querySelector('.maincontent')
        
        const newElement = document.createElement('article')
        
        mainElement.appendChild(newElement)
        
        append accepts Node objects and DOMStrings while .appendChild accepts only Node objects. const parent = document. ...
      - Other pend
        
        prepend()
- - - - document.body.innerHTML = content
- - - - can change and assign new value
    - - var x=2, y=3, z='string'
  - - - Create variable but not assign any value
      - or use keyword 'undefined'
  - - - this is true: a==b
      - this is false: a===b (absolute equality)
    - - a++: lần sử dụng tiếp theo a mới tăng
- - - - Different type of writing style
        
        babel.js
        
        Chuyển về current browser
        
        TypeScript
        
        Variation of JS
        
        Additional feature not provided by JS
        
        Abstract version of JS
    - - Mordern webs run on these
      - Allow writing JS-based application
      - React
        
        JSX (XML) simplifies JS + HTML
    - - Helper application
      - On computer or cloud
    - - JS server runtime to run JS everywhere
      - Run npm, WebPack, Babel
  - - - IN VScode: File->preference->setting-> search" formatonsave" to get Formatting extension works
  - - - window.document
        
        Trả ra file index.html
      - Make change to JS object
        
        F.ex: backpack.toggleLid(true)
        
        Debug on the console
- - - - Load HTML and JS song song
        
        <script src ="file.js" async>
      - Defer
        
        Download alongside with HTML
        
        When HTML is complete, execute whatever JS fies
        
        <script src ="file.js" defer>
      - Và execute khi file JS đó load xong
  - - - Break down one JS file to many and import/intergrate in one file again
      - import backpack from "./backpack.js";
      - export default backpack;
      - <script type="module" src="script.js"></script>
        <script type="module" src="backpack.js"></script>