Introduction to JavaScript

The language that makes websites do things — not just sit there and look pretty.

What Is JavaScript?

JavaScript (often shortened to JS) is a programming language. A programming language is just a way of giving very precise instructions to a computer, using words and symbols the computer can understand.

JavaScript's special job is making web pages interactive. Think about the last time you clicked a "Like" button and saw a heart pop up instantly, or typed in a search box and saw suggestions appear before you finished typing. That instant, "alive" behavior is almost always JavaScript at work.

The other two big technologies of the web are HTML and CSS, and it helps to know how they divide the labor:

Technology Job Everyday analogy
HTML The content and structure The walls, rooms, and furniture of a house
CSS The look and style The paint colors, curtains, and decoration
JavaScript The behavior and interaction The electricity — lights turning on, doors that open, the doorbell that rings

Why Do We Use It?

Without JavaScript, a web page is static — a fancy word that just means "unchanging." You could read it, but you couldn't really interact with it. Buttons wouldn't do anything. Forms couldn't check your typing. Nothing could update without reloading the whole page.

JavaScript lets a page:

  • React to what you do (click, type, scroll, swipe)
  • Change itself without reloading (like a live chat updating)
  • Talk to servers in the background to fetch or save data
  • Remember things about you (like items in a shopping cart)

When Should We Use It?

Anytime a page needs to respond to something — a click, a timer, new data arriving — that's a job for JavaScript. If a page is just words and pictures that never change, you might not need it at all. But almost every modern website, app, and even some servers (using a JavaScript runtime called Node.js) rely on it.

🏠 Real-life analogy

Imagine a house (HTML) that's been painted and decorated (CSS), but has no electricity. The lights don't turn on when you flip a switch, the doorbell doesn't ring, the garage door doesn't open when you press the remote. JavaScript is the electrical wiring — it's what makes things in the house actually respond to your actions.

How JavaScript Fits Into a Web Page

JavaScript code is usually added to an HTML file with a <script> tag, or linked in from a separate .js file — which is the cleaner, more common way. 

<!-- Inside your HTML file -->
<script src="app.js"></script>
  • <script> — tells the browser "JavaScript code is coming"
  • src="app.js" — tells the browser exactly which file to load and run
  • </script> — closes the tag

Setting Up Your Environment

Before writing real JavaScript files, you need two things: a code editor and a browser. Both are free.

  1. Install VS Code — go to code.visualstudio.com and download it. It's the most popular editor for JavaScript and gives you syntax highlighting, error hints, and autocomplete as you type.
  2. Use any modern browser — Chrome, Firefox, Edge, or Safari all work. Chrome is the most popular choice for JavaScript development.
  3. Create your first files — make a folder, put an index.html and an app.js inside it, link the JS file in the HTML, then open the HTML file in your browser. 
<!-- index.html — the bare minimum to run JavaScript -->
<!DOCTYPE html>
<html lang="en">
  <head><meta charset="UTF-8"></head>
  <body>
    <script src="app.js"></script>
  </body>
</html>
// app.js — your JavaScript code goes here
console.log("JavaScript is running!");

Open index.html in your browser, then press F12 to open DevTools and click the Console tab. You'll see your message printed there. Every time you save app.js and refresh the browser, the new code runs.

Your First Line of JavaScript

console.log("Hello, world!");
  • console — a built-in tool the browser gives you for debugging messages
  • .log(...) — a command that means "print this out"
  • "Hello, world!" — the actual text (a string) being printed
  • ; — marks the end of the instruction, like a period ends a sentence

If you open your browser's DevTools (right-click a page → "Inspect" → "Console" tab) and type that line in, you'll see Hello, world! appear. That console is your playground for the rest of this course — use it constantly.

Three Quick Ways to Interact With the User

While learning, these three built-in browser functions let you get input from — and send output to — the user without building any UI: 

// alert() — shows a pop-up message. User can only click OK.
alert("Welcome to my site!");

// confirm() — asks a yes/no question. Returns true (OK) or false (Cancel).
const agreed = confirm("Do you accept the terms?");
console.log(agreed); // true or false

