It may be a bit of a rogue analogy, but I like to think of HTML and CSS in terms of animals – in particular, a horse and a zebra.
A horse, for the most part, is a standard, muted colour and has a solid body, but isn’t necessarily anything to write home about in terms of style and flamboyancy.
Whereas, a zebra has pretty much the same body as a horse, i.e. the same structure, but it has magnificent stripes that clearly sets it apart from a horse. Like someone has taken the body of a horse and painted it to add some style to it.
This analogy only really works if a horse were to morph into a zebra, but it’s how I like to think about HTML and CSS.
The control flow refers to the order in which a computer executes the statements you have written in a JavaScript file. This can be likened to you writing a to-do list and completing each task in the order that they are written on the list.
To understand loops, you could think of a JavaScript file as a dishwasher. Once you set the dishwasher to wash the dishes, it will carry on executing the loop of ‘wash the dirty dishes for one minute’ until the dishes are clean when the timer stops. You can ‘break’ the loop by stopping the dishwasher and adding another item, then starting the cycle again will let the loop carry on going.
The DOM (Document Object Model) can be thought of as the glue that holds HTML, CSS and JavaScript together. The DOM is an object-orientated representation of the HTML web page, and as JavaScript is an object-orientated programming language, we can use JS to interact with the DOM in order to modify the HTML.
In other words, the content of the web page is stored in the DOM, and this content can be accessed and manipulated through the use of JavaScript.
Arrays and objects are both ways of organising and storing data in JavaScript. A comparison to help you understand them is thinking of arrays as being structured similar to a book, and objects being structured similar to a newspaper.
Arrays are best to use when the order of the information is important, such as the chapters of a book. It would be a bit weird if you were reading a fiction book and decided to skip every other chapter and still expect to understand the full story, wouldn’t it? The contents page shows you the order in which you should read the book, just as an array is used for information that needs to be ordered.
Objects, on the other hand, are best to use when you require your data to be organised by a certain type or heading. In a newspaper, you wouldn’t necessarily read every article and in order, rather, you would likely flick through the newspaper to find the section you are interest in, such as ‘Sports’ or ‘Business’. Under each heading, you will then find the relevant information you are looking for, but it doesn’t matter what order the headings and text appear in and what order you read them in.
Functions are sets of statements that perform tasks or calculates a value and they are the fundamental building blocks of Javascript. In order for a function to, well, function, you must declare it, then call it.
Functions are statements that contain actions, and these actions are performed every time the function is called. So, if you had a function called ‘wake up’ that described and declared the actions you take after waking up in the morning, this function would probably contain ‘get out of bed’, ‘have a shower’ and ‘get dressed’. Therefore, each time you do or call the function ‘wake up’, those three actions will be executed.