Introduction to JavaScript

What Is JavaScript?

JavaScript is the programming language that brings websites to life. If you've ever clicked a button that revealed more content, watched a photo gallery slide across the screen, or filled out a form that instantly checked for errors, you've seen JavaScript in action.

Think of a website as a house. HTML is the wooden frame and foundation, giving the house its structure. CSS is the paint, furniture, and decorations, making the house look good. JavaScript is the electricity and plumbing. It makes the lights turn on, the water run, and the doorbell ring. It adds interactivity and makes things happen.

Unlike many other programming languages, JavaScript runs directly in your web browser. There's nothing to install. This makes it incredibly accessible and the most popular programming language in the world for web development.

A Quick History

JavaScript was created in 1995 by a programmer named Brendan Eich at Netscape. He reportedly developed the first version in just ten days. It was originally called Mocha, then LiveScript, before being renamed JavaScript. This was a marketing decision to capitalize on the popularity of another language, Java, but the two are completely different and unrelated.

To ensure that JavaScript worked the same way in all web browsers, it was submitted to a standards organization called Ecma International. The official standard is called ECMAScript. When you hear developers talk about ES6, ES2020, or other versions, they're referring to updates to this official standard. Modern JavaScript is a result of decades of evolution, making it more powerful and easier to use.

Your First Tools

You don't need fancy software to start writing JavaScript. You already have the most important tool: your web browser.

Every modern browser, like Chrome, Firefox, or Safari, comes with a set of built-in developer tools. One of the most useful parts is the console, which lets you write and test JavaScript code directly.

To open the developer console, right-click anywhere on a webpage and select "Inspect." Then, click on the "Console" tab. You can also use a keyboard shortcut, which is typically Cmd+Opt+J on Mac or Ctrl+Shift+J on Windows.

Once the console is open, you can type code directly into it. Try this classic first program:

alert("Hello, World!");

Press Enter, and you should see a small pop-up box in your browser. You've just run your first line of JavaScript.

While the console is great for quick tests, you'll need a dedicated code editor for writing larger programs. A code editor is like a word processor designed for code, with features like syntax highlighting to make your code easier to read. There are many excellent, free options available, such as Visual Studio Code, Atom, and Sublime Text.

Connecting to Your Webpage

So how do you add JavaScript to an HTML file? The most common way is by using the <script> tag. You can place your JavaScript code directly inside this tag, or you can link to an external JavaScript file. For now, let's place it directly in the HTML.

Here is a complete example. You can copy this code, save it as an HTML file (for example, index.html), and open it in your browser. When you click the button, the JavaScript code will run and change the text of the paragraph.

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

  <h1>Welcome!</h1>
  <p id="message">This is the original text.</p>
  <button id="myButton">Click Me</button>

  <script>
    // Find the button and the paragraph elements
    const button = document.getElementById('myButton');
    const message = document.getElementById('message');

    // Add a 'click' event listener to the button
    button.addEventListener('click', function() {
      // When the button is clicked, change the paragraph's text
      message.textContent = 'The text has been changed by JavaScript!';
    });
  </script>

</body>
</html>

This simple example shows the core power of JavaScript: it can manipulate HTML elements on the fly in response to user actions. This is the foundation for all modern, interactive web applications.

Quiz Questions 1/5

In the common analogy of a website as a house, where HTML is the structure and CSS is the decoration, what does JavaScript represent?

Quiz Questions 2/5

What is the relationship between the JavaScript and Java programming languages?

JavaScript Fundamentals for Web Interactivity