No history yet

Introduction to JavaScript

Making Web Pages Come Alive

Think of a website as a person. HTML provides the basic skeleton—the structure. CSS is the clothing and appearance—the colors, fonts, and layout. But what makes the person move, talk, and react? That's JavaScript.

Lesson image

JavaScript is the programming language that brings interactivity to a web page. When you click a button and a menu appears, fill out a form that instantly tells you if your password is too weak, or see a photo gallery that smoothly slides to the next picture, you're seeing JavaScript in action. It turns a static document into a dynamic application.

Without JavaScript, most websites would feel like reading a book. With it, they feel like a conversation.

How It Works in the Browser

JavaScript code is just plain text, and it's usually embedded directly within an HTML file using the <script> tag. While you can place the <script> tag in the <head> of an HTML document, it's common practice to put it just before the closing </body> tag. This ensures the rest of the page content loads first, so users aren't staring at a blank screen while scripts are running.

<!DOCTYPE html>
<html>
<head>
  <title>My First Interactive Page</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <h1>Welcome!</h1>
  <p>This is a simple web page.</p>

  <script>
    // JavaScript code goes here!
    console.log("Hello from the browser!");
  </script>

</body>
</html>

Every modern web browser—like Chrome, Firefox, and Safari—has a built-in JavaScript engine. This engine's job is to read and execute the JavaScript code line by line, from top to bottom. When the browser loads the HTML file, it sees the <script> tag and hands whatever is inside over to its engine. The engine then runs the code, making the page interactive.

The Rules of the Language

Like any language, JavaScript has grammar rules, or syntax. Getting these basics right is the first step to writing code that works. Here are a few core rules to remember.

Case Sensitivity

JavaScript is case-sensitive. This means that myVariable, MyVariable, and myvariable are treated as three completely different things. It's a common source of bugs for beginners, so pay close attention to capitalization.

Statements

A program is made up of statements, which are like individual sentences or commands. Each statement tells the computer to do one thing. In JavaScript, we usually end each statement with a semicolon (;).

let name = "Alice";

While modern JavaScript sometimes lets you omit the semicolon, it's a good habit to use them. It makes your code clearer and prevents certain types of errors.

Comments

Comments are notes you leave in your code for humans to read. The JavaScript engine completely ignores them. They're useful for explaining what a complex piece of code does or for temporarily disabling a line of code without deleting it.

There are two ways to write comments:

// This is a single-line comment.

/* 
  This is a multi-line comment.
  It can span across several lines.
*/

let color = "blue"; // You can also put a comment at the end of a line.

Now that you know the basics, let's check your understanding.

Quiz Questions 1/5

What is the primary role of JavaScript on a website?

Quiz Questions 2/5

For better page load performance, where is the most common place to put the <script> tag in an HTML document?

Understanding these foundational concepts is the key to building anything with JavaScript. You've taken the first step!