FE Week 2
Table of Contents
- Element by tagName exercise
- Chapter 13 - Javascript and the browser
- Chapter 14 - The Document Object Model
<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) {
return node.getElementsByTagName(tagName)
}
console.log(byTagName(document.body, "h1").length);
// → 1
console.log(byTagName(document.body, "span").length);
// → 3
let para = document.querySelector("p");
console.log(byTagName(para, "span").length);
// → 2
</script>HTTP stands for Hypertext Transfer Protocol, a protocol for retrieving resources. Connections can use either UDP or TCP; using TCP, one side has to wait until the other side is done/ready, whereas, with UDP, you can send packets whenever you want. The main difference is the reliability of your connection. With UDP, it is possible to lose packets if they were sent but never received.
| Protocol | Server | path | query |
|---|---|---|---|
| http:// | google.com | /search | ?q="amsterdam" |
HTTP requests default to port 80; the IANA assigns this port as it is commonly used. The FTP protocol, for example, would use port 20 and SSH port 22.
Javascript files are imported as the HTML files are read out by the browser, script tags have a path to the javascript files. The same goes for styling files. It is possible to call ES methods by placing attributes and values. Note that not all of those features are supported on all browsers and versions.
| Attribute | Value |
|---|---|
| onclick | {js code} |
HTML files consist of blocks of HTML tags, for example the entire HTML content is placed in the <html> tag, the head content in <head>, and the body in the <body> tag. Having those in places gives us structure. We place the meta information such as imports, links, and meta-info in the <head>. The visible content is placed in the <body>, usually, the <script> tags are placed in here as well.
Knowning that each tag is actually a child-block to its parent-block allows it to visualize it as a tree, to understand nodes.
We can use Javascript to manipulate the DOM any way we want. In Javascript we can use document and its getElementById() method to access the DOM to search for an element with that ID.
<p>My ostrich Gertrude:</p>
<p><img id="gertrude" src="img/ostrich.png"></p>
<script>
let ostrich = document.getElementById("gertrude");
console.log(ostrich.src);
</script>Once you've declared a node, it's possible to manipulate the DOM even more. You can for example add or remove attributes using the getAttribute and setAttribute(attr, value) methods. It doesn't stop there, it is also possible to change styling with the .style method, this method contains a set of css methods that you can use to modify the styling of a node element.
JavaScript and the Browser :: Eloquent JavaScript. (n.d.). Retrieved May 12, 2020, from https://eloquentjavascript.net/13_browser.html The Document Object Model :: Eloquent JavaScript. (n.d.). Retrieved May 12, 2020, from https://eloquentjavascript.net/14_dom.html