JS Fundamentals

An analogy to describe JavaScript and its relationship to HTML and CSS

HTML describes the structure of the webpage. It is the bare bones of the page. CSS is used for the appearance of the page and can be used to style it. JavaScript is how we interact with everything on our webpage!

Here’s an analogy to help you better understand this. HTML is like the structure of a house. When a house is built, the builder lays down the foundation to make sure it’s structured properly and safe. It is essential that the foundation is solid so we can live in the house. A house would be boring and not attract as many buyers if there was nothing inside of it. This is where CSS comes in. In this example, it can be represented by an Interior Designer. They will put furniture and paintings inside to make sure the house looks nice and to increase the potential of someone buying the house. Lastly, JavaScript is the electrics of the house. A house wouldn’t be great to live in, without electricity right! This is where the wiring of the house comes in and in turn provides power. Once the electricals have been set up, we can turn lights on and use the stove top to cook food. In relation to web design, JavaScript is how we interact with everything, essentially providing a function.

Explain control flow and loops using an example process from everyday life

Control flow is how a computer runs code from top to bottom (line by line). Sometimes when coding, we don’t want to run code this way – this is where Control Flow comes in. It allows our program to make decisions about what code will be executed and when it will be executed.

In JavaScript, Conditional Statements are checks to see if a condition is either true or false. If the condition is true then run code x, if it’s false, then run code y.

Loops are a set of instructions that are continually repeated until a certain condition has been achieved. They help us perform repetitive tasks. An example of this in everyday life, is doing a repetition of an exercise at the gym. Take for example, doing a bicep curl. Firstly, you would hold a dumbbell in one hand. Next, you slowly curl the dumbbell towards you by bending your elbow, keeping your elbow close to your body. Lastly, you lower the dumbbell to the starting position. You can repeat this task several times – for instance you might want to do this 5 times. A loop saves us the hassle of doing this. It does the difficult part of the work. For example in this case, if we wanted to do bicep curls 5 times, we would input this as a loop and tell the computer to stop doing the loop once it has been completed 5 times.

Describe what the DOM is and an example of how you might interact with it.

The Document Object Model, or more simply known as The DOM, is an object representation of an HTML document. The Document is the file for instance an ‘HTML’ file. The Object is the tags and elements inside the HTML file. The Model is the layout or structure. The DOM is incredibly useful for web developers as we can access these HTML elements in the webpage and manipulate various elements. We access the DOM by using Google Chrome and going to 'Developer Tools.' If you right click on any webpage, then click 'Inspect', it will open Developer Tools. We can use JavaScript to interact with the DOM to see how our structure, content and style will look on the webpage when manipulated. For example, you may want to change the background colour of a webpage to see what it would like (ie changing the background and border colour of this webpage from pink to light blue). The DOM allows this without permanently changing it. It is essentially a preview of what our webpage will look like. The DOMs layout is a tree like structure of all the HTML elements on the web page. I’ve included a diagram below so you can visualize this.

Explain the difference between accessing data from arrays and objects

Objects and arrays are both containers in JavaScript which hold properties. Objects are used to represent a single item with unchanging characteristics. For example, we may want to create an object for a silver car, brand Toyota. The car has defined characteristics. These don't change.

We use arrays when we want to make and store a list of many items in a single variable. They are really helpful for counting items as they can be accessed by their numerical position in the list. We might want to create an array of 'Vacation wishlist' - in this array you can list different countries you wish to visit. Each of the countries have different properties.

Explain what functions are and why they are helpful

Functions are a set of statements that perform a task or calculate a value. Functions are useful in that we can use them to run certain tasks. An example of using a function would be 'pressing play' on your 'Liked Songs' playlist in spotify and it plays that playlist for you. Functions work much the same, we are telling the computer what to do, then calling it and expected the desired outcome.