Javascript Blog

Javascript and its relationship to HTML & CSS

Javascript does all the fancy stuff within a website. If we think of a webpage like a human body, HTML is your skeleton, it provides the framework to be built upon. Javascript is your organs, it makes you work the way you do, it governs how you function and it brings cohesion between all your body parts. CSS is your skin and your features, everything that makes you beautiful :D.

Control Flow and Loops

Control Flow is the order that the code you have written is received within a program or client. Generally speaking code is read from top to bottom like a book. There are exceptions, much like an asterisk in a book, to this rule for example:

Function Calls. When a function is defined, the program does not execute this immediately. It instead jumps to the function definition to then execute the function call.
For example:

console.log("This is executed first.");
sayHello();

function sayHello() {
console.log("Hello, world!");
}

This is executed after the call.
A loop is essentially groundhog day. It executes over and over again according to its defined parameters. An example of a loop we can use is a while loop.
Example:

let energyIsLow = true;

while (energyIsLow) {
console.log("Energy is low, drink Mango Monster!");

energyIsLow = false;
}
console.log("Energy is back to normal!");

The DOM

The DOM is the Document Object Model. It is a framework of what is known as tree nodes that denote each object in a webpage. The DOM loads a document into the browser and represents it using this tree structure.

Each node in the tree represents an element of the document. These elements are labelled as parent elements, child elements or grandchild elements. These basically denote how the elements sit within a page, with the "younger" elements nested inside the "older" elements.

Javascript can access the "document" object. This document object in Javascript is the root object for accessing and interacting with the DOM. It provides methods and properties to manipulate content, structure and style of a web page. An example of this would be using this Syntax.

.getElementById(h3);

This allows you to select an element on the page by its unique id attribute and allows the direct manipulation of a specific element, in this case the h3 element.

Another thing you can do is add what is known as an event listener:

This will Select the button and the div elements
let button = document.getElementById('myButton');
let messageDiv = document.getElementById('message');

This adds an event listener to the button
.addEventListener('click', function() {
messageDiv.textContent = "Form submitted!";
});

We can use these to trigger events in a page, for instance, capturing a form submission.

Arrays and Objects

Arrays are essentially a way to create a list of objects and store these in a single variable. They are very useful when you want to create an ordered collection of items, for example a shopping list, and make them accessible by their position in the list.

Arrays use zero-based-indexing. Basically this means that objects in an array are assigned a string value ranging from 0-X based on their position in the list, for example let cars = ['Toyota', 'Honda', 'BMW', 'Audi']; In this example Toyota would be string 0, Honda string 1 and so on so forth. So if we console.log(cars[2]) we would get a result of BMW.

Objects are used to represent "something" in your code. They consist of a key and a value. They are an unordered collection of key-value pairs and commonly look something like this.

let person = {
name: 'Alice',
age: 30,
job: 'Engineer'
};

This allows us to pull out values from this Alice key. For example if we want to know Alice's job we could use dot notation which looks like this.

console.log(person.job);

This would output Engineer.

Functions

Functions are blocks of reuseable code, similar to classes in CSS. They can be executed when called and are very useful if you have multiple of the same elements on a page requiring functionality. It is a way of streamlining your project and gaining efficiencies. They can be declared in many ways but the most common way would be something similar to this:

function sayHello() {
console.log("Hello, world!");
}

// Function call
sayHello();

In this example the sayHello function would output Hello, world! everytime it is called.

Sources: