JavaScript basics

Karibu JavaScript! Let's Give Your Website Superpowers!

Habari mwanafunzi! Welcome to the exciting world of JavaScript. Think about the websites you use every day, like Jumia, Glovo, or even your school's portal. They are not just static pages, are they? You can click buttons, add items to a cart, see slideshows, and fill out forms. That magic, that interactivity, is all powered by JavaScript!

If HTML is the skeleton of a website (the structure) and CSS is the clothes and style (the looks), then JavaScript is the brain and muscles. It makes the website smart, active, and useful. A website without JavaScript is like a beautiful matatu with a new paint job but no engine. It looks fantastic, but it can't take you anywhere!

In this lesson, we'll fire up that engine and learn the absolute basics to get you started. Tuanze safari! (Let's begin the journey!)

So, What is JavaScript?

JavaScript (often shortened to JS) is a scripting language that allows you to implement complex features on web pages. Every time a web page does more than just sit there and display static information for you to look at — displaying timely content updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, etc. — you can bet that JavaScript is probably involved.

    +-----------------+      +-----------------+      +---------------------+
    |      HTML       |---->|       CSS       |---->|     JAVASCRIPT      |
    |  (The Skeleton) |      | (The Clothes)   |      | (The Brain & Muscles) |
    +-----------------+      +-----------------+      +---------------------+
    Structure              Style                  Behaviour

Image Suggestion: A vibrant digital illustration showing three friendly, cartoon-style robots building something. The first robot, labeled 'HTML', is assembling a metal skeleton of a house. The second robot, 'CSS', is painting the house with bright colours and adding windows. The third robot, 'JavaScript', is wiring up the lights, making the door open automatically, and installing a doorbell. The style should be fun, modern, and educational.

Storing Information: Meet Variables!

Imagine you are in the kitchen. You have containers for sugar, salt, flour, and so on. Each container has a label so you know what's inside. In programming, we have something similar called variables. A variable is simply a container with a label where you can store information that you might need to use later.

Think about using M-Pesa. When you want to send money, the system needs to remember a few things: your phone number, the recipient's number, the amount, and your PIN. Each of these pieces of information is stored in a variable.

In modern JavaScript, we create variables using the keywords let and const.

• let is used for information that might change. For example, your M-Pesa balance changes after every transaction.
• const is for information that stays constant (does not change). For example, your National ID number.

// 'let' is for values that can change.
let mpesaBalance = 2500;
mpesaBalance = mpesaBalance - 500; // You just paid for lunch!

// 'const' is for values that do not change.
const myName = "Kamau";
// myName = "Akinyi"; // This would cause an ERROR! Your name doesn't change.

Here's a visual way to think about a variable:

    +-----------------+
    |  mpesaBalance   |  <-- The Label (Variable Name)
    |-----------------|
    |      2500       |  <-- The Value (What's inside)
    +-----------------+

What's in the Box? Basic Data Types

Okay, so we have our labeled containers (variables). But what kind of stuff can we put inside them? JavaScript needs to know the "type" of data it's working with. Is it text? Is it a number? Is it a simple 'yes' or 'no'? These are called data types.

Let's look at the three most basic types:

• String: This is just text. Anything inside quotation marks (" " or ' ') is a string. It can be a name, a sentence, or even a single character.
• Number: This is for, you guessed it, numbers! It can be a whole number (like 100) or a decimal (like 45.50). You do NOT use quotes for numbers.
• Boolean: This one is simple. It can only have two values: true or false. It's like a light switch that is either on or off. It's perfect for answering yes/no questions.

Real-World Scenario: Imagine you're creating a simple system for a local library.

• The title of a book, let bookTitle = "The River and the Source"; would be a String.
• The number of pages, let pageCount = 420; would be a Number.
• Whether the book is currently borrowed, let isBorrowed = true; would be a Boolean.

JavaScript the Calculator: Basic Math Operators

Now for the really cool part! We can use JavaScript to perform calculations, just like a calculator. This is the foundation of everything from calculating the total price in a shopping cart to creating complex animations in a game.

Here are the basic math operators you will use all the time:

• + for Addition
• - for Subtraction
• * for Multiplication
• / for Division

Let's see it in action. Imagine you're buying some mandazis from the local kiosk.

// Let's set up our variables first
const priceOfMandazi = 15; // The price is constant, 15 KSh
let numberOfMandazis = 4;  // You might want to buy more or less

// Now, let's calculate the total cost
let totalCost = priceOfMandazi * numberOfMandazis;

// Let's break down what JavaScript does:
// 1. It looks at 'priceOfMandazi' and finds its value: 15
// 2. It looks at 'numberOfMandazis' and finds its value: 4
// 3. It performs the multiplication: 15 * 4
// 4. The result, 60, is stored in the 'totalCost' variable.

// In a real application, you would then display this total to the user.

Image Suggestion: A split-screen image. On the left, a photo of a Kenyan student at a desk with a calculator, notebook, and pen, looking a bit tired. On the right, the same student is smiling in front of a computer screen showing colourful JavaScript code that instantly solves the same math problem. The theme is 'Work Smarter, Not Harder'.

You've Done It! Your First Steps in JavaScript!

Hongera! Congratulations! You have just taken your first, most important steps into the world of JavaScript. You've learned what it is, how to store information using variables (let, const), the different kinds of information you can store (data types like String, Number, and Boolean), and how to perform basic math using operators.

This is the solid foundation upon which all your future programming skills will be built. In our next lesson, we will learn how to make our programs make decisions using if...else statements and how to communicate with the user using alerts and prompts. It's about to get even more powerful!

Keep practicing, stay curious, and remember – every expert was once a beginner. Kazi nzuri! (Good work!)