BLEU

Even though the title of this post sounds like a 90s grungy, synthy girl band, this blog is not a tribute page. This week I delve into the DOM (not hot) and JavaScript (not related to Java). Well, let's get straight into it, shall we?

Let’s talk about JavaScript, HTML and CSS:

HTML is like the bones of our webpage, CSS is like the physical appearance. These two work together to create the body - colourful and full of content, but without a brain the body is pretty lifeless.

Javascript is the brain telling the body what to do by giving the body sets of instructions and rules to follow.

What about the DOM?

The DOM is how the body is organised. The head is at the top, then the shoulders, knees and toes. Javascript can access all the HTML bones and body parts but also what is inside of the bones because anatomy, like the DOM, is made up of many smaller, hierarchical elements.

Each bone is made up of many cells. Each cell is made up of many atoms. In the same way, the DOM splits the body into many parts and sub parts and sub-sub parts, each having a relationship with the element above it, next to it and below it. Like the real world, there’s also stuff outside the body! JS can also access this stuff. Don’t ask me about it yet though.

Functions and Control Flow:

The instructions that the brain gives to the body are called functions. Like a written language, functions follow a control flow - this is the order that the brain reads and actions these instructions. Like books written in English, the JS brain reads from left to right, top to bottom.

Here's an example of a list I wrote for JS when I was sick and needed a hottie.

Interacting with the DOM, Arrays and Objects

The DOM allows Javascript to read and manipulate our HTML and CSS and includes the user in the fun by reacting to their actions.

JavaScript can tell the body what to do when it (for example) hears words. Javascript might tell the body to store those words somewhere or to yell them very loudly back at the person who gave the words to the body.

If the body is tapped on the shoulder, Javascript can tell the body to react by (for example) falling down, or starting to dance.

Our webpage can react because Javascript has told the body how to behave when certain events happen (i.e. being spoken to or being tapped on the shoulder). We can use Javascript to tell the body what to do by writing instructions on exactly what to sense for and in what location in the body (the DOM), and what to do when that event occurs:

When the ears sense word sounds, yell them very loudly from the mouth.

When the shoulder receives a tap, dance wildly and change your hair colour to blue and nail polish colour to rainbow.

Arrays and Objects:

Arrays and Objects are cool ways to store data in JS.

Arrays are lists of things (words, numbers, etc.) separated by commas and stored inside square brackets:

let pinkThingsArray = [ 'flamingoes', 'raspberries', 'human tongues' ]

Objects are also used to store things, but they store more than just an item, it can store details about an item. Information about the object is stored inside curly brackets like so:

let bestBuddy = { // bestBuddy is the name of our object

name: "Alonso", // this is how we format info about the object

type: "miniature poodle",

age: 6,

cute: true,

favouriteToy: "kong"

};

To get information out of an array, use the name of the array variable (pinkThingsArrray) and add a square bracket to indicate which item in the list we want to see.

What do you think will show on the screen if we take a peek at pinkThingsArray[I]? Click 'Result' to find out!

See the Pen Untitled by BleuHere (@bleuhere) on CodePen.

Huh! It didn’t print the Ist item, it printed the 2nd! Why is that? In Javascript, arrays start counting from O. So ‘flamingoes’ is actually the Oth item in the array, which is why we see ‘raspberries’ print when we ask to see the [I] item in this list.

With Objects, it’s a little different. To see the value that is linked to a particular key we do this:

See the Pen bestBuddy by BleuHere (@bleuhere) on CodePen.

Try changing the section after the dot to see if you can access Alonso’s favourite toy.

fin.

Well, that's been a huge exploration into the body and into my brain! Thanks for reading, and see you again soon. Don't forget to connect or give feedback. Let's chat!