Javascript dasturlash tili va uning imkoniyatlari

Nima o'rganamiz

Ushbu darsdan keyin siz:

• sahifadagi harakat uchun qaysi til javob berishini ayta olasiz;
• brauzer konsolini ochib, unda birinchi buyruqni yoza olasiz;
• o'z HTML sahifangizga JavaScript faylini ulay olasiz.

Bu — JavaScript bilan birinchi uchrashuv. Hech narsani yodlash shart emas: har bo'limda avval o'zingiz qilib ko'rasiz, keyin nima bo'lganini sxemada ko'rasiz, oxirida qoidasini o'qiysiz.

Kerakli narsalar

Hech qanday dastur o'rnatish shart emas. JavaScript brauzerning ichida ishlaydi — sizda brauzer bor, demak dasturlash muhiti ham bor.

HTML esdan chiqqan bo'lsa xavotir olmang: 3-bo'limda kerakli fayl to'liq beriladi, nusxa olib ishlatasiz.

1. JavaScript nima qila oladi

Avval qilib ko'ring

1. Google'ni oching va qidiruvga 7 * 8 deb yozing.
2. Ekranda kalkulyator chiqadi. Uning tugmalarini bosing: 5, +, 3, =.

Skrinshot kutilmoqdaGoogle qidiruvidagi kalkulyator

Tekshirib ko'ring: javob o'zgardi, lekin sahifa yangilanmadi — manzil o'zgarmadi, sahifa qaytadan yuklanmadi.

Xuddi shunday narsalarni siz har kuni ko'rasiz: qidiruv maydoniga yozayotganda pastda taklif ro'yxati chiqadi, videoning to'xtatish tugmasi ishlaydi, xaritani surganda joy siljiydi. Bularning hammasi sahifa qayta yuklanmasdan sodir bo'ladi.

Nima bo'ldi

Veb sahifa uch qavatdan yig'iladi va har qavatning o'z vazifasi bor.

HTML — skelet. Sahifada nima borligini aytadi: sarlavha, paragraf, rasm, tugma. Rasmdagi birinchi plita — faqat konturlar.

CSS — ko'rinish. O'sha narsalar qanday ko'rinishini aytadi: rangi, o'lchami, joylashuvi. Ikkinchi plitada xuddi shu bo'laklar bo'yalgan.

JavaScript — harakat. Sahifa nima qilishini aytadi. Uchinchi plitada tugma bosilgan va yonidagi qiymat o'zgargan — buni faqat JavaScript qila oladi.

Qoida

Kalkulyator misolida buni bo'lib chiqamiz:

HTML va CSS hech narsani hisoblay olmaydi — ular faqat ko'rsatadi. Hisoblash, solishtirish, eslab qolish, javob berish — bularning hammasi JavaScript ishi.

JavaScript 1995-yilda aynan shu maqsadda yaratilgan: sahifani jonlantirish uchun. Bugun deyarli har bir sayt undan foydalanadi.

E'tibor bering: JavaScript va Java — butunlay boshqa ikki til. Nomi o'xshash bo'lgani bilan ular bir-biriga bog'liq emas; bu chalkashlik 1995-yildagi reklama qaroridan qolgan. Internetdan "Java" bo'yicha javob izlasangiz, mutlaqo boshqa narsa topasiz.

2. Konsolda birinchi buyruq

JavaScript kodini sinab ko'rishning eng tez yo'li — brauzer konsoli. Konsol brauzerning ichiga qurilgan, hech narsa o'rnatilmaydi.

Avval qilib ko'ring

1. Brauzerda istalgan sahifani oching.
2. F12 tugmasini bosing. Ishlamasa: Ctrl + Shift + J ni sinang yoki sahifada o'ng tugmani bosib Inspect / Tekshirish ni tanlang. Ba'zi noutbuklarda F12 uchun Fn tugmasi bilan birga bosish kerak bo'ladi.
3. Ochilgan panelda Console yorlig'ini tanlang.
4. > belgisidan keyin quyidagini qo'lda yozing va Enter bosing:

console.log("Salom, Nukus!");

Skrinshot kutilmoqdaBrauzer konsoli

Tekshirib ko'ring: keyingi qatorda Salom, Nukus! yozuvi paydo bo'ldi. Qizil rangda Uncaught SyntaxError chiqqan bo'lsa — qavs yoki qo'shtirnoq tushib qolgan, qatorni qaytadan yozing.

Endi sonlar bilan:

console.log(7 * 8);

Javob: 56. Konsol kalkulyator kabi ham ishlaydi.

Nusxa ko'chirmoqchi bo'lsangiz. Chrome birinchi marta kodni konsolga qo'yishga ruxsat bermaydi: ogohlantirish chiqadi va sizdan allow pasting deb yozishni so'raydi. O'sha ikki so'zni yozib Enter bosing — shundan keyin nusxa ishlaydi. Bu himoya chorasi: begona odam sizni konsolga notanish kod qo'yishga ko'ndirmasin.

