Learn Introduction to JavaScript

What is JavaScript?

JavaScript is a programming language that brings web pages to life. While HTML provides the structure and CSS handles the styling, JavaScript adds interactivity — responding to clicks, updating content dynamically, validating forms, creating animations, and much more.

A few important things to know about JavaScript:

It runs in the browser. Every modern web browser has a built-in JavaScript engine that executes your code directly on the user's device.
It is not Java. Despite the similar name, JavaScript and Java are completely different languages. The name was a marketing decision from the 1990s.
It is dynamic and interpreted. You don't need to compile JavaScript — the browser reads and executes it line by line.
It is everywhere. JavaScript is the most widely used programming language in the world. Beyond the browser, it also runs on servers (Node.js), in mobile apps, desktop apps, and even on IoT devices.

Adding JavaScript to HTML

There are three ways to add JavaScript to an HTML page:

Inline event handlers — Add JavaScript directly in an HTML attribute like onclick. This is quick but messy and hard to maintain.
html
```
<button onclick="alert('Hello!')">Click me</button>
```
Internal script — Place your code inside a <script> tag within the HTML document. This keeps your JavaScript close to the HTML it interacts with.
html
```
<script>
  document.getElementById('greeting').textContent = 'Hello!';
</script>
```
External script — Write JavaScript in a separate .js file and reference it with a <script src> tag. This is the preferred method for real projects.
html
```
<script src="app.js"></script>
```

For the lessons in this course, we will use internal <script> tags so you can see both HTML and JavaScript in one place.

Your First Script

html

<h1 id="title">Original Title</h1>
<p id="description">This text will change.</p>

<script>
  // Select elements by their id
  const title = document.getElementById('title');
  const description = document.getElementById('description');

  // Change their text content
  title.textContent = 'Hello, JavaScript!';
  description.textContent = 'This text was changed by JavaScript.';
</script>

The Browser Console

One of the most useful tools for learning JavaScript is the browser console. It lets you see output from your code, test expressions, and debug errors.

To open the console:

Chrome / Edge: Press F12 or Ctrl+Shift+J (Windows) / Cmd+Option+J (Mac)
Firefox: Press F12 or Ctrl+Shift+K (Windows) / Cmd+Option+K (Mac)

The console.log() function prints a message to the console. It is invaluable for debugging:

javascript

console.log('Hello from JavaScript!');
console.log(42);
console.log('The answer is', 40 + 2);

You can also use console.warn() for warnings and console.error() for errors. Throughout this course, console.log() will be your best friend for understanding what your code is doing.

Where is the recommended place to put a <script> tag for best performance?

Introduction to JavaScript

What is JavaScript?

Adding JavaScript to HTML

Your First Script

The Browser Console

Ready to practice?