Introduction to JavaScript & Browser Engine

JavaScript (JS) is the programming language of the web. While HTML defines the structure of a webpage and CSS handles the styling, JavaScript brings it to life by adding interactivity, dynamic behavior, and complex logic.

1. What is JavaScript?

Originally created in 1995 by Brendan Eich under the name Mocha (later LiveScript and finally JavaScript), JS was designed to run inside web browsers to make pages interactive. Today, it has evolved into a powerful, multi-paradigm, high-level language.

Core Characteristics:

• High-Level: You don't have to manage memory manually; the engine takes care of garbage collection.
• Just-In-Time (JIT) Compiled: JavaScript is compiled into machine code right before execution, making it incredibly fast.
• Single-Threaded: It executes one instruction at a time on the main execution thread, but achieves concurrency using the Event Loop.
• Dynamically Typed: Variable types are determined at runtime rather than compile-time.

2. How the Browser Runs JavaScript

Every modern browser contains a JavaScript Engine that executes code. The most famous engines are:

• V8: Developed by Google (used in Chrome, Edge, and Node.js).
• SpiderMonkey: Developed by Mozilla (used in Firefox).
• JavaScriptCore: Developed by Apple (used in Safari).

The JavaScript Runtime Environment:

When running in a browser, the JS engine works alongside:

1. Web APIs: Features provided by the browser (such as the document object for DOM manipulation, fetch() for network requests, and setTimeout).
2. Callback Queue / Task Queue: Holds asynchronous callbacks waiting to be executed.
3. Event Loop: Continuously checks if the Call Stack is empty. If it is, it pushes callbacks from the Task Queue onto the stack for execution.

3. Inline, Internal, and External JavaScript

There are three ways to add JavaScript to an HTML page.

A. Inline JavaScript (Not Recommended)

Injecting code directly inside HTML tag event attributes:

<button onclick="alert('Hello World!')">Click Me</button>

Avoid this as it mixes structure (HTML) with behavior (JS), making code hard to maintain.

B. Internal JavaScript

Writing code inside a <script> tag in the HTML head or body:

<script>
  console.log("This is internal JS!");
</script>

C. External JavaScript (Best Practice)

Writing code in a separate .js file and linking it via the <script> tag:

<!-- index.html -->
<script src="app.js" defer></script>

// app.js
console.log("This is external JS!");

Why use defer?

• Without defer or async: The browser stops parsing HTML whenever it hits a <script> tag, downloads/runs the script, then resumes HTML parsing. This causes rendering delays.
• defer (Recommended): The script is downloaded in the background and executed only after the HTML document has been fully parsed. This prevents DOM-related errors and improves page loading speed.
• async: The script is downloaded in the background and executed immediately when it finishes downloading, blocking HTML parsing at that moment. Order of execution is not guaranteed.

In the next tutorial, we will explore variables, constants, and the fundamental data types in JavaScript.