Introduction to JavaScript

Introduction

Modern websites are not only static documents that display text and images. Users can click buttons, submit forms, search for products, play videos, open menus, receive notifications, update content without refreshing the page, and interact with complete applications directly inside a web browser.

JavaScript is the programming language that makes these interactions possible. It adds logic, behavior, calculations, decision-making, and dynamic functionality to websites and web applications.

HTML creates the structure of a webpage. CSS controls its appearance. JavaScript controls what the webpage can do.

What is JavaScript?

JavaScript is a high-level, dynamic programming language primarily used to create interactive and dynamic web pages and applications.

It allows developers to write instructions that a computer can execute. These instructions can perform calculations, make decisions, repeat operations, store information, respond to user actions, modify webpage content, and communicate with servers.

JavaScript was originally created to run inside web browsers. Today, JavaScript can also run on servers, mobile devices, desktop computers, smart devices, and many other environments.

Why Do We Need JavaScript?

Without JavaScript, most webpages would behave like static documents. Users could read content and follow links, but advanced interactions and application behavior would be extremely limited.

JavaScript allows a webpage to react to users and perform actions while the application is running.

Why Learn JavaScript?

JavaScript is one of the most important technologies in modern software development. Almost every interactive website uses JavaScript, and it is a fundamental requirement for becoming a Frontend Developer or Full Stack Developer.

Learning JavaScript also provides the foundation required for modern frontend libraries and frameworks. These technologies make application development easier, but they are built on JavaScript concepts.

Real-World Analogy

Imagine a modern car. The physical body and internal structure represent HTML. The paint, shape, interior design, and visual appearance represent CSS. The engine, controls, sensors, and electronic systems represent JavaScript.

Modern Car              Webpage
──────────              ───────
Car Structure           HTML
Car Design              CSS
Engine                  JavaScript
Controls                JavaScript Events
Sensors                 JavaScript Logic
Dashboard Updates       Dynamic JavaScript

HTML, CSS & JavaScript

HTML, CSS, and JavaScript work together to create a complete webpage. Each technology has a different responsibility.

<button id="welcomeButton">Click Me</button>

<p id="message"></p>

button {
    background-color: #f7df1e;
    color: #111;
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

const button = document.getElementById('welcomeButton');
const message = document.getElementById('message');

button.addEventListener('click', function () {
    message.textContent = 'Welcome to JavaScript!';
});

What Can JavaScript Do?

JavaScript can perform simple tasks such as displaying a message and complex tasks such as managing complete applications.

Where Does JavaScript Run?

JavaScript needs an execution environment. An execution environment provides the system required to read and execute JavaScript code.

The two most common environments are web browsers and server-side JavaScript runtimes.

Client-Side JavaScript

Client-side JavaScript runs inside the user’s web browser. The browser downloads the JavaScript code along with the webpage and executes it on the user’s device.

Client-side JavaScript is commonly used for webpage interactions, form validation, DOM manipulation, animations, event handling, and API communication.

User Opens Website
        ↓
Browser Downloads HTML
        ↓
Browser Downloads CSS
        ↓
Browser Downloads JavaScript
        ↓
JavaScript Engine Executes Code
        ↓
User Interacts with Webpage
        ↓
JavaScript Responds to Actions

Server-Side JavaScript

JavaScript can also run outside a web browser. Node.js is a popular JavaScript runtime that allows developers to execute JavaScript on servers and computers.

Server-side JavaScript can process requests, communicate with databases, authenticate users, manage files, create APIs, and perform backend application logic.

Browser
   ↓ Request
Server
   ↓
JavaScript Application
   ↓
Database / API / Files
   ↓
Response
   ↓
Browser

JavaScript in the Browser

Modern web browsers contain a JavaScript engine. The engine reads JavaScript source code, processes it, and executes the instructions.

Because the JavaScript engine is already included in the browser, you do not need to install JavaScript separately to begin writing browser-based programs.

// Your first JavaScript code
console.log("Hello, World!");

// Variables
let name = "JavaScript";
const year = 1995;

// Function
function greet(user) {
    return `Hello, ${user}!`;
}

console.log(greet(name));

This example introduces several JavaScript concepts. The console.log() method displays output, variables store values, constants store values that should not be reassigned, and functions organize reusable logic. Each of these concepts will be covered in detail in later lessons.

JavaScript in a Webpage

JavaScript can be added directly inside an HTML document using the <script> element or stored in a separate JavaScript file.

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Example</title>
</head>
<body>

    <h1>My First JavaScript Page</h1>

    <script>
        console.log('JavaScript is running!');
    </script>

</body>
</html>

For larger applications, JavaScript is normally stored in a separate file and connected to the HTML document.

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

console.log('External JavaScript file loaded!');

Example 1: First JavaScript Program

The console.log() method is commonly used to display information in the browser console. It is especially useful while learning and debugging JavaScript.

console.log('Hello, JavaScript!');

Example 2: Changing Webpage Content

JavaScript can access an HTML element and change its content while the webpage is running.

<h2 id="title">Original Title</h2>

<button onclick="changeTitle()">
    Change Title
</button>

<script>
    function changeTitle() {
        document.getElementById('title').textContent =
            'Title Changed by JavaScript!';
    }
</script>

Example 3: Performing Calculations

JavaScript can store values, perform calculations, and display the result.

const price = 500;
const quantity = 3;

const total = price * quantity;

console.log('Total Price:', total);

JavaScript stores the price and quantity, multiplies them, stores the result in another constant, and displays the final value.

How JavaScript Executes

When JavaScript code is loaded, the JavaScript engine reads and executes the instructions. By default, statements are generally executed from top to bottom.

console.log('First');

console.log('Second');

console.log('Third');

JavaScript Source Code
        ↓
JavaScript Engine
        ↓
Code Processing
        ↓
Instructions Execute
        ↓
Output / Application Behavior

Features of JavaScript

Real-World Applications

JavaScript is used in almost every category of modern web application.

Advantages of JavaScript

Common Beginner Mistakes

Best Practices

Frequently Asked Questions

Key Takeaways

Summary

JavaScript is the programming language that adds behavior, logic, and interactivity to modern websites and applications. It works together with HTML and CSS to create complete web experiences.

JavaScript can respond to user actions, perform calculations, modify webpage content, validate forms, process data, communicate with servers, and build complete applications.

In this lesson, you learned what JavaScript is, why it is needed, why it is worth learning, how it works with HTML and CSS, where JavaScript can run, and how basic JavaScript programs produce output.