Table of Contents
JavaScript is the programming language that brings websites to life. From interactive buttons to complex web applications, JavaScript is everywhere on the modern web. In this tutorial, we'll cover the essential basics you need to start your JavaScript journey.
What is JavaScript?
JavaScript is a versatile programming language that runs in web browsers, making websites interactive and dynamic. Unlike HTML (which structures content) and CSS (which styles it), JavaScript adds behavior and functionality to web pages.
Did You Know?
JavaScript was created in just 10 days in 1995 and is now one of the most popular programming languages in the world!
Your First JavaScript Program
Let's start with the classic 'Hello, World!' program. This simple code displays a message in the browser's console:
// Your first JavaScript program
console.log('Hello, World!');
// You can also show an alert
alert('Welcome to JavaScript!');Variables: Storing Information
Variables are containers for storing data. In JavaScript, you can declare variables using let, const, or var:
// Using let (can be changed)
let name = 'Alice';
let age = 12;
// Using const (cannot be changed)
const PI = 3.14159;
const schoolName = 'Modern Age Coders';
// Changing a variable
name = 'Bob';
age = age + 1;
console.log(name); // Output: Bob
console.log(age); // Output: 13Pro Tip
Use 'const' by default, and only use 'let' when you know the value will change. Avoid 'var' in modern JavaScript!
Data Types in JavaScript
JavaScript has several basic data types you'll use frequently:
- String: Text data enclosed in quotes ('hello' or "hello")
- Number: Numeric values (42, 3.14, -7)
- Boolean: True or false values
- Array: Lists of values [1, 2, 3, 4]
- Object: Collections of key-value pairs
// Different data types
let message = 'Hello!'; // String
let score = 95; // Number
let isPassing = true; // Boolean
let colors = ['red', 'blue']; // Array
let student = { // Object
name: 'Alice',
grade: 7
};Functions: Reusable Code Blocks
Functions let you write code once and use it many times. They're like recipes that you can follow whenever you need them:
// Define a function
function greet(name) {
return 'Hello, ' + name + '!';
}
// Use the function
console.log(greet('Alice')); // Output: Hello, Alice!
console.log(greet('Bob')); // Output: Hello, Bob!
// Function with multiple parameters
function add(a, b) {
return a + b;
}
console.log(add(5, 3)); // Output: 8Conditional Statements: Making Decisions
Conditional statements let your code make decisions based on different conditions:
let age = 15;
if (age >= 18) {
console.log('You are an adult');
} else if (age >= 13) {
console.log('You are a teenager');
} else {
console.log('You are a child');
}
// Output: You are a teenagerLoops: Repeating Actions
Loops help you repeat actions without writing the same code multiple times:
// For loop - count from 1 to 5
for (let i = 1; i <= 5; i++) {
console.log('Count: ' + i);
}
// While loop - repeat while condition is true
let countdown = 3;
while (countdown > 0) {
console.log(countdown);
countdown--;
}
console.log('Blast off!');
Working with Arrays
Arrays are lists that can hold multiple values. They're incredibly useful for storing collections of data:
// Create an array
let fruits = ['apple', 'banana', 'orange'];
// Access array elements (starts at 0)
console.log(fruits[0]); // Output: apple
// Add to array
fruits.push('grape');
// Loop through array
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}Practice Project: Simple Calculator
Let's put everything together with a simple calculator function:
function calculator(num1, num2, operation) {
if (operation === 'add') {
return num1 + num2;
} else if (operation === 'subtract') {
return num1 - num2;
} else if (operation === 'multiply') {
return num1 * num2;
} else if (operation === 'divide') {
return num1 / num2;
} else {
return 'Invalid operation';
}
}
// Test the calculator
console.log(calculator(10, 5, 'add')); // Output: 15
console.log(calculator(10, 5, 'subtract')); // Output: 5
console.log(calculator(10, 5, 'multiply')); // Output: 50
console.log(calculator(10, 5, 'divide')); // Output: 2The best way to learn programming is by doing. Write code every day, even if it's just for 15 minutes.
â Modern Age Coders
Congratulations!
You've learned the basics of JavaScript! Now it's time to practice and build projects.
Next Steps
Congratulations! You've learned the basics of JavaScript. Here's what to explore next:
- Practice with coding challenges on platforms like CodeWars or LeetCode
- Learn about DOM manipulation to make interactive web pages
- Explore JavaScript frameworks like React or Vue.js
- Build small projects like a to-do list or simple game
- Join our Modern Age Coders community for support and guidance
Remember, everyone starts as a beginner. The key is consistent practice and not being afraid to make mistakes. Questions? We're here to help. Happy coding!
