JavaScript and The DOM

HTML and CSS

Probably the best way to later explain the DOM is to start by outlining HTML and CSS, which we use in creating websites. Let's imagine we are in a classroom, and we happen to be the principal of a school. There are many kinds of decisions we might want to make about how that school runs, and in a way those decisions are similar to how HTML and CSS function.

First, in every classroom we have the all important students. Looking at just this classroom, we have prepared an attendance sheet. We know there will be 20 students in the class as well as their names in some kind of order. We also know that we have assigned Mrs Banner to this classroom to teach. We organised for a whiteboard to be in the classroom and for each student to have a desk and chair they sit in. These decisions, believe it or not, are similar to HTML. We know what's in our classroom, the same way HTML knows what's on a webpage. How many, what type and extra details like names to keep track. The content is what's important.

On a webpage, CSS is in charge of the presentation. In our classroom, we want to set some rules for how things look, so that parents and members of the community see the value of our school. We might decide what color to paint the walls or whether to use plastic or wooden desks. Are desks in clusters or in a grid? How about the students? It's a bit messy for them to turn up in mufti every day. Let's say they can wear a season-appropriate uniform. Of course, the teacher has presentation rules they need follow too. This is all styling. We create rules for presentation our class the same way CSS creates rules for presentation of a webpage.

Control flow

JavaScript, like many programming languages observes something called a control flow which basically defines the order in which things are done, so that they remain (mostly) predictable.

Think back to your childhood. What were the steps of the bathroom routine at your school? Perhaps something like:

1. Put your hand up.
2. Wait for the teacher's acknowledgement.
3. Go to the bathroom.
4. Wash your hands.
5. Come back to the rest of the class.

Pretty straightforward, but you'd agree that each step only makes sense if done in that order, right? No point in putting your hand up last, or washing your hands before you go to the bathroom (probably).

For most programming languages, instructions are carried out first to last, or top to bottom. We usually decide that the order matters just as much as the procedure above. Things often don't make sense if done out of order. However, there are some special tools that allow us to do more complex procedures.

Loops

One of the most useful features to alter the control flow is a loop. These are perfect for doing a bunch of things in a repeating fashion. What was the procedure for entering your classroom after lunch? Often, in my primary school and intermediate we lined up and were let in one-by-one. Probably there isn't enough complexity there to require a loop, but what if our teacher wanted to interact with each of us before we entered? I've seen awesome videos of teachers using a different secret hand-shake for each student. Perhaps for the teacher that entrance procedure might look like this:

1. Line class up.
2. Do a secret handshake with each student.
3. Enter the classroom yourself

Cool, but is step 2 really a single step? Not so much. It probably involves many smaller steps. Something like this:

1. Recognise student.
2. Remember that student's handshake.
3. Execute handshake flawlessly!
4. Send that student into the classroom.
5. Repeat.

Notice how we only specify how to interact with a single student, then repeat? This is a loop! We still do each step in order, but a loop can save us from writing each step for every single student. Of course, in real life we often automatically use loops. I hope you can agree they are definitely worth using when it comes to programming.

Arrays and objects

These are the words we use to describe two different datastructures in JavaScript as well as many other programming languages. Arrays are collections of values. In JavaScript they look something like this:
const fruits = ['Apple', 'Banana']
Here they hold the names of fruit, but really, an array could hold almost any type of data.

The cool thing about arrays is we can use loops to check their values and interact with them, without having to write out those interactions for every single element. For example, thinking back to hand-shake loop we made earlier, we could easily imagine the line of students as an array of names. Maybe something like:
const students = ['Tom', 'Kaya', 'Greg', ...

Objects are a little different in that they aren't a list of items, but are themselves items that have certain properties. If we wanted to make an object to represent a student, we might want to store their name, age, secret hand-shake, etc. If we wanted to then store the students in an array, we can do that too!

Functions

While control flow and loops are important tools, functions add even more flexibility to our JavaScript toolset. A function is a block of code that runs when you call it. Really, any set of instructions can be put in a function, even loops. What makes functions powerful is they can alter their behaviour based on parameters they are given. This can help you make your code easier to understand, as well as wrap up related tasks neatly.

If we were to think about how a teacher might use the real life equivalent of a function, I think it would be similar to delegating a task to a student. Let's say the teacher wants to summon a student from another classroom, but is too busy to do it themselves. Often, once students are responsible enough, this can be done by saying something like "Hey Hana, could you please go get Riaan?" Now, this might seem simple, but if we think about it there are a few steps involved:

1. Hana leaves the classroom.
2. Hana goes to Riaan's classroom.
3. Hana asks Riaan's teacher if he may leave.
4. Hana brings Riaan back to her classroom.

Of course, the teacher didn't have to tell Hana all that, it was implied by "go get Riaan". Hana had the set of steps in her mind after only hearing that instruction. In other words, through passive learning, or being purposefully taught in the past, she knew a function. We could potentially name this function something like "retrieve student".

Say the next day the teacher again asks Hana "Could you please go get Andrew?" The steps for the task remain exactly the same, but this time Hana retrieves Andrew. Presumably Hana knows that whoever the teacher specifies is the person she needs to retrieve. We can think of Rian's and Andrew's names as parameters for our "retrieve student" function.

Often in programming languages parameters for functions are known as arguments. They can save us from needing to rewrite a function to do the same task with a different value (in this case person). The teacher could summon the whole school, one by one, by asking Hana to "retrieve student x" in a loop. Poor Hana!

The DOM

Continuing on with our classroom analogy from the start of this blog, let's look at the DOM. However, this time we'll imagine we are the teacher. The principal might have decided the contents of the classroom and how it needs to look, but it's up to us to set some rules for smooth running day to day. We'll get back to this in a second.

The DOM stands for Document Object Model. It's basically a certain way of looking at a webpage that allows for greater control. Everything on a web-page defined in HTML isn't just a mark-up to tell your browser what's what, they are actual objects! This includes, paragraphs, headings, buttons and so on.

Thinking about our classroom, it isn't much of a revelation to say "those desks are objects". We know that. However, for a webpage it opens up many possibilities. If we know every piece of the HTML Document is an object, we can manipulate those outside of the HTML. Change properties, define interactions etc. Ever see a webpage do something interesting when you clicked a button? Chances are those things were defined using JavaScript and the DOM.

Do you remember what your primary school teacher's rules were for going to the bathroom? Your teacher didn't necessarily know who would want to go to the bathroom on any given day, or at any given time, but they made sure procedure was well established, because there was a good possibility it would happen. That's exactly the way we want to use JavaScript and the DOM.

Knowing we can change aspects of the page upon certain events lets our webpage be truly interactive, and also controllable. Remember, in the DOM all the pieces of the document are actually objects. We can manipulate them the same way as any objects we create. Combine this knowledge with control flow, loops and functions and we can do almost anything!