JavaScript and The DOM

JavaScript, HTML & CSS

One analogy for JavaScript and its relationship to HTML and CSS that I can think of is a sports team that has the coach, the players and the management. Let us say the management would be CSS as they are responsible for how the team looks and basically how the team is decorated with their uniforms and gear. The players would be HTML as they are the important parts that make up the team for them to be able to compete. JavaScript would be the coach of the team and he will be calling the shots and making the plays for the team to function well and be successful. All three work together to form a good organisation and this is similar to JavaScript, HTML and CSS working together to provide good working products.

Control flow & Loops

Control flow is the computer's process of reading through codes and commands in a sequential manner, and loops is the recurring action that the computer takes until a certain requirement is met. In our lives, we can relate control flow and loops to cooking a special dinner for our family that we have not done before. We will follow this easy step-by-step recipe that eventually gives us a finished product. The looping here may happen when we come to a point where we need to add salt and pepper to the food, tasting it, and adding more until we are contented with the taste.

Below is an example of a for loop. Here you can see that the counter starts at 0 and the loop keeps on adding +1 to the counter until it isn't less than 4.

An example of a for loop code

The Document Object Model or DOM

The Document Object Model is an interface that makes it possible for programmers to access and modify the content of an HTML. I like to think of the DOM as a film crew that is making a movie based on someone else's book. HTML would be the text of the book while JavaScript and CSS are the ideas of the author that was put into the book. The DOM is everyone involved in bringing this book to life on the big screen. Every time we open our web browsers, we are seeing what the DOM has comprehended from the HTML, CSS and JavaScript.

A visual description of the DOM from Zac Gordon's Youtube

Arrays & Objects

Both objects and arrays are used to store a collection of information and are also changeable. Objects are mainly used to represent something in a code that has a set of properties or characteristics, and arrays are used to create a numbered list or numbered collection of items. It is important to remember that counting with arrays start with 0 instead of 1. Accessing objects are done by pointing out which property we are wanting to point out while in arrays, we are going to access the property by its number on the list. Objects can be related to the clothing, accessories, hair & make-up that a model has and the stylists are the ones accessing these properties to get what they desire. On the other hand, arrays can be likened to a collection of books in a library where each one of them have a special number and are stored in an organised manner.

An example of array & object code

Functions

Functions are what a programmer uses to perform tasks or procedures that takes and input and returns an output. For a function to work, it needs to be called or instructed to do what it is supposed to do. An example of this in real life is when a person trains a dog how to stay still until it is told to move could be a function. The process of training the dog can be related to declaring and coding the function and when the dog finally learns it, the person can command the dog to do what was taught.

An example of a function code