Javascript & The Dom

HTML / CSS - What's the difference?

Let's start by giving them some human names. HTML can be Harriet, and CSS can be Cecelia.

Harriet and Cecelia have received a sizable inheritance from their grandmother and have decided to build two tiny homes, one for each of them.

The sisters have very different skill sets and plan to use this to their advantage. Harriet is methodical and focuses on the structure of things. One of her favourite sayings is “everything great begins with a great foundation”.

Cecelia, on the other hand, is all about the details. For her, the greatness doesn’t begin until after the foundation is complete. As she likes to say “a foundation is just a blank slate for us to create magic on top of!”.

Naturally, they have agreed for Harriet to be in charge of the building stage and for Cecelia to be in charge of the decorating. This seemed simple, to begin with. Harriet would work on the houses first and then Cecelia would take over.

They soon learned that they had to work alongside each other to ensure the building could work with the decor, and vice versa. The realisation came when Cecelia mentioned that she was going to look for some bookends that wouldn’t take up too much space and Harriet noticed that she hadn’t included space for a bookcase in either house. In fact, Harriet hadn’t even thought about bookcases.

They now had three options:

  • 1. Not have bookcases

  • 2. Not include space for a bookcase in the house plans, and then try to find a way to fit one in somewhere once they’re built. By forcing a bookcase into the houses, they run the risk of impacting other aspects of the house and pushing things out of place

  • 3. Adjust the plans so that both houses either have, or are able to fit, a bookcase

They agreed that it made the most sense to work together so the building plans and decor designs would be compatible and sat down to figure out exactly what things needed to be accounted for in the plans and in the decor.


What is the Control Flow?

Code is essentially a set of instructions for the computer to execute and control flow is the order the computer executes them in. To help explain, I will use laundry as an example. If you break this task down into its singular steps, it looks something like this:

A list of steps for doing laundry

Now, these steps are in the correct control flow, which works top-down. But, imagine if we did them in the order we thought about each thing.

If we checked the weather first, to plan how we would dry our clothes, then that would put it ‘first’ in the code. that might look something like:

A list of steps for doing laungry, but in the wrong order

All of the steps are there, but it’s not going to work because the steps are in the wrong order.

Now, I've added an extra step and if you look closer, you can see there is a loop inside a function. The function is to select which drying method to use, depending on the weather. If the weather is sunny, it loops through an array of laundry items (meaning it carries out the instruction on each item in a list).

A loop in the list of steps. If it is sunny then hang laundry outside. If not sunny, put laundry in the drier.

Control flow means that the steps with execute top down. It will complete everything in a step before moving on to the next. Step 8 will not be executed until step 7 is finished.

A brief guide to the DOM

The DOM (Document Object Model) is a tree-like representation of the web page that gets loaded into the browser. It represents the web page using a‌‌ series of objects. The main object is the document object, which in turn houses other objects which also house their own objects, and so on.

Another way to think about it is like a plant. Every part of the plant is coming from the same origin point. From there, it breaks off into stems, then more stems, and each stem has leaves along it. You can follow every individual leaf back down to where the plant starts.

Each element in the DOM is a node. In order to access an element, you have to consider where in sits within the tree. If you want to copy an element in another document, you will need to take it from the node where it starts. This can be compared to propagating a plant, in order to grow another plant. When taking a cutting, you should cut just below a node to ensure the new plant can grow.

Accessing data from arrays vs objects

Arrays: An item in a JavaScript array is accessed by referring to the index number of the item in square brackets, for example: arrayName[2].
Note: In coding, counting begins at 0 so the first value in an array will always have an index of 0 and arrayName[2] would access the third value in the array.

Objects: Accesing data from objects involves another level of nesting. An array is a list of values, whereas an object contains a list of 'keys' that have a value assigned to them: object-name = { key1: value1, key2: value2,...}.

Why are functions useful?

Functions allow you to define a block of code, give it a name and then call it as many times as you want, using a short line of code. Functions can be called within functions, and there are even predefined functions built-in to the language.