⚡ JavaScript

Jifunze JavaScript kutoka mwanzo — lugha inayofanya websites kuwa hai. DOM manipulation, events, API calls, na projects halisi.

English / Kiswahili • Beginner to Intermediate • Text + Code Examples

📋 Yaliyomo — Table of Contents

  1. JavaScript ni nini? / What is JavaScript?
  2. Kuweka na Kuendesha JS / Setup na Console
  3. Variables (let, const, var)
  4. Data Types na Operators
  5. Strings na Template Literals
  6. Conditionals (if/else, switch)
  7. Loops (for, while, forEach)
  8. Functions na Arrow Functions
  9. Arrays na Object (Orodha na Vitu)
  10. DOM Manipulation — Kubadilisha Ukurasa
  11. Events — Vitendo vya Mtumiaji
  12. ES6+ Features
  13. Fetch API na JSON
  14. Simple Projects

1. JavaScript ni nini? / What is JavaScript?

Lugha inayofanya websites kuwa interactive

🇹🇿 Kiswahili: JavaScript (JS) ni lugha ya programming inayoendesha kwenye browser ya mtumiaji. Inafanya tovuti kuwa hai — popups, animations, form validation, na mabadiliko ya yaliyomo kwenye ukurasa bila ku-update.

🇬🇧 English: JavaScript (JS) is a programming language that runs in the user's browser. It makes websites interactive — popups, animations, form validation, and real-time content updates.

💡 Note: JavaScript na Java ni lugha tofauti kabisa! Usichanganye.

2. Kuweka na Kuendesha JS

Setup na Console

Njia za Kuweka JS kwenye HTML

<!-- Internal script -->
<script>
    alert("Habari! Hii ni JavaScript!");
</script>

<!-- External script (njia bora) -->
<script src="script.js"></script>

<!-- Kwenye browser console (F12) -->
// Andika moja kwa moja kwenye Console tab
console.log("Habari duniani!");

Console yako ya Kwanza

// Fungua browser, bonyeza F12, nenda Console
console.log("Habari! Hii ni console.log");
console.warn("Hii ni onyo / warning");
console.error("Hii ni error");
console.table(["Juma", "Aisha", "Baraka"]);  // Orodha kwa umbo la jedwali
⚡ Tip: Console ni rafiki yako! Tumia console.log() kuona thamani za variables unapotengeneza code.

3. Variables (let, const, var)

Kuhifadhi data kwenye JS

// let — inaweza kubadilishwa (recommended)
let jina = "Juma";
jina = "Aisha";  // Sawa — inaweza kubadilishwa
console.log(jina);  // Aisha

// const — haiwezi kubadilishwa (recommended kwa fixed values)
const umri = 25;
// umri = 30;  // Hii itatoa ERROR!

// var — njia ya zamani, epuka kuitumia
var jina_la_zamani = "Baraka";
💡 Note: Tumia const kwa thamani zisizobadilika. Tumia let kwa thamani zinazobadilika. Usitumie var isipokuwa unajua unachofanya.

Naming Conventions

// camelCase — ndiyo standard kwenye JS
let jinaLangu = "Juma";
let umriWaMwanafunzi = 25;
const TAREHE_KUZALIWA = "2000-01-01";  // Constants za kweli mara nyingi UPPERCASE

4. Data Types na Operators

Aina za data na shughuli

Aina za Data / Data Types

// String — maneno
let jina = "Juma";

// Number — namba (int na float zote)
let umri = 25;
let urefu = 1.75;

// Boolean — True/False
let niMwanafunzi = true;

// Undefined — variable bila thamani
let kitu;  // undefined

// Null — kitu tupu (intentional)
let chochote = null;

// Object — kitu changamano
let mtu = { jina: "Juma", umri: 25 };

// Array — orodha
let majina = ["Juma", "Aisha"];

Operators

