Lesson 4: JavaScript Basics & Interactivity

What You'll Learn Today

So far, our websites can look good, but they can't *do* anything. Today, we'll change that by learning JavaScript! JavaScript is the programming language of the web that lets you add interactivity, animations, and all sorts of cool features to your pages.

Why Learn JavaScript?

If HTML is the skeleton and CSS is the clothes, JavaScript is the brain and muscles. It's what makes websites come alive! From simple pop-up alerts and prompts to complex games and applications, JavaScript powers the interactive parts of almost every modern website.

Learning Objectives

Learn JavaScript variables and functions to store data and create reusable blocks of code.
Handle user interactions like button clicks using event listeners.
Manipulate the DOM to create dynamic content that changes without reloading the page.

Core JavaScript Concepts

JavaScript lets us give instructions to the browser. Let's look at the core concepts you'll use today.

Variables Storing Information

Variables are like labeled boxes where you can store information. You can create a variable with let name = "Student"; and use it later.

Functions Reusable Code

Functions are blocks of code that you can run whenever you want. You define a function with function sayHello() { ... } and then "call" it to run the code inside.

Events Responding to Actions

Events are actions that happen on your webpage, like a user clicking a button. We can use the onclick attribute in HTML to run a JavaScript function when an element is clicked.

DOM Manipulation Changing the Page

The DOM (Document Object Model) is the JavaScript representation of your HTML. We can use methods like document.getElementById('output') to select an element and then change its content or style.

Your Mission: Make it Interactive!

Your mission is to bring the static HTML page to life by wiring up the buttons to the JavaScript functions. The functions are already written for you in the <script> tag!

Pro Tip

Look at the JavaScript functions provided. Your goal is to call the correct function when each button is clicked using the onclick attribute.

Step 1: The "Say Hello" Button. Find the "Say Hello" button in the HTML. Add an onclick="sayHello()" attribute to it. Now, when you click it, it should run the sayHello function and ask for your name!
Step 2: The "Change Color" Button. Find the "Change Color" button. Add an onclick="changeColor()" attribute. Clicking it will now change the background color of the output box.
Step 3: The "Show Time" Button. Find the "Show Time" button. Add an onclick="showTime()" attribute. This will display the current time in the output box.
Step 4: Experiment! Try changing the text inside the prompt() in the sayHello function, or add a new color to the colors array in the changeColor function.

Take It Home

Try adding a new button to your page with its own function. Maybe it could change the text of the main <h1> element? In our next lesson, we'll dive deeper into DOM Manipulation to build even more dynamic pages.