JavaScript and the DOM

Give an analogy to describe the differences between HTML and CSS

As an analogy, think of a magazine. The magazine contains lots of pictures and text. The text includes big headings, smaller headings and paragraphs to give it structure and show the hierarchy of the information represented. If this were a web page, all this content would be implemented with HTML. In addition to writers and photographers, the magazine owner also employs designers to make it look nice. Designers would decide which type fonts to use, the size of the headings, the colours on the page, how big to display the photos and where to place everything on the page. On a web page all of this styling would be done with CSS.

Explain control flow and loops using an example process from everyday life, for example 'waking up' or 'brushing your teeth'. (But not those ones).

If you had to get a computer to make you some hot drinks on a cold winter's morning, you'd need to give it very explicit instructions. These instructions would use control flows and loops. For example, you and your family or flatmates might each want tea, coffee or a default of cocoa. You could use an if else structure for this:

If the human wants tea, put a tea bag in the cup.
Else if the human wants coffee, add coffee to the cup.
Otherwise, add hot chocolate powder.

You could then use a while loop to heat the water, telling the computer that while the water is less than 100 degrees, keep incrementing the temperature by 1 degree.

So that you don't have to intervene after one cup is prepared to instruct the computer about the next cup, you could put the preferences of each person in a special kind of list called an 'array'. Then, you could use a for loop that tells the computer to repeatedly go through the process of adding the required powder or bag to each cup until it has made a cup for each member of the household (as listed in the array).

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

DOM stands for Document Object Model. It is a representation of a web page and acts as an interface that we can use to manipulate the page's content, styles and structure with JavaScript.

We can select different elements in the DOM. We usually do this using either their id, class or tag name. Here is an example of how we could select a heading by its id and then manipulate it, changing its text.

// HTML
<h1 id="hero-title">My Blog</h1>
// JavaScript
const heroTitle = document.getElementById('hero-title');
heroTitle.innerHTML = 'Our Blog';

As you can see, JavaScript and the DOM give us powerful control over web pages.

Explain the difference between accessing data from arrays and objects

Arrays are indexed lists of elements. They are zero-indexed meaning we start counting at 0, so in the following array the 'papaya' element in position 0 and the 'mango' is in position 1.

const fruit = ['papaya', 'mango', 'guava', 'lucuma']

To access the data using JavaScript, we would type:

const firstFruit = fruit[0]

const secondFruit = fruit[1]

A JavaScript object, on the other hand, looks like this

const lucuma = {colour: 'orange', taste: 'sweet', uses: ['in ice cream', 'in milk shakes']}

To access the taste of lucuma, we would type either one of the following (both work):

const lucumaTaste = lucuma.taste

or

const lucumaTaste = lucuma['taste']

In either case, when we check the value of lucumaTaste, we will see that its value is 'sweet'.

Explain what functions are and why they are useful

A function contains one or more instructions for the computer to carry out. We write these instructions inside the body of the function and we give the function a name. Then whenever that function's name is called, the computer will carry out the instructions contained in that function's body. This is extremely useful because otherwise we would have to keep repeating ourselves every time we wanted the computer to do that same thing, which would be prohibitively time consuming and unwieldy.