Introduction to JavaScript

JavaScript is one of the three core technologies of web development.

HTML        → Structure

CSS         → Styling

JavaScript  → Interactivity

HTML creates the content, CSS controls its appearance, and JavaScript adds behavior and functionality.

For example:

HTML → Button

CSS → Styles the button

JavaScript → Makes the button respond when clicked

Without JavaScript, websites would mostly be static.

---

What is JavaScript?

JavaScript (JS) is a high-level, interpreted programming language used to create interactive and dynamic websites.

It allows web pages to respond to user actions and update content without reloading the page.

---

What Can JavaScript Do?

JavaScript can:

• Respond to user actions
• Validate forms
• Manipulate web pages
• Communicate with servers
• Create animations
• Build web applications
• Build mobile applications
• Build backend applications

Example:

<button onclick="sayHello()">
    Click Me
</button>

function sayHello() {

    alert("Hello World!");

}

Result:

Click Button
      ↓
Popup Appears

---

Why Learn JavaScript?

JavaScript is the most widely used programming language for web development.

It is used for:

• Frontend Development
• Backend Development
• Mobile Development
• Desktop Applications
• Game Development

Popular technologies built with JavaScript include:

Frontend:

• React
• Next.js
• Vue
• Angular

Backend:

• Node.js
• Express.js
• NestJS

Mobile:

• React Native
• Expo

---

JavaScript in Modern Web Development

A typical website works like this:

User Opens Website
         ↓
HTML Creates Structure
         ↓
CSS Adds Design
         ↓
JavaScript Adds Behavior

For example:

Login Form
      ↓
User Clicks Submit
      ↓
JavaScript Validates Input
      ↓
Data Sent to Server
      ↓
Response Displayed

---

History of JavaScript

JavaScript was created in 1995 by Brendan Eich while working at Netscape.

It was developed in only 10 days.

Its names changed over time:

Mocha
   ↓
LiveScript
   ↓
JavaScript

The name JavaScript was chosen because Java was very popular at the time.

Although their names are similar:

Java and JavaScript are completely different programming languages.

Java	JavaScript
Compiled	Interpreted
Runs on JVM	Runs in Browsers & Node.js
Statically Typed	Dynamically Typed

Java:

System.out.println("Hello");

JavaScript:

console.log("Hello");

---

ECMAScript

JavaScript follows an official standard called ECMAScript (ES).

Think of it as:

ECMAScript
      ↓
Language Specification

JavaScript
      ↓
Implementation

---

JavaScript Versions

JavaScript has evolved over many years.

ES3 (1999)

Introduced:

• Regular Expressions
• Error Handling

---

ES5 (2009)

Introduced:

• JSON Support
• Strict Mode
• Array Methods

Example:

"use strict";

arr.forEach();

---

ES6 / ES2015

ES6 introduced many modern JavaScript features.

let and const

let name = "Samir";

const age = 21;

Arrow Functions

const greet = () => {

    console.log("Hello");

};

Template Literals

const name = "Samir";

console.log(`Hello ${name}`);

Classes

class User {

}

Modules

export default App;

---

Modern JavaScript

Newer versions added features such as:

• Async/Await
• Optional Chaining
• Nullish Coalescing
• BigInt
• Array Improvements

Example:

const user = {

    name: "Samir"

};

console.log(user?.name);

Today, most developers write ES6+ JavaScript.

---

Running JavaScript

JavaScript can run in multiple environments.

---

Running in the Browser

Every modern browser includes a JavaScript engine.

Examples:

• Google Chrome
• Mozilla Firefox
• Safari
• Microsoft Edge

Example:

<script>

    console.log("Hello World");

</script>

Open the page in a browser and the message appears in the Developer Console.

---

Browser Console

Open Developer Tools:

F12

or

Right Click
      ↓
Inspect
      ↓
Console

Example:

console.log("Hello JavaScript");

Output:

Hello JavaScript

---

Internal JavaScript

JavaScript written directly inside an HTML document.

<script>

    console.log("Hello");

</script>

---

External JavaScript

The recommended approach is to keep JavaScript in a separate file.

app.js

console.log("Hello World");

HTML:

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

Benefits:

• Cleaner code
• Reusable files
• Easier maintenance

---

Running with Node.js

JavaScript can also run outside the browser using Node.js.

Example:

console.log("Hello Node");

Run:

node app.js

Output:

Hello Node

---

Browser vs Node.js

Browser	Node.js
Runs in Browser	Runs on Server
Has DOM Access	No DOM
Used for UI	Used for Backend
Uses window	Uses global

---

JavaScript Engines

A JavaScript engine executes JavaScript code.

Common engines include:

Browser	Engine
Chrome	V8
Firefox	SpiderMonkey
Safari	JavaScriptCore

---

Real-World Example

HTML:

<button id="btn">

    Click Me

</button>

JavaScript:

const button =
document.getElementById("btn");

button.addEventListener(

    "click",

    () => {

        alert("Button Clicked!");

    }

);

Flow:

User Clicks Button
        ↓
JavaScript Detects Event
        ↓
Code Executes
        ↓
Alert Appears

---

JavaScript Ecosystem

Modern frontend development relies heavily on JavaScript.

Popular frontend frameworks include:

• React
• Next.js
• Vue
• Angular

Frontend ecosystem:

JavaScript
     ↓
React
     ↓
Next.js
     ↓
Frontend Applications

Backend ecosystem:

JavaScript
     ↓
Node.js
     ↓
Backend Applications

---

Key Takeaway

JavaScript is the language that makes websites interactive.

HTML
   ↓
Structure

CSS
   ↓
Styling

JavaScript
   ↓
Functionality

Modern web development is built around JavaScript.

JavaScript
      ↓
React
      ↓
Next.js
      ↓
Full Web Applications

Before learning variables, functions, loops, and the DOM, it is important to understand:

• What JavaScript is
• The history of JavaScript
• ECMAScript versions
• How JavaScript runs
• Browser vs Node.js
• JavaScript engines

These concepts form the foundation of JavaScript programming.