Taine Buchan Blog
The relationship between HTML, CSS and Javascript can be likened to a car. HTML is like the shell of the car. It has four doors, five windows, four wheels, an engine etc. It runs, but it's kinda like a stock Toyota Corolla from 2003 (my car), not flashy. What if we want to add some pizazz, maybe change the default styling to something eye catching? Great, CSS can do this job. By selecting the part we want to change, we can add styling. Suppose we want the doors painted with a purple gradient doors. with CSS we can select the door category (class) and update the styling (from CSS).
The car is ok but we need it to drive. This is where Javascript is powerful. It allows us to interact with objects and add functionality. If we need someone to drive it we need a person, that has a set of instructions. For example, unlock car, open door, turn car on. Now HTML and CSS nail the basics but like the default Toyota Corolla, it lacks flexibility. What if we wanted the car to say "howdy howdy" when we opened the car door. Great, with Javascript we can select the door class from HTML and add that functionality.
Control flow determines the order in which a program's code is executed. Some languages, like HTML and CSS, follow a top to bottom structure, much like reading a recipe step by step. However, in JavaScript, control flow can be more dynamic. For example, we can pass functions as arguments to other functions, allowing the program to check conditions or alter its behavior while running, similar to deciding whether to add extra chilly to a dish while you are cooking based on spice level preference. Even though JavaScript executes code top to bottom, the flow can be influenced by these function calls, allowing for more complex and flexible behavior.
A loop is like controlling the flow of a task by repeating it until a certain condition is met. Imagine you're driving the 2003 Toyota Corolla at Hampton Downs, counting each lap. You keep driving until you’ve completed 10 laps. As long as you haven’t reached 10 laps, you keep driving. Once you hit 10 laps, you stop. The loop ends because the exit condition is met.
The DOM represents the HTML structure and CSS styles as a hierarchy of objects. JavaScript uses this model to manipulate and update the HTML & CSS elements in the web document, adding interactive and functional changes.
Arrays are like lists. I like to think of them as baskets of information. Arrays are index based, meaning the value in an array is represented by numbers (0 - infinity🤔). Objects are slightly different in that they contain key, value pairs. These are like labels with information stored in them. Objects are different in that they can also store other types of data such as arrays or functions. We can find properties in objects using keys (a string) as opposed to arrays where values are indexed (by numbers).