Introduction to JavaScript

What is JavaScript?

JavaScript is a high-level, versatile programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. It enables interactive web pages and is an essential part of web applications.

JavaScript Engines

V8: Google's open-source JavaScript engine, used in Chrome and Node.js.
SpiderMonkey: Mozilla's JavaScript engine, used in Firefox.
JavaScriptCore: Apple's JavaScript engine, used in Safari.

The Role of JavaScript in Web Development

JavaScript is used to create dynamic and interactive content on websites. It can be used to manipulate the DOM (Document Object Model), handle events, and make asynchronous requests to servers.

Client-Side vs. Server-Side

Client-Side: JavaScript running in the browser, responsible for the user interface and interactivity.
Server-Side: JavaScript running on the server, using environments like Node.js to build back-end services and APIs.

Core Concepts

Variables, Data Types, and Operators

JavaScript has several data types, including String, Number, Boolean, Object, and undefined. Variables can be declared using var, let, or const.

Data Types

Primitive Types: string, number, boolean, null, undefined, symbol, bigint.
Object Type: object (including arrays, functions, and other objects).

let name = "Alice"; // string
let age = 30;      // number
let isStudent = true; // boolean
let person = { name: "Bob", age: 25 }; // object

Operators

Arithmetic Operators: +, -, *, /, %
Comparison Operators: ==, ===, !=, !==, >, <, >=, <=
Logical Operators: &&, ||, !

Control Flow

Conditional statements like if...else and loops like for and while allow you to control the execution flow of your code.

Conditional Statements

if...else: Executes a block of code if a condition is true, and another block if it's false.
switch: Used to perform different actions based on different conditions.

let score = 85;

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

Loops

for: Used to iterate over a block of code a number of times.
while: Used to iterate over a block of code while a condition is true.
for...of: Used to iterate over the values of an iterable object (like an array).

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

// for...of loop
const fruits = ["apple", "banana", "cherry"];
for (const fruit of fruits) {
    console.log(fruit);
}

Functions and Scope

Functions are fundamental building blocks in JavaScript. Understanding function scope (including closures) is crucial for writing robust code.

Defining a Function

Function Declaration: function myFunction() { ... }
Function Expression: const myFunction = function() { ... };
Arrow Function: const myFunction = () => { ... };

// Function declaration
function greet(name) {
    return `Hello, ${name}!`;
}

// Arrow function
const add = (a, b) => a + b;

Scope and Closures

Scope: Determines the accessibility of variables.
Closures: A function that has access to the variables in its outer (enclosing) function's scope chain.

function outer() {
    let count = 0;
    function inner() {
        count++;
        console.log(count);
    }
    return inner;
}

const counter = outer();
counter(); // 1
counter(); // 2

The Document Object Model (DOM)

What is the DOM?

The DOM is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. JavaScript is the primary language used to interact with the DOM.

The DOM Tree

The DOM represents the document as a tree of objects, where each object corresponds to a part of the document (e.g., an element, an attribute, or text).

Manipulating the DOM

You can use JavaScript to add, remove, and modify HTML elements and their attributes. This is how you can create dynamic and responsive user interfaces.

Selecting Elements

getElementById(): Selects an element by its ID.
querySelector(): Selects the first element that matches a CSS selector.
querySelectorAll(): Selects all elements that match a CSS selector.

// Assuming you have <h1 id="my-heading">Hello</h1> in your HTML
const heading = document.getElementById("my-heading");

// Assuming you have <button class="btn">Click Me</button>
const buttons = document.querySelectorAll(".btn");

Modifying Elements

You can change the content, style, and attributes of elements.

const heading = document.getElementById("my-heading");
heading.textContent = "New Heading";
heading.style.color = "blue";

Creating and Appending Elements

You can create new elements from scratch and add them to the DOM.

// Create a new paragraph element
const newParagraph = document.createElement('p');
newParagraph.textContent = 'This is a new paragraph.';

// Add it to the end of the document body
document.body.appendChild(newParagraph);

Handling Events

JavaScript allows you to respond to user interactions like clicks, keypresses, and mouse movements.

// Get a button element
const myButton = document.querySelector('#myButton');

// Add a click event listener
myButton.addEventListener('click', () => {
  alert('Button was clicked!');
});

Asynchronous JavaScript

Callbacks, Promises, and Async/Await

Asynchronous operations are common in web development, such as fetching data from a server. JavaScript provides several ways to handle asynchronous code, including callbacks, Promises, and the more modern async/await syntax.

Callbacks

A function that is passed as an argument to another function and is executed after some operation has been completed. This can lead to "callback hell" if not managed carefully.

function fetchData(callback) {
    setTimeout(() => {
        callback({ data: "Some data from the server" });
    }, 1000);
}

fetchData((result) => {
    console.log(result.data);
});

Promises

An object that represents the eventual completion (or failure) of an asynchronous operation. They allow you to chain asynchronous operations in a more readable way.

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            // You can also call reject(new Error('Failed to fetch'))
            resolve({ data: "Some data from the server" });
        }, 1000);
    });
}

fetchData()
  .then((result) => {
    console.log(result.data);
  })
  .catch((error) => {
    console.error(error);
  });

Async/Await

A more modern syntax for writing asynchronous code that looks and behaves a lot more like synchronous code, making it easier to read and write.

async function displayData() {
    try {
        const response = await fetch('https://api.github.com/users/github');
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('Could not fetch data:', error);
    }
}

displayData();