JavaScript Fundamentals

Who is she?

I had previously described HTML and CSS as a symbiotic couple who appreciate each others' skills and use their different passions and abilities to work together. So, how does JavaScript fit into the picture?

Let's imagine HTML and CSS are this couple.

'HTML' is the practical, organised one who likes to collect facts and make informed decisions.
'CSS' is the dreamy, creative one, who brings warmth, colour, and magic wherever they go.

'JavaScript' is like the master document of all the things they have learned about each other over the years, which informs how they interact. 'HTML' and 'CSS' operate differently, and over the course of their relationship they have learned patterns and actions that help them to understand and support each other.

If 'CSS' runs out of oat milk, 'JavaScript' tells 'HTML' they should get some on their way home. If 'HTML' is anxious, 'JavaScript' tells 'CSS' to put on their favourite show to comfort them.

JavaScript contains the actions they take to make their relationship work so well.

Control Flow and Loops

Control flow is just, how your computer executes code, and in what order. By default, this happens line by line, from top to bottom but some statements can alter the control flow, such as loops, conditionals and functions.

Loops and other conditionals work similarly in code to the logic we apply to behaviours in our everyday lives.

For example, when we drive a car we factor in many conditions that inform our behaviour.

While the light is green, drive forward.
If the light is red, stop.
If a person or obstacle gets in your path, stop.
While the gas tank is more the 1/4 full, continue driving,
Otherwise, navigate to a gas station

We use these same sorts of statements or conditions in our code.

Control flow needs to be considered so that conditionals are executed in the correct order, including which statements take precedent over others.

For example, if the light is green but there is a pedestrian in our path, we will still stop.

What is the DOM?

The Document Object Model or DOM is an interface which represents the components of a site. We use the DOM to view, alter, or add to the site's code, the HTML (the content) CSS (the styling) and JavaScript (the interactive components), as well as how they communicate with each other.

Arrays and Objects

Arrays are used to store a list of items in a single variable. For example, if you wanted to list the ingredients in a sandwich, you could store them in an array like this

This list is ordered, meaning we can access an item using its index, or position, within the list. To access a specific ingredient in this array you can do so by referencing its index in [square brackets] (Indexes in arrays start at 0)

Objects, however, are used to store a list of properties and values.

If the sandwich is an object, it can have specific properties like the type of bread, type of sauces, whether or not it is toasted etc.

Storing the ingredients of our sandwich in an object might look like this:

It is important to note that, unlike arrays, objects are not ordered, so we cannot access their information using indexes.

Instead we use the properties or “keys” to access their values.
In the above example, 'bread', 'vegetables', and 'protein' are the keys.
They store the values “sour dough”, [“lettuce”, “tomato”], and “tempeh”, respectively.

If we want to know what kind of bread we need for the sandwich, we use the object name followed by the key.

Functions

Functions store a set of instructions. They are useful if you want the same lines of code to be executed multiples times or in different contexts.

For example, if you wanted to make a program that converts centimetres to inches, you might use a function like this:

The function takes in “cm” as the parameter, meaning it can execute this code on any given number of cm, and return its length in inches.
inInches(50) would return 19.7
inInches(1234) would return 485.8

Functions allow us to parse different information through this same process as many times as we want.