JavaScript & Variables

Making Websites Interactive

Lesson 4: Adding Behavior to Your Webpages

From static pages to dynamic experiences

What We'll Learn Today

⚡ What is JavaScript and why do we need it?
🛠️ How to add JavaScript to HTML
💬 Using console.log() to communicate
📦 What are variables and how to use them
🔢 Different types of data
🎯 Creating your first interactive webpage

The Three Languages of the Web

📝 HTML

Content & Structure

"What should be on the page?"

Text, images, links
Headings, paragraphs

🎨 CSS

Appearance & Style

"How should it look?"

Colors, fonts, spacing
Layout, animations

⚡ JavaScript

Behavior & Interaction

"What should it do?"

Respond to clicks
Calculate, decide, react

What is JavaScript?

JavaScript makes websites interactive and dynamic

Responds to user actions - clicks, typing, scrolling
Changes content dynamically - without reloading the page
Performs calculations - like a built-in calculator
Makes decisions - if this, then do that
Communicates with servers - gets new data

JavaScript brings your webpages to life! ✨

JavaScript is Everywhere!

🎮 Interactive Features

Photo slideshow
Form validation
Shopping cart
Games and quizzes

📱 Apps You Use Daily

Gmail, Facebook
YouTube, Netflix
Google Maps
Online banking

Every interactive website uses JavaScript!

How to Add JavaScript

Three ways to include JavaScript in your webpage:

1. Internal JavaScript (We'll start here)

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

2. External JavaScript (Professional way)

<script src="script.js"></script>

🎯 Let's Write Our First JavaScript!

Add this to your HTML file, just before the closing </body> tag:

  <script>
    console.log("Hello from JavaScript!");
    console.log("My first JavaScript program!");
  </script>
</body>

To see the output: Open your webpage, press F12, and look at the "Console" tab!

Using the Browser Console

The console is your JavaScript playground:

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

Hello, World!

> console.log(2 + 3);

5

> console.log("The answer is:", 42);

The answer is: 42

F12 - Opens Developer Tools
Console tab - Where JavaScript output appears
console.log() - Prints messages to the console

What are Variables?

Variables are containers that store information

let playerName = "Alex";
let score = 100;
let isGameOver = false;

console.log(playerName);  // Prints: Alex
console.log(score);       // Prints: 100

Think of variables like labeled boxes where you can store different things!

How to Create Variables

// Step 1: Declare a variable
let myName;

// Step 2: Assign a value
myName = "Sarah";

// Or do both at once:
let age = 16;
let favoriteColor = "blue";

let - keyword to create a variable
myName - the variable name (your choice)
= - assigns a value to the variable
"Sarah" - the value stored in the variable

Types of Data

JavaScript can store different kinds of information:

🔤 Strings

"Hello"
"JavaScript"
"123"

Text and characters

🔢 Numbers

42
3.14
-17

Integers and decimals

✅ Booleans

true
false

True or false only

More Data Types in JavaScript

📚 Arrays

[1, 2, 3]
["apple", "banana", "cherry"]

Lists of values, stored in order

🧩 Objects

{ name: "Alice", age: 15 }

Collections of key-value pairs

🚫 null

null

No value (empty on purpose)

❓ undefined

undefined

A variable that hasn't been given a value yet

These types help you organize and work with all kinds of information in your programs!

Naming Variables

✅ Good Variable Names

userName
totalScore
isLoggedIn
playerAge
favoriteFood

❌ Bad Variable Names

x
data
thing
123name
my-score

Use descriptive names - tell what the variable stores
Start with a letter - not a number
Use camelCase - firstName, not first-name
No spaces - use underscores or camelCase instead

🎯 Let's Practice with Variables!

Add this JavaScript to your webpage:

let firstName = "Your Name Here";
let age = 16;
let hobby = "coding";

console.log("Hello, my name is", firstName);
console.log("I am", age, "years old");
console.log("I love", hobby);

// Try changing the values and refresh!

Doing Math with Variables

let num1 = 10;
let num2 = 5;

let sum = num1 + num2;        // 15
let difference = num1 - num2; // 5
let product = num1 * num2;    // 50
let quotient = num1 / num2;   // 2

console.log("Sum:", sum);
console.log("Product:", product);

// You can also combine strings!
let greeting = "Hello" + " World";  // "Hello World"

🚀 Create a Personal Info Page!

Combine HTML, CSS, and JavaScript:

// Add this JavaScript to your webpage
let name = "Alice";
let currentYear = 2025;
let birthYear = 2010;
let age = currentYear - birthYear;

console.log("=== Personal Info ===");
console.log("Name:", name);
console.log("Age:", age);
console.log("In 10 years, I'll be:", age + 10);

Open the console to see your program work!

📝 Homework: My JavaScript Profile

Create a webpage that uses HTML, CSS, and JavaScript to display information about yourself!

Requirements:

HTML: Basic structure with your name, age, hobbies
CSS: Make it look good (colors, fonts, spacing)
JavaScript: Use at least 5 variables of different types
Console Output: Display information using console.log()
Calculations: Include at least 2 mathematical operations

JavaScript Ideas:

Calculate your age in days or hours
Store favorite numbers and add them together
Create variables for favorite movie, book, game
Calculate how many years until you turn 18

⭐ Be creative! Try different variable types (numbers, strings, booleans, arrays) and have fun experimenting.