HOME   BLOG   PORTFOLIO  

JavaScript fundamentals

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

An analogy could be a building: HTML is the structure or layout of the building. CSS is the design of the building. And JavaScript is the functionality of the building.

A house...

References
freecodecamp.org | The relationship between HTML, CSS and JavaScript explained by building a city

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

Control flow is the order which the computer executes statements.

Code is run in order from the first line in the file to the last line, unless the computer runs across structures that change the control flow, such as conditionals, loops and functions.

An example from everyday life...Getting to the office downtown via public transport.

  1. Lock up and leave home.
  2. Walk to the bus stop.
  3. [conditional] Check if the bus to downtown is running.
    If bus is running, wait and board the downtown bus to work.
    If bus is cancelled, wait and board an alternative bus to the local train station. Once at the train station, take the downtown train.
  4. When on the bus or train, put on headphones and listen to music.
  5. [loop] The morning commute playlist is pretty small. Repeat music playlist until we get off the bus or train at downtown.
  6. Walk to the office, open the door and get ready to work.
Steps 1-6 would be a [function] and it gets repeated every morning if it's a weekday.
We would have a different [function] if it's the weekend.

References
medium.com | Control Flow in JavaScript
mozilla.org | Control Flow

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

The DOM is an interface that allows you to link HTML and CSS with Javascript.

For example, the DOM allows you to use the following in JavaScript to select HTML which has a CSS Id named cats:
JavaScript

        document.getElementById('cats')
         

References
ionos.com | Document Object Model (DOM): definition, structure and example

Explain the difference between accessing data from arrays and objects.

An array is a list of ordered data. An object represents “things” with characteristics.

Arrays
JavaScript

        // Basic array syntax
        
       let array = ['0', '1', '2', '3'];
        
JavaScript

       // Example 'dessert list' array

       let dessertList = ['Creme Brulee', 'Panna Cotta', 'Chocolate Mud Cake', 'Banoffee'];
      
Objects
JavaScript

       // Basic object syntax

       let object = {
       key: 'value'
       };
      
JavaScript

       // Example 'animal' object

       let animal = {
       species: 'Tūī',
       legs: 2,
       vertebrate: true
       };
      

References
medium.com | Objects vs. Arrays

Explain what functions are and why they are helpful.

A JavaScript function is a block of code designed to perform a particular task.

When developing an application, you often need to perform the same action in many places. To avoid repeating the same code over again, a function can be used to wrap that code so it can be reused. So functions are helpful to structure code into smaller, reusable units.

References
javascripttutorial.net | JavaScript Functions
w3schools.com | JavaScript Functions