Nima bo'ldi

Uch qadam bo'ldi:

1. Siz buyruq yozdingiz. Enter bosilgan payt u brauzerga uzatildi.
2. Brauzer uni bajardi. Kompilyatsiya, kutish, o'rnatish yo'q — JavaScript darrov ishlaydi.
3. Konsol javobni qaytardi. Javob faqat shu panelda ko'rinadi, sahifaning o'zi o'zgarmaydi.

Qoida

Yozilgan qatorni bo'laklarga ajratamiz:

console.log("Salom, Nukus!");

Ikki qoida shu yerdan chiqadi.

Matn har doim qo'shtirnoq ichida yoziladi. Qo'shtirnoqsiz yozsangiz, brauzer uni buyruq nomi deb o'ylaydi va Uncaught ReferenceError: Salom is not defined deb xato beradi — "Salom degan narsani bilmayman" degani. Xato nomini o'qishni odat qiling: ReferenceError — noma'lum nom, SyntaxError — yozuvda xato.

Sonlar qo'shtirnoqsiz yoziladi. 7 * 8 — bu amal, bajariladi. "7 * 8" — bu matn, shundayligicha yoziladi. Farqni konsolda ikkalasini yozib sinab ko'ring.

Apostrofli nomlarga e'tibor. Bizning joy nomlarimizda ' belgisi ko'p: Qo'ng'irot, Mo'ynoq, To'rtko'l.

Bu yerda ikkita belgini ajratib olish kerak. Yuqorida qo'shtirnoq deb atagan belgimiz — ", uni ikki tirnoq deb ham aytishadi: bu bitta belgining ikki nomi. Apostrof esa boshqa belgi — ', uni bir tirnoq deyishadi va JavaScript uni ham matn chegarasi deb qabul qiladi.

