No history yet

Introduction to JavaScript

Bringing Websites to Life

So far, you've learned about HTML for structure and CSS for style. Think of HTML as the skeleton of a house and CSS as the paint, furniture, and decorations. But what makes a house a home? The activity inside—flipping a light switch, opening a door, or turning on the TV. For a website, that's where JavaScript comes in.

JavaScript is the programming language that adds interactivity to your web pages. It takes a static page and makes it dynamic. When you click a button and a menu appears, see a photo gallery slideshow, or get live updates in a news feed, you're seeing JavaScript in action.

JavaScript is a high level, interpreted, programming language used to make web pages more interactive.

How to Add JavaScript

You can add JavaScript to an HTML file in a few ways, but the most common and recommended method is using the <script> tag. This tag tells the browser, "Hey, the code in here is JavaScript, so please execute it!"

You typically place the <script> tag right before the closing </body> tag in your HTML file. This ensures that the browser loads and displays all the HTML and CSS content first, so your page is visible to the user as quickly as possible. The JavaScript, which might depend on those HTML elements, can then load and run.

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

  <h1>Hello, World!</h1>
  <p>This is a simple webpage.</p>

  <!-- JavaScript goes here -->
  <script>
    // This is a JavaScript comment
    console.log("Page has loaded!");
  </script>

</body>
</html>

In the example above, console.log() is a basic JavaScript command that prints a message to the browser's developer console. It’s a great tool for testing and debugging your code. Comments in JavaScript start with // for a single line.

For larger projects, developers often put their JavaScript in a separate .js file and link to it from the HTML, like this: <script src="myscripts.js"></script>. This keeps the code organized.

Basic Syntax

JavaScript code is made up of statements. Each statement is like a single instruction for the computer to follow. You can think of it like a sentence in a paragraph. Just as sentences end with a period, JavaScript statements often end with a semicolon ;.

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

Lesson image

Let's look at a simple example that changes the text of an HTML element.

<!DOCTYPE html>
<html>
<body>

<h1 id="greeting">Hello!</h1>

<script>
  // Find the h1 element by its ID
  let heading = document.getElementById("greeting");

  // Change its text content
  heading.textContent = "Hello, JavaScript!"; 
</script>

</body>
</html>

When you open this file in a browser, you won't see "Hello!" for long. The JavaScript will run almost instantly, find the <h1> element with the ID greeting, and change its text to "Hello, JavaScript!". This is a basic example of how JavaScript can manipulate the content of a webpage.

Let's test your understanding of these initial concepts.

Quiz Questions 1/6

What is the primary role of JavaScript in web development?

Quiz Questions 2/6

Where is it best practice to place the <script> tag in an HTML file?