Introduction to JavaScript

What is JavaScript?

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 work? What happens when you flip a light switch or turn a doorknob?

That's JavaScript. It's the electrical wiring and plumbing of a webpage. It's a programming language that brings websites to life, making them interactive and dynamic.

Without JavaScript, a webpage is just a static document. You can read it, and it might look nice, but you can't really do much with it. JavaScript changes that. It runs directly in your web browser, allowing developers to create features like animated graphics, interactive forms, and content that updates automatically without needing to reload the page.

In short: HTML provides the structure, CSS handles the presentation, and JavaScript adds the interactivity.

Adding JavaScript to a Page

So, how do you add this interactivity to an HTML document? The most direct way is by using the <script> tag. You can place your JavaScript code right inside this tag within your HTML file.

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

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

  <script>
    // This code will run in the browser
    alert('Hello from JavaScript!');
  </script>

</body>
</html>

When you open this HTML file in a browser, a small pop-up box will appear with the message "Hello from JavaScript!". This is a simple but clear example of JavaScript in action. The alert() function is a basic way to display information to the user.

While putting code directly in the HTML works for small scripts, it can get messy quickly. A more common and organized approach is to keep your JavaScript in a separate file. These files typically end with a .js extension.

Keeping your JavaScript in a separate file helps with organization, makes the code reusable across different pages, and can even help your site load faster.

To link an external JavaScript file, you still use the <script> tag, but now you add a src (source) attribute that points to your file's location.

Here's what the HTML file would look like:

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

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

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

</body>
</html>

And here is the content of the app.js file:

// app.js

alert('Hello from an external file!');

The result is exactly the same, but the code is now neatly separated. This is the standard practice for web development.

Basic Syntax Rules

Like any language, JavaScript has its own set of rules and grammar, which we call syntax. Let's look at a few fundamental concepts.

Statements are the individual instructions that make up a JavaScript program. For example, alert('Hello'); is a single statement. It's a common convention to end each statement with a semicolon (;). While modern JavaScript can often work without them, it's a good habit to include them to avoid potential issues.

Variable

noun

A container for storing a data value.

Variables are used to store and manage data. You can think of them as named containers. You declare a variable using keywords like let or const, followed by a name you choose.

let message = 'This is stored in a variable.';
alert(message);

Finally, comments are notes you can leave in your code that the browser will ignore. They are incredibly useful for explaining what your code does, both for other developers and for your future self. A single-line comment starts with //, and anything after it on that line is ignored. A multi-line comment starts with /* and ends with */.

// This is a single-line comment.

/* 
  This is a multi-line comment.
  It can span across several lines.
*/

let username = 'Alex'; // Assign the name 'Alex' to the username variable.

You've just scratched the surface of what JavaScript can do. Now, let's see what you've learned.

Quiz Questions 1/5

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

Quiz Questions 2/5

Which HTML snippet correctly links an external JavaScript file named app.js?

JavaScript Fundamentals