1.1 Introduction to JavaScript

📚 Table of Contents

•What is JavaScript?
•Where JavaScript Runs
•JavaScript Engines
•ECMAScript Standards
•How JavaScript Executes in the Browser
•Chrome DevTools Basics

What is JavaScript?

JavaScript is a high-level, interpreted, dynamic programming language that was created in 1995 by Brendan Eich at Netscape. It was originally designed to add interactivity to web pages.

Key Characteristics of JavaScript:

Characteristic	Description
High-level	You don't need to manage memory or hardware directly
Interpreted	Code is executed line by line (though modern engines compile it)
Dynamic	Variables can hold any type of data
Weakly typed	Types are determined at runtime, not compile time
Multi-paradigm	Supports procedural, object-oriented, and functional programming
Single-threaded	Executes one operation at a time (but can handle async operations)

What JavaScript Can Do:

•Manipulate web page content - Change HTML and CSS dynamically
•Respond to user actions - Handle clicks, keyboard input, form submissions
•Validate forms - Check user input before sending to server
•Create animations - Smooth transitions and visual effects
•Make network requests - Fetch data from servers without page reload
•Store data locally - Save information in the browser

What JavaScript Is NOT:

•JavaScript is NOT Java (despite the similar name)
•JavaScript is NOT just for web pages (but we focus on browser JS here)
•JavaScript is NOT a compiled language (traditionally)

Where JavaScript Runs

In this course, we focus exclusively on browser-based JavaScript.

The Browser Environment

When you open a web page, the browser creates an environment where JavaScript can run:

┌─────────────────────────────────────────────┐
│              BROWSER WINDOW                 │
├─────────────────────────────────────────────┤
│  ┌─────────────────────────────────────┐   │
│  │           Web Page (DOM)            │   │
│  │   ┌─────────────────────────────┐   │   │
│  │   │     JavaScript Engine       │   │   │
│  │   │   (Runs your JS code)       │   │   │
│  │   └─────────────────────────────┘   │   │
│  └─────────────────────────────────────┘   │
│                                             │
│  Browser APIs: DOM, Fetch, Storage, etc.   │
└─────────────────────────────────────────────┘

Three Ways to Add JavaScript to a Web Page:

1. Inline JavaScript (Not Recommended)

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

2. Internal Script (Script Tag)

<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
</head>
<body>
    <h1>Hello World</h1>
    
    <script>
        // Your JavaScript code here
        console.log("Hello from JavaScript!");
    </script>
</body>
</html>

3. External Script (Recommended)

<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
</head>
<body>
    <h1>Hello World</h1>
    
    <script src="script.js"></script>
</body>
</html>

Script Placement Best Practices:

Placement	When to Use
End of `<body>`	Default choice - HTML loads first
`<head>` with `defer`	Script loads parallel, runs after HTML
`<head>` with `async`	Script loads parallel, runs immediately when ready

<!-- defer: Loads parallel to HTML, executes after DOM is ready -->
<script src="script.js" defer></script>

<!-- async: Loads parallel, executes as soon as downloaded -->
<script src="script.js" async></script>

JavaScript Engines

A JavaScript engine is a program that interprets and executes JavaScript code. Every browser has its own engine.

Major JavaScript Engines:

Engine	Browser	Developer
V8	Chrome, Edge, Opera	Google
SpiderMonkey	Firefox	Mozilla
JavaScriptCore (Nitro)	Safari	Apple
Chakra	Old Edge (legacy)	Microsoft

How JavaScript Engines Work:

Source Code → Parser → AST → Interpreter → Bytecode
                                  ↓
                           JIT Compiler
                                  ↓
                          Machine Code

•Parsing: Reads code and creates Abstract Syntax Tree (AST)
•Interpretation: Converts AST to bytecode
•JIT Compilation: "Hot" code paths are compiled to machine code for speed
•Execution: Runs the optimized code

V8 Engine Deep Dive:

V8 (used in Chrome) has two main components:

•
Ignition - The interpreter
- •Converts JavaScript to bytecode
- •Fast startup time
•
TurboFan - The optimizing compiler
- •Compiles frequently-used code to machine code
- •Makes "hot" functions run faster

JavaScript Source
       ↓
   [Parser]
       ↓
      AST
       ↓
   [Ignition]  ←──┐
       ↓         │ (Deoptimization if assumptions fail)
   Bytecode      │
       ↓         │
   [TurboFan] ───┘
       ↓
  Machine Code

ECMAScript Standards

ECMAScript (ES) is the official specification that JavaScript follows. Think of ECMAScript as the "rulebook" and JavaScript as the "implementation."

Brief History:

Version	Year	Major Features
ES1	1997	First edition
ES2	1998	Editorial changes
ES3	1999	Regular expressions, try/catch
ES5	2009	Strict mode, JSON, Array methods
ES6/ES2015	2015	Classes, modules, arrow functions, let/const, promises
ES2016	2016	Array.includes(), exponentiation operator
ES2017	2017	async/await, Object.entries()
ES2018	2018	Rest/spread properties, async iteration
ES2019	2019	Array.flat(), Object.fromEntries()
ES2020	2020	Optional chaining, nullish coalescing, BigInt
ES2021	2021	String.replaceAll(), Promise.any()
ES2022	2022	Top-level await, private class fields
ES2023	2023	Array find from last, hashbang grammar
ES2024	2024	Object.groupBy, Promise.withResolvers

