// script.js
console.log("Hello from external file!");
// All your JavaScript code// goes in this .js file
Important: The .js extension is required!
VS Code Live Preview 🔄
No More Manual Refreshing!
The Live Preview extension automatically updates your browser when you save.
Quick Setup:
Install "Live Preview" extension in VS Code
Right-click your HTML file
Select "Show Preview"
Edit and save - watch it update instantly!
Let's try it together with our Hello World example!
Variables: Storage Containers 📦
Think of variables as labeled boxes for your data
name = "John"
age = 25
isStudent = true
// Declaring variables with let
let name = "John";
let age = 25;
let isStudent = true;
console.log(name); // Output: John
console.log(age); // Output: 25
console.log(isStudent); // Output: true
Two Ways to Declare Variables 🔄
let
Can be changed (reassigned)
let age = 25;
age = 26; // ✅ This works!
console.log(age); // 26
const
Cannot be changed (constant)
const pi = 3.14;
pi = 3; // ❌ ERROR!// TypeError: Assignment to constant variable
Best Practice: Use const by default, only use let when you need to reassign
// Store numbers in variables
let apples = 5;
let oranges = 3;
let totalFruit = apples + oranges;
console.log(totalFruit); // 8// Update variables with calculations
let score = 100;
score = score + 50; // Add 50 to current score
console.log(score); // 150// Using const for calculations
const taxRate = 0.08;
const price = 100;
const total = price + (price * taxRate);
console.log(total); // 108
// Other shortcuts
let score = 10;
score += 5; // Same as: score = score + 5
score -= 3; // Same as: score = score - 3
score *= 2; // Same as: score = score * 2
score /= 4; // Same as: score = score / 4
Let's Practice! 💻
Hands-On Exercises
We'll work through these together:
Add 2 numbers and log the result
Add 6 different numbers
Calculate expressions with parentheses
Create and reassign variables
Work with constants
Build a percentage calculator
Setup: Create a new HTML file with a <script> tag, or use an external .js file
Exercise 1: Basic Addition ➕
Task 1: Add Two Numbers
In your script tag, type:
console.log(23 + 97);
Expected output:
120
Task 2: Add Six Numbers
Try this:
console.log(10 + 20 + 30 + 5 + 15 + 20);
What do you get?
Exercise 2: Complex Expressions 🧮
Task 3: Division with Parentheses
console.log((4 + 6 + 9) / 77);
0.24675324675324675
Let's trace through it:
(4 + 6 + 9) = 19
19 / 77 = 0.24675...
What happens if you remove the parentheses? Try it!
Exercise 3: Working with Variables 📦
Follow Along:
// Step 1: Declare a variable
let a = 10;
console.log(a); // Should log: 10// Step 2: Reassign it
a = 25;
console.log(a); // Should log: 25// Step 3: Use it in math
let b = 7 * a;
console.log(b); // Should log: ?
What is the value of b? Calculate it mentally first, then run the code!
Exercise 4: Percentage Calculator 📊
Build a Grade Calculator:
// Declare constants
const max = 57;
const actual = max - 13;
const percentage = actual / max;
console.log("Maximum points: " + max);
console.log("Actual points: " + actual);
console.log("Percentage: " + percentage);
Expected Output:
Maximum points: 57
Actual points: 44
Percentage: 0.7719298245614035
Common Beginner Mistakes ⚠️
❌ Wrong
let name = "Alice";
let name = "Bob"; // ERROR!
const pi = 3.14;
pi = 3.14159; // ERROR!
console.log(Score); // ERROR!// (variable names are case-sensitive)
✅ Correct
let name = "Alice";
name = "Bob"; // Good!
let pi = 3.14;
pi = 3.14159; // Good!
console.log(score); // Good!// (consistent case)
Quick Preview: Strings 📝
We can also work with text (strings)!
let firstName = "John";
let lastName = "Doe";
let fullName = firstName + " " + lastName;
console.log(fullName); // "John Doe"// Combining strings and numbers
let age = 25;
let message = "I am " + age + " years old";
console.log(message); // "I am 25 years old"
We'll explore strings in detail next class!
Homework Assignment 📚
Complete the Practice Exercises
Finish all the exercises from today's lesson:
Complete any unfinished in-class exercises
Experiment with different number combinations
Try creating your own calculator for something useful:
Tip calculator
Age in days/hours/minutes
Pizza slice calculator
Reading Assignment:
JavaScript.info - Variables
MDN - JavaScript Math
W3Schools - JavaScript Operators
Today's Key Takeaways 🎯
You Can Now:
✅ Run JavaScript in the browser
✅ Use the console for debugging
✅ Declare variables with let and const
✅ Perform mathematical operations
✅ Reassign variables when needed
✅ Understand operator precedence
Next Class: Strings, conditionals, and more complex data types!