Introduction to JavaScript

What is JavaScript?

Think of a website as a house. HTML is the foundation and the walls, giving it structure. CSS is the paint, furniture, and decorations, making it look good. But the house just sits there. JavaScript is the electricity and plumbing. It's what makes things happen. It lets you turn on lights, open the garage door, or flush a toilet.

On a webpage, JavaScript (often shortened to JS) is the programming language that creates interactivity. When you click a button and a menu appears, that's JavaScript. When you see a photo gallery you can swipe through, that's JavaScript. It's the engine that turns a static page into a dynamic application, right inside your web browser.

Without it, the web would be a lot less interesting, mostly filled with text and images that don't do much. With JavaScript, we can build complex applications like Google Maps, social media feeds that update in real-time, and interactive games.

A Brief History

Back in 1995, the web was a quiet place. A programmer at Netscape named Brendan Eich was tasked with creating a new language for the Netscape Navigator browser. He created the first version in just ten days. It was originally called Mocha, then LiveScript, and finally, JavaScript.

The name was a marketing move to piggyback on the popularity of another language, Java. But don't be fooled, JavaScript and Java are completely different languages, like the difference between a car and a carpet.

To prevent one company from controlling the language, JavaScript was submitted to a standards organization. The official standard is called ECMAScript, which is why you'll sometimes see versions like ES6, ES7, etc. Every year, a new version of ECMAScript is released, adding new features to JavaScript.

How It All Fits Together

JavaScript doesn't work in a vacuum. It's designed to interact directly with HTML and CSS. It can read and change the content, structure, and style of a webpage on the fly.

HTML defines the content. CSS defines the style. JavaScript defines the behavior.

You can add JavaScript directly into an HTML file using the <script> tag. This is the simplest way to get started. The JavaScript code inside this tag can then find HTML elements and tell them what to do. For example, you can write a script that waits for a user to click a button and then changes the text in a paragraph.

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

  <h1 id="main-heading">Hello World!</h1>

  <button onclick="changeText()">Click Me</button>

  <script>
    function changeText() {
      // Find the h1 element by its ID
      let heading = document.getElementById("main-heading");
      // Change its text content
      heading.innerHTML = "Hello JavaScript!";
    }
  </script>

</body>
</html>

In this example, the onclick attribute on the button tells the browser to run our changeText() JavaScript function when the button is clicked. That function then finds the <h1> element and changes its content.

Setting Up Your Workspace

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

Web Browser: Any modern browser like Chrome, Firefox, or Safari comes with built-in Developer Tools. You can open the JavaScript console (usually by pressing F12 or right-clicking and selecting "Inspect") to run JavaScript code directly. This is great for quick experiments.
Text Editor: For writing actual files, any plain text editor will work. Notepad on Windows or TextEdit on Mac are fine. However, a code editor like Visual Studio Code, Sublime Text, or Atom will make your life much easier with features like syntax highlighting, which colors your code to make it more readable.

That's it. To get started, you can create a new file named index.html, copy the code from the example above, and open the file in your web browser. You'll have your first interactive webpage.

Quiz Questions 1/6

In the analogy of a website being a house, what does JavaScript represent?

Quiz Questions 2/6

What is the primary role of JavaScript in web development?

Now that you've seen the basics, you're ready to start writing some code. The journey into web development begins with understanding these three core technologies and how they work together.

JavaScript Essentials