JavaScript Study Guide
OCR A Level Computer Science - Complete Reference with Examples
1. Web Technologies
JavaScript is one of the three core web technologies:
Technology Role
HTML Defines the structure and content of a web page
CSS Defines the formatting and presentation
JavaScript Controls behaviour and interactivity
2. What is JavaScript?
JavaScript is used to add interactivity to a web page. It can respond to user input, validate form data, perform
calculations, update page content dynamically and manipulate elements on the page.
JavaScript is an interpreted language, executed directly by the web browser. This makes it highly portable because it
can work across different devices and operating systems without needing to be recompiled for each processor.
JavaScript is usually included using <script> tags or by linking to an external .js file.
<script>
[Link]("Hello");
</script>
3. What You Need to Know (OCR Spec)
You need to be able to follow and write basic JavaScript code using the JavaScript equivalents of the pseudocode
structures in the OCR specification.
You should know Examples
Output [Link](), alert(), changing page content using innerHTML
Variables Declaring variables with var and using values in calculations/output
Selection if, else if, else, comparison and logical operators
Iteration for, while and do while loops
Strings .length, .substring() and square bracket indexing
Forms <form>, <input>, .value and submit buttons
Functions & casting function, parameters, return, Number() and String()
Not required for OCR: JavaScript OOP, file handling, or passing parameters by value/reference.
4. Output Method 1 - [Link]()
[Link]() outputs data directly into the HTML web page. It can output a specific string in speech marks or the
value of a variable.
[Link]("Monday");
var day = "Monday";
[Link](day);
var is used to define a variable. A variable stores a value that can be reused later.
5. Output Method 2 - alert()
alert() displays a pop-up message box. It is useful for simple output and testing.
alert("Tuesday");
var day = "Tuesday";
alert(day);
alert("Today is " + day);
The + symbol can be used for concatenation, which means joining strings and values together.
6. Output Method 3 - getElementById() and innerHTML
[Link]() refers to a specific HTML element using its identifier. .innerHTML changes the
value/content of that identified element.
<p id="message"></p>
<script>
[Link]("message").innerHTML = "Welcome";
</script>
Capitalisation matters: getElementById has lowercase get, then capital E, B and I.
The same command can also be split into two lines using a variable:
var output = [Link]("message");
[Link] = "Welcome";
7. Saving an Element Value into a Variable
getElementById() and .innerHTML can be used to read an element value and save it into a variable.
<p id="username">Beatrice</p>
<script>
var name = [Link]("username").innerHTML;
alert("Hi " + name);
</script>
Here, the value Beatrice is taken from the paragraph and saved in a variable called name.
8. Prompt Input (Useful for Practice)
prompt() can input a value using a pop-up text box. OCR says input data should normally be given to you, but prompts
are useful when practising JavaScript.
var name = prompt("What is your name?");
[Link]("Hi " + name);
9. If, Else If and Else Statements
if, else if and else are used for selection. The condition goes inside round brackets ( ). The code that runs goes
inside curly brackets { }.
var answer = prompt("Are you right or left-handed?");
if (answer == "right") {
[Link]("90% of people are right-handed.");
}
else if (answer == "left") {
[Link]("10% of people are left-handed.");
}
else {
[Link]("1% of people are ambidextrous.");
}
Operator Meaning
== Equal to
!= Not equal to
> Greater than
< Less than
>= Greater than or equal to
<= Less than or equal to
10. Logical Operators
JavaScript uses logical operators to combine conditions.
Operator Meaning Example
|| OR - only one condition needs to be true age > 18 || height > 155
&& AND - both conditions must be true age > 18 && height > 155
if (age > 18 || height > 155) {
[Link]("output").innerHTML = "adult";
}
else {
[Link]("output").innerHTML = "child";
}
11. String Handling
A string is text. JavaScript has useful features for checking and slicing strings.
Feature Description Example
.length Counts the number of characters in a string [Link]
.substring(start,end) Slices characters from start up to, but not including, [Link](0,3)
end
[index] Gets one specific character. Indexing starts at 0. name[0]
var name = prompt("Enter your name");
if ([Link] > 10) {
alert("Name is too long");
}
[Link]([Link](0, 3));
[Link](name[0]);
Indexing starts at 0, so name[0] means the first character.
12. For Loops
A for loop is a count-controlled loop. It is used when the number of repetitions is known.
for (var i = 1; i <= 10; i++) {
[Link](i + "<br>");
}
Part Purpose In the example
Initialisation Sets the start value var i = 1
Condition Says when the loop continues i <= 10
Increment Changes the counter each time i++ means i = i + 1
13. While Loops
A while loop is a condition-controlled loop. The condition is checked at the start, so the loop might run zero times.
var password = prompt("Enter password");
while (password != "cloud123") {
password = prompt("Try again");
}
[Link]("Access granted");
var is only needed when the variable is first declared. After that, just reuse the variable name.
14. Do While Loops
A do while loop is also condition-controlled, but the condition is checked at the end. This means the code always runs
at least once.
do {
var item = prompt("Enter an item");
[Link](item + "<br>");
}
while (item != "stop");
In a do while loop, the while condition comes after the code block.
15. Forms and Input Tags
The <form> tag creates a form to collect user data. The <input> tag lets the user enter information or submit the form.
Tag / attribute Description
<form> Creates a form for collecting user data
<input> Creates an input control
type="text" Creates a text box
type="submit" Creates a submit button
value Sets the text shown on a submit button
id Gives an element an identifier so JavaScript can refer to it
<form onsubmit="checkPassword(); return false;">
<input type="text" id="password">
<input type="submit" value="Check">
</form>
<p id="message"></p>
return false stops the browser refreshing the page when practising locally.
16. Getting Data from Forms: .value
When getting data from a form input, use .value instead of .innerHTML.
function checkPassword() {
var password = [Link]("password").value;
if ([Link] > 8) {
[Link]("message").innerHTML = "Password is valid";
}
else {
[Link]("message").innerHTML = "Password must be over 8 characters";
}
}
Use When
.innerHTML Reading or changing the content between HTML tags, e.g. <p>Hello</p>
.value Reading what a user typed into a form input box
17. Form Action and PHP
A form may use an action attribute to send data to a server-side script, commonly a .php file.
<form action="[Link]">
<input type="text" id="username">
<input type="submit" value="Submit">
</form>
PHP is used for server-side processing, such as checking a password or storing data in a database. OCR does not expect you to
write the PHP file.
18. Functions
A function is a named block of reusable code. Parameters go inside round brackets and are separated by commas.
function add(num1, num2) {
var total = num1 + num2;
return total;
}
var sum = add(5, 7);
[Link](sum);
Keyword / part Meaning
function Defines a function
add The function name
num1, num2 Parameters - values passed into the function
return Sends a value back to where the function was called
19. Casting
Casting converts a value from one data type to another. This matters because values typed into prompts or forms are
usually treated as strings.
Casting command Use
Number(value) Converts a value into a number
String(value) Converts a value into a string
var num1 = Number(prompt("Enter first number"));
var num2 = Number(prompt("Enter second number"));
function add(a, b) {
return a + b;
}
var sum = add(num1, num2);
[Link](sum);
Without Number(), "5" + "7" could concatenate to make "57" instead of adding to make 12.
20. Common JavaScript Exam Mistakes
Mistake Fix
Using = in an if condition Use == to compare values. Single = assigns a value.
Wrong capitalisation Use [Link] exactly. JavaScript is case-sensitive.
Using innerHTML for form inputs Use .value for text boxes and form inputs.
Forgetting curly brackets Code inside ifs and loops goes inside { }.
Forgetting speech marks around Text values need speech marks, e.g. "Monday".
strings
Forgetting semicolons in for loops The three parts of a for loop are separated by semicolons.
21. Quick Reference - JavaScript Syntax
Concept Syntax / Example
Variable var day = "Monday";
Output to page [Link](day);
Pop-up output alert("Hello");
Change HTML content [Link]("message").innerHTML = "Welcome";
Read form input [Link]("username").value;
If statement if (answer == "yes") { ... }
Else if / else else if (answer == "no") { ... } else { ... }
OR ||
AND &&
Not equal !=
String length [Link]
Substring [Link](0, 3)
First character name[0]
For loop for (var i = 1; i <= 10; i++) { ... }
While loop while (password != "cloud123") { ... }
Do while loop do { ... } while (item != "stop");
Function function add(a, b) { return a + b; }
Cast to number Number(value)
Cast to string String(value)
Based on CSNewbs JavaScript video and OCR A Level Computer Science web technologies content - practise by editing your own
HTML pages!