JavaScript Introduction: Complete Beginner's Guide

Module 1 — Introduction to JavaScript

Course: JavaScript Complete Course

What You Will Learn

In this module, you will learn:

• What JavaScript is
• History of JavaScript
• ECMAScript Standard
• Browser Engines
• JavaScript Runtime
• V8 Engine
• SpiderMonkey Engine
• JavaScript Everywhere
• Client-side vs Server-side JavaScript
• JavaScript Versions
• Strict Mode
• Build your first Hello World application

What is JavaScript?

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

It works together with:

• HTML → Structure
• CSS → Styling
• JavaScript → Behavior

Example

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

Without JavaScript:

• Websites are static.

With JavaScript:

• Interactive buttons
• Forms
• Games
• Dashboards
• Chat applications
• Video streaming
• AI applications
• Desktop applications
• Mobile applications

Why Learn JavaScript?

JavaScript is one of the most widely used programming languages because it powers:

• Frontend Development
• Backend Development
• Mobile Development
• Desktop Applications
• Cloud Functions
• Machine Learning
• IoT Devices
• Browser Extensions
• Progressive Web Apps (PWA)

Popular Frameworks

• React
• Next.js
• Vue
• Angular
• Node.js
• Express
• Electron
• React Native

History of JavaScript

1995

Brendan Eich created JavaScript in just 10 days while working at Netscape.

Originally called

• Mocha
• LiveScript
• JavaScript

Timeline

ECMAScript (ES)

JavaScript is based on the ECMAScript specification.

ECMAScript defines:

• Syntax
• Language Features
• Standard Library
• Objects
• Functions
• Modules

Think of it like this:

ECMAScript
      │
      ▼
Browser implements
      │
      ▼
JavaScript

Popular ECMAScript Versions

Browser Engine

A browser engine converts JavaScript code into machine instructions that the computer can execute.

Popular browser engines:

Browser Architecture

          User

            │

            ▼

     Web Browser

 ┌───────────────────────┐

 HTML Parser

 CSS Engine

 JavaScript Engine

 Rendering Engine

 Network

 GPU

 └───────────────────────┘

JavaScript Runtime

A JavaScript Runtime is the complete environment that allows JavaScript to execute.

It includes:

• JavaScript Engine
• Memory Heap
• Call Stack
• Web APIs
• Event Loop
• Callback Queue
• Microtask Queue

Runtime Example

JavaScript Code

        │

        ▼

Call Stack

        │

        ▼

Web APIs

        │

        ▼

Callback Queue

        │

        ▼

Event Loop

        │

        ▼

Call Stack

V8 Engine

V8 is Google's high-performance JavaScript engine.

Developed by:

Google

Used in:

• Chrome
• Edge
• Node.js
• Electron

Features

• Just-In-Time (JIT) Compilation
• Garbage Collection
• Fast Execution
• Memory Optimization

SpiderMonkey

SpiderMonkey is Mozilla Firefox's JavaScript engine.

Created by:

Mozilla

Features

• ECMAScript Support
• Debugging
• Security
• Optimization

JavaScript Everywhere

JavaScript is no longer limited to browsers.

It can be used for:

Frontend

• HTML
• CSS
• React
• Vue
• Angular

Backend

• Node.js
• Express

Mobile

• React Native
• NativeScript

Desktop

• Electron
• Tauri

AI

• TensorFlow.js
• ONNX Runtime Web

IoT

• Johnny-Five
• Espruino

Client-side vs Server-side JavaScript

Client-side Example

javascriptCopy
1document.body.style.backgroundColor = "lightblue";

Server-side Example (Node.js)

javascriptCopy
1const http = require("http");
2
3const server = http.createServer((req, res) => {
4    res.end("Hello Server");
5});
6
7server.listen(3000);

JavaScript Versions

ES5

javascriptCopy
1var name = "John";

ES6

javascriptCopy
1let name = "John";
2const age = 20;

Arrow Function

javascriptCopy
1const greet = () => {
2    console.log("Hello");
3};

Template Literals

javascriptCopy
1const name = "Ankit";
2
3console.log(`Hello ${name}`);

Optional Chaining

javascriptCopy
1const user = {};
2
3console.log(user.profile?.name);

Strict Mode

Strict Mode helps write safer and cleaner JavaScript by catching common mistakes.

Enable it with:

javascriptCopy
1"use strict";

Example

Without Strict Mode:

javascriptCopy
1name = "John";
2
3console.log(name);

This silently creates a global variable.

With Strict Mode:

javascriptCopy
1"use strict";
2
3name = "John";

Output

ReferenceError

Benefits of Strict Mode

• Prevents accidental global variables
• Makes debugging easier
• Disallows duplicate parameter names
• Prevents unsafe syntax
• Improves code quality

Writing Your First JavaScript Program

Method 1: Inline JavaScript

htmlCopy
1<!DOCTYPE html>
2<html>
3<head>
4    <title>Hello</title>
5</head>
6<body>
7
8<button onclick="alert('Hello JavaScript!')">
9Click
10</button>
11
12</body>
13</html>

Method 2: Internal JavaScript

htmlCopy
1<!DOCTYPE html>
2<html>
3<head>
4    <title>Internal JavaScript</title>
5</head>
6<body>
7
8<script>
9console.log("Hello World");
10</script>
11
12</body>
13</html>

Method 3: External JavaScript

index.html

htmlCopy
1<!DOCTYPE html>
2<html>
3<head>
4    <title>JavaScript</title>
5</head>
6<body>
7
8<script src="script.js"></script>
9
10</body>
11</html>

script.js

javascriptCopy
1console.log("Hello JavaScript");

Project: Hello World Application

Folder Structure

hello-world/

│── index.html
│── style.css
│── script.js

index.html

htmlCopy
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Hello World App</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10
11<h1 id="title">Hello World</h1>
12
13<button id="btn">
14    Change Text
15</button>
16
17<script src="script.js"></script>
18
19</body>
20</html>

style.css

cssCopy
1body {
2    font-family: Arial, sans-serif;
3    text-align: center;
4    margin-top: 100px;
5}
6
7button {
8    padding: 10px 20px;
9    cursor: pointer;
10}
11
12h1 {
13    color: steelblue;
14}

script.js

javascriptCopy
1"use strict";
2
3const title = document.getElementById("title");
4const button = document.getElementById("btn");
5
6button.addEventListener("click", () => {
7    title.textContent = "Welcome to JavaScript!";
8});

Summary

In this module, you learned:

• What JavaScript is and why it is essential for modern web development.
• The history of JavaScript and the role of Brendan Eich.
• The purpose of ECMAScript as the language standard.
• How browser engines such as V8 and SpiderMonkey execute JavaScript.
• What a JavaScript runtime consists of, including the event loop and Web APIs.
• The differences between client-side and server-side JavaScript.
• The evolution of JavaScript through modern ECMAScript versions.
• How Strict Mode improves code quality and prevents common mistakes.
• Three ways to include JavaScript in a web page.
• How to build a simple interactive "Hello World" application using HTML, CSS, and JavaScript.

This module establishes the foundation for the rest of the course. The next module will explore variables (var, let, and const), scope, hoisting, and best practices for managing data in JavaScript.