JAVASCRIPT BASICS
HTML, CSS and JavaScript
In this post I will go over some of the basic concepts surrounding JavaScript.
What do HTML, CSS, and JavaScript have in common with a birthday cake? Well, actually alot! HTML is similar to the structure of the cake, CSS is the icing and decorations (makes things look good), and JavaScript can be thought of as the candles on top that you light then blow out (i.e. the interactivity) without CSS and Javascript it would be a pretty sad cake!
Control Flow & Loops
Control flow is the order in which functions are executed and evaluated when Javascript is running, it's how we contol the way our code runs
A loop is a type of function which will run over and over to infinity or until a certain condition is met. In JavaScript there are two main types of loops:
- While Loops: Repeats code WHILE a condition is true
- For Loops: Another way to repeat code FOR a specified number of times
Example of a real life loop:
Carrying on with the cake theme! If you wish to bake a cake for your best friends birthday you would follow a recipe and keep repeating the steps of the recipe, i.e. Mix half a cup of sugar and 100 grams of butter together until creamed, add two eggs beating after each addition, and so on until you have finally completed the recipe, you would not stop until the cake is out of the oven - similar to a loop (I.e. While the cake is incomplete, continue with steps in recipe). The control flow controls the way we carry out the steps to ensure we complete the recipe as intended (sometimes human error misses a step on the loop and the cake turns to custard, thank goodness for computers). Are you hungry now?
The DOM
The Document Object Model is the interface between JavaScript and HTML + CSS. When we load HTML in the browser, the browser is displaying things to us in a certain way, but behind the scenes is actually busy making a model of every single element with a JavaScript object. The DOM is a hierarchical structure, represented as nodes and objects, effectively enabling programming languages (like JavaScript) to connect to the page and dynamically access and update the content on it.
Example
Interacting with the DOM
To interact with the DOM we can select an element and manipulate it by writing JavaScript code, for example we may want to select our h1 element and can do this using the .querySelector which returns an object that represents the h1
var h1 = document.querySelector("h1);
h1.style.color = "orange";
The browser will see that we have changed the h1 property to orange and automatically updates that colour to reflect the change on the h1 element - right click and hit 'Inspect' to bring up the DevTools to try it for yourself!
Arrays & Objects
An array is used to store a list of data, when adding things to an array there is a specific order – every item is bound to an index which we refer to it by (i.e. item 1 = index 0, item 2 – index 1 and so on). This index starts at zero, as Javascript starts counting from zero, not one.
An object differs as it is not a list, there is no particular order (imagine things floating around inside a gelatinous blob – known as key-value pairs). Objects are like dictionaries: you look something up based on a key, and get a corresponding value. The key to accessing data from objects is to go one step at a time, and then burrow down the data.
Behind the scenes an array is still an object - just a special kind. An array still has key value pairs however the key is 0 to number of items in the array. To access data from an array we have to know the index the item is bound to.
Example
Accessing data from an array:
var cats = ["Kitty", "Sofia", "Mia"];
cats[1] //will return:
"Sofia"
Accessing data from an object:
var cat = {
name: "Sofia",
breed: "Maine Coon",
age: 8
}
cat ["name"] //will return:
"Sofia"
Functions
Functions are like recipes – they take a list of instructions and condense them – this stops code from being repetitive, keeping it DRY(Don't Repeat Yourself) in turn making code easier to maintain. Basically a function is a wrapper for code, allowing you to group statements together, in turn making code reusable.
Example
Basic Function:
function sayHello() {
alert("Hello World!");
}
sayHello();
This will call the function (try it in your browser, it's fun!)