JavaScript Environment

Explore JavaScript scope, starting from the global scope to the local scope, and learn how to declare and use variables in different scopes.

Purpose

JavaScript is a versatile programming language that can be used to create interactive elements on a web page. Understanding the scope of variables in JavaScript is essential for writing efficient and maintainable code.

Function Declaration and Scope

When you declare a function in a JavaScript script tag, you can control its accessibility by using the export keyword. Functions declared with the export keyword, whether as a classic function or an arrow function, will be accessible from outside the script. For example:

export function myFunc() {
    console.log("This is an exported function.");
}

export const myArrowFunc = () => {
    console.log("This is an exported arrow function.");
};

If a function does not have the export keyword, it will be treated as a private function scoped only to the script tag and will not be accessible from the outside. For example:

function privateFunc() {
    console.log("This is a private function.");
}

const privateArrowFunc = () => {
    console.log("This is a private arrow function.");
};

In summary, use the export keyword for functions that need to be accessible globally or from other modules, and omit it for private functions that should remain scoped to the script tag.

1. DOMContentLoaded Event:

  1. What it is: The DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
  2. Purpose: Useful if you want to execute a script after the HTML has been fully parsed but before the entire page (including images, etc.) has been fully loaded.
document.addEventListener("DOMContentLoaded", function() {
    // Code to run when the DOM content is fully loaded
  });

2 . window.onload Event:

The window.onload event is triggered when the entire page, including all dependent resources such as images, iframes, and stylesheets, has fully loaded. This is different from DOMContentLoaded, which only waits for the HTML to be parsed and does not wait for external resources.

Differences Between DOMContentLoaded and window.onload:

DOMContentLoaded Fires when the initial HTML document is completely loaded and parsed, without waiting for stylesheets, images, or subframes.

window.onload: Fires only after the entire content of the page has been loaded, including images, scripts, and stylesheets.

Purpose Use window.onload when you need to ensure that all external resources (such as images and CSS files) are fully loaded before executing your JavaScript code.

<body>
    <script>
        // Attaching a window.onload event
        window.onload = function() {
            console.log("Entire page including resources has been loaded.");

            // Example: Dynamically change an image source after the page loads
            const img = document.querySelector('#myImage');
            if (img) {
                img.src = '/path/to/new/image.jpg';
            }
        };
    </script>

    <img id="myImage" src="/path/to/initial/image.jpg" alt="Example Image" />
</body>

When to Use: Use window.onload when your script relies on fully loaded resources, such as images or iframes. Use DOMContentLoaded when you only need the HTML to be parsed before executing your script, making it suitable for faster execution without waiting for resources.

3. async Attribute in