JavaScript Essentials
The Language of the Web, Explained Step by Step
A beginner-friendly practical guide with examples and exercises
1. What Is JavaScript?
JavaScript is the programming language of the web. It runs inside every modern browser and is
responsible for the interactivity you experience on websites: dropdown menus, image sliders, form
validation, live updates, and animations. With the [Link] runtime, JavaScript also runs on servers,
which means a single language can power both the front end and the back end of an application.
JavaScript should not be confused with Java; despite the similar name, they are entirely separate
languages. JavaScript is governed by a standard called ECMAScript, and modern versions (often
called ES6 and later) introduced many features that make the language pleasant to write.
• Runs everywhere: browsers, servers, desktop apps, and mobile apps.
• Event-driven: code reacts to clicks, key presses, and network responses.
• No setup needed to start: open a browser console and type immediately.
• Asynchronous: it can wait for slow tasks without freezing the page.
2. Running JavaScript
The quickest way to experiment is the browser console. Open your browser's developer tools (often
by pressing F12) and select the Console tab. You can also place code in an HTML file using a script
tag.
<script>
[Link]("Hello from JavaScript!");
</script>
3. Variables
Modern JavaScript declares variables with const for values that will not be reassigned and let for
values that will. The older keyword var still exists but is generally avoided in new code because its
behaviour can be surprising.
const name = "Alice"; // cannot be reassigned
let score = 0; // can change later
score = score + 10;
[Link](name, score); // Alice 10
Data types
• String: text in quotes or backticks.
• Number: integers and decimals share one type.
• Boolean: true or false.
JavaScript Essentials Page 2
• Array: an ordered list, e.g. [1, 2, 3].
• Object: a collection of named properties.
• null and undefined: represent "no value".
Template literals
Backtick strings let you embed variables directly, which is cleaner than joining strings with plus signs.
const user = "Ada";
[Link](`Welcome back, ${user}!`);
JavaScript Essentials Page 3
4. Operators and Comparisons
JavaScript provides arithmetic operators and comparison operators. Importantly, prefer the strict
equality operator === over ==, because === compares both value and type and avoids confusing
automatic conversions.
[Link](7 + 3); // 10
[Link](7 % 3); // 1 (remainder)
[Link](5 === "5"); // false (different types)
[Link](5 == "5"); // true (avoid this)
5. Functions
Functions group reusable logic. JavaScript offers a traditional syntax and a shorter arrow-function
syntax that is very common in modern code.
// traditional function
function add(a, b) {
return a + b;
}
// arrow function
const multiply = (a, b) => a * b;
[Link](add(2, 3)); // 5
[Link](multiply(2, 3)); // 6
6. Conditionals and Loops
Decisions use if/else statements, and repetition uses for and while loops or array helper methods.
const hour = 14;
if (hour < 12) {
[Link]("Good morning");
} else {
[Link]("Good afternoon");
}
for (let i = 0; i < 3; i++) {
[Link]("Step", i);
}
JavaScript Essentials Page 4
7. Arrays and Their Methods
Arrays hold ordered collections. Beyond storing items, they offer powerful methods like map, filter,
and forEach that let you transform data expressively.
const numbers = [1, 2, 3, 4];
const doubled = [Link](n => n * 2); // [2,4,6,8]
const evens = [Link](n => n % 2 === 0); // [2,4]
[Link](n => [Link](n));
8. Objects
Objects group related data under named keys. They are central to modelling real-world entities such
as a user or a product.
const car = {
brand: "Toyota",
year: 2022,
start() {
return `${[Link]} is starting`;
}
};
[Link]([Link]); // Toyota
[Link]([Link]()); // Toyota is starting
JavaScript Essentials Page 5
9. The DOM: Making Pages Interactive
In the browser, the Document Object Model (DOM) represents the page as objects JavaScript can
read and change. This is how you respond to user actions and update what people see.
const button = [Link]("#myButton");
const output = [Link]("#output");
[Link]("click", () => {
[Link] = "You clicked the button!";
});
10. Asynchronous JavaScript
Many tasks, such as fetching data from a server, take time. JavaScript handles these without freezing
the page using promises and the async/await syntax.
async function loadData() {
try {
const response = await fetch("[Link]
const data = await [Link]();
[Link](data);
} catch (error) {
[Link]("Request failed:", error);
}
}
loadData();
11. Common Beginner Mistakes
• Using == instead of === and getting unexpected comparisons.
• Forgetting that array indexes start at 0.
• Trying to use a variable before it is defined.
• Confusing assignment (=) with comparison (===).
• Not handling errors when fetching data over the network.
12. Practice Exercises
• Make a button that toggles a paragraph's visibility when clicked.
• Write a function that returns the largest number in an array.
JavaScript Essentials Page 6
• Build a counter that increases and decreases with two buttons.
• Filter a list of names to keep only those longer than four letters.
• Fetch and display a list of items from a public API.
13. Glossary
• DOM: the page structure JavaScript can manipulate.
• Event: an action such as a click or key press.
• Callback: a function passed to run later.
• Promise: a value that will be available in the future.
• Array method: a built-in function on arrays like map or filter.
14. Next Steps
After mastering the basics, practise by adding interactivity to a simple web page. Then explore the
fetch API for talking to servers, learn about modules for organising code, and eventually try a
framework such as React or Vue when your projects become larger. Consistent practice with small,
real projects is the surest path to fluency.
JavaScript Essentials Page 7