HTML, CSS, and JavaScript
HTML, CSS, and JavaScript are the three languages that make a webpage come to life. I like to use movies and filmmaking as an analogy whenever possible, so let’s think of a webpage as a film.
HTML is like the raw footage after a day of filming. The story, plot, characters, and dialogue are all in there. Without this footage, there would be no film, but we can’t present the footage as it is, not if we want the viewers to have a compelling experience anyway. So, editing comes next.
CSS is the editing process. It turns all the raw footage into something presentable with more structure and style. We make decisions on the length and order of scenes. We also use editing tools to manipulate the look and sound of the film.
JavaScript is the interactive element, so we can think of it as the final presentation of the film. Will it be shown in a fancy cinema with soft seating, 3D glasses, and popcorn? Maybe the ticket will include a cold beverage? There could be a special Q&A after the movie. Maybe it’s an educational video that only gets seen in dark lecture rooms where the viewers are half asleep. Or will it be released on DVD with lots of special features? Perhaps it’ll go straight to streaming so viewers have the choice to watch it in segments and bathroom breaks. All these things will impact the viewers’ overall experience with the film.
Control Flow, Loops, & Functions
Control Flow is the default order in which code gets processed. Left to right, top to bottom, unless we give it further instructions. We can think of it as the order in which we get ready to stream a movie at home:
Loop on the other hand is a repeated set of tasks until a condition is met. In this case, it’s step number 3. We scroll through the streaming platform page by page, over and over, repeating this process, until we finally reach a movie we want to watch and stop the looping process. Sometimes we’re looping for so long, we end up feeling tired and just go to bed without watching a movie at all. This would be another change in the Control Flow, although a sad one.
Function is a set of instructions to perform a certain task. Once a function is created, you can rely on the function to do the same task it has been assigned again and again when you call on it. We can think of setting up our Smart TV as creating a function. We have to take the TV out of the box, plug it in, turn it on at the wall, click the ON button, connect it to Wifi by entering our login details etc. It’s a long process. But once that’s all been set, we can simply call on this function whenever we want to turn on the TV. We just need to click the ON button without having to repeat all the other parts of this process. So, clicking the ON button can be thought of as calling the function.
Arrays vs. Objects
Arrays and Objects are both collections of data, but they’re very different. Think of Arrays as the channels you’re able to receive on your TV. The way to access them is to press the number keys on your remote control. It always starts from 0 which takes some getting used to. So we can assign 0 to Prime TV, then 1 for TV ONE, 2 for TV2, 3 for TV 3, 4 for Four, 5 for Maori TV and so on. When you want to access a particular channel, you have to press the number that’s been assigned to it. The channels I get on my TV would be one set of arrays, and the ones on your TV would be another set of arrays. The numbers and the channels assigned to them can be completely different. Maybe you have to press 9 for TV ONE, that’s up to you.
Objects on the other hand are a list of information about one thing. This list of information doesn’t have to be in a particular order, but they always come in a pair known as key-value pair. So we can think of the remote control itself as an object with the following key-value pairs of information:
The DOM
The Document Object Model or DOM is an interface that allows developers to interact with a website. Every website has one. I don’t really have a film-related analogy to describe the DOM, so I’ll just be straightforward about it. Anyone who knows a bit about coding can interact with it to see immediate changes on the webpage, from changing font or image properties to replacing or deleting them entirely. This change however is not permanent and is only visible to the user at the time. Everything will return to its original state once you refresh the page.