cmda-bt / cmda-bt/fe-course-20-21
Week 1: Chapter summaries
- Dominant language
- No language data
- Stars
- 30
- Forks
- 2
- PR merge metrics
- No merged PRs in 30d
Description
- **Chapter 4: Datastructures: Objects and Arrays**
Numbers, Booleans, and strings are the atoms that data structures are built from. Many types of information require more than one atom. *Objects* allow us to group values – including other objects – to build more complex structures.
JavaScript provides a data type specifically for storing sequences of values. It is called an *array* and is written as a list of values between square brackets, separated by commas.
```
let listOfNumbers = [2, 3, 5, 7, 11];
console.log(listOfNumbers[2]);
// -> 5
console.log(listOfNumbers[0]);
// -> 2
console.log(listOfNumbers[2 - 1]);
// -> 3
```
The notation for getting at the elements inside an array also uses square brackets. A pair of square brackets immediately after an expression, with another expression inside of them, will look up the element in the left-hand expression that corresponds to the *index* given by the expression in the brackets.
The first index of an array is zero, not one. So the first element is retrieved with `listOfNumbers[0]`.
The two main ways to access properties in JavaScript are with a dot and with square brackets. When using a dot, the word after the dot is the literal name of the property. When using square brackets, the expression between the brackets is *evaluated* to get the property name.
Properties that contain functions are generally called *methods* of the value they belong to, as in "`toUpperCase` is a method of a string". The `push` method adds values to the end of an array, and the `pop` method does the opposite, removing the last value in the array and returning it.
Values of the type *object* are arbitrary collections of properties. One way to create an object is by using braces as an expression. Braces have *two* meanings in JavaScript. At the start of a statement, they start a block of statements. In any other position, they describe an object. It is rarely useful to start a statement with an object in braces, so the ambiguity between these two is not much of a problem. Reading a property that doesn't exist will give you the value `undefined`.
You can assign a value to a property expression with the `=` operator. The `delete` operator cuts off a tentacle from such an octopus. It is a unary operator that, when applied to an object property, will remove the named property from the object. The binary `in` operator, when applied to a string and an object, tells you whether that object has a property with that name.
To find out what properties an object has, you can use the `Object.keys` function. With the `Object.assign` function you can copie all properties from one object into another.
Types of values, such as numbers, strings, and Booleans, are all immutable - it is impossible to change values of those types. Objects work differently. You *can* change their properties, causing a single object value to have different content at different times.
Correlation is a measure of dependence between statistical variables. Zero correlation means the variables are not related. A correlation of one indicates that the two are perfectly related - if you know one, you also know the other. Negative one also means that the variables are perfectly related but that they are opposites - when one is true, the other is false. With a *loop* you can run a counter over the length of an array and pick out each element in turn.
- **Chapter 13: Javascript and the browser**
A computer can use the *Internet* to shoot bits at another computer. The meaning of any given sequence of bits depends entirely on the kind of thing that it is trying to express and on the encoding mechanism used.
A *network protocol* describes a style of communication over a network. There are protocols for sending email, for fetching email, for sharing files, and even for controlling computers that happen to be infected by malicious software.
The *Hypertext Transfer Protocol (HTTP)* is a protocol for retrieving named resources (chunks of information, such as web pages or pictures).
The *Transmission Control Protocol (TCP)* is a protocol that adressess the problem of ensuring HTTP treats the network as a streamlike device into which you can put bits and have them arrive at the correct destination in the correct order. A TCP connection works as follows: one computer must be waiting, or listening, for other computers to start talking to it. To be able to listen for different kinds of communication at the same time on a single machine, each listener has a number (called a *port*) associated with it.
Te listening computer is called the *server*, and the connecting computer is called the *client*.
The *World Wide Web* is a set of protocols and formats that allow us to visit web pages in a browser. Each document on the Web is named by a *Uniform Resource Locator (URL)*. Machines connected to the Internet get an *IP address*, which is a number that can be used to send messages to that machine.
HTML, which stands for *Hypertext Markup Language*, is the document format used for web pages. An HTML document contains text, as wel as *tags* that give structure to the text. The tags wrapped in angle brackets (< and >, the symbols for *less than* and *greater than*), provide information about the structure of the document.
The most important HTML tag is ``. This tag allows us to include a piece of JavaScript in a document. A script tag must be closed with ``, even if it refers to a script file and doesn't contain any code.
Running programs downloaded from the Internet is potentially dangerous. Isolationg a programming environment is called *sandboxing*, the idea being that the program is harmlssly playing in a sandbox. The hard part of sandboxing is allowing the programs enough room to be useful yet at the same time restricting them from doing anything dangerous.
In the early stages of the Web at any point where a single browser was dominant, that browser's vendor would feel entitled to unilaterally invent new features for the Web. This was the dark age of compatibility, often called the *browser wars*.
- **Chapter 14: The Document Object Model**
You can imagine an HTML document as a nested set of boxes. Tags such as `` and `` enclose other tags, which in turn contain other tags or text. The data structure the browser uses to represent the document is called the *Document Object Model (DOM)*.
We call a data structure a *tree* when it has a branching structure, has no cycles, and has a single, well-defined *root*. Trees are structures where each *node* may refer to other nodes, *children*, which in turn may have their own children. This shape is typical of nested structures where elements can contain subelements that are similar to themselves.
Using cryptic numeric codes to represent node types is not a very JavaScript-like thing to do. The reason for this is that the DOM wasn't designed for just JavaScript. Rather, it tries to be a language-neutral interface that can be used in other systems as well - not just for HTML but also for XML, which is a generic data format with an HTML-like syntax.
DOM nodes contain a wealth of links to other nearby nodes. JavaScript also gives you access to a number of additional convenience links. The `firstChild` and `lastChild` properties point to the first and last child elements or have the value `null` for nodes without children. Similarly, `previousSibling` and `nextSibling` point to adjacent nodes, which are nodes with the same parent that appear immediately before or after the node itself.
All element nodes have a `getElementsByTagName` method, which collects all elements with the given tag name that are descendants (direct or indirect children) of that node and returns them as an array-like object. To find a specific *single* node, you can give it an `id` attribute and use `document.getElementById` instead. A third, similar method is `getElementsByClassName`, which, like `getElementsByTagName`, searches through the contents of an element node and retrieves all elements that have the given string in their `class` attribute.
Almost everything about the DOM data structure can be changed. Nodes have a `remove` method to remove them from their current parent node. To add a child node to an element node, we can use `appendChild`, which puts it at the end of the list of children. or `inserBefore`, which inserts the node given as the first argument before the node given as the second argument. The replaceChild method is used to replace a child node with another one. `ReplaceChild` and `insertBefore` expect the *new* node as their first argument.
Text nodes are created with the `document.createTextNode` method. Given a string `createTextNode` gives us a text node that we can insert into the document to make it show up on the screen. To create element nodes, you can use the `document.createElement` method. This method takes a tag name and returns a new empty node of the given type.
The styling system for HTML is called CSS, for *Cascading Style Sheets*. A *style sheet* is a set of rules for how to style elements in a document. It can be given inside a `` tag. The *cascading* in the name refers to the fact that multiple such rules are combined to produce the final style for an element.
Contributor guide
No contributing guide indexed for this repository
Research direction
The issue body contains summaries for Chapters 4, 13, and 14, but it does not name a source file or specify the requested edits. First locate where the Week 1 chapter summaries are stored and confirm the expected scope with the maintainers. Done should mean the intended chapter summaries are complete and accurate in that source.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, html, javascript
- Domain
- content, documentation
- Issue type
- Documentation
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 30/100