ES6 (ES2015) - The Game Changer

ES6 was the biggest update to JavaScript, introducing:

•let and const
•Arrow functions
•Classes
•Template literals
•Destructuring
•Modules (import/export)
•Promises
•Symbols
•Iterators and generators

Yearly Release Cycle

Since 2015, ECMAScript follows a yearly release cycle:

•New features are proposed through a TC39 process
•Features go through 5 stages (Stage 0 to Stage 4)
•Stage 4 features are included in the yearly release

TC39 Process Stages:

Stage	Name	Description
0	Strawperson	Initial idea
1	Proposal	Formal proposal with examples
2	Draft	Initial spec language
3	Candidate	Complete spec, needs feedback
4	Finished	Ready for inclusion

How JavaScript Executes in the Browser

Understanding execution is crucial for debugging and writing efficient code.

The Execution Process:

1. Browser loads HTML
       ↓
2. Browser encounters <script> tag
       ↓
3. JavaScript engine takes over
       ↓
4. Code is parsed into AST
       ↓
5. Execution context is created
       ↓
6. Code is executed line by line
       ↓
7. Browser resumes HTML parsing

Execution Context:

Every time JavaScript runs, it creates an Execution Context:

┌─────────────────────────────────────┐
│       Global Execution Context      │
├─────────────────────────────────────┤
│  Variable Environment:              │
│    - var declarations               │
│    - function declarations          │
│                                     │
│  Lexical Environment:               │
│    - let/const declarations         │
│                                     │
│  this binding: window (in browser)  │
└─────────────────────────────────────┘

The Call Stack:

JavaScript uses a Call Stack to keep track of function calls:

function first() {
    second();
}

function second() {
    third();
}

function third() {
    console.log("Hello");
}

first();

Call Stack visualization:

Step 1: [global]
Step 2: [first, global]
Step 3: [second, first, global]
Step 4: [third, second, first, global]
Step 5: [second, first, global]  // third() finished
Step 6: [first, global]          // second() finished
Step 7: [global]                 // first() finished
Step 8: []                       // global finished

Synchronous Execution:

JavaScript is single-threaded and synchronous by default:

console.log("First");   // Runs 1st
console.log("Second");  // Runs 2nd
console.log("Third");   // Runs 3rd

// Output:
// First
// Second
// Third

Chrome DevTools Basics

Chrome DevTools is your best friend for JavaScript development. Learn it well!

Opening DevTools:

Method	Shortcut
Keyboard (Windows/Linux)	`F12` or `Ctrl + Shift + I`
Keyboard (Mac)	`Cmd + Option + I`
Right-click menu	Right-click → Inspect
Chrome menu	Menu → More Tools → Developer Tools

DevTools Panels:

┌─────────────────────────────────────────────────────────────┐
│  Elements │ Console │ Sources │ Network │ Performance │ ... │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│              Panel Content Area                             │
│                                                             │
└─────────────────────────────────────────────────────────────┘

Console Panel (Most Important for Learning):

The Console is where you'll spend most of your time learning JavaScript.

Console Methods:

// Basic logging
console.log("Regular message");
console.info("Info message");
console.warn("Warning message");
console.error("Error message");

// Grouping
console.group("Group Name");
console.log("Inside group");
console.groupEnd();

// Tables
console.table([{name: "John", age: 30}, {name: "Jane", age: 25}]);

// Timing
console.time("Timer");
// ... code to time
console.timeEnd("Timer");

// Counting
console.count("Label"); // Label: 1
console.count("Label"); // Label: 2

// Clearing
console.clear();

Using the Console as a Playground:

You can type JavaScript directly in the console:

> let x = 5
< undefined
> x + 10
< 15
> "Hello " + "World"
< "Hello World"

Sources Panel:

Used for debugging JavaScript:

•Breakpoints: Pause code execution at specific lines
•Step through code: Execute one line at a time
•Watch expressions: Monitor variable values
•Call stack: See the chain of function calls

Setting a Breakpoint:

•Open Sources panel
•Find your JavaScript file
•Click the line number to add a breakpoint
•Refresh the page
•Execution pauses at the breakpoint

Debugger Statement:

You can also pause code programmatically:

function problematicFunction() {
    let x = 10;
    debugger; // Execution pauses here when DevTools is open
    x = x * 2;
    return x;
}

Network Panel:

Useful for:

•Seeing HTTP requests
•Checking response data
•Debugging API calls
•Monitoring load times

Console Shortcuts:

Shortcut	Action
`Ctrl + L`	Clear console
`↑` / `↓`	Navigate command history
`Tab`	Auto-complete
`Shift + Enter`	Multi-line input
`$_`	Last evaluated result
`$0`	Currently selected element

🎯 Key Takeaways

•JavaScript is a high-level, dynamic, interpreted language created for web interactivity
•JavaScript runs in the browser (we focus on this) and requires no special setup
•JavaScript engines (V8, SpiderMonkey) parse and execute your code
•ECMAScript defines the standard - ES6/ES2015 was the biggest update
•JavaScript executes synchronously using a call stack
•Chrome DevTools is essential for learning and debugging

📖 Further Reading

➡️ Next Topic

Continue to 1.2 Basic Syntax to learn the fundamental syntax rules of JavaScript!