Javascript & its relationship to HTML/CSS

Write an analogy to describe JS and its relationship to HTML/CSS

The human body.

It's strikingly scary how similar computers are to humans, for example the relationship between Javasript (JS), HTML and CSS.

Think of HTML as the bones. It is the literal skeleton that everything else is built upon. HTML is the content and structure of your webpage. Think of the headers, paragraphs, footer, and so on so forth.

CSS is all to do with appearance. It then adds muscle, skin, eye colour, hair, you name it. Want a part of the page to look a certain way? CSS is there to help. You can see this by looking at a page, ooh, that font colour is nice, so is the background and placement, that is all thanks to CSS.

Last but not least, JS is what makes your page responsive. It is the movement of the body, the functions and commands - kind of like the brains whereas the CSS is the brawn. JS controls what happens when something is triggered, for example if you were to click a button, you could use JS to make that button turn a different colour once it has been clicked.

Explain control flow and loops

Control flow: is a JS term for the order the code is run, from top to bottom. It's like following a recipe. You read it from top to bottom and follow the steps (and if not, your cake turns to custard! Literally.)
Loops: are a way to repeat code for as many times as you so desire. This is extremely helpful for when you have a repetitive task, for example writing down a count down "1, 2, 3, blast-off!" for each line.

The DOM

What is it? DOM is short for "Document Object Model". It is a handy tool to access a web page and view the make-up of a document.
How would you interact with it? Anybody can use the DOM to view, identify and update content of a website. It's a helpful tool to play around with the changes you might want to make to your website before committing these to your local save file. Another way the DOM is helpful is for testing purposes to see if something actually works. JS is then used to access specific parts identified by the DOM, for example this may be a class or ID. Each part can then be changed to be more interactive, depending what you assign to it.

Arrays vs Objects

Arrays store data. It can be used to create tables and each "element" in it is commonly seen as being referred to as "i". The key difference between and array and an object is that the information in an array is accessed through its indices. Each item in an array is given a so called "number" or "placement", in otherwords an "index". See the diagram below. To access the value 11, you would do this through index [1].

Objects also store information. However, this information is accessed through something called a "key-value" pairing.

Functions

Functions are a handy tool that lets you break out of the control flow cycle. If your code refers to a function, instead of continuing to run, it will jump straight to the function code and it will then run what the function tells your code to do.

A classic example of a function, is when it takes an input and returns an output according to the function. In our example above, it creates a statement that is customised to how many organges and apples one has. Here, our apple juice is made up of 5 apples and 0 oranges and our apple aorange juice has 2 apples and 4 oranges. You can see that the console then performs the function of telling us what the juice is made up of.