American Film Academy

Equipping filmmakers of tomorrow, today

Apply
Login
Pay

AFA Web Dev 101

  • joshua@afa.education
  • daniel@afa.education

Modules

Tools & Resources

Courses

Understanding JavaScript – Resource – Week 11

Table of Contents

JavaScript Fundamentals: A Guided Introduction

JavaScript Fundamentals: A Guided Introduction

This document provides a structured overview of fundamental JavaScript concepts. Each section introduces key features with explanations of their purpose, function, and illustrative code examples, progressing from basic operations to more advanced topics.

Level 1: Core Interactions and Output

1.1 Displaying Messages: alert()

Purpose: The alert() function provides a simple mechanism to display a modal message box to the user. It is often used for immediate user notifications or for rudimentary debugging.
Function: It accepts a single string argument, which is displayed as the message content within the dialog box. Script execution is paused until the user dismisses the alert.
Potential: Demonstrates JavaScript’s capability for direct, albeit basic, user interaction within the browser environment.

// JavaScript Code:
function executeAlert() {
    alert("This is a JavaScript alert message.");
}
// To call this function, you would typically use:
// executeAlert();
// Or, as in the button example:
// <button onclick="executeAlert()">Trigger Alert</button>

1.2 Writing to the Document: document.write()

Purpose: The document.write() method allows JavaScript to write HTML expressions or plain text directly into the HTML document stream.
Function: When executed during page loading, it inserts the specified content at its location in the HTML. Caution: If document.write() is called after the HTML document has fully loaded, it will overwrite the entire existing document content. Due to this behavior, its use in modern web development is generally discouraged in favor of DOM manipulation techniques (covered later).
Potential: Illustrates JavaScript’s ability to dynamically generate page content, though its practical application is limited.
(Content will appear here)

// JavaScript Code (Conceptual for page load):
// document.write("<h4>Dynamically Written Title</h4>");
// document.write("<p>This paragraph was added by document.write().</p>");

// Safer demonstration code used for the button:
function executeDocumentWrite() {
    const demoArea = document.getElementById('docWriteDemoArea');
    if (demoArea) {
        // Using innerHTML to append content to a specific element
        // is a common and safer alternative for modifying content post-load.
        demoArea.innerHTML += "<p>Content generated by JavaScript using a targeted approach.</p>";
    }
}

1.3 Logging to the Console: console.log()

Purpose: The console.log() method is an indispensable tool for developers. It outputs messages, variable values, or object details to the browser’s developer console.
Function: It accepts one or more arguments of any type and displays them in the console. This is non-intrusive to the user interface.
Potential: Essential for debugging, tracing code execution, and inspecting data values without altering the webpage’s visual presentation.

(To view the output, open your browser’s developer console. This is typically done by pressing F12 and selecting the “Console” tab.)


// JavaScript Code:
function executeConsoleLog() {
    console.log("Message logged from JavaScript.");
    console.log("Current year:", new Date().getFullYear()); // Example of logging dynamic data
    let sampleVariable = "Test Value for Console";
    console.log("Value of sampleVariable:", sampleVariable);
}

Level 2: Variables and Fundamental Data Types

2.1 Variables: let, const, (and var)

Purpose: Variables serve as named containers for storing data values that can be used and manipulated throughout a script.
Function:
  • let: Declares a block-scoped local variable. Its value can be reassigned. Block scope means the variable is only accessible within the block of code (e.g., inside {} like an if statement or a loop) where it is defined.
  • const: Declares a block-scoped local variable whose value cannot be reassigned after its initial assignment. It must be initialized at declaration. This promotes immutability for assigned values.
  • var: The traditional keyword for variable declaration. It is function-scoped or globally-scoped, not block-scoped. Modern JavaScript development generally favors let and const for clearer scoping rules and to avoid potential issues associated with var.
Potential: Fundamental to all programming, enabling the storage, retrieval, and modification of data, which is essential for creating dynamic and responsive applications.

