joplin-notes/joplin notion extension/Web Development/Javascript/Basics.md

Basics https://www.w3schools.com/js/js_htmldom_document.asp

• DOM manipulation

  • To remove a node use formElement.remove()

  • To append at last formElement.appendChild()

  • remove only needs a reference to the child. removeChild needs a reference both to the parent and the child. The result is identical. document.body.removeChild(formElement). here body is upper section where formElement is lower one

  • replaceChild(new, old)

  • finding through collections : instead of finding though css selectors we can find through collections like body,head,forms,images,links. So to find form element through id use const x = document.forms["frm1"]; here frm1 is id

  • insertBefore(newNode,referenceNode) : insert new node before refernce node

     // Get a reference to the parent node
    const parentDiv = document.getElementById("childElement").parentNode;
    
      // Begin test case [ 1 ] : Existing childElement (all works correctly)
      let sp2 = document.getElementById("childElement");
      parentDiv.insertBefore(newNode, sp2);
    

  • insertAfter(newnode,referenceNode) : insert new node after refernce node we can create it by

     function insertAfter(newNode, existingNode) {
            existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
        }
    

  • Insert at first position document.body.insertBefore(formElement,document.body.children[0])

  • access child and parent element formElement.children => array of nodes formElement.parentElement => node

  • write vs appendChild https://stackoverflow.com/questions/22172589/document-write-vs-appendchild There is a difference between sequence. appendChild will execute on last but write during the stream eg: index1.html

    <script>
    console.log('1');
     var script = document.createElement('script');
     script.src = 'someScript.js';
     document.write(script.outerHTML);
    </script>
    <script>
    console.log('3');
    </script>
    

      index2.html

    <script>
    console.log('1');
     var script = document.createElement('script');
     script.src = 'someScript.js';
     document.body.appendChild(script);
    </script>
    <script>
    console.log('3');
    </script>
    

    Output in 1st case will be 1,2,3 and in second case will be 1,3,2.

  • html innerHTML, innerText, textContent,outerHTML unlike innerHTML, outerHTML also include the outer structure too eg

    const div = document.createElement('div')
    div.innerHTML= `<p> Hello </p>`
    console.log(div.outerHTML) // outputs div and its innerHTML both
    

     

js maps

const map = new Map();

map.set("a", 1);
map.set("b", 2);
map.set("c", 3);

console.log(map.get("a"));
// Expected output: 1

map.set("a", 97);

console.log(map.get("a"));
// Expected output: 97

console.log(map.size);
// Expected output: 3

map.delete("b");

console.log(map.size);
// Expected output: 2

forEach is also supported in maps in latest version of js, in old versions they may not be supported so use [...mapVariable].forEach instead of mapVariable.forEach

 

collect all arrays from something and also being unique

const VIDEOS = [
  {
    folder: "Nature Docs",
    title: "Coral Reef at Dawn",
    tags: ["ocean", "wildlife", "4k"],
    url: "https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
  },
]

const allTags = [...new Set(VIDEOS.flatMap((v) => v.tags))].sort();