No history yet

Introduction to JavaScript

What is JavaScript?

Think of a website as a house. HTML is the foundation and walls, the basic structure. CSS is the paint, furniture, and decorations that give it style. But what makes the house come alive? What happens when you flip a light switch, open a door, or turn on the faucet? That's JavaScript.

JavaScript, often shortened to JS, is the programming language that makes websites interactive. It takes a static page of text and images and turns it into something you can engage with. When you click a button, see a pop-up alert, or watch content update without reloading the page, you're seeing JavaScript in action.

Lesson image

While it was born in the web browser, JavaScript is incredibly versatile. It's now used to build server-side applications, mobile apps, and even desktop software. But its heart is still in making the web a dynamic, responsive place.

A Brief History

Back in 1995, the web was a very static place. A programmer at Netscape named Brendan Eich was tasked with creating a language that could run in their Navigator browser. He famously created the first version in just 10 days.

It was originally called Mocha, then LiveScript, and finally renamed JavaScript. This was a marketing move to capitalize on the popularity of another language, Java, though the two are completely different. Think of them like car and carpet, they just share a few letters.

To avoid a single company controlling the language, JavaScript was submitted to a standards organization. The official standard is called ECMAScript, and JavaScript is the most popular implementation of that standard. This ensures that the core language works the same way across different browsers.

Setting Up Your Workspace

You don't need fancy or expensive tools to write JavaScript. In fact, you already have the most important one: a web browser. For writing code, any plain text editor will do, but a dedicated code editor will make your life much easier.

Code editors provide features like syntax highlighting (coloring your code to make it more readable), autocompletion, and error checking. Popular free options include Visual Studio Code, Sublime Text, and Atom.

Lesson image

The other essential tool is built right into your browser: the developer console.

Using the Browser Console

The browser console is a playground for JavaScript. It lets you run code snippets instantly, test ideas, and see messages from your scripts, including errors. Learning to use it is a critical skill for any web developer.

To open the console in most browsers (like Chrome, Firefox, or Edge), you can right-click anywhere on a webpage and select "Inspect" or "Inspect Element." This will open the developer tools. Look for a tab named "Console."

Let's try it. Open the console and type the following line of code, then press Enter:

console.log("Hello, World!");

You should see the message "Hello, World!" printed back to you. The console.log() command is a fundamental tool for debugging. It lets you print the value of variables or confirm that a certain part of your code has been reached. We'll be using it constantly.

You can also do math directly in the console. Try typing 5 + 10 and pressing Enter. The console is a powerful, immediate way to interact with JavaScript.