// JavaScript Code:
function demonstrateVariables() {
    let mutableValue = 100;
    const immutableValue = "ConstantData";
    var legacyVar = true;

    mutableValue = 150; // Allowed for 'let'
    // immutableValue = "NewData"; // Error: Assignment to constant variable.

    let output = `let example: ${mutableValue}\n`;
    output += `const example: ${immutableValue}\n`;
    output += `var example: ${legacyVar}`;

    document.getElementById('variablesDemoOutput').innerText = output;

    // Demonstrating scope (check console for errors if uncommented lines are tested)
    if (true) {
        let blockLet = "Block Scoped with let";
        const blockConst = "Block Scoped with const";
        var funcVar = "Function Scoped with var";
    }
    // console.log(blockLet); // ReferenceError
    // console.log(blockConst); // ReferenceError
    console.log(funcVar); // Accessible (due to var's function scoping)
}

2.2 Basic Data Types

Purpose: Data types define the kind of values that variables can hold and the operations that can be performed on them.
Function: JavaScript is a dynamically-typed language, meaning variable types are determined at runtime. Key primitive data types include:
  • String: Represents textual data, enclosed in single (') or double (") quotes, or backticks (`) for template literals (e.g., "Hello", `Value is ${x}`).
  • Number: Represents numeric values, including integers and floating-point numbers (e.g., 42, 3.14159). Special numeric values include Infinity and NaN (Not a Number).
  • Boolean: Represents logical values, either true or false.
  • Null: Represents the intentional absence of any object value. It is a primitive value that signifies “no value” or “empty”.
  • Undefined: Indicates that a variable has been declared but has not yet been assigned a value.
  • Symbol (ES6+): Represents a unique and immutable primitive value, often used as keys for object properties to avoid name collisions.
  • BigInt (ES2020+): Represents integers of arbitrary length, exceeding the limits of the standard Number type.
Potential: Understanding data types is critical for effective data manipulation, performing correct operations, and implementing logical control flow in programs.

// JavaScript Code:
function demonstrateDataTypes() {
    let str = "Example Text";
    let num = 2024;
    let bool = false;
    let n = null;
    let undef; // Automatically undefined
    // let sym = Symbol("id"); // Not typically displayed directly in UI output

    let output = `Value: "${str}", Type: ${typeof str}\n`;
    output += `Value: ${num}, Type: ${typeof num}\n`;
    output += `Value: ${bool}, Type: ${typeof bool}\n`;
    output += `Value: ${n}, Type: ${typeof n} (Note: typeof null is 'object')\n`;
    output += `Value: ${undef}, Type: ${typeof undef}`;

    document.getElementById('dataTypesDemoOutput').innerText = output;
}

Level 3: Operators and Control Flow Structures

3.1 Operators

Purpose: Operators are special symbols used to perform operations on operands (values and variables).
Function: JavaScript supports various types of operators:
  • Arithmetic Operators: Perform mathematical calculations (e.g., + addition, - subtraction, * multiplication, / division, % modulo, ** exponentiation).
  • Assignment Operators: Assign values to variables (e.g., = assign, += add and assign, -= subtract and assign).
  • Comparison Operators: Compare two values and return a Boolean result (e.g., == equal value, === equal value and type (strict equality), != not equal value, !== not equal value or type (strict inequality), > greater than, < less than, >= greater than or equal to, <= less than or equal to).
  • Logical Operators: Combine or invert Boolean values (e.g., && logical AND, || logical OR, ! logical NOT).
  • Type Operators: Such as typeof (returns the type of a variable) and instanceof (checks if an object is an instance of a particular class).
Potential: Operators are fundamental for performing calculations, making decisions, and controlling the logical flow of programs. Strict equality (=== and !==) is generally recommended over loose equality (== and !=) to avoid type coercion issues.

// JavaScript Code:
function demonstrateOperators() {
    let num1 = 20;
    let num2 = 5;
    let stringNum = "20";

    let sum = num1 + num2; // Arithmetic: 25
    let isEqualLoose = (num1 == stringNum); // Comparison (loose): true
    let isEqualStrict = (num1 === stringNum); // Comparison (strict): false
    let condition = (num1 > 10) && (num2 < 10); // Logical AND: true

    let output = `Sum (20 + 5): ${sum}\n`;
    output += `Loose Equality (20 == "20"): ${isEqualLoose}\n`;
    output += `Strict Equality (20 === "20"): ${isEqualStrict}\n`;
    output += `Logical ((20 > 10) && (5 < 10)): ${condition}`;

    document.getElementById('operatorsDemoOutput').innerText = output;
}

3.2 Conditional Statements: if...else if...else

Purpose: Conditional statements allow programs to execute different blocks of code based on whether specified conditions evaluate to true or false.
Function:
  • if (condition) { /* code to run if condition is true */ }
  • else if (anotherCondition) { /* code to run if first condition is false and anotherCondition is true */ }
  • else { /* code to run if all preceding conditions are false */ }
A condition is an expression that evaluates to a Boolean (true or false).
Potential: Essential for creating decision-making logic within applications, enabling varied responses to different inputs or states.

// JavaScript Code:
function evaluateInputValue() {
    const num = parseFloat(document.getElementById('inputValue').value);
    let resultText;

    if (isNaN(num)) {
        resultText = "Please enter a valid number.";
    } else if (num > 100) {
        resultText = "Number is greater than 100.";
    } else if (num > 0) {
        resultText = "Number is positive and less than or equal to 100.";
    } else if (num === 0) {
        resultText = "Number is zero.";
    } else {
        resultText = "Number is negative.";
    }
    document.getElementById('conditionalDemoOutput').innerText = resultText;
}

3.3 Loops: for and while

Purpose: Loops are used to execute a block of code repeatedly, either a fixed number of times or as long as a certain condition remains true.
Function:
  • for loop: Typically used when the number of iterations is known beforehand.
    Syntax: for (initialization; condition; final-expression) { /* code to repeat */ }
    • initialization: Executed once before the loop starts (e.g., declaring a counter variable).
    • condition: Evaluated before each iteration. If true, the loop continues; if false, it terminates.
    • final-expression: Executed at the end of each iteration (e.g., incrementing a counter).
  • while loop: Repeats a block of code as long as a specified condition evaluates to true. The condition is checked before each iteration.
    Syntax: while (condition) { /* code to repeat */ }
  • do...while loop (related): Similar to while, but the code block is executed at least once before the condition is checked.
    Syntax: do { /* code to repeat */ } while (condition);
Potential: Essential for automating repetitive tasks, processing collections of data (like arrays), and implementing algorithms that require iterative operations.

// JavaScript Code:
function demonstrateLoops() {
    let outputText = "";

    // For Loop Example
    outputText += "For Loop (0 to 2):\n";
    for (let i = 0; i < 3; i++) {
        outputText += `  Index i = ${i}\n`;
    }

    // While Loop Example
    outputText += "\nWhile Loop (count down from 2 to 0):\n";
    let j = 2;
    while (j >= 0) {
        outputText += `  Counter j = ${j}\n`;
        j--;
    }
    document.getElementById('loopsDemoOutput').innerText = outputText;
}

Level 4: Functions - Reusable Code Blocks

4.1 Defining and Invoking Functions

Purpose: Functions are self-contained blocks of code designed to perform a specific task. They promote code reusability, organization, and modularity.
Function:
  • Declaration: A function is defined using the function keyword, followed by a name, a list of parameters (optional) enclosed in parentheses, and a block of code (the function body) enclosed in curly braces.
    function greet(name) { return "Hello, " + name; }
  • Expression: A function can also be defined as an expression and assigned to a variable.
    const add = function(a, b) { return a + b; };
  • Arrow Functions (ES6+): Provide a more concise syntax for writing function expressions.
    const multiply = (x, y) => x * y;
    const logMessage = message => console.log(message); (single parameter, no parentheses needed)
    const getObject = () => ({ key: 'value' }); (returning an object literal requires parentheses)
  • Invocation (Calling): A function is executed by using its name followed by parentheses, providing any necessary arguments.
    let myGreeting = greet("World");
    let sumResult = add(5, 3);
  • Parameters and Arguments: Parameters are variables listed in the function definition. Arguments are the actual values passed to the function when it is invoked.
  • return Statement: Used to specify the value that the function should output. If omitted, the function returns undefined.
Potential: Fundamental for structuring code. Functions enable breaking down complex problems into smaller, manageable units, reducing redundancy, and improving code readability and maintainability.

// JavaScript Code:

// Function Declaration:
function generateWelcomeMessage(name) {
    return "Welcome to the class, " + name + "!";
}

// Arrow Function (ES6+):
const sumNumbers = (num1, num2) => {
    return num1 + num2;
};

// Example function calls:
function callGreetFunction() {
    document.getElementById('functionsDemoOutput').innerText = generateWelcomeMessage("Developer");
}

function callCalculateArea() { // Example to show a different function output
    const result = sumNumbers(15, 7);
    const currentOutput = document.getElementById('functionsDemoOutput').innerText;
    document.getElementById('functionsDemoOutput').innerText = currentOutput + "\nSum of 15 and 7 is: " + result;
}

Level 5: Interacting with Webpage Structure (DOM Manipulation)

The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the logical structure of a document and provides a way to access and manipulate its content, structure, and style using JavaScript.

5.1 Selecting HTML Elements

Purpose: To dynamically interact with or modify an HTML element (e.g., change its content, styling, or attributes), it must first be selected or accessed by JavaScript.
Function (Common Methods):
  • document.getElementById('elementId'): Selects a single element by its unique id attribute. Returns the element object or null if not found.
  • document.getElementsByClassName('className'): Selects all elements that have the specified class name. Returns an HTMLCollection (an array-like object) of the found elements.
  • document.getElementsByTagName('tagName'): Selects all elements with the specified HTML tag name (e.g., 'p', 'div'). Returns an HTMLCollection.
  • document.querySelector('cssSelector'): Selects the first element within the document that matches the specified CSS selector (e.g., '#myId', '.myClass', 'div p'). Returns the element object or null.
  • document.querySelectorAll('cssSelector'): Selects all elements within the document that match the specified CSS selector. Returns a static NodeList (an array-like object).
Potential: Forms the basis of creating dynamic and interactive web pages, allowing scripts to read from and write to the page structure in response to user actions or other events.
This element has ID: elementToSelectById.
Class: elementsToSelectByClass (1)
Class: elementsToSelectByClass (2)

This is a sample paragraph (p tag) for selection demonstration.


// JavaScript Code:
function performElementSelection() {
    let log = "";

    // Select by ID
    const uniqueElement = document.getElementById('elementToSelectById');
    if (uniqueElement) {
        uniqueElement.style.backgroundColor = 'lightblue';
        log += "Styled element with ID 'elementToSelectById'.\n";
    }

    // Select by Class Name
    const classElements = document.getElementsByClassName('elementsToSelectByClass');
    for (let i = 0; i < classElements.length; i++) {
        classElements[i].style.color = 'darkred';
    }
    if(classElements.length > 0) log += `Styled ${classElements.length} elements with class 'elementsToSelectByClass'.\n`;

    // Select by Tag Name (example: first paragraph within the button's parent container)
    const buttonParent = document.querySelector('button[onclick="performElementSelection()"]').parentNode;
    const paragraphs = buttonParent.getElementsByTagName('p');
    if (paragraphs.length > 0) {
        paragraphs[0].style.textDecoration = 'underline';
        log += "Underlined the first paragraph in this section.\n";
    }

    // Select using querySelector (first element with a specific class)
    const firstClassElement = document.querySelector('.elementsToSelectByClass');
    if (firstClassElement) {
        firstClassElement.innerHTML += " (selected by querySelector)";
        log += "Modified content of the first element found by querySelector('.elementsToSelectByClass').";
    }
    document.getElementById('selectionDemoOutput').innerText = log;
}

5.2 Modifying HTML Content and Attributes

Purpose: To dynamically alter the information displayed on the webpage, change the appearance or behavior of elements by modifying their attributes or CSS styles.
Function:
  • element.innerHTML = "new HTML content";: Modifies the HTML content (including tags) within an element. Use with caution if the content comes from untrusted sources due to potential security risks (XSS).
  • element.innerText = "new text content";: Sets or returns the text content of an element and its descendants, rendering only human-readable text (styles are not parsed). It is aware of CSS styling (e.g., it won't return text from hidden elements).
  • element.textContent = "new text content";: Sets or returns the raw text content of an element and all its descendants, including text within <script> and <style> elements. It is generally faster than innerText and is not CSS-aware. Often preferred for setting plain text.
  • element.setAttribute('attributeName', 'value');: Sets the value of a specified attribute on an element (e.g., img.setAttribute('src', 'newimage.jpg');). If the attribute already exists, the value is updated; otherwise, a new attribute is added.
  • element.getAttribute('attributeName');: Returns the current value of a specified attribute.
  • element.removeAttribute('attributeName');: Removes an attribute from an element.
  • element.style.property = "value";: Directly modifies inline CSS styles of an element (e.g., element.style.color = "blue";, element.style.fontSize = "16px";). Property names are typically camelCased (e.g., backgroundColor for background-color).
Potential: Enables the creation of highly dynamic user interfaces, real-time content updates, personalized user experiences, and interactive visual feedback.
Original content to be modified.
Placeholder Image 

// JavaScript Code:
function modifyContentAndAttributes() {
    const targetDiv = document.getElementById('contentModificationTarget');
    const targetImage = document.getElementById('imageModificationTarget');

    // Change innerHTML
    targetDiv.innerHTML = "The <strong>HTML content</strong> has been changed.";

    // Change textContent (alternative for plain text)
    // targetDiv.textContent = "The plain text content has been changed.";

    // Change an attribute
    targetImage.setAttribute('src', 'https://via.placeholder.com/150/28a745/FFFFFF?Text=New+Image');
    targetImage.setAttribute('alt', 'A new, dynamically set image');

    // Change CSS style
    targetDiv.style.color = "navy";
    targetDiv.style.border = "2px solid navy";
}

5.3 Event Handling

Purpose: To make web pages interactive by allowing JavaScript to respond to user actions (e.g., clicks, key presses, mouse movements) or browser events (e.g., page load, window resize).
Function:
  • Inline HTML attribute (older method): <button onclick="myFunction()">Click Me</button>. This method is generally discouraged for larger applications as it mixes JavaScript with HTML and can be harder to manage.
  • DOM element property: Assigning a function directly to an element's event property (e.g., element.onclick = functionName; or element.onclick = function() { /* code */ };). Only one handler can be assigned per event type this way.
  • addEventListener() (recommended method): Attaches an event handler function to an element without overwriting existing event handlers. Multiple handlers can be added for the same event.
    Syntax: element.addEventListener('eventName', callbackFunction, useCapture);
    • eventName: A string representing the event type (e.g., 'click', 'mouseover', 'keydown', 'load', 'submit').
    • callbackFunction: The function to be executed when the event occurs. This function receives an Event object as its first argument.
    • useCapture (optional): A Boolean indicating whether the event should be captured during the capturing phase (true) or bubbling phase (false, default).
  • removeEventListener(): Removes an event handler previously attached with addEventListener(). The function reference and useCapture value must be the same as those used when adding the listener.
Potential: Enables the creation of rich, responsive user experiences where the webpage reacts dynamically to user input and other occurrences, forming the core of interactive web applications.
Hover over this area.

// JavaScript Code:
const eventButton = document.getElementById('interactiveButton');
const hoverDiv = document.getElementById('hoverableBox');
const eventOutputDiv = document.getElementById('eventHandlingOutput');

// addEventListener for click
eventButton.addEventListener('click', function(event) {
    // 'event' is an Event object containing details about the event
    eventOutputDiv.textContent = 'Button clicked! Event type: ' + event.type;
});

// addEventListener for mouseover
hoverDiv.addEventListener('mouseover', function() {
    this.textContent = 'Mouse is currently over!';
    this.style.border = '2px solid darkgreen';
    eventOutputDiv.textContent = 'Mouse entered the div.';
});

// addEventListener for mouseout
hoverDiv.addEventListener('mouseout', function() {
    this.textContent = 'Hover over this area.';
    this.style.border = '1px solid #e0a800'; // Revert border
    eventOutputDiv.textContent = 'Mouse left the div.';
});

Level 6: Overview of Further Concepts

Building upon the foundational elements, JavaScript offers more advanced features for handling complex data structures, asynchronous operations, and communication with servers. This section provides a brief introduction to some of these concepts.

6.1 Data Structures: Arrays and Objects

Purpose: To organize and manage collections of data or more complex data entities.
Function:
  • Arrays: Ordered, zero-indexed collections of values. Values can be of any data type, including other arrays or objects.
    Example: let numbers = [10, 20, 30, 40];
    Access elements using bracket notation: numbers[0] (returns 10).
    Common methods include push() (add to end), pop() (remove from end), shift() (remove from start), unshift() (add to start), slice(), splice(), forEach(), map(), filter(), reduce().
  • Objects: Unordered collections of key-value pairs, also known as properties. Keys are typically strings (or Symbols), and values can be any data type, including functions (then called methods).
    Example: let student = { firstName: "Alex", lastName: "Lee", studentId: "S1001", getFullName: function() { return this.firstName + " " + this.lastName; } };
    Access properties using dot notation (student.firstName) or bracket notation (student['lastName']).
    Methods are invoked like functions: student.getFullName().
Potential: Arrays and Objects are fundamental for representing and manipulating virtually all forms of structured data in JavaScript applications, from simple lists to complex application states and API responses.

// JavaScript Code:
function demonstrateArraysAndObjects() {
    // Array
    const fruits = ["Apple", "Banana", "Cherry"];
    fruits.push("Date"); // Add an element to the end
    let arrayString = "Fruits Array:\n";
    for (let i = 0; i < fruits.length; i++) {
        arrayString += `  - ${fruits[i]}\n`;
    }
    arrayString += `First fruit: ${fruits[0]}\n`;

    // Object
    const book = {
        title: "The Principles of JavaScript",
        author: "Dr. Code",
        year: 2025,
        getDetails: function() {
            return `${this.title} by ${this.author} (${this.year})`;
        }
    };
    let objectString = "\nBook Object:\n";
    objectString += `  Title: ${book.title}\n`;
    objectString += `  Author: ${book.author}\n`;
    objectString += `  Details: ${book.getDetails()}`;

    document.getElementById('arraysObjectsDemoOutput').innerText = arrayString + objectString;
}

6.2 Asynchronous JavaScript: setTimeout, Promises, async/await

Purpose: To handle operations that take time to complete (e.g., network requests, timers, file operations) without blocking the main JavaScript thread, thus keeping the user interface responsive.
Function:
  • setTimeout(callbackFunction, delayInMilliseconds): Executes a callbackFunction once after a specified delayInMilliseconds. It is a basic way to introduce asynchronicity.
  • Promises: An object representing the eventual completion (or failure) of an asynchronous operation and its resulting value. A Promise can be in one of three states:
    • Pending: Initial state, neither fulfilled nor rejected.
    • Fulfilled: The operation completed successfully, with a resulting value.
    • Rejected: The operation failed, with a reason (error).
    Promises use .then(onFulfilled, onRejected) or .then(onFulfilled).catch(onRejected) to handle results or errors.
  • async/await (ES2017): Syntactic sugar built on top of Promises that allows writing asynchronous code that looks and behaves more like synchronous code, making it easier to read and manage.
    • async keyword: Placed before a function declaration, it makes the function implicitly return a Promise.
    • await keyword: Can only be used inside an async function. It pauses the execution of the async function and waits for the Promise to resolve or reject before continuing.
Potential: Essential for modern web development, enabling non-blocking operations for tasks like fetching data from APIs, handling user interactions that trigger long processes, and managing animations, thereby creating smoother and more performant applications.
Output will appear here after delays...

// JavaScript Code:
async function demonstrateAsyncOperations() {
    const output = document.getElementById('asyncDemoOutput');
    output.textContent = "Starting async demo...\n";

    // 1. setTimeout
    output.textContent += "setTimeout initiated (1s delay).\n";
    setTimeout(() => {
        output.textContent += "  [setTimeout] Task completed after 1 second.\n";
    }, 1000);

    // 2. Promise
    output.textContent += "Promise initiated (2s delay).\n";
    const dataPromise = new Promise((resolve, reject) => {
        setTimeout(() => {
            if (true) { // Simulate success
                resolve("  [Promise] Data successfully fetched!");
            } else {
                reject("  [Promise] Failed to fetch data.");
            }
        }, 2000);
    });

    dataPromise
        .then(response => { output.textContent += response + "\n"; })
        .catch(error => { output.textContent += error + "\n"; });

    // 3. async/await
    output.textContent += "async/await function initiated (3s delay).\n";
    async function asyncTask() {
        try {
            const message = await new Promise(resolve => {
                setTimeout(() => resolve("  [async/await] Asynchronous task finished!"), 3000);
            });
            output.textContent += message + "\n";
        } catch (err) {
            output.textContent += `  [async/await] Error: ${err}\n`;
        }
        output.textContent += "Async demo complete (or tasks still running).";
    }
    asyncTask();
}

6.3 Fetch API / AJAX

Purpose: To enable web browsers to make HTTP requests to servers and retrieve data (e.g., JSON, XML, text) asynchronously, allowing parts of a web page to be updated without requiring a full page reload. This technique is broadly known as AJAX (Asynchronous JavaScript and XML, though JSON is now more commonly used than XML).
Function: The fetch() API provides a modern, Promise-based interface for making network requests.
Basic syntax:
fetch('url-to-resource')
  .then(response => {
    if (!response.ok) { throw new Error('Network response was not ok: ' + response.statusText); }
    return response.json(); // Or response.text(), response.blob(), etc.
  })
  .then(data => { /* process the data */ console.log(data); })
  .catch(error => { /* handle any errors */ console.error('Fetch error:', error); });
The fetch() function takes the URL of the resource as its first argument and an optional options object for configuring the request (e.g., method (GET, POST), headers, body). It returns a Promise that resolves to the Response object representing the response to the request.
Potential: Critical for building dynamic, single-page applications (SPAs) and interactive web features that require loading data from, or sending data to, a server in the background. Examples include loading articles, submitting forms, checking user credentials, and displaying real-time updates.
Click the button to fetch data from a sample API...

// JavaScript Code:
async function executeFetchData() {
    const outputElement = document.getElementById('fetchDemoOutput');
    outputElement.textContent = "Fetching data...";

    try {
        // Using JSONPlaceholder, a free online REST API for testing
        const apiUrl = 'https://jsonplaceholder.typicode.com/todos/1'; // Fetches the first to-do item
        const response = await fetch(apiUrl);

        if (!response.ok) { // response.ok is true if HTTP status is 200-299
            throw new Error(`Network request failed with status: ${response.status}`);
        }

        const data = await response.json(); // Parses the JSON response body

        outputElement.innerHTML = `<h4>Fetched Data (To-Do Item):</h4>
                                   <p><strong>User ID:</strong> ${data.userId}</p>
                                   <p><strong>ID:</strong> ${data.id}</p>
                                   <p><strong>Title:</strong> ${data.title}</p>
                                   <p><strong>Completed:</strong> ${data.completed}</p>`;
    } catch (error) {
        outputElement.textContent = `Failed to fetch data: ${error.message}`;
        console.error('Error in fetch operation:', error);
    }
}

Conclusion

This document has provided a foundational overview of JavaScript, from basic syntax and operations to DOM manipulation and asynchronous programming concepts. Continued practice and exploration are key to mastering JavaScript and its extensive capabilities in web development.

Submit Assignment