Bu modulda JavaScript bilan tanishildi: u nima, qayerda ishlaydi va HTML sahifaga qanday ulanadi.
JavaScript nima
Web’ning uch qatlamini eslang: HTML — struktura, CSS — ko’rinish, JavaScript — harakat. Tugma bosilganda nimadir ochilishi, forma tekshirilishi, ma’lumot yangilanishi — hammasi JS ishi. HTML va CSS’dan farqli, JavaScript to’laqonli dasturlash tili: unda shartlar, sikllar, funksiyalar bor.
JS asli brauzer uchun yaratilgan, lekin bugun undan tashqarida ham ishlaydi (masalan Node.js orqali serverda) — shu tufayli bitta til bilan frontend’ni ham, backend’ni ham yozish mumkin. Bu kursda tilning o’zagi o’rganiladi — u qayerda ishlatilsangiz ham bir xil.
Nimalar JS bilan qurilgan? Har kuni ko’rganlaringiz: qidiruvdagi yozayotganingizda chiqadigan takliflar, sahifa yangilanmasdan to’ldiriladigan savatcha, slayder va modallar, hattoki to’laqonli web-ilovalar (Gmail, Telegram Web). Frontend yo’nalishidagi keyingi kurslar (React va boshqalar) ham aynan JS ustiga quriladi — shu bois bu kurs yo’nalishning eng muhim bosqichi.
Dasturlash muhiti
Ikkita asosiy ish joyi bor:
- Brauzer konsoli — F12 (yoki o’ng tugma → Inspect) → Console. Kod yozib Enter bossangiz, natijasi shu yerning o’zida chiqadi. Tajriba uchun eng tez maydon. Ikki foydali sir: tepaga strelka oldingi buyruqlarni qaytaradi,
clear()konsolni tozalaydi. - VS Code — haqiqiy fayllar uchun. JS kodi
.jskengaytmali faylga yoziladi; HTML kursidan tanish Live Server bu yerda ham ishlayveradi.
console.log("Salom, JavaScript!");
Natija (konsolda): Salom, JavaScript!
console.log() — kursdagi eng ko’p ishlatiladigan buyruq: qiymatni konsolga chiqarib, kod nima qilayotganini ko’rsatadi.
JavaScript va HTML
JS sahifaga <script> tegi bilan ulanadi — ichki yoki tashqi:
<script>
console.log("Ichki kod");
</script>
<script src="app.js"></script>
Tashqi fayl (CSS’dagi kabi) afzal: kod alohida turadi va bir nechta sahifaga ulanadi. <script> odatda <body>ning oxiriga qo’yiladi — sahifa elementlari yuklanib bo’lgach ishga tushishi uchun.
Tipik xato. src berilgan <script src="app.js">console.log("...")</script> — teg ham faylga, ham ichki kodga ega bo’lsa, ichki kod e’tiborsiz qoladi. Bitta teg — bitta vazifa: yoki src, yoki ichki kod.
Amaliyot
- Brauzer konsolini ochib
console.log("Ismingiz")yozing; keyin oddiy arifmetika sinang:2 + 3 * 4. index.htmlvaapp.jsfayllarini yaratib, tashqi skript ulang — konsolda xabar chiqsin.- Skriptni
<head>ga va<body>oxiriga qo’yib sinang — hozircha farq sezilmasa ham, joylashuv odati shakllansin.
Modul testini ishlang — keyingi modul tilning "g’ishtlari": qiymatlar, o’zgaruvchilar va operatorlar.