Introduction to JavaScript

The Language of the Web

If a website were a person, HTML would be the skeleton and CSS would be the clothes and hairstyle. But what makes it move, talk, and react? That’s JavaScript. It's the programming language that breathes life into web pages, making them interactive and dynamic.

Without JavaScript, the web would be a static collection of documents. You wouldn't have pop-up alerts, auto-completing search bars, or interactive maps. JavaScript runs directly in your web browser, allowing it to manipulate the HTML and CSS of a page in real-time based on user actions.

A Quick History

JavaScript was created in 1995 by Brendan Eich at Netscape. It was originally built in just 10 days to make web pages more dynamic. Initially named Mocha, then LiveScript, it was eventually renamed JavaScript to capitalize on the popularity of another language, Java. Despite the similar names, they are completely different languages.

To ensure JavaScript worked the same way across different browsers, it was standardized. This standard is called ECMAScript. Today, when you hear about new versions of JavaScript (like ES6, ES7), you're hearing about updates to the ECMAScript standard.

How JavaScript is Used

So what does JavaScript actually do? It handles the logic and interactivity on a website. When you click a button and a menu appears, that's JavaScript at work. When you fill out a form and get an instant message that you missed a field, that's also JavaScript.

Think of it this way: HTML provides the nouns (the content), CSS provides the adjectives (the appearance), and JavaScript provides the verbs (the actions).

Adding JavaScript to HTML

You can add JavaScript directly into an HTML file using the <script> tag. The code placed between <script> and </script> will be interpreted by the browser as JavaScript.

You can place the <script> tag in the <head> section of your HTML, but it's often better to place it just before the closing </body> tag. This allows the browser to load and display all the HTML content first, so your user isn't stuck looking at a blank page while the script loads.

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

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

  <script>
    alert('Hello, world!');
  </script>

</body>
</html>

In this example, the alert() function creates a simple pop-up box in the browser with the message 'Hello, world!'.

For more complex code, it's best to keep your JavaScript in a separate file. You can create a file with a .js extension (e.g., main.js) and link to it from your HTML using the src attribute in the <script> tag.

<!-- This goes in your HTML file -->
<script src="main.js"></script>

This approach keeps your code organized and easier to manage, especially as your projects grow.

Let's check your understanding of these core concepts.

Quiz Questions 1/5

If a website were a person, with HTML as the skeleton and CSS as the clothes, what would JavaScript represent?

Quiz Questions 2/5

What is the name of the official standard that JavaScript is based on?

Now that you know what JavaScript is and how it fits in with HTML and CSS, you're ready to start learning its basic syntax and commands.

JavaScript Fundamentals