JavaScript 0 dan: DOM, Event, Async
📌 Mundarija
1) JavaScript nima?
JavaScript — brauzerda interaktivlik yaratadi: tugma bosilganda ishlash, ma’lumot yuklash, DOM o‘zgartirish.
2) Ulanish
<script src="app.js"></script>
3) Asoslar
// o'zgaruvchi
let a = 10;
const name = "Otabek";
// shart
if (a > 5) {
console.log("Katta");
} else {
console.log("Kichik");
}
// massiv
const arr = [1,2,3];
arr.push(4);4) Funksiyalar
function sum(x, y){
return x + y;
}
const mul = (x, y) => x * y;5) DOM: element topish
const btn = document.querySelector("#btn");
const box = document.querySelector(".box");
box.textContent = "Salom!";6) Eventlar
btn.addEventListener("click", () => {
box.classList.toggle("active");
});7) Fetch / API
fetch("https://api.example.com/data")
.then(r => r.json())
.then(data => console.log(data))
.catch(err => console.error(err));8) Async/Await
async function load(){
try{
const r = await fetch("https://api.example.com/data");
const data = await r.json();
console.log(data);
}catch(e){
console.error(e);
}
}9) LocalStorage
// saqlash
localStorage.setItem("theme", "dark");
// olish
const theme = localStorage.getItem("theme");10) Mini-loyiha: “Darslik qidiruv”
Sayt indexida qidiruv input qo‘shib, kartalarni filter qilishni yozamiz.
// g'oya
const q = document.querySelector("#q");
const cards = [...document.querySelectorAll(".blog-card")];
q.addEventListener("input", () => {
const v = q.value.toLowerCase();
cards.forEach(c => {
c.style.display = c.innerText.toLowerCase().includes(v) ? "" : "none";
});
});🔒 Xavfsizlik eslatma
Foydalanuvchi kiritgan matnni HTML ichiga “raw” qo‘shma. Kerak bo‘lsa escape qil.
📞 Aloqa
Savollar bo‘lsa yozing: