Christelle's Blog

Reflections of my journey through Dev Academy.

JavaScript Fundamentals

by Christelle Quilang

An analogy to describe JavaScript and its relationship to HTML and CSS.

A website is like a doll. Imagine a wooden doll. HTML is what determines the structure of the doll, what makes it look like a doll: its shape and contours carving out the eyes, nose, mouth and other body parts. CSS is what determines the doll’s style, its skin colour, eye colour, hair colour, clothes, etc. JavaScript can carve into the structure of the doll, like HTML, but unlike HTML, it can do more things like changing the doll’s structure so that its limbs can move, as if she has joints. JavaScript can also interact with the doll’s style like CSS, but unlike CSS, it can create for example, dresses that can turn into mermaid tails, and make up that only shows up when the doll’s face is wet.

Explain control flow and loops using an example process from everyday life.

Roughly, this is my ideal daily schedule:

  1. 6am do morning routine
  2. 4x 1.5 hour study sessions with 30 minute breaks
  3. spend time with loved ones
  4. 7pm do night routine

In the same way I would go through this schedule from top to bottom, the computer runs code starting at the top and works its way down the code. This is called control flow, the order in which your computer runs code. If your computer runs into a loop, it will continue running this loop until it reaches the condition that ends the loop, before continuing down the code. This is like how I repeat my study sessions followed by 30 minute breaks, until I finish 4 study sessions (the condition that ends the loop).

Describe what the DOM is and an example of how you might interact with it.

DOM is short for Document Object Model. 'Document' refers to the HTML or XML document of your webpage. 'Object Model' refers to the way it represents the document and its elements: as objects.

How the DOM may represent a document. Source:freecodecamp.org

The DOM defines the logical structure of documents and it is an application programming interface (API). With it we can access and manipulate objects in our document. It is designed to be used with any programming language, such as HTML, CSS and JavaScript.

My favourite use of it is using Workspaces in DevTools. Using Workspaces, you can save the changes you make in DevTools to your source code. It's very handy for testing code and seeing how it interacts with your page all in one tab.

In rainbow order, how to get to the Workspaces.
Explain the difference between accessing data from arrays and objects.

Arrays contain a list of things, separated by commas: strings, numbers, variables, even other arrays and objects. Each item in an array is assigned an index depending on their position, it starts at the left with 0, 1, 2… and continues in this way with sequential whole numbers. You can access these items by referring to these indices.

Objects contain key-value pairs, each pair separated by a comma, and a key and its corresponding value separated by a colon. You access this data by stating the name of the object and referring to the key.

How to access data from objects (top, in blue) and arrays (bottom, in pink).
The output of the console.logs from the code above.
Explain what functions are and why they are helpful.

A function is a list of instructions we give the computer to run.

An example of a function.

To use a function, you only need to call it, like so:

You can call a function countless times. This is much easier than writing the code over and over whenever you need it. Functions are helpful because they are reusable.