Front end Development Eloquent JavaScript

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.