JS Fundamentals Blog Post

What is JS, and how does it relate to HTML and CSS?

HTML is the the content on a page, so if we take an A4 paper, the HTML would be the literal words on the page. There are a couple additional things that could be noted about HTML but we dont need those to understand its relationship to JS.

CSS is the styling, so with that same A4 page example, it would be the colour of the paper, the font chosen, colour of the text, the space between the paragraphs, size of the text, anything you could imagine in terms of how the paper and what is on it looks (that isnt the actual content of what is written there).

JS is the functionality or interactivity, so flipping the page over, folding it in half, turning it into a paper airplane or if you think of that same A4 page but now it is an iPad. You can click on things to change them and interact with the page, that is what JS brings to the web.

Control flow and Loops.

Control flow is rather simple, it is the order in which code runs. It starts at the top and then as it encounters different types of code it'll change that top down flow.

So if you were going to the shop to buy groceries the control flow would look like leaving your house and arriving at the store buying your groceries leaving the store and then arriving home again. Well, not so simple. What if your car needs gas, Or if theres a detour or you need to grab your grocery bags and put them in the car?

These events would interrupt your control flow where applicable, not every day you need to go out of your way to fill up with gas, but on the days that you do, this will interrupt your trip to the store!

No big deal, but what about walking up and down each isle in the grocery store? Much like loops which will stop your control flow to loop over information before continuing. You would then stop at this task, and continue down each isle until done.

What is the DOM and how do we interact with it?

The 'DOM' or Document Object Model, not as intimidating or as mystical as it seems. I actually think this is so simple that people overcomplicate it in their heads.

The DOM is just the page (or document) so we can manipulate the structure, style and content (or objects) with programming languages, in this case JS.

What is the difference between how we access data from arrays and objects?

Objects are stored in 'key: value' pairs, for example if we had an object:

const cat = {
                  name: 'Suse',
                  colour: 'white',
                  numberOfLegs: 4,
                  goodBoy: true
                }

One would access `name` with something like console.log(cat.name) which would return the string 'Suse'.

Arrays are stored and accessed with their index. It is worth noting that array values start at '0'. Lets consider this array:

const susesFriends = ['Oscar', 'Hobbes', 'Caligo']

You could access the string 'Hobbes' with console.log(susesFriends[1]). Dont forget they start at 0!

What are functions and why are they helpful?

Functions are processes, or little 'factories' that perform tasks. Looking back at our grocery store example. Filling your car up with gas would be a function that only triggers when the cars fuel light comes on.

Im sure you could see why this is useful as you would run out of gas without our handy dandy filling car up with gas function. Or find all of our grocery store items with our check isles loop!

Functions are why anything is possible with enough time and money!