Claire's Learning Blog

JS Fundamentals

HTML & CSS Analogy

Think of a clothing shop - HTML is like the building and the things inside that any normal clothing shop would have (e.g. a front desk to pay, shelves or racks, changing rooms and mirrors). CSS is what determines how the layout and interior of the shop looks (e.g. what colours/materials are used to decorate the store and the arrangement of how the clothing is displayed).

Control flow and Loops

The control flow is the order of how a piece of code is being executed and this is structured process. Loops on the other hand is a repeated set of tasks until a condition is met.
A good analogy for this is like baking a cake. The control flow is like the recipe you follow. Once your cake batter is in the oven, loop part comes in. The repeated task in this case is you checking to see if your cake has baked through. If it hasn’t you pop it back in and check it again later and repeat if necessary. Once the condition (it’s baked through) is met, you stop and the loop finishes.

The DOM

DOM (Document Object Model) is an application that we can access and use to interact with the code that makes up a webpage.
There are a number of ways we can use it to interact with a webpage. We can open the DOM and alter the code and add/delete or change the pictures and words. We can also change the styling of the page e.g. change the font colour or change the background colour. The great thing about using DOM is that your changes won’t affect the actual website because any changes made only alters the page the user is currently seeing. Once the page has been refreshed, the page resets and go back to its original content.

Accessing data in a Array VS accessing data in an Object

Objects and arrays are used to store a collection of data and are mutable meaning that the data can be added, deleted or changed. Arrays are a special type of object; they store data in a list format and the data (or list of things) are numbered starting from 0 (e.g 0. apple 1. bananas 2. cherries). This is called the index number and is used to help a user access a particular thing (or element) in the array. So with the example before, if I wanted to access bananas, I’d to include the index number by including 1 in my code e.g. variableName[1]. Accessing data in an object is a bit different.

Objects store data about one thing and its properties. For example, I could have an object named “Dog” and inside that object, there are properties which are made up of key-value pairs. The ‘key’ is a unique identifier and the value is the content. Example below:

To access data is an object, you need to write the key instead of writing a number like you do for a loop. Using the example above, if you want to access the data about the dog’s breed, you’d write a . followed by the key/identifier e.g. dog.breed.

Functions

Functions in coding is a set of instructions put together to preform a certain task. For example, you can make a function to find out the biggest number when given a group of numbers. Functions are very useful because it is a piece of reusable code that can be called upon to run again and again. This means you don’t need to keep re-writing a code to preform the same task because you can just call it up later on your code to preform the same task.