JavaScript – Making Webpages Interactive!
beginner25 XP

What is JavaScript? Variables & Data Types

Discover what JavaScript does, how to add it to HTML, and how to store information in variables!

JavaScript — The Brain of Every Website! ⚡

If HTML is the skeleton and CSS is the clothing, JavaScript is the brain — it makes things actually do stuff!

What Can JavaScript Do?

  • 🎮 Games — Wordle, Chrome Dinosaur game
  • 📝 Forms — validate your email before submitting
  • 🎥 Animations — dropdown menus, carousels
  • 📊 Live data — weather apps, stock prices updating
  • 🛒 Shopping carts — add/remove items instantly

Adding JavaScript to HTML

In the HTML file (Internal)

HTML
<script>
  alert("Hello from JavaScript! 👋");
</script>

Separate .js file (Best practice ✅)

HTML
<!-- At the bottom of <body> -->
<script src="script.js"></script>

Variables — Storing Information

Variables are like labelled boxes where you keep information:

JavaScript
let name = "Alex";        // text (string)
let age = 13;             // number
let isCool = true;        // boolean (true or false)
let score = null;         // nothing yet

console.log(name);        // prints to browser console
console.log(age + 1);     // prints 14

Three Ways to Declare Variables

JavaScript
let score = 100;      // can change later ✅
const MAX = 1000;     // CANNOT change (constant) 🔒
var oldWay = "meh";   // old way, avoid using ❌

Use const when the value won't change, let when it might!

Data Types

JavaScript
// String — text in quotes
let game = "Minecraft";
let greeting = 'Hello!';
let template = `Score: ${score}`;   // template literal!

// Number
let xp = 250;
let price = 9.99;

// Boolean
let isLoggedIn = true;
let gameOver = false;

// Array — a list of items
let colours = ["red", "green", "blue"];
let scores = [95, 87, 100, 76];

// Object — a collection of related info
let player = {
  name: "Alex",
  score: 500,
  level: 3
};

The Console — Your Best Friend!

JavaScript
console.log("Testing 1, 2, 3...");     // print a message
console.log(score * 2);                // print calculation result

Open it with F12 in your browser → Console tab. It's like Python's print()!

🌟 Your First Script

JavaScript
let playerName = "CodeKid";
let playerLevel = 5;
let isVIP = true;

console.log("Welcome, " + playerName + "!");
console.log("Level: " + playerLevel);
console.log("VIP status: " + isVIP);

// Template literals (cleaner!)
console.log(`Hello ${playerName}, you are level ${playerLevel}!`);

Quick check

01/3

Which keyword should you use for a variable that will NEVER change?