Een Network protocol beschrijft een stijl of communicatie over een netwerk. Er zijn protocolen voor het versturen van email, ontvangen van email, delen van bestanden etc. Een Hypertext Transfer Protocol (HTTP) is een protocol voor het ophalen van resources. Voor het ophalen beschijf je de naam van de resource en de versie van de protocol die hij probeert op te halen:

GET /index.html HTTP/1.1

De Transmission Control Protocol (TCP) is een protocol die ervoor zorgt dat de computer wait, of listen. Elke listener heeft een nummer (port). De listening computer heet de server en de connecting computer heet de client.

Een URL (Uniform Resource Locator) is zo opgebouwd: HTTP protocol, Server, path

Met een domain name kun je makkelijk in normale taal IP-adress van computers opzoeken.

Omdat niet iedereen te vertrouwen is op het web, is er besloten dat je met javascript gelimiteerd wordt met wat je op de computer kan doen. Zo kun je bijvoorbeeld niet iemands bestanden inzien vanaf een andere computer met javascript. Het isoleren van een programming environment heet sandboxing

In elke HTML tag kunnen we nagaan waar deze tag voor staat. Dit heet de Document Object Model, of DOM in het kort. Data sctructuur noemen we een 'tree' wanneer het een vertakkeling heeft en geen cycles en heeft daarnaast een alleenstaande root. In DOM, document,documentElement is de root.

Een 'tree' heeft verschillende nodes (bijvoorbeeld identifiers, values en application nodes). Application node kan weer kinderen hebben en dus andere nodes. Identifiers en values hebben geen kinderen en zijn dus 'leaves/bladeren'. Ook in de DOM geldt dit. Zo kunnen nodes kinderen hebben (document.body) of bladeren (tekst of comment nodes).

Nodes hebben 'siblings' Alleen de first child geeft null bij previousSibling en last child geeft null by nextSibling.

Deze function geeft true terug wanneer een node een bepaalde string heeft:

function talksAbout(node, string) {
  if (node.nodeType == Node.ELEMENT_NODE) {
    for (let i = 0; i < node.childNodes.length; i++) {
      if (talksAbout(node.childNodes[i], string)) {
        return true;
      }
    }
    return false;
  } else if (node.nodeType == Node.TEXT_NODE) {
    return node.nodeValue.indexOf(string) > -1;
  }
}

console.log(talksAbout(document.body, "book"));
// → true

Omdat nodes geen array zijn, kunnen we er niet doorheen komen met for/of.

Wanneer we een bepaalde element willen hebben met bijvoorbeeld getElementsByTagName, kunnen we de [ ] gebruiken om aan te geven welke child we willen:

let link = document.body.getElementsByTagName("a")[0];
console.log(link.href);

Daarnaast kun je natuurlijk ook specifiek een element krijgen door getElementById/getElementByClassName te gebruiken.

Om de DOM aan te passen kun je methods gebruiken als replaceChild en insertBefore:

<p>One</p>
<p>Two</p>
<p>Three</p>

<script>
  let paragraphs = document.body.getElementsByTagName("p");
  document.body.insertBefore(paragraphs[2], paragraphs[0]);
// will give: Three/One/Two
</script>

Als je een alt attribute wilt veranderen van een image, moet je een nieuwe textnode aanmaken. Dit kan met createTextNode

<p>The <img src="img/cat.png" alt="Cat"> in the
  <img src="img/hat.png" alt="Hat">.</p>

<p><button onclick="replaceImages()">Replace</button></p>

<script>
  function replaceImages() {
    let images = document.body.getElementsByTagName("img");
    for (let i = images.length - 1; i >= 0; i--) {
      let image = images[i];
      if (image.alt) {
        let text = document.createTextNode(image.alt);
        image.parentNode.replaceChild(text, image);
      }
    }
  }
</script>

Met data-atributen kun je een element oproepen in Javascript:

<p data-classified>

Daarnaast kun je een waarde meegeven:

<p data-classified="secret"

In javascript kun je de code dan oproepen door:

if(para.getAtribute("data-classified") == "secret"{
 // verwijder html element uit de DOM
 para.remove()

Voor querySelector moet je voor data-atributen [ ] gebruiken:

let para = document.querySelector('[data-paragraph]')

Met dataset krijg je niet alleen de key, maar ook de andere 'waarden'

for (let para of Array.from(paras)){
 console.log(para.dataset);
}
// geeft array van alle values van de array
// DOMStringMap(classified: "value")

Ik snapte hier niet precies wat ik moest doen. Ik heb hier wat gedaan wat ik denk dat goed is maar ik denk dat het fout is. Ik vond het iets te vaag uitgelegd wat nu precies de opdracht was.

<h1>Heading with a <span>span</span> element.</h1>
<p>A paragraph with <span>one</span>, <span>two</span>
  spans.</p>

<script>
  function byTagName(node, tagName) {
    // Your code here.
    let nodesArray = [];
    let currentTagName = node.nodeName;
    let children = node.childNodes;
    
    if (currentTagName.lowercase() === tagName){
      nodesArray.push(node); // Now the user can use the nodes. It is usefull data in the array
  	}
    
    if (children){
      for(let i = 0; i < children.length; i++){
        let childNode = children[i];
        
        byTagName(childNode, tagName);
      }
    }
  }
  byTagName(document.body, "p");
</script>