Introduction to JavaScript

Making Web Pages Come Alive

Think of a website as a house. HTML is the foundation and walls, giving it structure. CSS is the paint, furniture, and decorations, making it look good. But what about the electricity, the running water, and the doorbell? That's JavaScript. It's the programming language that makes a website interactive and dynamic.

Without JavaScript, a webpage is just a static document. You can read it, but you can't really do much with it. JavaScript turns that static page into an application. It handles things like validating a form before you submit it, creating an image slider, or showing an alert when you click a button. It's the engine that powers the interactive elements you use every day on the web.

This trio, HTML, CSS, and JavaScript, forms the foundation of front-end web development. They work together in the user's browser to create the websites we see and use. While HTML and CSS are markup and styling languages, JavaScript is a full-fledged programming language. This means it can handle logic, make decisions, and manipulate the content of the webpage.

Adding JavaScript to a Page

So, how do you add this interactivity to your HTML? JavaScript code is placed inside <script> tags. There are two primary ways to do this: directly within the HTML file (inline script) or by linking to a separate JavaScript file (external script).

For small, simple scripts, writing them directly in the HTML file is quick. But for anything complex, using an external file is the best practice. It keeps your code organized and reusable.

Let's look at a simple example written directly in an HTML file. The alert() function is a basic command that pops up a small message box in the browser.

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

  <script>
    // This is a simple JavaScript command
    alert('Hello, world!');
  </script>

</body>
</html>

Now, let's see the more common approach: using an external file. The HTML file links to the script using the src (source) attribute in the <script> tag.

This is the HTML file, index.html. It looks almost the same, but the JavaScript code is gone.

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

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

</body>
</html>

And here is the content of myscript.js, which is a separate file in the same folder.

// This code is in an external file
alert('Hello, world!');

The result is exactly the same, but the code is much cleaner. Your HTML handles the structure, and your JavaScript file handles the behavior.

Basic Structure

A JavaScript program is a sequence of statements. Each statement is an instruction for the computer to perform an action. You can think of it like a recipe, with each statement being one step in the process.

statement

noun

A single instruction in a computer program that tells the computer to perform an action.

Statements in JavaScript are often separated by semicolons. While modern JavaScript can sometimes infer where a statement ends, it's a universal best practice to end every statement with a semicolon. This prevents unexpected errors and makes your code clearer.

For example, the single line of code in our myscript.js file is one statement:

alert('Hello, world!');

This statement calls a function named alert and gives it the text 'Hello, world!' to display. As you learn more, you'll see how to combine many statements to build complex and interactive features.

Quiz Questions 1/5

If a website is compared to a house, where HTML is the structure and CSS is the decoration, what is the role of JavaScript?

Quiz Questions 2/5

What is the primary difference between JavaScript and HTML/CSS?

That's the basic idea. JavaScript breathes life into web pages by providing a way to script interactivity, working alongside HTML and CSS to create the modern web.

JavaScript Fundamentals