Using Frakenstein’s monster as an analogy for the relationship between HTML, CSS and Javascript, we can think of HTML as the body itself, the CSS as the stitching between the limbs, the haircut and whatever it is Franky did to get the skin such a wonderful shade of green… and Javascript? That’s the electric shock. “It’s… aliiiiiiiiiive!”

HTML provides the content of our site, like the words, buttons and images. CSS customises the styling to color, size and position our content. Javascript is used to make our website more interactive than just clickable URL links.

Like CSS, our Javascript could be included in HTML (in Javascripts case, by opening a 'script' tag), but it is better to organise things so that our script is in a separate file and a link to that file from the Html file is created.

Conditionals and Loops: The least motivated, yet most reliable employee of all time.

Programmatic code, like Javascript, can be thought of as an employee who is unmotivated and will never do anything of their own accord, but miraculously they will do everything they’re told, exactly as instructed, and they’ll do it really fast.

If our employee was at a workshop where delivery trucks dropped off logs and we wanted the employee to chop the logs into firewood, we could instruct them as follows:

Watch to see if a delivery is made.

IF there are now logs at the dropoff point…

FOR every log at the dropoff point, chop a log into firewood.

In code, we would use an IF statement to run a specific piece of code, only if certain criteria are met. In this case, if there are logs at the dropoff point, then we are going to do something. This is an example of a CONDITIONAL.

When doing a repetitive task, like when our employee chops the wood, we can use a LOOP which is a piece of code that runs multiple times. We can get it to run a predetermined amount of times, or a number of times based on a number in our program. In this case, we’re looping as many times as there are logs to be chopped.

Check out the code below.

The DOM or Document Object Model

The DOM or Document Object Model gives us a representation of our HTML file as it is loaded in a user's browser. Our javascript code uses the DOM to check what is displayed on the html page and to describe and render changes to the page.

You may have noticed the word ‘document’ used in the codepen above, near the top when the delivery is made and the code reads the user input value from the page, and near the end of the code when we render inlogsAtDropOff and cutFirewood onto the page.

Accessing Arrays & Objects

Accessing data within arrays and accessing data within objects requires slightly different syntax.

We access items in an array by specifying the index of the desired item. Arrays are zero-indexed so the first item in an array sits at index of zero.

We access objects using a ‘.’ to drill down into the object, like ‘/’ in the address bar of windows explorer.

What are functions and why are they helpful?

Functions are blocks of code we can call from elsewhere in our solution, when needed. We can also supply that function with information (or ‘arguments’) from elsewhere in our solution, through what are known as parameters.

In our example below, we have a function ‘scoreMultiplier’ which can be used to multiply a player's score by a set number. We call the function twice. The first time we multiply Player One’s score by the multiplier, the second time we multiply Player Two’s score by the multiplier.