Web Development Mastery JavaScript TypeScript PHP
JavaScript Fundamentals
Giving Instructions to the Web
Think of a website as a house. HTML is the frame and walls, the structure. CSS is the paint, furniture, and decorations, the style. JavaScript is the electricity and plumbing that makes everything work. It turns a static page into an interactive experience. When you click a button, see a photo gallery, or fill out a form, JavaScript is usually working behind the scenes.
It's a language that lets you give instructions to the web browser. These instructions can be simple, like changing a color when you hover over a link, or complex, like building a full-featured game. Let's start with the basic building blocks.
Storing Information
To do anything useful, a program needs to remember things. It stores information in variables. Think of a variable as a labeled box where you can put something. You give the box a name, and later you can look inside to see what's there or replace it with something new.
// Use 'let' for variables that might change.
let userAge = 30;
// Use 'const' for constants that never change.
const birthday = 'January 1';
// Change the value of the 'let' variable.
userAge = 31;
The information we store comes in different types. The most common are strings, numbers, and booleans.
string
noun
A sequence of characters, like text. Strings are always wrapped in quotes.
number
noun
A numerical value. Can be an integer (like 10) or a decimal (like 3.14).
boolean
noun
A value that can only be true or false. Used for making logical decisions.
Working with Data
Once you have variables, you need to do things with them. Operators are the symbols that perform actions. You already know many of these from math.
Arithmetic operators perform calculations. Comparison operators compare two values. Logical operators combine true or false statements.
Arithmetic operators are straightforward.
| Operator | Name | Example | Result |
|---|---|---|---|
| + | Addition | 5 + 2 | 7 |
| - | Subtraction | 5 - 2 | 3 |
| * | Multiplication | 5 * 2 | 10 |
| / | Division | 10 / 2 | 5 |
| % | Remainder | 5 % 2 | 1 |
Comparison operators check if a statement is true or false. They are the foundation of decision-making in code.
let myAge = 25;
// Is myAge greater than 18? (true)
myAge > 18;
// Is myAge less than 20? (false)
myAge < 20;
// Is myAge exactly equal to 25? (true)
// Note the triple equals, which checks value and type.
myAge === 25;
Logical operators (&& for "and", || for "or") combine multiple true/false checks. For example, to ride a rollercoaster, you might need to be tall and have a ticket.
Making Decisions and Repeating Actions
Control structures direct the flow of your program. They let your code make choices or repeat actions.
The if...else statement is the most common way to make a decision. If a condition is true, do one thing. Otherwise, do something else.
let temperature = 75;
if (temperature > 80) {
console.log("It's hot outside!");
} else {
console.log("It's a nice day.");
}
When you need to do something over and over, you use a loop. A for loop is great when you know exactly how many times you want to repeat an action.
This
forloop will count from 1 to 5 in the console.
for (let i = 1; i <= 5; i++) {
console.log("The count is: " + i);
}
Packaging Code with Functions
As your programs get bigger, you don't want to repeat the same lines of code everywhere. Functions are reusable blocks of code that perform a specific task. You define a function once, and then you can "call" it whenever you need it.
Functions can take inputs, called parameters, which allows them to be flexible. This function takes two numbers and returns their sum.
// Define the function with two parameters: num1 and num2
function addNumbers(num1, num2) {
return num1 + num2;
}
// Call the function with two arguments: 5 and 10
let result = addNumbers(5, 10); // result is now 15
console.log(result);
Changing the Web Page
So far, we've only seen code that runs behind the scenes. The real power of JavaScript on the web is its ability to interact with the HTML and CSS of a page. This is done through the Document Object Model, or DOM.
The DOM is a tree-like representation of your webpage. JavaScript can access and manipulate this tree. It can find an HTML element, change its text, add new elements, or alter its style.
For example, you can use JavaScript to find an element by its ID and change its content. If you had an HTML element like <h1 id="main-title">Welcome!</h1>, you could change its text with the following code.
// 1. Find the element with the ID 'main-title'
let titleElement = document.getElementById('main-title');
// 2. Change its text content
titleElement.textContent = 'Hello, JavaScript!';
This is the core of how web pages become dynamic. By combining variables, operators, control structures, and functions with DOM manipulation, you can create rich, interactive experiences for users.
In the analogy of a website as a house, what role does JavaScript play?
In JavaScript, a __________ is like a labeled container used to store information.
These concepts are the foundation of JavaScript. Mastering them unlocks the ability to build modern, responsive websites.