JavaScript Basics

Welcome to the JavaScript Basics tutorial. This guide will introduce you to the fundamental concepts of JavaScript, the programming language that powers dynamic and interactive web experiences.

What is JavaScript?

JavaScript is a high-level, interpreted programming language that is one of the core technologies of the World Wide Web. It enables you to create dynamic content, control multimedia, animate images, and pretty much everything else on a webpage. Unlike compiled languages, JavaScript is interpreted line by line by the browser.

Getting Started: Your First Script

You can include JavaScript code in your HTML documents in two primary ways:

Inline: Directly within HTML tags using event handlers (though less recommended for larger scripts).
Internal: Within a <script> tag in the <head> or <body> of your HTML.
External: By linking to a separate .js file using the src attribute of the <script> tag. This is the most common and recommended approach for organization and reusability.

Example: Using an External File

First, create a file named script.js with the following content:

                
// script.js
console.log("Hello from external JavaScript!");
alert("Welcome to JavaScript!");

Then, in your HTML file (e.g., index.html), link to it:

                
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Example</title>
</head>
<body>
    <h1>My Web Page</h1>

    <!-- Link to your JavaScript file -->
    <script src="script.js"></script>
</body>
</html>
                
            

When you open the HTML file in a browser, you'll see an alert box, and a message will appear in the browser's developer console.

Variables and Data Types

Variables are used to store data values. JavaScript has several primitive data types:

String: Represents text (e.g., "Hello", 'World').
Number: Represents numeric values (e.g., 10, 3.14).
Boolean: Represents a truth value (true or false).
Undefined: Represents an uninitialized variable.
Null: Represents the intentional absence of any object value.

You can declare variables using var, let, or const:

var: Function-scoped or globally scoped (older).
let: Block-scoped (can be reassigned).
const: Block-scoped (cannot be reassigned, for constants).

Example: Variables

                
let message = "Learning JavaScript is fun!";
const year = 2023;
let isLearning = true;
let user; // undefined

console.log(message);
console.log("The current year is: " + year);
console.log("Am I learning? " + isLearning);
console.log(user); // Output: undefined
                
            

Operators

Operators perform operations on variables and values. Key operators include:

Arithmetic: +, -, *, /, % (remainder)
Assignment: =, +=, -=, etc.
Comparison: == (equal value), === (equal value and type), !=, !==, >, <, >=, <=
Logical: && (AND), || (OR), ! (NOT)

Example: Operators

                
let x = 10;
let y = 5;
let sum = x + y; // 15
let isEqual = (x === 10); // true

console.log("Sum:", sum);
console.log("Is x equal to 10?", isEqual);
                
            

Control Flow: Conditionals and Loops

Control flow statements allow you to execute code based on certain conditions or repeat actions.

Conditionals (if, else if, else)

Used to make decisions in your code.

                
let temperature = 25;

if (temperature > 30) {
    console.log("It's hot!");
} else if (temperature > 20) {
    console.log("It's a pleasant day.");
} else {
    console.log("It's cool.");
}
                
            

Loops (for, while, for...of)

Used to repeat a block of code.

                
// For loop
console.log("Counting to 5:");
for (let i = 0; i < 5; i++) {
    console.log(i);
}

// While loop
let count = 0;
console.log("Counting with while:");
while (count < 3) {
    console.log("Iteration:", count);
    count++;
}

// Array example with for...of
const fruits = ["Apple", "Banana", "Cherry"];
console.log("Fruits:");
for (const fruit of fruits) {
    console.log(fruit);
}
                
            

Functions

Functions are blocks of reusable code designed to perform a particular task. They help in organizing code and avoiding repetition.

Defining and Calling a Function

                
// Function declaration
function greet(name) {
    return "Hello, " + name + "!";
}

// Calling the function
let greetingMessage = greet("Alice");
console.log(greetingMessage); // Output: Hello, Alice!

// Arrow function (ES6+)
const multiply = (a, b) => {
    return a * b;
};
console.log("2 * 3 =", multiply(2, 3)); // Output: 2 * 3 = 6
                
            

Next Steps

This tutorial covered the absolute basics. To become proficient in JavaScript, you should explore:

Arrays and Objects
DOM Manipulation (interacting with HTML elements)
Events (handling user interactions)
Asynchronous JavaScript (AJAX, Promises, async/await)
Modern ES6+ features

Continue to the Advanced JavaScript tutorial for more.