1. Introduction to JavaScript

JavaScript is a powerful, lightweight, and interpreted programming language primarily used in web development to enhance user interaction on websites. Unlike server-side languages, JavaScript runs directly in the browser (client-side).

JavaScript is integral to making web pages dynamic by responding to user actions such as clicking buttons, entering data in forms, or interacting with elements. It works alongside HTML (for structure) and CSS (for styling).

Key Features of JavaScript:

• It is an interpreted language, meaning it doesn’t require compilation.
• Supports Object-Oriented, Functional, and Procedural programming paradigms.
• Event-driven and used for adding dynamic effects and validations on web pages.

2. JavaScript Syntax

JavaScript syntax refers to the rules governing the structure of statements in JavaScript. Below are some of the core aspects of JavaScript syntax:

2.1 Statements

JavaScript statements are executed in sequence and are often separated by semicolons ;. Each line of code that performs an action is a statement.

let name = "John"; // Statement to declare a variable
alert("Hello, " + name); // Statement to display an alert

2.2 Case Sensitivity

JavaScript is case-sensitive, meaning that myVar and myvar are considered different variables.

2.3 Comments

JavaScript allows for single-line (//) and multi-line (/* ... */) comments, which help improve code readability.

// This is a single-line comment
/* This is a 
   multi-line comment */

2.4 Variables

Variables are used to store data values. In JavaScript, variables can be declared using var, let, or const.

• var: Declares a variable (globally or locally within a function).
• let: Block-scoped variable declaration (introduced in ES6).
• const: Declares a constant, which cannot be reassigned.

var x = 5;
let y = 10;
const z = 15;

3. Variables and Data Types

In JavaScript, variables can hold different types of data, such as numbers, strings, or objects. Here are the primary data types:

• Number: Represents numeric values (e.g., 10, 3.14).
• String: Represents text enclosed in quotes (e.g., "Hello World").
• Boolean: Represents true or false values (e.g., true, false).
• Array: Represents a collection of values (e.g., [1, 2, 3]).
• Object: Represents key-value pairs (e.g., {name: "John", age: 30}).
• Undefined: A variable that has been declared but not assigned a value.
• Null: Represents a deliberate non-value or empty value.

let num = 42;           // Number
let name = "Alice";     // String
let isActive = true;    // Boolean
let colors = ["red", "green", "blue"]; // Array
let person = {firstName: "John", lastName: "Doe"}; // Object

4. Operators in JavaScript

Operators are symbols used to perform operations on values and variables. They are categorized as follows:

4.1 Arithmetic Operators

Arithmetic operators are used to perform mathematical calculations:

• +: Addition
• -: Subtraction
• *: Multiplication
• /: Division
• %: Modulus (remainder of a division)

let sum = 10 + 5;    // 15
let difference = 10 - 5; // 5
let product = 10 * 5;    // 50
let quotient = 10 / 5;   // 2

4.2 Comparison Operators

Comparison operators compare values and return true or false.

• ==: Equal to
• ===: Strictly equal to (checks value and type)
• !=: Not equal to
• !==: Strictly not equal to
• >: Greater than
• <: Less than

let isEqual = (10 == "10");    // true (type is not checked)
let isStrictEqual = (10 === "10"); // false (type is checked)

4.3 Logical Operators

Logical operators are used to combine conditions:

• &&: Logical AND
• ||: Logical OR
• !: Logical NOT

let a = true && false; // false
let b = true || false; // true
let c = !true;         // false

5. Functions in JavaScript

A function is a block of code designed to perform a specific task. Functions allow code reusability, reducing repetition and improving organization.

5.1 Function Declaration

Functions are defined using the function keyword, followed by a name, parentheses, and a block of code.

function greet() {
    alert("Hello, World!");
}

To call a function:

greet();

5.2 Function Parameters and Return Values

Functions can accept parameters (input values) and return a result using the return keyword.

function add(a, b) {
    return a + b;
}
let result = add(5, 10);  // 15

6. Events in JavaScript

JavaScript can interact with user actions through events. Events allow functions to be executed when certain actions occur, such as clicks, key presses, or mouse movements.

6.1 Common Event Types

• onclick: Triggered when an element is clicked.
• onmouseover: Triggered when the mouse pointer moves over an element.
• onkeydown: Triggered when a key is pressed down.

document.getElementById("myButton").onclick = function() {
    alert("Button clicked!");
};

7. Document Object Model (DOM)

The Document Object Model (DOM) is a programming interface for HTML documents. It represents the document as a tree structure, where each element is an object that JavaScript can manipulate.

7.1 Common DOM Methods

• getElementById(): Selects an element by its ID.
• getElementsByClassName(): Selects elements by class name.
• querySelector(): Selects the first element that matches a CSS selector.

document.getElementById("demo").innerHTML = "Hello, JavaScript!";

8. Loops in JavaScript

Loops allow you to repeatedly execute a block of code. JavaScript supports several types of loops:

8.1 for Loop

The for loop repeats code a specific number of times:

for (let i = 0; i < 5; i++) {
    console.log(i);  // Outputs 0 to 4
}

8.2 while Loop

The while loop repeats code as long as a condition is true:

let i = 0;
while (i < 5) {
    console.log(i);
    i++;
}

8.3 do...while Loop

The do...while loop always executes at least once before checking the condition:

let i = 0;
do {
    console.log(i);
    i++;
} while (i < 5);

9. Arrays in JavaScript

Arrays are used to store multiple values in a single variable. Each item in an array has an index, starting from 0.

let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits[0]);  // Output: Apple

9.1 Array Methods

JavaScript provides several built-in methods to manipulate arrays:

• push(): Adds an element to the end of the array.
• pop(): Removes the last element of the array.
• shift(): Removes the first element of the array.
• unshift(): Adds an element to the beginning of the array.

10. Objects in JavaScript

Objects in JavaScript are collections of key-value pairs. They allow you to store multiple related values and functions (called methods).

let car = {
    make: "Toyota",
    model: "Corolla",
    year: 2020
};
console.log(car.make); // Output: Toyota

10.1 Accessing Object Properties

Properties of an object can be accessed using dot notation or bracket notation:

console.log(car["model"]); // Output: Corolla

11. Error Handling in JavaScript

Errors can occur during the execution of JavaScript code. JavaScript provides the try...catch statement to handle errors and prevent the program from crashing.

try {
    // Code that may cause an error
    let result = x / y;
} catch (error) {
    console.error("An error occurred: " + error.message);
}