No history yet

Introduction to JavaScript

The Language of the Web

Think of a website as a house. HTML is the frame and the walls—the basic structure. CSS is the paint, the furniture, and the decorations that give it style. But what makes the house come alive? What happens when you flip a light switch, open a door, or turn on the faucet? That's JavaScript.

JavaScript is the programming language that makes web pages interactive. It takes a static page and adds behavior to it.

Without JavaScript, the web would be a lot like a library of beautifully designed but non-interactive books. You could look at pictures and read text, but you couldn't click a button to see a photo gallery, submit a form without the page reloading, or play a game directly in your browser. JS is the engine that powers the dynamic, responsive experiences we expect from modern websites.

Lesson image

It was created in 1995 by Brendan Eich at Netscape, initially under the name Mocha, then LiveScript. It was renamed JavaScript to piggyback on the popularity of another language, Java, though the two are completely different. The gamble paid off. Today, JavaScript is one of the most popular programming languages in the world, running on virtually every web browser.

How It Works with HTML and CSS

JavaScript works directly with a web page's HTML structure and CSS styles. It can read, add, change, and remove HTML elements and attributes, and it can also modify CSS styles. This ability to manipulate the page's content and appearance after it has loaded is what makes JavaScript so powerful.

This is done through something called the Document Object Model, or DOM. The browser creates a DOM representation of the HTML document, which is like a tree of objects. JavaScript can access and change this tree, and any changes are instantly reflected on the webpage.

To add JavaScript to an HTML file, you use the <script> tag. You can place your code directly inside this tag or, more commonly, link to an external JavaScript file.

<!DOCTYPE html>
<html>
<head>
    <title>My First JS Page</title>
</head>
<body>

    <h1>Welcome!</h1>
    <p>This is a static paragraph.</p>

    <!-- JavaScript is added here -->
    <script>
        // This is a single-line comment
        console.log("Hello from inside the HTML!");

        /*
         This is a multi-line comment.
         It can span several lines.
        */
    </script>

    <!-- Or linked from an external file -->
    <script src="myscripts.js"></script>

</body>
</html>

In the example, console.log() is a basic function that prints a message to the browser's developer console—a useful tool for testing and debugging. Notice the semicolons at the end of statements. While modern JavaScript often doesn't require them, it's good practice to use them to avoid potential issues.

Your First Steps

As you begin, you'll focus on the fundamental building blocks of the language. This includes variables for storing data, data types like numbers and strings, and operators for performing actions. You'll also learn about functions, which are blocks of reusable code, and control flow, which dictates the order in which code is executed.

This foundation is crucial. Once you're comfortable with these core concepts, you can start building genuinely interactive web applications.

Ready to check your understanding?

Quiz Questions 1/4

In the analogy of a website as a house, what does JavaScript represent?

Quiz Questions 2/4

What is the primary mechanism JavaScript uses to interact with and modify the content and structure of an HTML document?

With these basics in mind, you're ready to start writing code and bringing your web pages to life.