How to use it. Each challenge gives you a web page (page.html, which you can read but not change) and asks you to write its script (script.js). ▶ Run puts your script into the page in the preview, where you can use it: type in the boxes, click the buttons. Anything your script writes with console.log() or alert(), and any error, shows in the console. ✓ Check runs the challenge's tests on your script: it types into the boxes and clicks the buttons for you, and reports what happened. Stuck? Take a hint, or look at a model answer. Playground lets you change the HTML too.
The ideas.
- The page is the DOM.
document.getElementById("out") finds an element by its id. Its .innerHTML (or .textContent) is what it shows; an input's .value is what's typed in it.
- Events.
button.onclick = function () { … }; runs the code when the button is clicked. Other events: onsubmit (a form is sent), oninput and onchange (a box is changed), onmouseover, onload.
- Variables and types.
let for a value that changes, const for one that doesn't. An input's value is always a string: Number(…) turns it into a number, otherwise "2" + "3" is "23".
- Selection.
if … else if … else, and switch with case and break. Comparison: ===, !==, <, <=; logic: && (and), || (or), ! (not).
- Iteration. A count-controlled
for loop; condition-controlled while and do … while loops; for … of over an array.
- Functions.
function name(parameter) { … return value; }: a named block of code that can be called again and again.
- Validation checks data is sensible before it's used: a presence check (not empty), a range check (between two values), a length check (enough characters), a format check (the right pattern, such as four digits) and a type check (a number). Validation can't tell whether the data is correct, only whether it's reasonable. To stop a form being sent, the submit handler returns
false (or calls event.preventDefault()).
Safe to experiment. Your code runs in a sandbox, separate from this page. A loop that never ends is stopped after a second or two, and the sandbox is restarted.
Common mistakes: getElementByID (it's Id) and other wrong capitals (JavaScript is case-sensitive); using = (assignment) when you mean === (comparison); adding inputs' values without Number(); a boundary off by one (> where it should be >=); a loop whose condition never becomes false; forgetting to stop the form when it's invalid; adding to a list without clearing it first.
Objective: Cambridge International A Level IT (9626), programming for the web: JavaScript in a web page; variables, constants and data types; operators; selection (if, switch); iteration (for, while, do … while); functions; arrays; events; changing the page (the DOM); outputs (innerHTML, console, alert); and form validation.
Where this fits
- Cambridge: Cambridge A Level Information Technology (9626)
- NCEA Level 1 Digital Technologies: 92004 Create a computer program
- NCEA Level 2 Digital Technologies: 91893 Use advanced techniques to develop a digital media outcome; 91896 Use advanced programming techniques to develop a computer program
- Pearson Edexcel International: Edexcel International A Level Information Technology
