JavaScript asoslari

Salom, dunyo!

Ushbu darsda birinchi JavaScript kodimizni yozamiz va uni veb-sahifaga qanday ulashni o'rganamiz. Kursning katta qismi brauzerga qaratilgan, shuning uchun kodni HTML ichida ishga tushirishni bilib olish muhim.

"script" tegi

JavaScript dasturlarini HTML hujjatining deyarli istalgan joyiga <script> tegi yordamida joylashtirish mumkin. Masalan:

<!DOCTYPE HTML>
<html>
<body>

  <p>Skriptdan oldin...</p>

  <script>
    alert("Salom, dunyo!");
  </script>

  <p>...Skriptdan keyin.</p>

</body>
</html>

Brauzer <script> tegiga yetganda uning ichidagi kodni avtomatik o'qiydi va bajaradi. Bu misolda alert ekranda "Salom, dunyo!" degan modal oyna ko'rsatadi.

Yuqoridagi misol alert ishlatgani uchun statik ko'rsatilgan. alert, prompt va confirm faqat haqiqiy brauzerda ishlaydi — quyidagi interaktiv maydonchalarda esa console.log ishlatamiz, chunki u natijani darhol chiqaradi.

Endi haqiqiy ishlaydigan birinchi kodimizni sinab ko'ramiz. Quyidagi tugmani bosing va natijani kuzating:

salom.js
// natija shu yerda chiqadi

Zamonaviy va eski belgilash

Eski kodlarda <script> tegining bir nechta qo'shimcha atributlarini uchratishingiz mumkin. Ular bugungi kunda kerak emas, lekin nima uchun ishlatilganini bilib qo'yish foydali.

Agar eski loyihalarda <!-- ... --> kabi HTML izohlari script ichida yozilganini ko'rsangiz — bu juda qadimgi brauzerlar uchun edi. Zamonaviy kodda ularni umuman ishlatmaymiz.

Tashqi skriptlar (src atributi)

Agar sizda ko'p JavaScript kodi bo'lsa, uni alohida faylga chiqarib qo'yish yaxshi amaliyot hisoblanadi. Skript fayllari HTML ga src atributi orqali ulanadi:

<script src="/yol/skript.js"></script>

Bu yerda /yol/skript.js — skript faylining saytdagi absolyut yo'li. To'liq URL manzil ham berish mumkin:

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>

Bir nechta skriptni ulash uchun bir nechta teg yozamiz:

<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>

Nima uchun tashqi fayl afzal?

Kodni alohida faylga chiqarishning ikkita muhim afzalligi bor:

  1. Kesh (cache). Brauzer skriptni yuklab olib, o'z xotirasida (keshda) saqlaydi. Boshqa sahifalar ham xuddi shu faylga murojaat qilsa, brauzer uni qaytadan yuklamaydi — keshdan oladi. Bu trafikni tejaydi va sahifalar tezroq ochiladi;
  2. Tozalik. HTML va JavaScript alohida bo'lganda, kodni o'qish va boshqarish osonlashadi.
Agar <script> tegida src atributi bo'lsa, tegning ichidagi kod e'tiborga olinmaydi. Bitta teg ikkalasini birdan bajara olmaydi.
<script src="file.js">
  // src bor bo'lsa, bu ichki kod ishlamaydi
  alert("Salom");
</script>

Buni to'g'rilash uchun ikkita alohida teg ishlatamiz:

<script src="file.js"></script>
<script>
  alert("Salom");
</script>

Xulosa