Intro to JavaScript

Inspired by CS50 WebTrack

Thanks to w3schools

JavaScript is a programming language that runs in a web browser. It can be embedded into HTML using the <script> tag to add interactivity to a page — for example, showing or hiding content when a user makes a selection, or validating a form before it is submitted.

JavaScript is an interpreted language, not a compiled one. Compiled code is machine dependent — it must be recompiled for different processors or architectures. An interpreter runs the high-level source code directly, making it machine independent. This matters for JavaScript because it is likely to run on a wide variety of devices with different hardware.

Compiled Interpreted (JavaScript)
Translated into machine code before running. Translated and run line by line at runtime.
Fast to execute once compiled. Slightly slower to execute.
Machine dependent — compiled code only works on the target architecture. Machine independent — the same code runs on any device with a browser.
Errors found at compile time. Errors found at runtime.

What the exam expects

You are expected to be able to follow and write basic JavaScript code. You do not need to memorise exact syntax — the exam will not penalise minor inaccuracies. You should understand the JavaScript equivalents of standard pseudocode structures (see the table below).

You will not be expected to use JavaScript for object-oriented programming or file handling.

Output methods

There are three ways JavaScript can produce output that you need to know:

Method Code Effect
Change an HTML element 
var el = document.getElementById("example");
el.innerHTML = "Hello World";
 Updates the content of an element on the page. Most commonly used in exam questions.
Write to the document 
document.write("Hello World");
 Writes directly into the HTML page.
Alert box 
alert("Hello World");
 Shows a pop-up message box in the browser.

Input is taken by reading values from a form: document.getElementById("fieldId").value. You do not need to memorise this — exam questions will focus on what you do with the input once received.

JavaScript structures

structure description code example
document.getElementById() The key to linking JavaScript to your HTML. Given an element's id, it returns that element as an object so JavaScript can read or change it.

Use .innerHTML to read or change the content of an element.
Use .value to read input from a form field.

This is how JavaScript interacts with the DOM (Document Object Model) — the browser's representation of the HTML page as objects that can be manipulated with code. 
// Changing the content of an element
document.getElementById("output").innerHTML = "Hello!";

// Reading a value from a form field
var username = document.getElementById("nameInput").value;

// Storing the element in a variable first (cleaner for reuse)
var el = document.getElementById("output");
el.innerHTML = "Hello, " + username;
Variables / assignment Declare a variable with var or let and assign it a value with =. Variables can hold numbers, strings, or booleans. You can change the value later by assigning again. 
var age = 16;
var name = "Alice";
let passed = true;

// Reassigning a variable
age = 17;
if / else if / else Runs different blocks of code depending on a condition. Use == to compare values, && for AND, || for OR, and != for not equal. Only the first true branch runs. 
var score = 72;

if (score >= 70)
{
    document.getElementById("result").innerHTML = "Distinction";
}
else if (score >= 50)
{
    document.getElementById("result").innerHTML = "Pass";
}
else
{
    document.getElementById("result").innerHTML = "Fail";
}
for loop Repeats a block of code a set number of times. The loop has three parts: a starting value, a condition to keep looping, and an update step. Use when you know in advance how many times to loop. 
// Counts from 1 to 5
for (var i = 1; i <= 5; i++)
{
    document.write(i + "<br>");
}

// Looping through an array
var fruits = ["apple", "banana", "cherry"];
for (var i = 0; i < fruits.length; i++)
{
    document.write(fruits[i] + "<br>");
}
while loop Repeats a block of code while a condition is true. Use when you don't know in advance how many times to loop. Make sure the condition can eventually become false, or the loop will run forever. 
var count = 1;

while (count <= 5)
{
    document.write(count + "<br>");
    count = count + 1;
}
Functions A named, reusable block of code. Define it with function, then call it by name. Functions can take parameters (inputs) and return a value. In exam questions, you are often asked to complete a partially written function. 
// A function that returns a value
function calculateTotal(price, quantity)
{
    var total = price * quantity;
    return total;
}

// Calling the function and using the result
var result = calculateTotal(5.99, 3);
document.getElementById("output").innerHTML = result;


// A function that changes the page directly (no return needed)
function showGreeting(name)
{
    document.getElementById("msg").innerHTML = "Hello, " + name;
}

showGreeting("Alice");
Arrays An array stores multiple values in a single variable. Items are accessed by their index, starting at 0. Use .length to find how many items are in the array. Arrays are often used with a for loop to process each item. 
var colours = ["red", "green", "blue"];

// Accessing items by index (starts at 0)
document.write(colours[0]);  // red
document.write(colours[2]);  // blue

// Finding the length
document.write(colours.length);  // 3

// Changing an item
colours[1] = "yellow";

// Looping through an array
for (var i = 0; i < colours.length; i++)
{
    document.write(colours[i] + "<br>");
}