// Hesabu
let x = 10, y = 3;
console.log(x + y);  // 13
console.log(x - y);  // 7
console.log(x * y);  // 30
console.log(x / y);  // 3.333...
console.log(x % y);  // 1
console.log(x ** y); // 1000

// Comparison
console.log(10 == "10");   // True (inalinganisha thamani tu)
console.log(10 === "10");  // False (inalinganisha thamani NA aina)
console.log(10 !== "10");  // True
console.log(x > 5);        // True

// Logical
console.log(true && false);  // False
console.log(true || false);  // True
console.log(!true);          // False
⚡ Tip: Tumia === na !== daima — inaepuka matatizo ya aina za data!

5. Strings na Template Literals

Kufanya kazi na maandishi

// String methods
let text = "JavaScript ni nzuri!";
console.log(text.length);          // 20
console.log(text.toUpperCase());   // JAVASCRIPT NI NZURI!
console.log(text.toLowerCase());   // javascript ni nzuri!
console.log(text.indexOf("nzuri")); // 14
console.log(text.includes("JS"));  // False
console.log(text.slice(0, 10));    // JavaScript

// Template Literals (backticks `...`)
let jina = "Juma";
let umri = 25;
let salamu = `Habari, jina langu ni ${jina}, nina miaka ${umri}`;
console.log(salamu);

// Multiline strings
let aya = `
Huu ni mstari wa kwanza.
Huu ni mstari wa pili.
Na huu ni wa tatu.
`;
console.log(aya);

6. Conditionals (if/else, switch)

Kufanya maamuzi

// if/else if/else
let alama = 85;
let daraja;

if (alama >= 80) {
    daraja = "A";
} else if (alama >= 70) {
    daraja = "B";
} else if (alama >= 60) {
    daraja = "C";
} else {
    daraja = "F";
}
console.log(`Daraja: ${daraja}`);

// Ternary operator (njia fupi)
let umri = 18;
let uwezo = umri >= 18 ? "Unaweza kupiga kura" : "Bado mdogo";
console.log(uwezo);

// Switch statement
let siku = "Jumatatu";
switch(siku) {
    case "Jumatatu":
        console.log("Siku ya kwanza ya wiki");
        break;
    case "Ijumaa":
        console.log("Karibu wikendi!");
        break;
    default:
        console.log("Siku nyingine");
}

7. Loops (for, while, forEach)

Kurudia code mara kwa mara

// For loop
for (let i = 0; i < 5; i++) {
    console.log(`Namba: ${i}`);  // 0, 1, 2, 3, 4
}

// While loop
let count = 0;
while (count < 3) {
    console.log(`Count: ${count}`);
    count++;
}

// forEach (kwenye arrays)
let majina = ["Juma", "Aisha", "Baraka"];
majina.forEach(function(jina, index) {
    console.log(`${index}: ${jina}`);
});

// for...of (ES6)
for (let jina of majina) {
    console.log(jina);
}

// for...in (kwenye objects)
let mtu = { jina: "Juma", umri: 25 };
for (let key in mtu) {
    console.log(`${key}: ${mtu[key]}`);
}

8. Functions na Arrow Functions

Panga code yako kwa vitendakazi

// Function declaration (njia ya kawaida)
function salamu(jina) {
    return `Habari ${jina}!`;
}
console.log(salamu("Juma"));

// Function expression
const ongeza = function(a, b) {
    return a + b;
};

// Arrow function (ES6) — njia fupi na ya kisasa
const panda = (a, b) => a * b;  // return moja kwa moja
console.log(panda(4, 5));  // 20

// Arrow function yenye body
const hesabu = (a, b) => {
    let matokeo = a + b;
    return `Jumla ni ${matokeo}`;
};

// Default parameters
const salamuKwaJina = (jina = "Rafiki") => `Habari ${jina}!`;
console.log(salamuKwaJina());       // Habari Rafiki!
console.log(salamuKwaJina("Juma")); // Habari Juma!
⚡ Tip: Arrow functions ni fupi na hazina this yao wenyewe — hii inasaidia kwenye callbacks na event handlers.

