Introduction to JavaScript: history, features and applications
What is it and why?
Imagine you are the director of your own movie, and your computer is the film studio. HTML is like the script and the sets (text, images, buttons, tables). CSS is the costume designer and lighting technician (colors, fonts, beautiful layout). And JavaScript is the actors and special effects! It is JS that makes everything move, react to button clicks, calculate, show pop-up windows, change images, and even create games.
If a website were a person, then:
- HTML — the skeleton and skin (structure).
- CSS — the clothes and makeup (appearance).
- JavaScript — the brain and muscles (logic and actions).
Without JavaScript, a website would be just a boring book that you can only read, but cannot flip through, click links, play games, or fill out forms. JS makes web pages "alive".
Where is JavaScript used?
- Everywhere on the internet: VKontakte, YouTube, browser games (e.g., Agar.io), online calculators, maps (Yandex.Maps), code editors (like the one you are reading this article in right now).
- Even on servers (using Node.js) — for example, to process messages in chats or store data.
- In mobile applications (React Native) and on desktops (Electron — Discord and VS Code are written on it).
JavaScript is the most popular language in the world! Why? Because it is built directly into the browser. You don't need to install anything (unlike Python, which you have to download). Open a notepad, write code, save it as .html — and you're done! You can run it with a double click.
Important difference from Python: In Python, code runs by itself in the console, while in JavaScript it is always tied to a web page. JS cannot create graphical windows on its own (like pygame), but it can control what is already on the screen — buttons, text, images.
Code examples with explanations
The simplest way to start is to write code directly in the browser. Press F12 (or right-click → "Inspect") and go to the "Console" tab. You can enter commands there. But we will write full-fledged pages.
Create a file test.html on your computer, open it in a notepad, and paste the code from the examples. Then save it and open it in your browser.
Example 1: Hello, world! (the very first program)
// This is a single-line comment. It is not executed.
/* And this is a multi-line comment.
It is needed to explain the code. */
// The alert() command shows a pop-up window with a message.
alert("Hello, world! JavaScript is working!");
// The console.log() command outputs text to the developer console.
// To see the result, press F12 and open the Console tab.
console.log("This is a message in the console. You are great!");
// The document.write() command writes text directly onto the page.
document.write("<h1>This is a heading created by JavaScript!</h1>");
What will happen?
- First, a window with text will pop up.
- Then, a second message will appear in the console (F12).
- At the very end, a large heading will appear on the page.
In Python, the first program is simply print("Hello"). In JS, we use alert() or console.log(). The difference is that JS lives in the browser, so it has access to windows and the page itself.
Example 2: Variables — boxes for data
// A variable is like a box with a label.
// In Python you write: name = "Vasya"
// In JS we use the keyword let (modern way).
let name = "Masha"; // String (text)
let age = 12; // Number
let lovesPizza = true; // Boolean value (yes/no)
let emptyBox = null; // Empty (nothing)
// Let's output everything to the console:
console.log("Name:", name);
console.log("Age:", age);
console.log("Loves pizza?", lovesPizza);
// You can concatenate strings:
let greeting = "Hello, " + name + "! You are " + age + " years old.";
console.log(greeting);
// Or you can use template strings (like f-strings in Python, but with ${}):
let betterGreeting = `Hello, ${name}! You are ${age} years old.`;
console.log(betterGreeting);
// Let's change the variable's value:
age = 13; // Masha had a birthday!
console.log("Now age:", age);
Explanation: Variables are needed to store information. let is like var in Python, but in JS you must write let (or const for constants). Notice the semicolon ; at the end of each line — in Python it's not there, but in JS it is used (although sometimes it works without it, it's better to always use it).
Template strings (with backticks `` ` ``) are very convenient — you insert variables directly into the text using ${}.
Example 3: Conditional if statement (like in life: "If... then...")
let userAge = 15;
// If age is greater than or equal to 18:
if (userAge >= 18) {
console.log("You are an adult! You can watch horror movies.");
} else if (userAge >= 12) {
console.log("You are a teenager! You can play most games.");
} else {
console.log("You are a child. Better read a book.");
}
// Another example: checking if a number is even
let number = 7;
if (number % 2 === 0) { // % is the remainder of division
console.log("The number is even.");
} else {
console.log("The number is odd.");
}
// Note: in JS, === (three equals) is used for comparison,
// not == (two equals). Two equals is a "loose" comparison, it can
// give strange results (e.g., 5 == "5" is true, even though
// a number and a string are different types). Always use ===.
O
```