Module 3 · Lesson 1⏱ ~8 minJS

What Is JavaScript?

JavaScript brings your pages to life — buttons that click, forms that respond, and content that changes right before your eyes.

What Is JavaScript?

If HTML is the skeleton and CSS is the skin, JavaScript is the brain and muscles. It's what makes websites do things — respond to clicks, validate forms, load new content, create animations — instead of just sitting there.

Every interactive thing on a website uses JavaScript. When you click a "Like" button and the count goes up without the page reloading? JavaScript. When a form tells you "Please enter a valid email" before you submit? JavaScript. When a map lets you drag and zoom? JavaScript. When new tweets load as you scroll down? JavaScript.

JavaScript was created in 1995 and has grown into one of the most widely-used programming languages on Earth. It runs in every web browser — Chrome, Firefox, Safari, Edge — so you don't need to install anything special to get started. And unlike HTML and CSS (which describe structure and style), JavaScript is a full programming language — it can make decisions, repeat actions, do math, and remember things.

HTML says what something is: "this is a button, this is a paragraph."
CSS says how it looks: "this button is blue, round, and centered."
JavaScript says what it does: "when someone clicks this button, show a thank-you message."

Your First JavaScript

You can write JavaScript right now — no setup required. Every browser has a built-in JavaScript console where you can type commands and see results immediately.

Open your browser console: press F12 (or Cmd+Option+J on Mac, Ctrl+Shift+J on Windows/Linux) and click the Console tab. Then type:

alert("Hello, world!");

Press Enter. A popup appears! You just ran your first line of JavaScript. The alert() function shows a message in a popup dialog — it's one of the simplest ways to see JavaScript working.

You can also embed JavaScript directly in an HTML file using <script> tags:

html

<!DOCTYPE html>
<html>
  <head>
    <title>My First JavaScript</title>
  </head>
  <body>
    <h1>Welcome!</h1>
    <script>
      alert("Hello from JavaScript!");
    </script>
  </body>
</html>

When the browser loads this page, it reads the HTML from top to bottom. When it hits the <script> tag, it runs the JavaScript inside. In this case, it shows the alert popup as soon as the page loads.

Variables in JavaScript

A variable is like a labeled box where you can store a piece of information. You give the box a name, and whenever you want to use what's inside, you use that name.

In JavaScript, you create variables with the keywords let or const:

let name = "Alex";
const age = 25;
let isStudent = true;
const pi = 3.14;

let creates a variable that can change later. Use it for things that update — scores, user input, counters.
const creates a variable that cannot change. Once you set it, it stays that way. Use it for fixed values — someone's birth year, the value of pi, configuration settings.

Here's what happens when you try to change a const:

let score = 0;
score = 10;       // ✓ Works! let can change

const maxScore = 100;
maxScore = 200;   // ✗ Error! const can't be reassigned

Variables can hold different types of data:

let name = "Maria";       // string (text in quotes)
let age = 28;            // number
let isMember = true;     // boolean (true or false)
let hobbies = ["reading", "coding", "hiking"];  // array (list)
let person = {           // object (key-value pairs)
  name: "Maria",
  age: 28
};

A good rule of thumb: start with const. If you realize you need to change the value later, switch it to let. This prevents accidental changes and makes your code easier to understand.

Showing Output

When you write JavaScript, you often want to see the result of what your code is doing. There are three common ways to show output:

1. console.log() — invisible to users, essential for developers

console.log("Hello, world!");
console.log(2 + 2);
console.log("The user's name is", name);

console.log() prints to the browser's Console (press F12 to see it). It's the most common way developers test and debug their code. Users never see it — it's like a private notebook for the developer.

2. alert() — a popup the user can see and dismiss

alert("Welcome to my website!");
alert("There was an error.");

alert() shows a popup dialog. It's simple but intrusive — use it sparingly. Real websites rarely use alerts for important messages.

3. document.write() — writes directly onto the page

document.write("<h1>Hello!</h1>");
document.write("<p>This text appears on the page.</p>");

document.write() adds content directly to the web page. However, it's limited — if you use it after the page finishes loading, it overwrites everything. For real projects you'll use better methods like .innerHTML (which we'll cover in the next lesson).

Quick comparison:

console.log() — for developers, best for testing and debugging
alert() — for simple popup messages, use sparingly
document.write() — for writing to the page, limited in practice

Connecting JavaScript to HTML

Just like CSS, JavaScript works best when it lives in its own file and is linked to your HTML:

html

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

You can place the <script> tag either in the <head> or at the end of <body>. Placing it at the end of <body> (right before </body>) is generally preferred — it ensures the HTML loads before the JavaScript runs:

html

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Welcome!</h1>
    <p>This page uses JavaScript.</p>

    <!-- JavaScript at the bottom = HTML loads first -->
    <script src="app.js"></script>
  </body>
</html>

You can also write JavaScript directly inside <script> tags instead of linking an external file:

html

<script>
  console.log("This runs on page load");
</script>

But external files are best for real projects. They keep your HTML clean, let you reuse the same JavaScript across multiple pages, and make your code easier to organize as it grows. A typical project structure looks like:

my-website/
  index.html
  styles.css
  app.js

Try It Yourself

Get hands-on with JavaScript right now:

Open your browser console (F12 → Console tab)
Try console.log("Your name here"); and press Enter
Create a variable: let myName = "Your name";
Log it: console.log(myName);
Try alert("Hello!");
Try some math: console.log(10 + 5);

The console is your playground — experiment freely. Nothing you type there can break anything, and refreshing the page resets everything.

Key Terms

JavaScript

A programming language that runs in web browsers. It makes websites interactive — responding to clicks, changing content, validating forms, and more.

Variable

A named container that stores a value. Created with let (can change) or const (cannot change). Example: let name = 'Alex';

Console

A developer tool built into every browser (press F12 to open). JavaScript can print messages to it with console.log() for testing and debugging.

alert()

A JavaScript function that shows a popup dialog with a message. Simple but intrusive — used mainly for quick tests and demos.

script

An HTML tag (<script>) that contains or links to JavaScript code. Can be inline (code directly inside) or external (linked with src).

Check Your Understanding

What role does JavaScript play compared to HTML and CSS?

Answer: HTML provides the structure (what things are), CSS provides the style (how things look), and JavaScript provides the interactivity (what things do — responding to clicks, changing content, etc.).

What's the difference between let and const?

Answer: let creates a variable whose value can be changed later (reassigned). const creates a variable whose value cannot be changed after it's set. Use const by default and switch to let when you know the value needs to change.

What is console.log() and who sees its output?

Answer: console.log() prints a message to the browser's developer console (press F12 to see it). Only developers see this output — regular users never see it. It's a tool for testing and debugging, not for showing messages to users.

← Back to Course Next: Responding to Clicks