JavaScriptUnderstand the concepts. Build real technical depth.

Module 1 – JavaScript Fundamentals and Script Loading

1.1 Module Overview

JavaScript is a lightweight, dynamically typed, garbage-collected language with first-class functions. Originally created to make web pages interactive in browsers, it now powers full-stack web applications, server APIs, mobile apps, and desktop tools through runtimes like Node.js, Deno, and Bun.

By the end of this module, you should be able to:

• Explain what JavaScript is and where it executes.
• Write and run JavaScript in browsers and Node.js.
• Distinguish between inline, external, deferred, and asynchronous script loading.
• Understand the execution lifecycle of HTML script tags.

1.2 What is JavaScript?

Definition

JavaScript is an interpreted or just-in-time (JIT) compiled, multi-paradigm language supporting event-driven, functional, imperative, and prototype-based object-oriented programming styles.

Where JavaScript is used

• Frontend web development (React, Vue, Angular, Svelte)
• Backend APIs and server systems (Node.js, Express, Fastify, NestJS)
• Full-stack frameworks (Next.js, Remix, Nuxt, Astro)
• Mobile applications (React Native, Ionic)
• Desktop applications (Electron, Tauri)
• Browser automation, testing, and extensions

1.3 Running JavaScript

First Program

console.log("Hello, CodeStudio!");

Running with Node.js

node script.js

Running in Browser Developer Tools

Open Developer Tools:

• Windows/Linux: Ctrl + Shift + I
• macOS: Cmd + Option + I Navigate to the Console tab to execute JavaScript interactively.

1.4 Adding JavaScript to HTML

1. Inline Script

<script>
  console.log("Hello from inline script");
</script>

2. External Script

<script src="script.js"></script>

Blocks HTML parsing while downloading and executing the script.

3. Deferred Script (defer)

<script src="script.js" defer></script>

Downloads the script in parallel while HTML parsing continues, then executes it after the HTML document is fully parsed, preserving script execution order.

4. Asynchronous Script (async)

<script src="script.js" async></script>

Downloads without blocking parsing and executes immediately as soon as the download finishes. Execution order is non-deterministic.

1.5 Best Practices

• Always prefer defer for scripts that manipulate the DOM or depend on other scripts.
• Use async primarily for independent third-party utilities (e.g., analytics, tracking pixels).
• Keep production JavaScript bundled, minified, and modularized using ES Modules.

1.6 Practice Exercises

1. Create an HTML file and test the loading behavior of defer versus async.
2. Run a script using Node.js in your terminal and print environmental information (process.version).
3. Open the browser console and inspect the window and document global objects.
4. Measure script load timing in the browser DevTools Network tab.

1.7 Module Recap

In this module, you learned:

• What JavaScript is and its role across modern client-side and server-side ecosystems.
• How to run code via Node.js and browser consoles.
• The difference between standard, defer, and async script loading behaviors.