HTML and CSS

HTML is like the chassis (frame) of a car. It has a structure, and different parts have different functionalities, but it's not exactly comfortable or easy to use.

In contrast, CSS is like the seat padding, the glossy wax finish, and all the bits and bobs that, while not strictly necessary for use, make the ride a lot more comfortable!

(In this analogy, JavaScript would be like the ability to unlock the car, to turn on the GPS and stereo, and to actually drive away!)

Control flow and loops

The 'control flow' of a program is the sequence of actions that are taken, and in which order. JavaScript programs run from top to bottom (with a couple of exceptions), but along the way they may take 'side paths' to carry out a subsequence before returning to the main flow.

For example, if you describe the process of making a peanut butter sandwich, it looks pretty linear, right?

1. Get two pieces of bread
2. Get some peanut butter
3. Put the peanut butter on one slice of bread
4. Press the two pieces of bread together

But not so fast! What if you're out of bread or peanut butter? Then you'd have to give up, or use a substitute. The main control flow is still the same, but let's add some conditional statements and loops in there:

1. Get two pieces of bread
1. If there is less than one bread slice, abandon your sandwich
2. Get some peanut butter
1. If there is no peanut butter, use jam
2. Or if there is no jam, use honey
3. Otherwise abandon your sandwich
3. Put the spread on one slice of bread
1. Start from one corner of the bread
2. While the bread is not covered in spread, keep going
4. Press the two pieces of bread together

That looks a whole lot more complicated - but the overarching control structure is still the same. It's just that each part of that overarching structure may have sub-parts, or need to 'jump around' the control flow.

DOM interaction

The 'DOM' stands for the 'Document Object Model'. This is a model of all the HTML objects in a page that the browser builds when the page is first loaded. It is a hierarchical structure, and shows how each element relates to one another.

The DOM is an interface, and its purpose is to allow programming languages (such as JavaScript) to access the page content in a way they understand. It allows us to access, change, add and remove HTML elements on a page.

For example, we might use the command let h1 = document.querySelector('h1') to get the first h1 header link and assign it to the variable 'h1', then h1.classList.add('extraBold') to give it the class 'extraBold'. In this way we can dynamically change the HTML of the page, and if we've styled this class in our CSS, the header font will become bold.

Accessing data from arrays vs. objects

An array is an ordered series of values, each of which has an index. The indices begin at 0 and end at the length of the list minus one. In contrast, an object is an unordered collection of 'key-value pairs' (pairings between titles, or 'keys', and data, or 'values').

Array contents can be accessed by giving the index value to look for in square brackets. For example, if you had the array foo = ["Dev Academy", "Item2", "Item3"], you could access the value "Item2" by writing foo[1].

Object contents can be accessed either through dot notation or bracket notation. For example, if you had the object 'Customer' that looked like this: Customer { cash: 0, name: "A. Customer", attitude: belligerent }, you could use the code customer.cash or customer[cash] to retrieve the value '0'. However, to get the name of the customer you would have to use bracket notation, as the value 'A. Customer' contains multiple words.

Functions

Functions are a way of allowing us to 'reuse' code, so we don't have to write the same code over and over again with different hard-coded values. For example, say you wanted to print every number from 1 to 100. You could waste a lot of time writing code that looks like this...

console.log(1)
console.log(2)
console.log(3)
...and so on for another 97 lines...
But why would you? It will make your code more reliable, easier to update, and far more readable to use a function instead. It will also save you a lot of manual typing! So instead, you could just write this function: function printNumbers() {
for (let i = 1; i <= 100; i++) {
console.log(i) }
}

Now, whenever you call printNumbers, you'll get the result you intended - and you can do it from anywhere in the control flow, as many times as you'd like.