Jesse Caunter
Web Developer

JavaScript Fundamentals

Differences between HTML and CSS

CSS is to HTML as clothes are to a person.

Let's examine the relationship between clothing and people. Clothes are designed to be worn by people, and generally have the shape of a person in mind when they're made. For example, a t-shirt will have a hole for the head to fit through, one for each arm, and the main opening where our body fits. Besides keeping us warm and protecting our modesty, clothes allow us to express ourselves through our choices of colour, style, fit, and other such properties.

Now how do HTML and CSS fit this analogy? Well, HTML is the basic structure of a page - the person before they get dressed. HTML tells us things such as the page's heaing, how many paragraphs of text are in each section, and the content of that text. It's all structure with minimal style. Then we have CSS which adds layers of style over the top of the HTML. It's the clothing that's worn by the person - perhaps a bright red jacket and green shoes. Similarly, if we wanted to we could use CSS to make the main heading element of our page bright red, and then give the last paragraph a green background. We can use CSS to change the height or width of an element, or even to make pictures - the possibilities are endless. It's all about conveying a particular style or identity... just watch the red jacket and green shoes combo.

Control Flow and Loops

Control flow is the order in which our code will execute from start to finish, from the first line to the last. This is usually not a linear journey and there are many factors that affect a program/script's path through the code. These include structures such as if/else statements, functions, and loops.

Loops are a great example of a structure that affects control flow. Let's say we want to run a particular part of our code multiple times - we could copy and paste that code right? Well what if we want it to run 40,000 times? Having the same block of code repeated this many times seems absurd, plus it violates the "DRY rule" (Don't Repeat Yourself). This is where loops are our friend. We can write a loop which executes a particular section of code 'n' amount of times. And the great part is, we don't even need to know how many times that is up front - it could depend on some dynamic value such as user input.

An example of control flow and loops in everyday life might be walking to work - let's say we are writing code for this. We have a starting point of home (the first line of code), and an end-point of work (the last line of code). We may have an if/else statement in there - if it's raining, take the more sheltered route, otherwise (else) take the most efficient route. If it's raining, we may also need to grab a raincoat and/or umbrella. If it's sunny we may need to grab a hat. Then we need to program our steps - left, right, left (or vice versa). But how many steps is it going to take? Well that depends on factors like which route we walk and whether there are any obstacles in the way. This is where a loop would be ideal, telling us to keep taking steps until we're at work. So depending on various factors, our journey (control flow) has the potential to look very different.

What is the DOM?

The Document Object Model (or DOM for short), is an interface that allows programs to interact with the structure, content and style of a page. The way it does this is by converting the HTML document into a tree of nodes or objects which can then be accessed via the programming/scripting language.

We can interact with the DOM through the console found inside Chrome DevTools, or via code in our program. One example could be a line of script in your JS file which runs when a page loads, making a welcome message alert pop up in the browser.

Accessing Data from Arrays vs. Objects

The way we access data from arrays and objects is quite different. An array is a collection of data elements, with each element accessed using an index which corresponds to its position in the array. The indexes begin at 0 and increase in sequential order. Let's say we have an array of strings representing a friend group:

var friends = ["Jamal", "Will", "Mike"]

If we want to access the first name in the array, we would use the array name immediately followed by the first index number in square brackets. Like so:

friends[0] // "Jamal"

If we wanted to access the last name in the array, we would use:

friends[2] // "Mike"

Or because the array starts at 0, the last element will always be array.length - 1

Objects on the other hand, are made up of name:value pairs called properties. Instead of using an index number to access data, you use the name of the property. This means that you don't need to know the property's position in the object. Here's an example of an object:

            
            var person = {
                'firstName': 'Jesse',
                'lastName': 'Caunter',
                'age': 30
            }
            

If you wanted to access the lastName property value in the above example, you could use either:

person.lastName; // dot notation

or

person["lastName"]; // bracket notation

Functions and Why They're Useful

Functions are typically small reusable pieces of code that perform a specific task. They are useful because we can call them whenever we need to, without the need for duplicating the code. They make testing and debugging easier as code is separated into smaller more manageable chunks. Functions also make code easier to understand, especially if we didn't write it ourselves. We should be able to look at a funtion and quickly ascertain what it does, without needing to know exactly how it works.