No history yet

Introduction to JavaScript

Bringing Websites to Life

So far, you've learned about HTML for structure and CSS for styling. Think of HTML as the skeleton of a house and CSS as the paint and furniture. But what makes the lights turn on or the garage door open? That's where JavaScript comes in. It's the electrical wiring that adds interactivity.

Lesson image

JavaScript, or JS, is a programming language that lets you create dynamic content, control multimedia, animate images, and much more. It's the third core technology of the World Wide Web, and it runs directly inside your web browser. You don't need any special software to get started.

If a webpage does something when you click, hover, or type, it's almost certainly JavaScript at work.

Using the Browser Console

Every modern web browser comes with a built-in tool for developers called the console. It's a place where we can write JavaScript commands and see immediate results. It's also where JavaScript can print messages, which is incredibly useful for checking our work.

Let's write our very first line of JavaScript. This simple command tells the browser to log, or print, a message to the console.

console.log("Hello, World!");

To try this yourself, open your web browser (like Chrome or Firefox), right-click anywhere on a page, and select "Inspect" or "Inspect Element." This will open the developer tools. Find and click on the "Console" tab. Type the code above and press Enter. You should see the message "Hello, World!" appear.

Adding JavaScript to HTML

While the console is great for testing, we usually want our JavaScript to run automatically as part of a webpage. To do this, we connect our JavaScript code to an HTML file using the <script> tag. There are two main ways to do this.

Writing JavaScript code directly within an HTML file is called an inline script. This is fine for small tests, but it can get messy.

<!DOCTYPE html>
<html>
<head>
  <title>My First JS Page</title>
</head>
<body>
  <h1>Look in the console!</h1>

  <script>
    console.log("This script is running from the HTML file!");
  </script>
</body>
</html>

The better way is to put your JavaScript in its own file. This keeps your project organized. By convention, these files end with .js. You then link to this file from your HTML.

First, create an HTML file named index.html.

<!DOCTYPE html>
<html>
<head>
  <title>My First JS Page</title>
</head>
<body>
  <h1>Look in the console!</h1>
  <script src="main.js"></script>
</body>
</html>

Notice the <script> tag now has a src attribute pointing to our JavaScript file. The </script> closing tag is still required.

Next, create a separate file in the same folder named main.js.

// This is a comment. It's a note for humans and is ignored by the browser.

console.log("This script is running from an external file!");

Now, when you open index.html in your browser, it will load and run the code from main.js. The result is the same: a message appears in the console. Placing the <script> tag just before the closing </body> tag is a common practice. It ensures that the browser has loaded all the HTML content on the page before it runs the JavaScript code.

Quiz Questions 1/5

In the analogy of building a house, if HTML is the skeleton and CSS is the paint, what is JavaScript?

Quiz Questions 2/5

Which line of code correctly links an external JavaScript file named app.js to an HTML document?

You've taken your first steps into the world of JavaScript. You now know what it does, how to use the browser console, and how to link your code to a webpage.