JavaScript

Habari! Let's Make Our Websites Come Alive with JavaScript!

Imagine you have built a beautiful house using bricks and cement. It has walls, a roof, and windows. This is your HTML. Then, you paint it with your favourite colours, maybe green and yellow, and add nice curtains. This is your CSS. The house looks fantastic! But... nothing happens. The lights don't switch on, the gate doesn't open, and the water tap doesn't work. It's just a quiet building.

Now, what if you could add electricity? With a flick of a switch, the lights turn on! You press a button, and the radio plays some Genge music! That "electricity" for your website, the magic that makes it interactive and alive, is JavaScript!

Image Suggestion: A vibrant, colourful illustration of a Kenyan duka (shop). On the left, the duka is labeled 'HTML & CSS' and looks nice but static. On the right, the same duka is labeled 'With JavaScript!' and it's alive: a sign is blinking, a customer is using a glowing M-Pesa machine, and music notes are coming from a speaker. The style is friendly and cartoonish.

The Three Musketeers of the Web

In web development, HTML, CSS, and JavaScript almost always work together. Think of them as a team building something amazing.

   +----------------+      +---------------+      +-------------------+
   |      HTML      |----->|      CSS      |----->|    JAVASCRIPT     |
   |  (The Skeleton)  |      |   (The Clothes) |      | (The Brain/Action)  |
   +----------------+      +---------------+      +-------------------+
        Defines the             Styles the           Makes the website
        structure &             content (colours,      interactive &
        content.                fonts, layout).        do things.

Your First Spell: "Jambo, Dunia!" (Hello, World!)

Let's write our very first piece of JavaScript. This simple command will create a pop-up alert box in the browser. It's a great way to see your code work instantly!

<script>
  alert('Jambo, Dunia!');
</script>

When the browser reads this code, a small box will pop up on the screen saying "Jambo, Dunia!". You have just made the webpage do something!

Storing Information: Variables are like Kiondos

Imagine you are going to the market. You carry a kiondo (a traditional Kenyan basket) to hold the things you buy. In JavaScript, a variable is like a kiondo. It's a container where you store information that you might need to use later.

We can create a variable to store a name, a number, or any piece of information.

// A variable to store a name (this is a 'string')
let studentName = "Wanjiku";

// A variable to store a number
let age = 15;

// A variable to store the number of goats
let numberOfGoats = 5;

Image Suggestion: A friendly, cartoon robot character is holding up three beautiful woven kiondos (baskets). The first kiondo has a tag that says 'studentName' and the name "Wanjiku" is peeking out. The second has a tag 'age' with the number '15' inside. The third has a tag 'numberOfGoats' with 5 small, cute cartoon goats peeking out.

Doing Mahesabu (Calculations) with JavaScript

JavaScript is excellent at math! You can use it like a powerful calculator. Let's say you buy 2 mandazis at 10 shillings each and 1 soda at 30 shillings. How much will you pay?

We can use variables to store the prices and then do the calculation.

// Step 1: Store the costs in variables
let mandaziPrice = 10;
let sodaPrice = 30;
let numberOfMandazis = 2;

// Step 2: Calculate the total cost
let totalCost = (mandaziPrice * numberOfMandazis) + sodaPrice;

// Step 3: Show the result
console.log("The total cost is: ");
console.log(totalCost); // This will show 50 in the browser's console

See? We told the computer step-by-step what to do, and it gave us the answer: 50 shillings. The asterisk * is for multiplication and the plus sign + is for addition.

Making Choices: The M-Pesa Example

Life is full of choices. If it's sunny, you play outside. If it's raining, you stay indoors. JavaScript can also make decisions using if...else statements.

Scenario: You want to send 1000 shillings using M-Pesa. The program must first check if you have enough money in your account!

let mpesaBalance = 1500;
let amountToSend = 1000;

if (mpesaBalance >= amountToSend) {
  // This code runs if the condition is TRUE
  console.log("Transaction successful! You sent " + amountToSend + " shillings.");
} else {
  // This code runs if the condition is FALSE
  console.log("Transaction failed. You do not have enough funds.");
}

In this example, since your balance (1500) is greater than the amount you want to send (1000), the computer will print the "Transaction successful!" message. If your balance was only 500, it would print the "Transaction failed" message. This is how real systems make smart decisions!

Let's Get Practical: What Can You Build?

• A Matatu Fare Calculator: Ask the user where they are going and calculate the fare.
• A Simple Quiz: Ask questions about Kenya and check if the answers are correct.
• An Interactive Story: Let the user make choices that change the story's outcome.

Congratulations! You have just taken your first steps into the exciting world of JavaScript. You've learned how to make a webpage talk, how to store information in kiondos (variables), and how to make smart decisions. Keep practicing, stay curious, and soon you'll be building amazing, interactive websites. Safari njema on your coding journey!