Introduction to JavaScript

The Story of JavaScript

In the mid-1990s, the web was mostly a collection of static documents. You could read text and look at images, but you couldn't interact with much. Netscape, the company behind the popular Navigator browser, wanted to change that. They hired a programmer named Brendan Eich to create a simple scripting language that could run directly in the browser.

In just ten days, Eich created the first version of what we now know as JavaScript. Its original name was Mocha, then LiveScript, before a marketing decision renamed it JavaScript to piggyback on the popularity of another language, Java. Despite the similar names, they are two very different languages.

JavaScript's purpose was simple: make web pages dynamic. It allowed developers to react to user actions, like clicks and mouse movements, change content on the fly, and create animations. Over the years, the language has grown tremendously. An organization called Ecma International now standardizes the language under the name ECMAScript, ensuring it works consistently across different browsers and environments.

The Three Pillars of the Web

Think of a website as a person. To build one, you need three core technologies: HTML, CSS, and JavaScript. Each has a distinct role.

HTML (HyperText Markup Language) is the skeleton. It provides the basic structure and content of the page, like the headings, paragraphs, and images.

This is what the raw structure looks like.

<button>Click Me</button>

CSS (Cascading Style Sheets) is the clothing and appearance. It styles the HTML, controlling colors, fonts, layout, and spacing to make the page visually appealing.

With CSS, we can make our button look better.

button {
  background-color: blue;
  color: white;
  border-radius: 5px;
  padding: 10px;
}

JavaScript is the brain and muscles. It adds interactivity, allowing the page to respond to user actions. It can manipulate HTML and CSS to update the page without needing to reload it.

Finally, JavaScript makes the button do something when clicked.

const button = document.querySelector('button');

button.addEventListener('click', () => {
  alert('Hello, World!');
});

Together, these three technologies form the foundation of modern web development. You create the structure with HTML, style it with CSS, and make it come alive with JavaScript.

Your Development Toolkit

Getting started with JavaScript is surprisingly simple. You don't need expensive software. The two essential tools are already on your computer:

A modern web browser: Chrome, Firefox, Safari, or Edge all come with powerful developer tools built-in.
A text editor: While you could use a basic program like Notepad or TextEdit, a code editor like Visual Studio Code, Sublime Text, or Atom will make your life much easier with features like syntax highlighting and autocompletion.

That's it. For now, the browser is your primary environment for running and testing your code.

Running Your First Script

There are two main ways to include JavaScript on a web page. The first is to embed it directly in an HTML file using <script> tags.

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

  <h1>Welcome!</h1>

  <script>
    // This is JavaScript code
    alert('This is an alert from inside the HTML!');
  </script>

</body>
</html>

If you save this code as an .html file and open it in your browser, you'll see a pop-up alert box. This is great for small scripts, but for larger projects, it's better to keep your JavaScript in a separate file. This is the second, and more common, method.

Create a new file called script.js and add your JavaScript to it.

// In script.js
alert('This is from an external file!');

Then, link to this file from your HTML using the src attribute in the <script> tag. Make sure both files are in the same folder.

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

  <h1>Welcome Again!</h1>

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

</body>
</html>

This approach keeps your code organized and easier to manage. While the browser is the natural home for JavaScript, environments like Node.js now allow you to run JavaScript outside the browser to build servers, command-line tools, and more. This has expanded JavaScript from a simple scripting language into a powerful, general-purpose tool.

Let's check your understanding of these core concepts.

Quiz Questions 1/5

What was the original name for JavaScript?

Quiz Questions 2/5

If you think of a website as a house, HTML provides the structure (walls, floors, roof). What does JavaScript provide?

You now have a foundational view of what JavaScript is, where it came from, and how it fits into the web. The next step is to dive into the language itself.

JavaScript Fundamentals