HTML ትምህርት - ክፍል 6

⚡

JavaScript ምንድን ነው? // What is JS?

JavaScript (JS) — Web page ን interactive ለማድረግ ይጠቅማል። Button ጠቅ ሲደረግ፣ form ሲሞላ፣ animation ሲሰራ — ሁሉም JS ነው!
JavaScript makes web pages interactive — button clicks, form validation, animations, and much more!

🏠

ክፍል 1-5 ተምረናል:
📄 HTML = ቤቱ አጥንት (Structure)
🎨 CSS = ቤቱ ማስዋብ (Style)
⚡ JavaScript = ሃይልና ውሃ (Behavior/Logic)
HTML=structure, CSS=style, JS=behavior. All 3 together = a real website!

JS HTML ላይ እንዴት ይጨምሩ?
How to add JavaScript to HTML:

index.html

<!-- መንገድ 1: HTML ውስጥ ቀጥታ -->
<script>
  alert("ሰላም JavaScript!");
</script>

<!-- መንገድ 2: የተለየ ፋይል (Professional) -->
<script src="script.js"></script>

📦

Variables — ሳጥኖች // let, const, var

Variable — መረጃ ለማስቀመጥ ይጠቅማል። ሳጥን ይመስላል — ስም ሰጥተህ ዋጋ ታስቀምጣለህ።
Variables store data — like labeled boxes. Give it a name, put a value inside.

let

ሊቀየር የሚችል
Can be changed later
✅ አብዛኛው ጊዜ ይጠቀሙ

const

የማይቀየር ቋሚ
Cannot be changed
✅ ቋሚ ዋጋ ለ

var

አሮጌ አጻጻፍ
Old way — avoid
⚠️ አይጠቀሙ

variables.js

// ስም (String)
let name = "አበበ";
const channel = "EthioCode";

// ቁጥር (Number)
let age = 25;
const year = 2025;

// እውነት/ሐሰት (Boolean)
let isStudent = true;
let isWorking = false;

// ማሳያ (Console / Alert)
console.log(name);        // Browser console ላይ
alert(name);             // Popup ያሳያል
document.write(name);   // Page ላይ ይጽፋል

🔧

Functions & Events // ተግባርና ክስተት

Function — ደጋግሞ የሚሰራ ኮድ ለማስቀመጥ ይጠቅማል። አንዴ ጻፍ ብዙ ጊዜ ተጠቀም!
Event — ተጠቃሚ ሲጫን፣ ሲጽፍ፣ ሲንቀሳቀስ የሚሰሩ ነገሮች (onclick, onchange...)
Functions = reusable code blocks. Events = reactions to user actions (click, type, hover).

functions.js

// Function ማስፈጸሚያ
function greet() {
  alert("ሰላም! 👋");
}

// Parameter ያለው function
function greetUser(name) {
  alert("ሰላም " + name + "!");
}

// HTML ውስጥ:
// <button onclick="greet()">ጠቅ አድርግ</button>
// <button onclick="greetUser('አበበ')">ሰላምታ</button>

dom.js — HTML element ማስቀየር

// HTML element ማግኘት
const title = document.getElementById("myTitle");

// ጽሑፍ ለውጥ
title.innerText = "አዲስ ጽሑፍ!";

// ቀለም ለውጥ
title.style.color = "red";

// HTML ውስጥ:
// <h1 id="myTitle">ቀዳሚ ጽሑፍ</h1>

🎮

Interactive Demos — ሞክር! // Try it live!

Demo 1: Counter (ቆጣሪ) — + / - ቁልፍ ጫን!
A counter using JS variables and onclick events:

0

counter.js

let count = 0;

function changeCount(amount, reset) {
  if (reset) { count = 0; }
  else { count = count + amount; }
  document.getElementById("counterDisplay")
    .innerText = count;
}

Demo 2: Color Changer (ቀለም ቀያሪ) — ቁልፍ ጫን ቀለሙ ይቀየር!
Change background color using JS and onclick:

ቀለሙ ሲቀየር ይታያል!

color.js

function changeColor(bg, text, label) {
  const box = document.getElementById("colorBox");
  box.style.background = bg;
  box.style.color = text;
  box.innerText = label + " ተመረጠ!";
}

Demo 3: Mini Calculator (ቀላል ካልኩሌተር) 🔢
A working calculator built with HTML + JS:

0

📌

ዋና ዋና ነጥቦች // Key Takeaways

1

⚡ JS = Web ሕይወት

HTML+CSS ብቻ static ነው — JS ሲጨምር interactive ይሆናል።
HTML+CSS alone is static — JS makes it dynamic and interactive.

2

📦 let/const — Variables

let = ሊቀየር ይችላል፣ const = አይቀይርም። var አይጠቀሙ።
Use let for changeable values, const for fixed values. Avoid var.

3

🔧 function — ደጋግሞ ይሰራ

አንዴ ጻፍ፣ ብዙ ጊዜ ጠቀም — onclick="functionName()" ያስጀምረዋል።
Write once, use many times. Call with onclick="name()".

4

🎯 getElementById — HTML ማስቀየር

document.getElementById("id").innerText = "..." ጽሑፍ ይቀይራል።
Use getElementById to find and change HTML elements with JS.

🎯

Quiz // ምን ተማርን?

❓ JavaScript ውስጥ ሊቀየር የሚችል variable ለማስፈጸም የትኛውን keyword ትጠቀማለህ?
Which keyword do you use to declare a variable that can be changed later?

A const

B let

C var

D function

JavaScript ⚡Web ሕይወት እናክልበት!

JavaScript ⚡
Web ሕይወት እናክልበት!