Introduction to JavaScript

⚡ What is JavaScript?

The simple answer is JavaScript is:

1. A programming language 📜 - a set of instructions that the browser follows
2. The language of the browser 🌐 - every browser understands it, with nothing to install
3. Event-driven 🖱️ - it runs in response to actions like clicks, typing, and scrolling
4. Dynamic ⚡ - it can update the page without reloading it
5. Used everywhere 🚀 - it started in the browser and now also runs on servers and apps

🎯 What does JavaScript do?

JavaScript makes a web page interactive. On a website like YouTube, it allows the page to:

• React to clicks 🖱️: open the sidebar when you click the menu icon
• Update instantly ⚡: turn the like button red without reloading the page
• Respond as you type ⌨️: show search suggestions while you are still typing
• Load content on demand 📡: fetch more videos as you scroll down

The key feature of JavaScript is that it makes web pages respond to the user.

🧩 How HTML, CSS, and JavaScript Work Together

A web page is built from three languages, and each one has a specific job:

🔧 What problem does JavaScript solve?

In a web page built with only HTML and CSS:

• The content is displayed, but it cannot change
• Buttons and icons do nothing when clicked
• The page cannot respond to the user in any way

JavaScript solves this by:

• Detecting user actions such as clicks, typing, and scrolling
• Updating the page in response, without reloading it

This is what turns a static page into an interactive application.

💻 Your First JavaScript Code

The most common first step in any language is printing a message. The following line prints the word “Hello”:

console.log("Hello");

This single line tells the browser to print the text Hello. Let’s break it down piece by piece:

Making a button react

JavaScript can also respond to user actions. The example below changes a button’s text when it is clicked, similar to how the YouTube like button reacts:

<button id="likeButton">Like</button>

<script>
  // Select the button using its id
  const button = document.getElementById("likeButton");

  // Run this code when the button is clicked
  button.addEventListener("click", function () {
    button.textContent = "Liked!";
  });
</script>

Here is what each part of this code does:

• <button id="likeButton">Like</button> creates the button on the page and gives it the id likeButton so JavaScript can find it.
• <script> opens the area where the JavaScript code lives.
• const button = document.getElementById("likeButton"); looks up the button by its id and stores it in a variable named button.
• button.addEventListener("click", function () { ... }); tells the button to watch for clicks and run the code inside the function each time it is clicked.
• button.textContent = "Liked!"; is the code that runs on a click; it changes the button’s text from Like to Liked!.

This is the core idea of JavaScript: the page listens for a user action and responds to it.

⚠️ Common Mistakes to Avoid

// ❌ Wrong - capital C
Console.log("Hello");

// ❌ Wrong - no quotes around text
console.log(Hello);

// ✅ Correct
console.log("Hello");

Let’s compare the three lines so the difference is clear:

• The first line uses a capital C in Console. JavaScript is case-sensitive, so it does not recognize Console and the code fails.
• The second line writes Hello without quotes. The browser then treats Hello as the name of something to look up instead of text, and fails because nothing by that name exists.
• The correct line uses lowercase console and wraps Hello in quotes, so the browser prints the text exactly as written.

🔧 Try It Yourself!

🧩 What You’ve Learned

• ✅ JavaScript is the programming language that makes web pages interactive
• ✅ It runs in the browser and responds to actions like clicks, typing, and scrolling
• ✅ HTML builds the page, CSS styles it, and JavaScript controls its behavior
• ✅ Without JavaScript, a page is static and cannot respond to the user
• ✅ console.log prints messages and is used to check your code
• ✅ JavaScript is case-sensitive, so capitalisation matters

🚀 What’s Next?

You now understand what JavaScript is and why interactive websites need it. In the next lesson, we will learn the different ways to run JavaScript so you can start writing it yourself. Let’s continue to Running JavaScript.