Intermediate Level • Lesson 1

⚡ JavaScript Basics

⏱️ 40 minutes 📚 Intermediate 🎯 Text Programming

🚀

Welcome to JavaScript!

From visual blocks to real code - let's write programs that power the web!

What is JavaScript?

JavaScript is a real programming language used to make websites interactive! Every website you visit - Shopee, YouTube, Instagram - uses JavaScript to respond to your clicks, show animations, and update content.

Remember Scratch blocks? JavaScript does the same things, but with text-based code that professional programmers use!

💡 Fun Fact: JavaScript runs in every web browser - Chrome, Safari, Firefox. It's one of the most popular programming languages in the world!

From Scratch to JavaScript

Let's see how Scratch blocks translate to JavaScript code:

🧩 Scratch Block

say "Hello, Malaysia!" for 2 seconds

⚡ JavaScript Code

console.log("Hello, Malaysia!");

Key Concepts

📝

Syntax

JavaScript has specific rules for writing code - like grammar in language!

💬

console.log()

Displays messages in the browser console - your programming output window!

📦

Variables

Containers that store data - like naming your sprite in Scratch!

➕

Operators

Symbols like +, -, *, / for math and logic operations.

;

Semicolons

End each statement with ; - like a period in a sentence!

🔍

Browser Console

Built-in tool to test JavaScript code and see output.

Your First JavaScript Code

🎯 Hello World Program

                console.log("Hello, Malaysia!");
                console.log("Selamat datang!");
                console.log("欢迎!");
              

What this does: Prints three messages to the console - one in English, Malay, and Chinese!

Variables - Storing Information

Variables let us store and reuse data. Think of them as labeled boxes!

💰 Calculating Roti Canai Pricing

                let pricePerPiece = 1.50;
                let quantity = 3;
                let total = pricePerPiece * quantity;

                console.log("Price: RM" + total);
              

Output: Price: RM4.5

Explanation:

let creates a new variable
= assigns a value to the variable
* multiplies the values
+ joins text and numbers together

Basic Operators

🧮 Math in JavaScript

                let a = 10;
                let b = 3;

                console.log(a + b); // Addition: 13
                console.log(a - b); // Subtraction: 7
                console.log(a * b); // Multiplication: 30
                console.log(a / b); // Division: 3.333...
              

Note: Everything after // is a comment - notes for humans, ignored by the computer!

Opening the Browser Console

🔧 How to Open Console:

Windows/Linux: Press F12 or Ctrl + Shift + J
Mac: Press Cmd + Option + J
Or right-click any webpage → Inspect → Console tab

Try typing: console.log("Hello!") and press Enter!

Common Mistakes to Avoid

⚠️ Watch Out For:

Missing semicolons: End each line with ;
Wrong quotes: Use matching "quotes" or 'quotes'
Case sensitivity: console.log works, Console.Log doesn't!
Spelling errors: JavaScript won't understand typos

Summary

You've learned:

✅ JavaScript is a real programming language for the web
✅ console.log() displays output in the browser console
✅ Variables store data using the let keyword
✅ Operators (+, -, *, /) perform calculations
✅ Every statement ends with a semicolon (;)
✅ How to open and use the browser console

🎮 Interactive Challenge: Write JavaScript!

Open your browser console (F12 or Cmd+Option+J) and try these exercises:

📝 Challenge 1: Your First Messages

Type these commands in the console, one at a time:

                console.log("My name is [Your Name]");
                console.log("I am learning JavaScript!");
                console.log("Today is a great day!");
              

Goal: See your messages appear in the console!

🧮 Challenge 2: Calculator Fun

Calculate these in the console:

                console.log(50 + 25); // Your school bag price
                console.log(100 - 35); // Money left after buying food
                console.log(15 * 3); // Total cost of 3 burgers
                console.log(100 / 4); // Splitting bill with friends
              

💰 Challenge 3: Nasi Lemak Stall

Create a pricing calculator:

                let nasiLemak = 5.50;
                let tehTarik = 2.50;
                let telurMata = 1.50;

                let total = nasiLemak + tehTarik + telurMata;
                console.log("Total: RM" + total);
              

Try: Change the prices and recalculate!

💡 Pro Tip: You can press the Up arrow key in the console to repeat previous commands!

🎯 Offline Activity: Convert Scratch to JavaScript

What You'll Do:

Take your favorite Scratch programs and convert them to JavaScript code!

Instructions:

Open one of your Scratch projects (or create a simple one)
Look at the blocks you used
Write down what each block does in plain language
Try to write similar code in JavaScript using console.log() and variables
Test your code in the browser console!

Example Conversion:

Scratch Program

When clicked:
Set score to 0
Change score by 10
Say score

JavaScript Code

                    let score = 0;
                    score = score + 10;
                    console.log("Score: " + score);
                  

🏆 Bonus Challenge: Convert a Scratch program that uses variables and math operations. Share your code with a classmate!

💪 Practice Challenges

Challenge 1: Message Master

Write JavaScript code that displays these messages in order:

Your name and age
Your favorite Malaysian food
Your dream job
Why you want to learn programming

Hint: Use 4 console.log() statements!

Challenge 2: School Store Calculator

You're shopping at the school bookstore. Calculate the total:

                let pen = 1.50;
                let notebook = 3.00;
                let eraser = 0.80;
                // Write code to calculate and display total
              

Expected output: Total: RM5.30

Challenge 3: Mamak Restaurant Bill

Calculate the total bill for this order:

2 Roti Canai @ RM1.50 each
3 Teh Tarik @ RM2.50 each
1 Nasi Goreng @ RM6.00

Write the JavaScript code with variables for each item!

Challenge 4: Temperature Converter

Create a program that converts 30°C to Fahrenheit:

                // Formula: F = (C * 9/5) + 32
                let celsius = 30;
                // Complete the code!
              

Answer should be: 86°F

Challenge 5: Debug the Code!

Find and fix the errors in this code:

                let price = 10
                let quantity = 5;
                let Total = price * quantity
                console.log("Total RM" + total);
              

Errors to fix: Missing semicolons, wrong capitalization!