Week 1: Chapter 4, 13, 14 summaries

# Chapter 4: Datastructures: Objects and Arrays

## Arrays
An array is a list of values. The list is opened and closed with square brackets, it has different values inside separated by commas.
Create array:
`let groceries = ['bread', 'wine', 'Boursin'];`

And get to the first value of this array (counting starts from 0):
```
groceries[0]
// Output: bread
```

## Properties
A property is... well a property of a value. Almost every value in JavaScript has properties. You can also create properties for objects and assign values to them.

For example 2 properties of a car that get values assigned to them:
```
currentCar.color = '#0000FF';
currentCar.plate = '69 NI CE';
```

## Methods
A method is a property that contains a function.

To raise the volume of a stereo to 100 for example:
`stereo.setVolume(100);`
And ears will bleed.

## Objects
A object is a data type that holds properties and methods. It's opened with curly brackets where the properties are stored in.

A human for example:
```
let human = {
firstName: 'joris',
lastName: 'meester',
favouriteFood: ['pancakes', 'poffertjes'],
leastFavoriteThing: 'making frontend summaries',
brainCells: 3
};
```

## Array loops
Loop that goes through all items of an array. This can be very useful if you want something to happen for every item in an array.

For example removing the cap of every beerBottle and letting a human drink it:

```
for(let i = 0; i < beerBottles; i++) {
beerBottles[i].hasCap = false;
human.drink(beerBottles[i]);
}
```

## String properties
Data types like string, boolean, number also have properties and methods. But you can't change these, you also can't add any properties.

For example:
```
let word = 'something';
console.log(word.length)
// Output: 9
```

## JSON
JSON is a file type that stores data pretty similar to objects in JavaScript. But there are some differences, that's why you need to convert the data if you want to read it in JS or want to save it in a JSON. JSON needs double quotes around it's property names.

JSON example:
```
{
"name": "joris",
"age": 22,
"hobbies": ["drawing", "watching too much YouTube"]
}
```
Thankfully JS has 2 functions for converting to and from JSON: `stringify` and `parse`.

### Resource:
Haverbeke, M. (2018a). Data Structures: Objects and Arrays :: Eloquent JavaScript. Eloquentjavascript.Net. ()

# Chapter 13: Javascript and the browser
A network is simply multiple computers that are connected and can communicate with eachother. The internet is a network that can be used around the world.

## Network protocol
A network protocol tells which type of communication is used over a network.

### HTTP
The Hypertext Transfer Protocol is for requesting and receiving resources (info, like web pages or other media).

### TCP
The Transmission Control Protocol is used for communication between devices connected to the internet. The connection is used for establishing connections between clients and servers. The client as well as the server can send and receive data with the connection.

## WWW
The World Wide Web gives us the ability to visit websites in a browser.

### URL
A Universal Resource Locator is built like this:
```
https://jorismeester.nl/pages/ontwerphandleiding.html
^ | ^ | ^
protocol server path
```

## HTML
HTML stands for Hypertext Markup Language, it's a document that is used for web pages. It contains tags with information like text or attributes, browsers can use these tags with info to show a web page.

## HTML & JavaScript
JavaScript's role is to maniplate HTML, like adding content or altering elements. JS will be read by the browser if it contains a `` tag with JS code or a `src` attribute to read a JS file. There are some HTML attributes that use JS without any `script` added by the developer, the `onclick` attribute for example.

## The Internet is a Sandbox
Everybody has a lot of freedom on the Internet, but this freedom can also be used in harmful ways. To prevent this programs that use the internet need a save environment so that it can't manipulate others or the other way around, this is called "sandboxing".

## Compatibility
Different browsers can display web pages differently. Sometimes this results in issues, before the 2010s these were more relevant. But nowadays major browsers display web pages about the same with relatively few bugs.

### Resource:
Haverbeke, M. (2018a). JavaScript and the Browser :: Eloquent JavaScript. Eloquentjavascript.Net. (<https://eloquentjavascript.net/13_browser.html>)

# Chapter 14: The Document Object Model
## Document Structure

## Trees
A data structure is called a tree when it has a branching structure. It starts with the root, with the DOM `document.documentElement` is the root. It also has nodes which are the elements (HTML tags like `<body>`,`<p>`,`<img>`, etc.) These elements can also have child elements.

For example the `<body>` element has a "child" `<section>`. And this `<section>` has 3 childs `<h1>`, `<p>` and `<img>`. These 3 children are "siblings" of each other:
```
<body>
<section>
<h1>Dr. Phil sends 'em to the ranch</h1>
<p>Dr. Phil says: "To the ranch, spoiled brat!"</p>
<img src="images/m&mdrphil.jpg">
</section>
</body>
```

### Moving through the Tree
With JS you can navigate through nodes. To select all child nodes use `childNodes`, for only all element child nodes `children` for the first child node `firstChild`, last child `lastChild` and to select siblings use `previousSibling` and `nextSibling`.

## Attributes
Attributes can be given to elements, these attributes tell something about the element. You can also set your own attributes, but they won't be properties on the element's node. `getAttribute` and `setAttribute` in JS need to be used to work with them. Adding `data-` as a prefix to made up elements is recommended.

## Style elements
Some HTML elements add some styling like `<strong>` (makes text bold) or `<a>` (adds a blue color and underline to text). Styling can also be added with the `style` attribute inside a HTML element, the content is the same as CSS properties and values.

## CSS
HTML can be styled with Cascading Style Sheets. Inside the HTML document you can also write CSS inside a `<style>` element.

Or you can link to a CSS file, for example: `<link rel="stylesheet" href="css/style.css">`

## Query Selectors
Use `querySelectorAll(".human")` to select all node objects with the human class.

### Resource:
Haverbeke, M. (2018a). The Document Object Model :: Eloquent JavaScript. Eloquentjavascript.Net. (<https://eloquentjavascript.net/14_dom.html>)

Review the issue body and its Eloquent JavaScript references first. Locate the repository's chapter-summary materials for Chapters 4, 13, and 14, then check nearby summaries for format and scope. Done means the three summaries are present, accurate, and consistent with the course material.

Written by the indexing model from the issue text.