// prompt() — asks for typed input. Returns a string, or null if cancelled.
const name = prompt("What is your name?");
console.log("Hello, " + name + "!");
📌 Learning tool, not production code

alert(), confirm(), and prompt() are perfect for practising while you learn — they require zero HTML setup. Real websites don't use them (they block the page and look ugly), but they're great shortcuts when you're just experimenting with logic.

Note: the code runners on these pages can't show pop-up dialogs, so alert(), confirm(), and prompt() won't work inside them. To try those, open your browser's DevTools console (F12 → Console) and type them there directly.

Real-World Examples

Here are some real places JavaScript is used every day:

// 1. Showing a welcome message when a user logs in
const username = "Maya";
console.log("Welcome back, " + username + "!");

// 2. Counting items in a shopping cart
const cartItems = 3;
console.log("You have " + cartItems + " items in your cart.");

// 3. Showing a welcome message for the day
const dayMessage = "Have a great day!";
console.log(dayMessage);

Try It: Code Runner

Type any JavaScript below and click Run to see the output instantly. This is your playground — experiment freely!

JavaScript Playground
OUTPUT 

            

          

          

          
Common Mistakes

          

            
⚠ Watch out for

            
    
              
  • 
                Forgetting quotes around text:
                console.log(Hello) will error, because
                Hello without quotes looks like a variable name
                JavaScript doesn't recognize.
              
    • 
              
  • 
                Mixing up = (assignment) with == or
                === (comparison) — covered fully in the Operators
                lesson.
              
    • 
              
  • 
                Thinking JavaScript and Java are related. They aren't — the
                similar name is a historical marketing decision from the 1990s,
                not a technical connection.
              
    • 
            

          


          
Best Practices

          
    
            
  • 
              Keep JavaScript in its own .js file rather than
              stuffing it inside HTML — it's easier to read and reuse.
            
    • 
            
  • 
              Use console.log() freely while learning — it's the
              fastest way to "see" what your code is doing.
            
    • 
            
  • 
              Save and re-run your code often. Small, frequent checks catch
              mistakes early.
            
    • 
          


          
Performance Notes

          

            Where you place your <script> tag affects how
            fast a page feels. Scripts placed at the end of the
            <body>, or loaded with the
            defer attribute, let the page's content show up before
            the JavaScript finishes loading — which usually feels faster to a
            visitor.
          


          
Browser Compatibility

          

            JavaScript runs in every modern browser (Chrome, Firefox, Safari,
            Edge) without any setup. Some very new features may not work in
            older browsers — later lessons will point these out when relevant.
          


          
Interview Questions

          

            What is JavaScript used for?
            

              Mainly for adding interactivity and dynamic behavior to web pages,
              though it's now also used on servers (Node.js), in mobile apps,
              and even in some desktop software.
            

          

          

            Is JavaScript the same as Java?
            

              No. They share part of a name for historical marketing reasons
              from 1995, but they are completely different languages with
              different creators, syntax, and use cases.
            

          


          

            
✏️ Exercise

            

              Open your browser's console and use console.log() to
              print your own name as a message.
            

          


          

            
🧠 Quiz

            

              
                1. What does JavaScript add to a web page that HTML and CSS
                cannot?
              
              

                Interactivity and behavior — the ability to respond to events
                like clicks and to change content without reloading the page.
              

            

            

              
                2. What symbol ends most JavaScript instructions?
              
              
A semicolon ;.

            

          


          

            
🚀 Mini Challenge

            

              Using only what you've seen so far, write three separate
              console.log() lines that together print your name,
              your age, and your favorite food.
            

          


          
Summary

          
    
            
  • 
              JavaScript is the language that makes web pages interactive.
            
    • 
            
  • HTML = structure, CSS = style, JavaScript = behavior.
    • 
            
  • 
              console.log() is your first tool for seeing what code
              does.
            
    • 
          


          
Related Topics

          
          

            MDN reference:
            developer.mozilla.org → JavaScript → Introduction
            (placeholder — add live link)