Adam Crowley's Coding Blog

The Javascript DOM

16 April 2023

JavaScript and it's relationship to HTML and CSS

HTML is like a printed page of a book with just the story. CSS adds unique color, typographical style and layout to the page. JavaScript makes the story able to be interacted with like a popup picture book.

Control flow and loops

Control flow describes the way that the computer reads code. Generally it will start reading from the top of a code document and continue down until it reaches the bottom. The control flow is broken up by loops, and when it enters a loop it goes around a set number of times, before returning to a linear flow. This could be thought of like a car journey where you travel straight down a road. Stopping at a traffic light would be a loop, whereby a set of number of lights will change before you get a green light and continue your journey.

                let trafficLights = ['red', 'green', 'orange']

// Loop that displays the color of each traffic light
for (let i = 0; i < trafficLights.length; i++) {
  console.log(trafficLights[i])
}

// Output is 'red', 'green', 'orange'

              

What is the DOM?

The DOM is a web browser's interpretation of an HTML document, and it has a tree-like structure that's made up of 'nodes'. An HTML document is static and not able to be modified. The DOM starts out exactly like the HTML document, but it's dynamic, and can be modified by Javascript. For example a section of the page might start off at the top, but Javascript can pull this section out of the DOM, change the content, and place the section elsewhere on the page.

Accessing data from arrays and objects

Accessing data from an arrays and objects differ in terms of the syntax used.

Object properties are accessed mainly by using dot notation and the name of the property.

                // Object
let cat = {breed: 'pallas cat', shape: 'round', mood: 'grumpy'}

console.log(cat.breed)
// Output is 'pallas cat'

              

Array items are accessed by using bracket notation and the numbered postion of that item in the array.

                // Array
let cats = ['tortoise shell', 'scottish fold', 'pallas cat', 'brindle']

console.log(cats[2])
// Output is 'pallas cat'

              

What are functions are and why are they helpful?

A function is a reusable section of code that has a specific action. Because there are a lot of repeating actions in an application, rather than write those multiple lines of code each time, they can just live inside a function and be called whenever needed. This minimises that amount of code that needs to be written, and keeps it clean and easily readable.

                let trafficLights = ['red', 'green', 'orange']

// Function that displays the color of each traffic light
function displayTrafficLights(names) {
  for (let i = 0; i < names.length; i++) {
    console.log(names[i])
  }
}

displayTrafficLights(trafficLights)
// Output is 'red', 'green', 'orange'