JavaScript

JavaScript is a high-level, dynamic, and interpreted programming language that is widely used for web development. It is a key technology of the World Wide Web, alongside HTML and CSS. JavaScript enables interactive web pages and is an essential part of web applications.

• Interactive Websites: JavaScript allows developers to create interactive effects within web browsers, such as dynamic content updates, form validations, and animated graphics.

• Versatile: It is versatile and can be used for both client-side and server-side development. On the client-side, it runs in the user's browser and can interact with the HTML and CSS of a webpage. On the server-side, it runs on servers using frameworks like Node.js.

• Rich Ecosystem: JavaScript has a rich ecosystem of libraries and frameworks, such as React, Angular, and Vue.js, which simplify and enhance web development.

• Popularity: It is one of the most popular programming languages in the world, making it a valuable skill for developers.

---

1. JavaScript Syntax and Structure

JavaScript syntax is the set of rules that define a correctly structured JavaScript program. For example:

let message = "Hello, World!";
console.log(message);

2. Variables, Data Types, and Operators

Variables store data values, and data types define the kind of data. Operators perform operations on variables and values. Example:

let number = 10; // number data type
let string = "JavaScript"; // string data type
let isTrue = true; // boolean data type

let sum = number + 5; // + is an operator
console.log(sum); // 15

3. Functions and Scope

Functions are blocks of code designed to perform particular tasks. Scope defines the accessibility of variables. Example:

function greet(name) {
    let message = "Hello, " + name + "!";
    console.log(message);
}

greet("Alice"); // Hello, Alice!

4. Control Flow: Conditionals and Loops

Control flow statements control the execution order of statements. Example:

let age = 18;

if (age >= 18) {
    console.log("You are an adult.");
} else {
    console.log("You are a minor.");
}

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

5. Arrays and Objects

Arrays and objects store collections of data. Example:

let fruits = ["Apple", "Banana", "Cherry"];
let person = { name: "John", age: 30 };

console.log(fruits[0]); // Apple
console.log(person.name); // John

6. Strings

Strings are used for storing and manipulating text. Example:

let text = "JavaScript";
console.log(text.length); // 10
console.log(text.toUpperCase()); // JAVASCRIPT

7. Booleans

Booleans represent true or false. Example:

let isSunny = true;
if (isSunny) {
    console.log("Let's go outside!");
}

8. IF, Else, and Else IF

Conditional statements perform different actions based on conditions. Example:

let score = 85;

if (score >= 90) {
    console.log("Grade A");
} else if (score >= 80) {
    console.log("Grade B");
} else {
    console.log("Grade C");
}

9. While Loop

The while loop repeats a block of code as long as a specified condition is true. Example:

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

10. JSON

JSON (JavaScript Object Notation) is a format for storing and transporting data. Example:

let jsonString = '{"name":"John", "age":30}';
let jsonObject = JSON.parse(jsonString);
console.log(jsonObject.name); // John

11. Regular Expressions

Regular expressions are patterns used to match character combinations in strings. Example:

let text = "Hello, World!";
let pattern = /Hello/;
console.log(pattern.test(text)); // true

12. Asynchronous Programming (Callbacks, Promises, Async/Await)

Asynchronous programming handles operations that take time to complete. Examples:

• Callback:

function fetchData(callback) {
    setTimeout(() => {
        callback("Data received");
    }, 1000);
}

fetchData(data => {
    console.log(data); // Data received
});

• Promise:

let promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("Promise resolved");
    }, 1000);
});

promise.then(data => {
    console.log(data); // Promise resolved
});

• Async/Await:

async function fetchData() {
    let promise = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Data received");
        }, 1000);
    });

    let result = await promise;
    console.log(result); // Data received
}

fetchData();

13. Error Handling and Debugging

Error handling catches errors to prevent crashes. Example:

try {
    let result = undefinedVariable + 1;
} catch (error) {
    console.log("An error occurred: " + error.message);
}

14. JavaScript Design Patterns

Design patterns are reusable solutions to common programming problems. Example:

• Singleton:

let Singleton = (function () {
    let instance;
    function createInstance() {
        return new Object("I am the instance");
    }
    return {
        getInstance: function () {
            if (!instance) {
                instance = createInstance();
            }
            return instance;
        }
    };
})();

let instance1 = Singleton.getInstance();
let instance2 = Singleton.getInstance();
console.log(instance1 === instance2); // true

15. JS Project - Interactive To-Do List

A project that allows users to add, edit, and delete tasks. Example:

let todoList = [];

function addTask(task) {
    todoList.push(task);
    displayTasks();
}

function displayTasks() {
    console.log("To-Do List:");
    todoList.forEach((task, index) => {
        console.log((index + 1) + ". " + task);
    });
}

addTask("Learn JavaScript");
addTask("Build a project");
// To-Do List:
// 1. Learn JavaScript
// 2. Build a project