Progress Blog

JavaScript is a programming language, unlike HTML and CSS. The difference is that a programming language adds interactiveity to websites. It allows you to change styles, add text, alter images and play games to name a few. HTML provides the content and structure of a website, CSS the decoration and JavaScript the interaction.

Control flow and loops

Programming languages (such as JavaScript) include many of the same features across them. Some common features include control flow and loops. Control flow is a common concept, it uses if and else statements. An easy example is a light switch, if the switch is down the light turns on, if it's up then the light is off. This idea is used in JavaScript as you can write code that will only run in certain situations. Loops seem like an easy idea but take a while to get your head around. There are a few different ways to set up a loop but basically a loop will execute a piece of code repeatedly. It will either run until a condition is met or however many times you tell it to run. Loops are great, it gives you the power to run through large lists (arrays or sets as examples) quickly without having to copy and paste the same piece of code multiple times. Being able to execute a piece of code hundreds or thousands of time saves an enormous amount of time for the programmer.

The DOM

The document object model (DOM) is a model of the objects that make up the document. Every element and attribute make up nodes that can be accessed using JavaScript. This allows for the website to become interactive as we can use JavaScript to change these nodes to add content, remove content, change styles or any other interaction a programmer can think of.

Accessing arrays

Arrays are a list of different data entries. An array can look like the following:

As shown, arrays can store multiple different types of data. You can access a specific data point in an array using its index.This is done using an index in square brackets such as: newArray[0] which would return "Hello". JavaScript starts counting arrays at index 0. This means that Array[0] will return the first entry in the array.

Accessing objects

Objects can be accessed by using keys. All objects have keys and values, these can vary considerably but there are standard ways to access information in objects. To obtain the keys of the object you are able to use the function Object.keys(exampleObject). A similar function exists for finding the values of an object: Object.values(exampleObject). Below is an example of an object:

    const person = { 
      name: "John Doe", 
      age: 30,
      profession: "Software Developer", 
      hobbies: ["reading", "playing guitar", "running"], 
      address: { street: "123 Main St", city: "Exampleville", country: "Exampleland" },
    };
  

To access the name of the person you could write either person.name or person[name], both would return "John Doe".

Functions

Functions are a chunk of code that usually perform a specific task. The more specific a function is the easier a large amount of code is to understand. Functions store a set of instructions that will be executed when called upon. These sets of instructions can be as simple as changing some text to changing the full layout of the page. Being able to store these sets of instructions is great as they are only used when required but can be called upon as many times as required.