Introduction to JavaScript

What Is JavaScript?

Think of a website as a house. HTML is the foundation and walls—the basic structure. CSS is the paint, furniture, and decorations—it’s all about the look and feel. But what makes it a home you can interact with? What happens when you flip a light switch or open a window?

That's where JavaScript comes in. It’s the electrical wiring and plumbing of a webpage. It’s the language that brings interactivity, turning a static page into a dynamic experience. When you see a pop-up alert, an animated slideshow, or a form that checks your input before you submit it, you're seeing JavaScript at work.

Unlike many programming languages that run on a server, JavaScript was designed to run directly inside your web browser. This means it can make changes to a webpage in real-time without needing to reload the entire page, creating a faster and smoother experience for the user.

A Quick Trip Back in Time

JavaScript was created in 1995 by Brendan Eich at Netscape. It was originally built in just ten days to add simple interactivity to the Netscape Navigator browser. It wasn't even called JavaScript at first. It went by Mocha, then LiveScript, before being renamed JavaScript to capitalize on the popularity of another language at the time, Java. Despite the name, JavaScript and Java are completely different languages.

As other browsers like Microsoft's Internet Explorer emerged, they created their own versions of the language. This led to chaos, as code that worked in one browser would break in another. To solve this, JavaScript was standardized. The standard is called ECMAScript, and it ensures that all browsers run a consistent version of the language. You'll often see versions like ES6, ES2015, etc., which refer to updates to the ECMAScript standard.

Bringing Pages to Life

JavaScript works by interacting with the HTML and CSS of a webpage. When a browser loads a page, it creates a model of that page called the Document Object Model, or DOM. The DOM is a tree-like structure of all the elements on the page.

JavaScript has the power to access and modify this DOM. It can add new HTML elements, change the text inside an existing element, or update the CSS styles of any part of the page in response to user actions like clicks, mouse movements, or keyboard presses.

In short, JavaScript listens for events and then manipulates the DOM to change what the user sees.

You can add JavaScript to an HTML file in two main ways. The first is to write it directly inside <script> tags within your HTML file.

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

  <h1>Welcome!</h1>
  <button id="myButton">Click Me</button>

  <script>
    // This is JavaScript code
    const button = document.getElementById('myButton');
    button.addEventListener('click', function() {
      alert('Hello, world!');
    });
  </script>

</body>
</html>

A better and more organized way is to keep your JavaScript in a separate file (e.g., app.js) and link to it from your HTML. This keeps your code clean and allows the browser to cache the script file, making your site load faster on subsequent visits.

<!-- In your HTML file -->
<script src="app.js"></script>


// In your app.js file
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
  alert('Hello, world!');
});

Your First JavaScript Setup

The great thing about JavaScript is that you don't need any fancy software to get started. You already have everything you need: a text editor and a web browser.

Any plain text editor will do, but a code editor like Visual Studio Code, Sublime Text, or Atom will give you helpful features like syntax highlighting and autocompletion.

Your web browser also comes with powerful developer tools built-in. The most important one for now is the JavaScript console. You can usually open it by right-clicking anywhere on a webpage and selecting "Inspect," then clicking the "Console" tab.

The console lets you test out JavaScript code and see output from your scripts. The console.log() command is a fundamental tool for programmers to print information and debug their code.

// Type this into your browser's console and press Enter
console.log('JavaScript is running!');

Now that you know what JavaScript is and how to get started, let's test your knowledge.

Quiz Questions 1/6

Using the analogy of building a house, if HTML is the structure (walls and foundation) and CSS is the decoration (paint and furniture), what is JavaScript?

Quiz Questions 2/6

To ensure JavaScript works consistently across different web browsers, its core features are defined by an official standard. What is this standard called?

You've taken your first step into the world of web interactivity. With these fundamentals, you're ready to start making your web pages come alive.

JavaScript Fundamentals