9. Arrays na Object

Orodha na Vitu

// Arrays — orodha
let mafuta = ["Ndizi", "Maembe", "Machungwa"];
console.log(mafuta[0]);        // Ndizi
console.log(mafuta.length);    // 3

// Array methods muhimu
mafuta.push("Papai");          // Ongeza mwishoni
mafuta.pop();                  // Ondoa la mwisho
mafuta.unshift("Nanasi");      // Ongeza mwanzoni
mafuta.shift();                // Ondoa la kwanza
console.log(mafuta.indexOf("Maembe"));  // 1
console.log(mafuta.includes("Ndizi"));  // true

// Array map, filter, reduce (muhimu sana!)
let namba = [1, 2, 3, 4, 5];

let maraMbili = namba.map(n => n * 2);
console.log(maraMbili);  // [2, 4, 6, 8, 10]

let kubwaKulikoTatu = namba.filter(n => n > 3);
console.log(kubwaKulikoTatu);  // [4, 5]

let jumla = namba.reduce((acc, n) => acc + n, 0);
console.log(jumla);  // 15

// Objects — vitu
let mwanafunzi = {
    jina: "Juma",
    umri: 25,
    masomo: ["Math", "Physics"],
    anasoma: true,
    salamu: function() {
        return `Habari, mimi ni ${this.jina}`;
    }
};

console.log(mwanafunzi.jina);         // Juma
console.log(mwanafunzi["umri"]);      // 25
console.log(mwanafunzi.salamu());     // Habari, mimi ni Juma

10. DOM Manipulation

Kubadilisha Ukurasa kwa JavaScript

🇹🇿 Kiswahili: DOM (Document Object Model) inawakilisha ukurasa wako wa HTML kama vitu ambavyo JS inaweza kubadilisha.

Kupata Elements

// Kupata elements
let header = document.getElementById("header");
let vitu = document.getElementsByClassName("kitu");
let vituVote = document.querySelectorAll(".kitu");
let kituMoja = document.querySelector(".kitu");  // Ya kwanza tu

// Kubadilisha content
header.textContent = "Maandishi mapya!";
header.innerHTML = "HTML mpya";

// Kubadilisha style
header.style.color = "blue";
header.style.backgroundColor = "#f0f0f0";
header.classList.add("active");
header.classList.remove("hidden");
header.classList.toggle("visible");  // Ongeza/ondoa

Kuunda na Kuondoa Elements

// Kuunda element mpya
let kipya = document.createElement("div");
kipya.textContent = "Hii ni element mpya";
kipya.className = "kitu-kipya";
document.body.appendChild(kipya);

// Kuondoa
let yaKuondoa = document.getElementById("ya-kuondoa");
yaKuondoa.remove();
💡 Note: querySelector inatumia CSS selectors — inaweza kutumia .class, #id, element, n.k.

11. Events — Vitendo vya Mtumiaji

React kwa vitendo vya mtumiaji

// Click event
let kitufe = document.getElementById("kitufe");
kitufe.addEventListener("click", function() {
    alert("Umebonyeza kitufe!");
});

// Event object
kitufe.addEventListener("click", (event) => {
    console.log(event.target);   // Element iliyobonyezwa
    console.log(event.type);     // "click"
});

// Aina za events
element.addEventListener("mouseover", () => {});
element.addEventListener("mouseout", () => {});
element.addEventListener("keydown", (e) => {
    console.log(e.key);  // Herufi iliyobonyezwa
});
element.addEventListener("submit", (e) => {
    e.preventDefault();  // Zuia form kusubmit kwa kawaida
});

// Input events
let input = document.getElementById("jina");
input.addEventListener("input", (e) => {
    console.log(e.target.value);  // Thamani kwa kila herufi
});
⚡ Tip: e.preventDefault() inazuia tabia ya default (k.m. form kusubmit au link kufungua). e.stopPropagation() inazuia event kuenenda kwa elements za juu.

