HTML and CSS - an analogy

When thinking about building a website hopefully HTML and CSS come to mind. These two languages go hand-in-hand working together to build a website.

We can think of building a website like building a house. HTML can be thought of as the frame, roof, walls, and floor of the house. We plan out what the house will look like, where certain features (or elements) should be placed, what each room might contain and so on. All of that is done with HTML. It sets up the basic content and structure of a webpage.

However think of the most bland and uninteresting house you have ever seen. Everything is black, white or grey. That is where CSS comes in. We can select the roof, walls and so on and give it whatever colour we want or change the size of certain elements (amongst other things). That is CSS, it modifies the design and display of HTML elements.

As a bonus you might have heard of JavaScript? TLDR; in our analogy adding JavaScript would be like adding wiring to our house so now we can turn lights on, cook some food in the oven, turn the TV on etc. The house is now more interactive.

Control flow and loops

Understanding control flow is important because it is the order in which a programmer executes code. The control flow in JavaScript works like this: your programing code will execute code from top to bottom in an ordered way with only a few exceptions. One of the exceptions is when there is any condition or loop in the code that changes the control flow of a program.

To illustrate we can call on our protagonist, PINK, who you have met before . PINK has learned to drive a car and wants to drive from Auckland to Wellington. In a top to bottom normal flow PINK would just drive down without thinking about road rules. Thats not smart.

We need to control the flow of PINK with conditions and loops to interrupt this flow. We can, for example, specify PINK should do when at or approaching intersections with traffic lights. It might go like this:

That is better. Now PINK will check what colour the traffic light is and will decide what to do based on it. The second part of step four is an important loop for PINK to follow. If we never told PINK to go back to re-check the traffic light again PINK will remain there. Alone.

Arrays vs Objects - accessing data

Arrays and objects are frequently used in JavaScript so knowing how to access data from either is more important than knowing how to breath (ok, maybe not).

An array is an ordered collection of items and the items can be accessed by their numerical position. Though there's a catch: arrays use "zero-based indexing" meaning that the first item in an array is at position, or has an index, of 0 (for an explantion on why that is see this article.) To illustrate lets say you have an array of countries: let country = ["Cape Verde", "Djibouti", "Andorra"]. The first country, Cape Verde, can be accessed with: country[0]. Think of the square brackets like a hand grasping the items you want.

An object on the other hand represents something and is not numerically positioned. It could be anything that has a set of characteristics. Think of a car: it is a real object, and has properties that can be thought of as keys and values (in a JavaScript context). Lets create our car object const car = {colour: red, shape: sedan}. The "colour" is the key and "red" its value. Now to access the value of the colour key in the car object you can use either "dot notation" or "bracket notation". With dot notion it would look like this: car.colour; with bracket notation: car["colour"]. Either one returns the value of "red" from the key "colour".

The DOM

The DOM, or also known as the Document Object Model, sounds technical and intimidating but it can be understood by breaking it down. The DOM is an interface and lives in our browsers and it serves as a portal for programming languages, like JavaScript, to access your HTML code.

The DOM does this by reading your HTML, it takes that document and creates a model representation of the original which is now of a data type object.

And what can we do with objects? Hint: see the previous section. Thats right we can access certain properties and manipulate them using JavaScript...

Let's get to the fun part. As the HTML document is now an object, and the DOM interface allows us to access and change HTML elements, we can start with select Shape button below with: document.querySelector(".shape-btn"). Now that the button is selected we can add something called an "addEventLister" method. That will watch whenever you click on the button. When you do used some JavaScript code to change PINK shape whenever the button is clicked as an example.

Functions and their usefulness

Say you are in detention and you're required to write out: "I should do my homework." 1,000 times. Furthermore every fifth sentence needs to include "And do it well.". All of this has to be done on a computer, but the copy and paste features are disabled. It will get tedious and boring. But what if there was a way to do that automatically? Enter functions. Think of a function as a factory that can produce that same sentence as many times as required. The useful thing about this function factory is that it can be reused multiple times. The code can also be called upon whenever it is needed. Lets say instead of writing out 1,000 times you are required to write it out 10,000 times! No problem. The function can be made more dynamic by passing in the number of times it needs to run, when calling it, without modifying the code within the function factory manually each time.