Front end Development Eloquent JavaScript - Vincentvanleeuwen/project-tech-2020 GitHub Wiki
Protocol
The protocol is the start of the URL, "https://" the s in https means it is an encrypted version of http.
Server
The server is the domain that the website is run on. Let's take Google for instance, in https://google.nl/search?=01, "google.nl/" is the server.
Path
Lastly we have the path, this is to define where you are on a page. The path in this case https://google.nl/search?=01 would be "/search?=01".
Document Object Model
The dom gives you access to the elements within the website. You can select certain parts by doing document.body, document.head, etc. to get the certain part you're looking for.
Attributes
You can give your HTML data attributes like
<p data-important="very important"> I am important </p>
you can then get the data in javascript by calling the paragraph tag and using the function getAttribute(), or you can set the attribute by using setAttribute().
let p = document.getElementByTagName('p');
p.getAttribute("data-important");
p.dataset creates an object of all data-specifications.
Layout
You can get the element's height and width by using the function .offsetHeight and .offsetWidth. Besides offset it's also possible to use .clientHeight and .clientWidth, the difference between these two is that client ignores the border width.
To get a precise location of an element you can use getBoundingClientRect on an element. This function returns an object with the top, bottom, left and right properties of the element in pixels.
And to get the scroll position you can call pageXOffset or pageYOffset.