12. ES6+ Features

Vipengele vya kisasa vya JavaScript

// Destructuring
// Array
let [a, b] = [10, 20];
console.log(a, b);  // 10 20

// Object
let mtu = { jina: "Juma", umri: 25 };
let { jina, umri } = mtu;
console.log(jina, umri);

// Spread operator
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let pamoja = [...arr1, ...arr2];
console.log(pamoja);  // [1, 2, 3, 4, 5, 6]

let obj1 = { a: 1, b: 2 };
let obj2 = { c: 3, ...obj1 };
console.log(obj2);  // { c: 3, a: 1, b: 2 }

// Rest parameters
function jumlaVote(...namba) {
    return namba.reduce((acc, n) => acc + n, 0);
}
console.log(jumlaVote(1, 2, 3, 4));  // 10

13. Fetch API na JSON

Kupata data kutoka mtandaoni

// Fetch API — kupata data kutoka server
fetch("https://api.github.com/users/shbnsemeni")
    .then(response => response.json())  // Badilisha JSON kuwa JS object
    .then(data => {
        console.log(data);
        console.log(`Jina: ${data.login}`);
        console.log(`Followers: ${data.followers}`);
    })
    .catch(error => {
        console.error("Kuna tatizo:", error);
    });

// Async/await (njia ya kisasa)
async function getUserData() {
    try {
        let response = await fetch("https://api.github.com/users/shbnsemeni");
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error("Tatizo:", error);
    }
}

getUserData();

// JSON — JavaScript Object Notation
// Kubadilisha object kuwa JSON
let mtu = { jina: "Juma", umri: 25 };
let jsonString = JSON.stringify(mtu);
console.log(jsonString);  // '{"jina":"Juma","umri":25}'

// Kubadilisha JSON kuwa object
let kutokaJSON = JSON.parse(jsonString);
console.log(kutokaJSON.jina);  // Juma
💡 Note: API (Application Programming Interface) inaruhusu mifumo miwili kuwasiliana. Fetch ni njia ya kuomba data kutoka kwa API.

14. Simple Projects / Miradi Midogo

Weka maarifa yako kwenye majaribio

Project 1: Color Changer

<button id="badilishaRangi">Badilisha Rangi</button>
<script>
    const kitufe = document.getElementById("badilishaRangi");
    kitufe.addEventListener("click", () => {
        document.body.style.backgroundColor =
            "#" + Math.floor(Math.random() * 16777215).toString(16);
    });
</script>

Project 2: Todo List

<input type="text" id="taskInput" placeholder="Task mpya...">
<button id="ongezaTask">Ongeza</button>
<ul id="taskList"></ul>
<script>
    const input = document.getElementById("taskInput");
    const kitufe = document.getElementById("ongezaTask");
    const orodha = document.getElementById("taskList");

    kitufe.addEventListener("click", () => {
        if (input.value.trim() === "") return;
        let li = document.createElement("li");
        li.textContent = input.value;
        li.addEventListener("click", () => li.remove());
        orodha.appendChild(li);
        input.value = "";
    });
</script>

Project 3: Simple Calculator

<input type="number" id="num1">
<input type="number" id="num2">
<button onclick="hesabu('+')">+</button>
<button onclick="hesabu('-')">-</button>
<p id="matokeo"></p>
<script>
    function hesabu(op) {
        let a = parseFloat(document.getElementById("num1").value);
        let b = parseFloat(document.getElementById("num2").value);
        let matokeo;
        if (op === "+") matokeo = a + b;
        else if (op === "-") matokeo = a - b;
        document.getElementById("matokeo").textContent = `Matokeo: ${matokeo}`;
    }
</script>
⚡ Next Steps: Endelea kwenye React course kujifunza kuunda modern web applications kwa JavaScript framework maarufu!
← Back to All Courses