One-sentence summary
JavaScript is a programming language that gives web pages behaviour and the ability to calculate; if HTML is the skeleton of a page and CSS is its look, then JavaScript is its mind.
Why does it matter?
So far you have built the structure of a page with HTML and its appearance with CSS. But think about a button: HTML places it on the screen and CSS makes it look nice, yet if we want something to happen when it is clicked, we need another tool.
That tool is JavaScript. It is the part that reacts to a click, calculates a number, changes a piece of text and makes decisions. The ideas of variables, conditions and loops that you learned in Python and Scratch appear again here; only the way we write them changes.
This lesson is the first step into JavaScript. We will not change the page yet; first we will get to know the language, define variables and print results to the console. In the next lesson we will connect this knowledge to the page itself.
Short definition: JavaScript is a programming language, run directly by the browser, that we use to write the behaviour of web pages.
How is JavaScript added to a page?
The browser can run JavaScript just as it reads HTML and CSS. To connect our code to a page, we use the <script> tag.
The cleanest method is to write the code in a separate file and link it to the HTML. This keeps structure, appearance and behaviour tidy in separate files.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>First JavaScript</title>
</head>
<body>
<h1>Hello</h1>
<script src="app.js"></script>
</body>
</html>The line <script src="app.js"> links the code in the app.js file to the page. We place this tag just before the closing </body>, so the code runs after the page content has loaded.
Opening the console
To see the results of our code, we use the browser's console. The console is a small window that shows messages and errors. In most browsers it opens with the F12 key, or with right-click > "Inspect", and sits under the "Console" tab.
Let us write this in the app.js file:
console.log("Hello, JavaScript!");The console.log(...) command writes the value inside the parentheses to the console. This is the equivalent of the print() command in Python. When the page opens, we see the message in the console.
Variables: let and const
A variable is a named box that stores a value. Remember the "create a variable" block in Scratch, and writing number = 5 in Python; JavaScript has the same idea, we just put a keyword in front of it.
When we define a variable in JavaScript, we use one of two words:
let: for boxes whose value can change later.const: for boxes whose value will never change (a constant).
let score = 0;
const teamName = "Eagles";
score = score + 10;
console.log(score);
console.log(teamName);Here score is a let, so its value can change; it starts at 0 and later becomes 10. teamName is a const, so it is fixed. If we try to change a const value, JavaScript gives an error.
Tip: if you are unsure, start with const. If you really need to change the value, switch it to let. This prevents accidental changes.
Basic data types and operations
We can put different types of values inside variables. The three most common types are:
- Number: figures like
7,3.5,-2. - String (text): writing inside quotation marks, for example
"hello". - Boolean: only
trueorfalse.
let age = 12; // number
let name = "Derin"; // string
let isMember = true; // booleanWorking with numbers
We can do maths with numbers. The signs are familiar: + add, - subtract, * multiply, / divide.
let width = 4;
let height = 6;
let area = width * height;
console.log(area); // 24Joining text
We can join strings end to end with the + sign. This is called concatenation.
let name = "Derin";
let greeting = "Hello " + name + "!";
console.log(greeting); // Hello Derin!Careful: if we write "5" + 3, the result is not 8 but the text "53". That is because "5" inside quotes is text, not a number. When doing maths, make sure your values have no quotation marks.
Conditions and loops: familiar ideas
The condition (if...) and loop (repeat...) structures you know from Python and Scratch also exist in JavaScript. Only the writing is a little different: conditions start with if, and blocks are wrapped in curly braces { }.
Condition
let temperature = 32;
if (temperature > 30) {
console.log("Drink water, it is hot.");
} else {
console.log("The weather is cool.");
}If if (condition) is true the first block runs, otherwise the else block runs. For comparisons we use >, <, >=, <=, and === for equality.
Loop
for (let i = 1; i <= 3; i++) {
console.log("Lap " + i);
}This loop writes three lines to the console: "Lap 1", "Lap 2", "Lap 3". i++ increases i by one each time; when the condition i <= 3 is no longer met, the loop stops.
Mini practice
We will write a small program that calculates the total time of a sports session. As a model, there are four running laps; whatever each lap takes in minutes, we find the total.
Write this in the app.js file:
const lapCount = 4;
let lapTime = 3; // minutes
let total = lapCount * lapTime;
console.log("Lap count: " + lapCount);
console.log("Total time: " + total + " minutes");
if (total > 10) {
console.log("Long session, take a break.");
}Open the page, open the console and look at the messages. Then change the value of lapTime to 5, save and refresh the page. Watch how the total changes and when the condition message appears.
A small challenge: also add a for loop and try printing each lap to the console one by one.
Common mistakes
Forgetting the semicolon and parentheses
JavaScript likes a ; at the end of lines, and parentheses are required in calls like console.log(...). console.log "hello" will not work; the correct form is console.log("hello");.
Trying to change a const value
The value of a box defined with const cannot be changed. If it needs to change, use let from the start.
Mixing up numbers and text
"5" + "2" gives "52", not 7. If you want to calculate, do not use quotation marks: 5 + 2.
Forgetting to look at the console
console.log messages do not appear on the page, only in the console. If you cannot see a result, first make sure you have opened the console.
Confusing one equals sign with three
= assigns a value (score = 10). To compare, we use === (score === 10). Mixing these two is a common mistake.
Safety note
- Try your code on your own computer or in a safe editor that your teacher has shown you.
- Do not write personal information into the console or the code: no real full name, address, phone number, school name or password. Use nicknames like "Derin" or "Eagles" in examples.
- Before running code you found on the internet, show it to an adult first. Code you do not know can do things you did not expect.
- This academy has no real membership or data-collection form; the names and scores in the examples are for practice only.
Lesson summary
- JavaScript is the language that adds behaviour and calculation to web pages; it is added to a page with the
<script>tag. console.log(), likeprint()in Python, prints values to the console.- Variables are defined with
let(can change) andconst(constant). - The basic types are number, string and boolean (true/false);
+adds numbers but joins strings. - The condition (
if/else) and loop (for) ideas are the same as in Scratch and Python, only the writing differs.
Review questions
- Which tag do we use to link JavaScript code to an HTML page?
- What does the
console.log()command do, and what is its equivalent in Python? - What is the difference between
letandconst? - What is the result of
"3" + "4", and why? - How many lines does this loop write to the console?
for (let i = 1; i <= 5; i++) { console.log(i); }
Answers
- We use the
<script>tag; usually we link it to a separate.jsfile withsrcand place it just before the closing</body>. console.log()prints the value inside the parentheses to the browser console. It is the equivalent of theprint()command in Python.letis used for variables whose value can change later, whileconstis used for constants whose value will never change.- The result is the text
"34". Because values inside quotation marks are text, not numbers, and the+sign joins strings end to end. - It writes five lines: 1, 2, 3, 4 and 5. The loop starts at
i= 1 and runs as long as the conditioni <= 5is met.
Source and verification note
For “Introduction to JavaScript”, verification focuses on whether the relationship between How is JavaScript added to a page? and Variables: let and const remains consistent across examples. Examples use standards-oriented HTML, CSS and browser JavaScript. A page should be checked not only visually but also for keyboard use, focus order, mobile layout and meaningful heading structure.
Next lesson
The DOM and Interaction: We will learn to select and change real elements on the page with JavaScript, and to run an event when a button is clicked.