JavaScript

Overview

Recall questions on what JavaScript does in a page, producing output, tracing loops, selection and arrays that write into the page, why scripting makes pages feel faster, and why JavaScript checks cannot be trusted for security.

What you need to know

Answer each one before you reveal it.

Questions from this subtopic

Each one with the model answer underneath.

1. 1

   What is JavaScript used for in a web page?

   Model answer

   It supplies the behaviour: it runs in the user's browser and makes the page respond and change without a new page having to be fetched. Typical work includes checking what a user has typed before a form is submitted, updating the contents of part of the page in response to a click or a change, showing and hiding sections, performing calculations on the user's own machine, and requesting extra data in the background so only part of the page updates. It is a full programming language with variables, conditions, loops and subroutines, which is exactly what HTML and CSS lack.

2. 2

   Name three ways JavaScript can produce output in a page and say what each does.

   Model answer

   It can change the contents of an existing HTML element, by selecting the element by its id and replacing what is inside it - this is the normal method, because the new content appears in place within the page and the rest of the page is untouched. It can write directly into the document as it is being produced. Or it can display an alert box, a small pop-up window carrying a message which the user must dismiss - useful for a quick warning but intrusive, since it interrupts the user and blocks interaction until it is closed.

3. 3

   What does this produce? var total = 0; for (var i = 1; i <= 5; i++) { total = total + i; } alert(total);

   Model answer

   A pop-up alert box showing 15. total starts at 0 and the loop runs with i taking the values 1, 2, 3, 4 and 5, adding each to total in turn: 0+1=1, then 3, then 6, then 10, then 15. When i becomes 6 the condition i <= 5 is false and the loop ends, so the alert displays the final value 15.

4. 4

   Explain what this code does and where the result appears: var mark = 72; var grade; if (mark >= 70) { grade = "A"; } else if (mark >= 60) { grade = "B"; } else { grade = "C"; } document.getElementById("result").innerHTML = grade;

   Model answer

   It selects a grade by testing the mark against thresholds in order and then displays it in the page. Because mark is 72, the first condition is true, grade is set to A and the other branches are skipped - note that the order of the tests matters, since 72 also satisfies the second condition and would have produced B had that test come first. The last line finds the element whose id is result and replaces its contents with the letter A, so A appears in the page at whatever position that element occupies. Nothing else on the page changes and no new page is requested.

5. 5

   A form has a text box with id nameBox and an empty element with id greeting. Explain what this does: var name = document.getElementById("nameBox").value; if (name === "") { alert("Please enter your name"); } else { document.getElementById("greeting").innerHTML = "Hello " + name; }

   Model answer

   It reads whatever the user typed into the text box and reacts to it. If the box was left empty, a pop-up appears asking the user to enter their name. Otherwise the greeting element's contents are replaced with the word Hello followed by the name that was typed, so a personalised greeting appears in the page immediately, without the page being reloaded or anything being sent to the server. The joining of "Hello " to the name is string concatenation, which is why the space at the end of "Hello " is needed.

6. 6

   What does this loop do, and what appears? var names = ["Ada", "Alan", "Grace"]; var list = ""; for (var i = 0; i < names.length; i++) { list = list + names[i] + " "; } document.getElementById("out").innerHTML = list;

   Model answer

   It builds a single string from the three items in the array and puts it into the page. list starts empty; the loop runs with i equal to 0, 1 and 2, each time appending the item at that position followed by a space, giving Ada then Ada Alan then Ada Alan Grace. Using names.length rather than the number 3 means the loop still works if items are added or removed. The final line replaces the contents of the element with id out, so Ada Alan Grace appears there.

Other ways to work this

The same content, four other ways.

What is inside Levo

Six ways to work the same material.