No history yet

Introduction to JavaScript

The Language of the Web

Think of a website as a house. HTML is the frame and the walls—the basic structure. CSS is the paint, furniture, and decorations that give it style. But what makes the house come alive? The lights you can turn on, the doors that open, the appliances that work. That’s JavaScript.

JavaScript, often shortened to JS, is the programming language that brings interactivity to web pages. When you click a button that reveals a menu, see a photo slideshow, or get real-time updates on a social media feed, you're seeing JavaScript in action. It's the engine that runs in the user's web browser to make things happen on a webpage without needing to reload it constantly.

Lesson image

It was created in 1995 at Netscape, originally to add simple animations and form validations to web pages. Today, it’s one of the most popular programming languages in the world, powering not just websites but also mobile apps, servers, and even games.

Setting Up Your Workspace

Getting started with JavaScript is surprisingly simple. You don't need any complex software. You already have the two essential tools: a web browser and a text editor.

  1. A Modern Web Browser: Google Chrome, Mozilla Firefox, or Microsoft Edge all come with powerful JavaScript engines and developer tools built right in. These tools will let you run your code and find any mistakes.

  2. A Code Editor: While you could use a basic text editor like Notepad, a dedicated code editor makes writing code much easier. It offers features like syntax highlighting (coloring your code to make it readable) and autocompletion. Popular free options include Visual Studio Code, Atom, and Sublime Text.

Lesson image

Your First Script

Let's write a classic "Hello, World!" program. JavaScript code can be placed directly inside an HTML file using <script> tags.

First, create a new file on your computer and name it index.html. Open this file in your code editor and type the following HTML structure:

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

  <script>
    // JavaScript code goes here
  </script>

</body>
</html>

Now, inside the <script> tags, we'll add a single line of JavaScript. We will use console.log() to print a message. This function is a developer's best friend; it logs information to the browser's developer console, a hidden area you can open to see output and debug your code.

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

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

</body>
</html>

Save the file and open it in your web browser. You won't see anything on the page itself. To see your message, you need to open the developer console.

In most browsers, you can do this by right-clicking anywhere on the page and selecting "Inspect" or by pressing a keyboard shortcut (like F12 or Ctrl+Shift+I on Windows, or Cmd+Option+I on a Mac). In the window that appears, find and click on the "Console" tab. You should see your message: Hello, World!.

Congratulations! You've just written and executed your first JavaScript program. This simple act of printing to the console is a fundamental skill for building and testing more complex applications.

Time to check your understanding.

Quiz Questions 1/5

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

Quiz Questions 2/5

What is the primary function of JavaScript when used in a web browser?