Javascript Fundamentals

JavaScript and its relationship to HTML and CSS

An analogy to understand Javascript and its relationship to HTML and CSS is that of a cake.

Cake analogy HTML CSS JS

Source: Shopify

To make a cake, you need to start with a foundation and structure, the recipe and the cake itself. This is similar to HTML.

We can make the cake look amazing by creating a theme and decorating it with icing, sprinkles, chocolate. These style elements are added by CSS.

Finally, we have the toppings and interactivity. A set of candles or ‘exploding’ centre of lollies can change the function of a cake, from an everyday dessert to a birthday or celebration cake. We can change the functionality of our site or app with JavaScript.

The cake baker & decorator role is played by the browser, which must interpret all the code for the recipe, baking, decorating, lighting the candles or exploding the centre when the cake is cut.

Cake analogy HTML CSS JS

Source: Rainbow Explosion Cake

Control flow and loops

Control flow in JavaScript means that the computer reads code from top to bottom. It starts from the first line and ends at the last line, unless it comes across something like loops, conditionals, or functions which it will need to execute as instructed.

I could compare this to how dance notes are written out, showing the choreography alongside the counts of the music. The dance is described ‘from the top’, with the beginning the music and the dance steps describe in order. Sometimes to make the notes concise and tidy, they will say something like 'repeat on the left’, or give an if/else variation in a step for a male or female dancer.

Loops are used in JavaScript to perform repeated tasks based on a condition.

A loop will continue running until the defined condition returns false.

An everyday example might be something like a person binge-watching netflix. As long as there are episodes in the series, the person will click on to the next episode and stay on the couch watching. But when the condition is false (no more episodes to play) the loop is broken and the person will get up.

What is the DOM?

Making a website interactive is possible thanks to the Document Object Model (DOM), usually referred to as the DOM.

The DOM is a representation of the web page that gets loaded into the browser.

It’s a “family tree”-like format and gives you access to each thing that is on your webpage.

You can then use Javascript to edit these items or make them interactive, e.g. if you click on a specific button, you could make it turn a different colour, or have it trigger a function.

Arrays and Objects

You can access an array item by specifying its index number. NB: The first item of an array is indexed as 0, the second as 1, etc.

            
              Let flavours = [‘Vanilla, 'Caramel', ‘Hazelnut];
              

              flavours[0]; Vanilla

Objects are one of the data types in JavaScript. They allow you to store data in ‘key-value pairs’. Those “keys” in those pairs are also called properties.

To access a value from an object, you can use ‘dot notation’:

  1. First, you specify an object.
  2. Second, you specify the name of the property.
  3. Between the object and property name goes a dot (.)
          
            let person = { 

              name: 'John',

              age: 20 
    
            };
 
            console.log(person.age);

The output will be the value. In this case, 20.

Functions and why they are helpful

A function is like a little machine. Ingredients (inputs) go in, some kind of process happens inside the machine; output comes out.

It’s useful because once you have built the machine, you can name it and use it anytime you want.

Return to homepage