Matnni ikki tirnoq (") ichida yozsangiz, apostrof hech qanday muammo tug'dirmaydi:

console.log("Qo'ng'irot");

Bir tirnoq (') bilan yozsangiz — matn apostrof joyida tugab qoladi va brauzer Uncaught SyntaxError beradi. Shuning uchun bu darsda hamma joyda ikki tirnoq ishlatamiz.

E'tibor bering: konsolga yozilgan narsa faqat sizga ko'rinadi. Sahifani ochgan boshqa odam uni ko'rmaydi — konsol tekshirish uchun, ko'rsatish uchun emas.

3. Kodni sahifaga ulash

Konsolga yozilgan kod sahifa yangilanishi bilan yo'qoladi. Kod doimiy qolishi uchun uni faylga yozib, sahifaga ulash kerak.

Fayllarni qanday yaratasiz

Bu joyda ko'pchilik qoqiladi, shuning uchun qadamma-qadam yozamiz.

VS Code bilan (tavsiya etiladi):

1. Kompyuterda birinchi-sahifa degan papka yarating.
2. VS Code'ni oching, File menyusidan Open Folder ni tanlang va o'sha papkani ko'rsating.
3. File menyusidan New File, nomini birinchi.html deb yozing.
4. Yana New File, nomi kod.js.

Bloknot bilan:

1. birinchi-sahifa papkasini yarating.
2. Bloknotni oching, kodni yozing.
3. Fayl menyusidan Saqlash ni tanlang va papkani ko'rsating.
4. Muhim: "Fayl turi" ro'yxatidan Barcha fayllar (All Files) ni tanlang, keyin nomini birinchi.html deb yozing.

Nega bu muhim. Bloknot sukut bo'yicha .txt qo'shib yuboradi va faylingiz birinchi.html.txt bo'lib qoladi. Windows kengaytmalarni yashirgani uchun buni ko'rmaysiz ham — brauzerda esa sahifa emas, xom matn ochiladi.

Tekshirish oson: papkada faylning ikonkasi brauzer belgisi bo'lsa — to'g'ri. Bloknot belgisi bo'lsa — hali .txt.

Avval qilib ko'ring

birinchi.html fayliga quyidagini yozing:

<!DOCTYPE html>
<html lang="uz">
  <head>
    <meta charset="UTF-8">
    <title>Birinchi sahifam</title>
  </head>
  <body>
    <h1>Mening sahifam</h1>
    <script src="kod.js"></script>
  </body>
</html>

kod.js fayliga — xuddi shu papkada:

// Bu izoh — brauzer uni o'qimaydi
console.log("Sahifa ochildi");
alert("Salom!");

Endi birinchi.html faylini brauzerda oching: ustiga ikki marta bosing yoki o'ng tugma bilan Open with orqali Chrome'ni tanlang.

Skrinshot kutilmoqdaSahifa va alert oynasi

Tekshirib ko'ring: ekranda Salom! yozuvli kichik oyna chiqdi. OK bosing — orqada Mening sahifam sarlavhasi turibdi. F12 bilan konsolni ochsangiz, u yerda Sahifa ochildi yozuvi bor.

Hech narsa chiqmadimi? Uch narsani tekshiring: ikkala fayl bitta papkadami, kod.js nomi to'g'ri yozilganmi, fayl .txt bo'lib qolmaganmi.

Kodni o'zgartirsangiz — sahifani yangilang. Fayldagi o'zgarish brauzerda o'z-o'zidan ko'rinmaydi: kod.js ni saqlang, so'ng sahifa ochilgan oynada F5 bosing (yoki Ctrl + R). Eski natijani ko'rib "kodim ishlamayapti" degan xulosaga kelish — eng ko'p uchraydigan yanglishlik.

Nima bo'ldi

Brauzer HTML faylni yuqoridan pastga, qator-ma-qator o'qiydi:

1. <h1> ni ko'rdi — sarlavhani ekranga chizdi.
2. <script src="kod.js"> ni ko'rdi — kod.js faylini ochdi.
3. Ichidagi kodni yuqoridan pastga bajardi: avval konsolga yozdi, keyin oyna chiqardi.

Shuning uchun kod.js ichidagi qatorlarning tartibi muhim. alert ni birinchi qatorga ko'chirsangiz, oyna avval chiqadi.

Qoida

<script src="kod.js"></script> — brauzerga "shu faylni ham o'qi" deb aytadi. src — fayl nomi; fayl boshqa papkada bo'lsa, yo'li to'liq yoziladi (papka/kod.js).

Teg </body> dan oldin yoziladi. Sababi: brauzer avval sahifani chizadi, keyin kodni ishga tushiradi. Aks holda kod hali mavjud bo'lmagan elementlarni qidirib qoladi — buni 17-darsda ko'ramiz.

alert("Salom!") — ekranda oyna chiqaradi. console.log dan farqi:

// — izoh. Shu belgidan keyingi matnni brauzer o'qimaydi. Izoh o'zingiz uchun va kodni o'qiydigan boshqa odam uchun yoziladi: uch oydan keyin o'z kodingizni ochganingizda ham asqotadi.

Tez-tez uchraydigan xatolar

Qisqacha

• HTML — nima bor, CSS — qanday ko'rinadi, JavaScript — nima bo'ladi
• Konsol F12 bilan ochiladi, tez tekshirish uchun ishlatiladi
• console.log("matn") — konsolga yozadi, faqat siz ko'rasiz
• alert("matn") — oyna chiqaradi, hamma ko'radi
• Matn qo'shtirnoq ichida, sonlar qo'shtirnoqsiz
• Apostrofli nomlar (Qo'ng'irot) uchun ikki tirnoq ishlatiladi
• // dan keyingi matn — izoh, brauzer o'qimaydi
• Kod fayli sahifaga <script src="kod.js"></script> bilan ulanadi
• Teg </body> dan oldin turadi, kod yuqoridan pastga bajariladi

Uy vazifasi

Bu darsda ikki topshiriq bor, ikkalasi ham shu qo'llanmadagi materialdan chiqadi:

1. Konsolda (≈10 daqiqa) — 1 va 2-bo'lim: console.log bilan ma'lumot chiqarish, bitta amalni hisoblash va uni qaysi til bajarayotganini aytish.
2. O'z sahifangizda (≈15 daqiqa) — 3-bo'lim: birinchi.html va kod.js yaratib, kodni sahifaga ulash.

Topshiriq matni shu sahifaning pastida — jurnaldagi raqamingizni tanlaganingizdan keyin chiqadi. Har kimda o'z joyi va o'z amali bo'ladi, shuning uchun qo'shnining ishini ko'chirish ishlamaydi.

Skrinshot qanday olinadi? Win + Shift + S bosing — ekran xiralashadi va sichqoncha bilan kerakli qismni belgilaysiz. Rasm buferga tushadi: Word yoki Paint'ga Ctrl + V bilan qo'ying va saqlang. Butun ekran kerak bo'lsa PrtScn tugmasi ham shu ishni qiladi.

Ikkinchi topshiriqqa kirishishdan oldin 3-bo'limdagi fayl yaratish qadamlarini qaytadan o'qib chiqing — eng ko'p vaqt aynan shu yerda yo'qoladi.

Keyingi darsda

Hozircha biz faqat tayyor matn va sonlarni chiqara olamiz. Natijani eslab qolish, uni o'zgartirish yoki foydalanuvchidan son so'rash hali qo'limizdan kelmaydi.

Keyingi darsda sonli qiymatlar va arifmetik amallar bilan tanishamiz — shundan keyin sahifa haqiqiy hisob-kitob qila boshlaydi.