Introduction to JavaScript

The Language of the Web

Every time you click a button, see an animation, or submit a form on a website, you're likely interacting with JavaScript. It's the programming language that brings web pages to life. While HTML provides the basic structure (the skeleton) and CSS handles the styling (the clothes), JavaScript adds interactivity and behavior (the personality).

Unlike many other programming languages, JavaScript runs directly in your web browser. There's no need to install complex software to get started. This makes it one of the most accessible and widely used languages in the world.

A Brief History

JavaScript was created in 1995 by Brendan Eich at Netscape, the company behind one of the first popular web browsers. It was originally built in just 10 days to make web pages more dynamic than the static documents they were at the time.

It was first called Mocha, then LiveScript, and finally JavaScript. The name was a marketing move to capitalize on the popularity of another language, Java, but the two are completely unrelated.

To ensure JavaScript worked the same way in different browsers, it was standardized under the name ECMAScript. Today, when you hear about new versions like ES6, ES2020, etc., these are updates to the official standard that all browsers follow. This standardization is why the code you write works consistently for users on Chrome, Firefox, or Safari.

Setting Up Your Workspace

You only need two tools to write and run JavaScript: a code editor and a web browser.

A code editor is a text editor designed for writing code. It helps by color-coding your text (syntax highlighting), which makes it easier to read and spot errors.

There are many great, free options available. Visual Studio Code (VS Code) is a popular choice, but others like Atom and Sublime Text work just as well. For now, download and install one of them.

You already have the second tool: a web browser. Any modern browser like Google Chrome, Mozilla Firefox, or Microsoft Edge will work perfectly. Browsers come with built-in "Developer Tools" that let you see the output of your JavaScript code and help you find bugs.

Your First JavaScript Program

JavaScript code lives inside an HTML file. Let's create one. Open your code editor and make a new file named index.html. Copy and paste the following code into it.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My First JS Program</title>
</head>
<body>

    <h1>Welcome to JavaScript!</h1>

    <script>
        // This is where our JavaScript code goes
    </script>

</body>
</html>

The <script> tag is where the magic happens. It tells the browser that anything inside it should be interpreted as JavaScript.

Let's add a line of code inside the <script> tag to print a message to the browser's developer console. This is a common way to test code and see what's happening behind the scenes.

<script>
    console.log("Hello, World!");
</script>

Save your index.html file. Now, find the file on your computer and open it with your web browser. You'll see the heading "Welcome to JavaScript!" but not your message.

To see the output, you need to open the developer console:

In Chrome or Firefox, right-click anywhere on the page and select "Inspect," then click on the "Console" tab.
The keyboard shortcut is usually Ctrl+Shift+I (or Cmd+Option+I on Mac).

You should see your message, "Hello, World!", printed in the console.

The console.log() command is a fundamental tool for any JavaScript developer. You'll use it constantly to check values and understand how your program is running.

Now you've written and run your very first piece of JavaScript. You have a development environment set up and you know how to execute code and check its output. From here, you're ready to start learning the fundamentals of the language.

JavaScript Essentials