#6 – JavaScript va jQuery. Veb-dasturlash kursi

KadirovDev - JavaScript va jQuery — *(Ushbu dasrsni video formatida ko’rish uchun bu yerga bosing)*

JavaScript tili hozirgi kunda eng mashhur tillardan biri hisoblanadi. Ko’p reytinglarda mashhurligi bo’yicha birinchi o’rinda turadi. Ushbu til orqali o’yin yaratishingiz, veb-dasturlar yozishingiz, mobil ilovalar, kompyuter uchun dasturlar, hullas har qanaqa turdagi dasturlar yozishingiz mumkin. Brauzerlarda esa JavaScript asosiy dasturlash tili hisoblanadi.

Lekin, eng mashhur til degani – eng qulay til degani emas. JavaScript’da biror bir qiyinroq dastur yaratimoqchi bo’lsangiz – albatta kutubxona, yoki freymvorklardan foydalanasiz.

Kutubxona va freymvork bu oldindan yozib qo’yilgan kodlar to’plami. Ularning farqini bilish hozircha muhim emas.

Biz jQuery ishlatamiz. Ancha eski kutubxona, lekin paydo bo’lganda butun veb-dasturlarni revolyutsiyaga olib kelgan – kuchli kutubxona. Hozir kichik narsalar yozish uchun ishlatiladi.

Lekin agar frontend dasturchisi bo’lish niyatingiz bo’lsa: Vuejs, Angular yoki React kabi kutubxonalardan birini o’rganishni maslaxat beraman. Keyinroq Vuejs haqida ham darslik chiqaraman.

Bugun JavaScript va jQuery ni tushunish uchun kalkulyator yaratib ko’ramiz.

<!doctype html>
<html>
<head>
    <title>jQuery</title>
</head>
<body>
    <input type="text" size="5" />
    <span>+</span>
    <input type="text" size="5" />
    <button type="button">=</button>
    <span>0</span>
</body>
</html>

Buning uchun bir nechta formalar yarataylik.

<style>
button {
    background-color: orange;
    color: white;
    border: 2px outset orange;
}
</style>

Tugmachamiz fonini sabzi rangga bo’yaylik, matnini – oq. Ramka stili esa outset, yani bo’silmagan shaklda deb belgiladik. Sababi, ushbu tugmachani bosganimizda, JavaScript orqali ushbu ramka stilini “inset”ga o’zgartirsak, chiroyli – bosilish effekti paydo bo’ladi.

input, button {
    outline: none;
}

formalarimizga bosganimizda element atrofida qo’shimcha chiziq paydo bo’lmoqda. Buni olib tashlash uchun, input va button elementlarimizning outline xususiyatlariga none (nan deb o’qiladi) qiymatini beramiz.

Tugmachaga bosib ko’rsak hech narsa o’zgarayotgani yo’q. Birinchi vazifamiz ushbu tugmacha bosilganda uning ramka stilini o’zgartirish.

JAVASCRIPT

<script></script>

JavaScript, html’da <script> teglari orasida yoziladi.

let foo = "Hello, world!";

JavaScript dinamik turlovchi dasturlash tili hisoblanadi. Shuning uchun o’zgaruvchan yaratayotganda, ma’lumot turini emas, let kalit so’zini yozib, keyin o’zgaruvchan nomini yozamiz. foo o’zgaruvchanimiz string turiga ega ekanligini, JavaScript o’zi tushunib oladi. Eslatib o’taman hozirgi yozayotgan kodimmizni tushunishingiz uchun, avval Umumiy dasturlash teoriyasi darslarini tugatishingiz kerak.

console.log(foo);

Umumiy dasturlash teoriyasida, ekranga biror narsa chiqarish uchun print buyrug’ini ishlatardik. JavaScript tilida kiritish-chiqish qismi yo’q. Shuning uchun console obyektining log usulidan foydalanamiz.

Hello world jumlasi shuning uchun ham ekranda emas, konsolda chiqadi. Uni ko’rish uchun chrome brauzerida F12 tugmachasini bosish kerak.

function addNumber(num1, num2) {	
	console.log(num1 + num2);
}

Funksiya yozish uchun, avval function [fankshn] kalit so’zini yozamiz.

addNumber(44, 10);

Keling, ushbu funksiyani chaqiramiz.

console.log(foo + ' Salom dunyo!');

Konkatenatsiya uchun qo’shuv belgisi ishlatiladi

let name = "Rustam";

switch(name) {
    case "Akmal":
    case "Kadirov":
        console.log("Salom Akmal Kadirov!");
        break;	

    case "Rustam":
    case "Axmedov":
        console.log("Salom Rustam Axmedov!");
        break;
        
    default:
        console.log("Salom notanish odam!");
        break;	
}

Switch-case ham huddi umumiy dasturlash teoriyasida ko’rganimizdek.

let name = "Kadirov";

if (name == "Akmal" || name == "Kadirov") {
    console.log("Salom Akmal Kadirov!");
} else if (name == "Rustam" || name == "Axmedov") {
    console.log("Salom Rustam Axmedov!");
} else {
    console.log("Salom notanish odam!");
}

If-else ham o’zgarishsiz.

Umumiy dasturlash teoriyasini o’rganib, boshqa tillarni oson o’zlashtirishingiz mumkin degan edim. Mana, JavaScript o’zagini darrov tushunib oldik. Agar umumiy dasturlash teoriyasini yaxshi tushungan bo’lsangiz, boshqa tillarni ham shunaqa tez o’zlashtirishingiz mumkin. Endi siz istalgan tilda dastur yoza olasiz. Bu narsa php darsida ham o’z isbotini topgan edi.

Lekin har hil tillarda o’zinig qo’shimcha “shirinliklari” bor, ya’ni boshqa tillarda yo’q biror qulay imkoniyatlar.

let bar = function () {
    console.log('Hello, world!');
}

Misol uchun funksiyalarni o’zgaruvchanda saqlashimiz mumkin. Bunaqa funksiyalar anonim funksiyalar deyiladi. Chunki funksiyaning nomi yo’q.

bar();

Endi ushbu funksiyani chaqiramiz.

let foo = {};

Yana bir misol: JavaScript tilida obyektlarni birdaniga, sinflar yozmasdan yaratish mumkin. Obyekt yaratish uchun figuralik qavs ochib-yopamiz.

let foo = {
    name: "Akmal"
};

Orasida xususiyat yozamiz. Xususiyat va qiymatimiz ikki nuqta belgisi orqali ajralib turadi. Hozir biz foo obyektini yaratdik, uning bitta – name nomli xususiyati bor. Uning qiymati Akmal ga teng.

let foo = {
    name: "Akmal",
    age: 32
};

Xususiyatimizdan so’ng vergul qo’yib, boshqa xususiyatlar ham yozishimiz mumkin.

let foo = {
    name: "Akmal",
    age: 32,
    sayMyName() {
        console.log(this.name);	
    }
};

Obyektimizning usullari ham bo’lishi mumkin. E’tibor berganingizdek usul nomi oldidan, na function [fankshn] kalit so’zi, na funksiyanig turi haqida ma’lumot ko’rsatmaymiz.

foo.sayMyName();

Keling ushbu funksiyamizni chaqiramiz. Konsolda “Akmal” so’zi chiqdi. Demak hammasi joyida.

Ushbu obyekt yaratish formati JSON, ya’ni JavaScript Object Notation – deyiladi. Bu shunaqa qulay formatki, uni JavaScript’ga a’loqasi bo’lmagan tillar ham ishlatishadi.

JQUERY

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

Elementlarimiz bilan ishlash uchun avval jQuery ni ulab olamiz. Buning uchun ushbu kodni head teglari orasiga qo’yaman. Mana shunday oson yo’l bilan jQuery ni ulab oldik, endi uni be’malol ishlatsak bo’ladi.

Ushbu kodni olsih uchun code.jquery.com saytiga kirasiz. Bu yerda ushbu kutubxonaning bir necha versiyalari ko’rsatilgan. Ohirgi versiyasini tanlaysiz, xozircha bu jQuery 3. Keyin minified yozuvi ustiga bosing. Paydo bo’lgan kodni html faylingizga joylashingiz mumkin.

Minified bu minimallashgan degani. Ya’ni odam dastur yozayotganda probel, tab belgilar, izohlar qoldiradi. Minimallashgan versiya esa ulardan holi. Chunki brauzer uchun sizning izohlaringiz befoyda. Har bir belgi esa – ortiqcha bayt degani. Demak ishlashi bir bo’lgani bilan, minimallashgan versiyalar bir necha barobar kamroq hajmga ega. Shuning uchun ham brauzer, bu faylni tezroq yuklay oladi va dasturingiz tezroq ochiladi.

jQuery kutubxonasining o’zi ham JavaScript tilida yozilgan, shuning uchun ham e’tibor bering: script tegi ishlatilmoqda. Faqat yozilgan kodlar boshqa serverda turganligi uchun, src atributida – o’sha JavaScript fayliga yo’l ko’rsatilgan.

jQuery ulandi. Endi keling o’zimiz ham kod yozib ko’ramiz.

<script>
let onReady = function () {
    console.log('Hello, world!');
}
</script>

Keling anonim funksiya yaratamiz. Konsolda hozircha hech narsa paydo bo’lmaydi, chunki ushbu funksiyamizni chaqirmadik. Chaqirmaymiz ham.

Chunki dastur yuqoridan pastga qarab o’qilishini bilamiz. Ushbu qatorda button [battn] elementimizni tanlamoqchi bo’lsak, JavaScript bunaqa element yo’qligini ko’rsatadi. Chunki ushbu elementimiz pasroqda paydo bo’layapti va brauzer hali uni o’qib, o’z hotirasiga olgani yo’q.

jQuery(onReady);

Agar ushbu anonim funksiyamizni, jQuery funskiyasiga argument sifatida yuborsak, jQuery ushbu funksiyani birdaniga chaqirmaydi. Brauzer yuqoridan pastga qarab, butun html kodlarni ko’rib chiqqach – bajaradi. Shuning uchun ham o’zgaruvchan nomini onReady deb nomladim, ya’ni “tayyor bo’lganda”, – degan ma’noda.

E’tibor bering, funksiyani chaqirmadim, lekin u baribir ishladi. Chunki, brauzer barcha elementlarni ko’rib bo’lganida, jQueryning o’zi funksiyamizni chaqirdi.

<script>
    console.log("men bodyning ohiri");
</script>

Buni isbotlash uchun body tegining ohirida ushbu matnni konsolga chiqaraman.

Ko’rib turganingiz dek avval ushbu matn ko’rindi, keyin esa, ya’ni brauzer butun html’ni ko’rib chiqqach, bizning onReady funksiyamiz ishladi.

<script>
let onReady = function () {
    jQuery('button');
}

jQuery(onReady);
</script>

Tugmachamizni topib olish qiyin emas, jQuery funksiyasiga argument sifatida funksiya yuborsak, brauzer tayyor bo’lganda, u ushbu funksiyani chaqiradi dedik. Agar jQuery funksiyasiga string turiga mansub qiymat yuborsak, jQuery uni selector deb tushunadi va kerakli elementni topib oladi. Bu yerda selector tushunchasi, huddi CSS dagi bilan bir.

Shuning uchun ham button deb yozsak – jQuery elementimizni topib beradi.

<script>
let onReady = function () {
    jQuery('button').css('background-color', 'red');
}

jQuery(onReady);
</script>

Aslida u mahsus obyekt qaytaradi. Bu obyektning juda foydali usullari bor. Misol uchun css() usuli – biror css xususiyatini o’zgartirish uchun hizmat qiladi. Birinchi argument sifatida css xususiyati nomi, ikkinchi argument sifatida esa, uning qiymatini ko’rsatish kerak. Ko’rib turganingizdek tugmacha foni qizil rangga o’zgardi.

JavaScript tilida ko’proq hodisaviy dasturlash ishlatiladi. Hodisaviy deganda, biror voqea, hodisa ro’y berganda – ishlaydigan funksiyar yaratishimiz nazarda tutiladi. Misol uchun onReady degan funksiya yaratdik, u faqatgina brauzer tayyor bo’lganda chaqirilsin dedik.

Keling, ushbu fon o’zgarishi ham birdaniga emas, tugmacha ustiga bosilganda ro’y bersin.

let onReady = function () {
    jQuery('button').on('click', function() {});
}

jQuery(onReady);

Buning uchun kodimizni boshqacha yozishimiz kerak. Elementni tanlab, on() usulini chaqiramiz. Birinchi argument sifatida click so’zini yuboramiz. Ikkinchi argument sifatida esa anonim funksiya yuboramiz.

onReady funksiyamizni alohida o’zgaruvchanda saqlab, keyin jQuery funksiyasiga yuborgan edik. Aslida boshqa o’zgaruvchanda saqlamasdan, birdaniga yuborish qulayroq. Lekin boshlovchi dasturchilarni bu chalg’itishi mumkin. Bir narsani eslab qoling: anonim funksiyalarni o’zgaruvchanda saqlamay, birdaniga biror usulga argument sifatida yuborishimiz mumkin.

Ushbu kodimiz: button’da, click hodisasi ro’y berganda, manabu funksiyani chaqir demoqda. Click hodisasi deganda, sichqonchaning chap tugmasi bosilgan payt nazarda tutiladi.

Hozir sichqonchamizni, ushbu tugmacha ustida bossak – hech narsa ro’y bermadi. Chunki yuborayotgan funksiyamizda hech nima yozilmagan.

jQuery('button').on('click', function() {
    jQuery(this).css('background-color', 'red');    	
});

Funksiya ichida, sal oldinroq yozgan kodimizga o’xshash kod yozamiz. Bu yerda this obyekti – button elementi bilan bir.

Brauzerda F5 tugmachasini bosamiz, ya’ni sahifamizni yangilaymiz. Hech narsa o’zgarmadi, chunki funksiyamiz faqat click hodisasi ro’y berganda chaqiriladi.

Keling, tugma ustiga bosamiz, rostdan ham uning rangi o’zgardi.

Click hodisasi aslida ikki boshqa hodisalardan iborat. Mousedown [maus davn], ya’ni sichqoncha tugmachasi pastga tushishi va Mouseup [maus ap], ya’ni sichqoncha tugmasi yuqoriga qaytishi.

jQuery('button').on('mousedown', function() {
    jQuery(this).css('border-style', 'inset');    	
});

Funksiyamiz click hodisasida emas, mousedown’da ishlasin. Hususiyatimiz background-color emas border-style bo’lsin. Qiymatimiz esa: inset.

Elemenimiz ustiga bosamiz. Ramka stili o’zgardi. Rostdan ham bosilish effekti paydo bo’ldi.

Endi sichqoncha tugmachasi ortga qaytganda, ramkamiz stilini avvalgi holatiga qaytaraylik

jQuery('button').on('mousedown', function() {
    jQuery(this).css('border-style', 'inset');    	
});

jQuery('button').on('mouseup', function() {
    jQuery(this).css('border-style', 'outset');    	
});

Mouseup hodisasi uchun funksiya yozamiz. Bu yerda sichqoncha tugmasi yuqoriga ko’tarilganda button elementimiz ramka stili – yana outset qiymatiga o’zgarishini ko’rsatdik.

Ko’rib turganingizdek, endi button elementimizga bossak, chiroyli bosilish effekti paydo bo’ldi.

Mouseup hodisasi ro’y berganda, ramka stilini o’zgartirishdan tashqari, ikki input’dagi raqamlarni bir-biriga qo’shaylik.

<input id="num1" type="text" size="5" />
<span>+</span>
<input  id="num2" type="text" size="5" />
<button type="button">=</button>
<span id="result">0</span>

Buning uchun, avval tanlamoqchi bo’lgan elementlarimizda – id atributitni ko’rsataylik. Birinchi input id’si num1 bo’lsin, ikkinchisi num2. Javoblarimiz chiqaydigan span tegimiz atributi esa result bo’lsin.

jQuery('#num1');

Endi num1 elementimizni jQuery orqali topib olamiz. Esingizda bo’lsa, buning uchun jQuery funksiyasiga CSS selectorini – qiymat sifatida yuborish kerak edi. CSSda esa elementni, uning id’si orqali tanlash uchun – panjara belgisidan foydalaniladi.

let num1 = jQuery('#num1').val();

Elemntimizni tanlagach, uning value atributini olish uchun – val() usulidan foydalanamiz. Esingizda bo’lsa input tegida foydalanuvchi tomonidan kiritilgan ma’lumotlar aynan ushbu atributda saqlanadi.

Biz ushbu inputda foydalanuvchi tomonidan kiritilgan ma’lumotni, num1 o’zgaruvchaniga joyladik.

let num1 = jQuery('#num1').val();
let num2 = jQuery('#num2').val();

Ikkinchi inputimiz qiymatini olish uchun ham – yana bir o’zgaruvchan yaratdik.

jQuery('#result').html(num1 + num2);

Endi result elementimizni topib, ushbu span tegimiz orasida yozilgan kodni – html() usuli orqali o’zgartiramiz. Hozircha u yerda 0 so’zi yozilgan. Tenglik tugmachasini bosganimizda 0 ning o’rniga num1 qo’shuv num2 qiymati yozilishi kerak.

Keling, kalkulyatorimizni sinab ko’ramiz. Birinchi input’ga 10 raqmi, ikkinchisiga esa 8 raqamini yozaylik.

Ekranda 18 raqami o’rniga, 108 raqamini ko’rdik. Chunki input’larda kiritilgan ma’lumotlar turi string’ga teng. Dars boshida, qo’shuv belgisi ikki string’ni konkatenatsiya qiladi degan edik.

let num1 = jQuery('#num1').val();    	
let num2 = jQuery('#num2').val();   

num1 = Number(num1);
num2 = Number(num2);

jQuery('#result').html(num1 + num2);

Keling, kiritilgan raqamlarni avval Number, ya’ni raqamga aylantiraylik. Boshqa tillardan farqli JavaScript’da integer va float – alohida tur emas, ularning o’rniga number turi ishlatiladi. JavaScriptda 10 ham number, 13.8 ham number.

Sahifamizni yangilaymiz. Raqamlarni kiritamiz. Bu safar kalkulyatorimiz biz istagandek ishladi.

SHOW VA HIDE

Keling kalkulyatorimizni rivojlantiraylik.

Agar input’larimizda raqam o’rniga biror harflar kiritsak – xato bo’ladi va ekranda javobni ko’rmaymiz.

<div id="error">Iltimos, raqam kiriting</div>

Buning uchun yana bir element yaratamiz.

#error {
	color: red;
}

Kodimizning CSS qismida esa, ushbu element matni qizil rangda bo’lishini ko’rsataylik.

Har doim ushbu div’imiz ko’rinib turishi to’g’ri emas, keling faqat xato bo’lganda ko’rinsin.

JavaScript’da NaN degan tushuncha bor. Biror ma’lumotni string turidan number turiga o’tkazayotganimizda, biror xatolik ro’y bersa (misol uchun hello so’zini number’ga o’girishning iloji yo’q), shunda, o’zgaruvchanimiz turi number’ga teng bo’lgani bilan, uning qiymati NaN’ga teng bo’ladi.

NaN – “Not A Number”, ya’ni “Raqam emas” degan ma’noni beradi.

let num1 = jQuery('#num1').val();    	
let num2 = jQuery('#num2').val();   

num1 = Number(num1);
num2 = Number(num2);

if (isNaN(num1) || isNaN(num2)) {
    jQuery('#error').show();
    jQuery('#result').html(0);
} else {
    jQuery('#error').hide();
    jQuery('#result').html(num1 + num2);
}

Raqamni NaN ga tekshirish uchun isNaN() funksiyasidan foydalanamiz. Agar raqamimiz NaN bo’lsa – ushbu funksiya true qaytaradi. Bo’lmasam – false.

Yozgan kodimizni o’qiymiz: Agar num1 raqam bo’lmasa, yoki num2 raqam bo’lmasa – error id’lik elementimizni ko’rsat va javobni 0ga teng qil. Bo’lmasam, error elementimizni yashir va num1 qo’shuv num2 qiymatini javob sifatida ko’rsat.

let onReady = function () {  
    jQuery('#error').hide();
    
    jQuery('button').on('mousedown', function() {
        jQuery(this).css('border-style', 'inset');
    });

    jQuery('button').on('mouseup', function() {
        jQuery(this).css('border-style', 'outset');    
	
        let num1 = jQuery('#num1').val();    	
        let num2 = jQuery('#num2').val();   
    
        num1 = Number(num1);
        num2 = Number(num2);

        if (isNaN(num1) || isNaN(num2)) {
            jQuery('#error').show();
            jQuery('#result').html(0);
        } else {
            jQuery('#error').hide();
            jQuery('#result').html(num1 + num2);
        }
    });
}

jQuery(onReady);

Kodimiz yaxshi ishlayapti, lekin F5 ni bosganimizda birdaniga hato ko’rsatmoqda. Buni hal qilish uchun keling onReady funksiyamiz boshlanganidan, ushbu elementni yashiraylik.

If (isNaN(num1) || isNaN(num2)) {
    jQuery('#error').fadeIn();
    jQuery('#result').html(0);
} else {
    jQuery('#error').fadeOut();
    jQuery('#result').html(num1 + num2);
}

Ohirgi urg’u: show() usuli o’rniga fadeIn() usulini ishlatsak, hide() usuli o’rniga esa – fadeOut() usulini ishlatsak – error elementimiz birdaniga yopilib-ochilmasdan, asta-sekin, animatsiya orqali ochilib-yopiladi. Ya’ni dasturimiz ishlashi chiroyliroq bo’adi.

Qiyida yozgan kodimizni to’laligicha ko’rishingiz mumkin:

<!doctype html>
<html>
<head>
    <title>jQuery</title>
    <style>
    button {
        background-color: orange;
        color: white;
        border: 2px outset orange;
    }

    input, button {
        outline: none;
    }

    #error {
        color: red;
    }
</style>

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

<script>
let onReady = function () {  
    jQuery('#error').hide();
    
    jQuery('button').on('mousedown', function() {
        jQuery(this).css('border-style', 'inset');
    });

    jQuery('button').on('mouseup', function() {
        jQuery(this).css('border-style', 'outset');    	

        let num1 = jQuery('#num1').val();    	
        let num2 = jQuery('#num2').val();   
    
        num1 = Number(num1);
        num2 = Number(num2);

        if(isNaN(num1) || isNaN(num2)) {
            jQuery('#error').fadeIn();
            jQuery('#result').html(0);
        } else {
            jQuery('#error').fadeOut();
            jQuery('#result').html(num1 + num2);
        }
    });
}

jQuery(onReady);
</script>

</head>
<body>
    <input id="num1" type="text" size="5" />
    <span>+</span>
    <input  id="num2" type="text" size="5" />
    <button type="button">=</button>
    <span id="result">0</span>
    <div id="error">Iltimos, raqam kiriting</div>
</body>
</html>

53+

“#6 – JavaScript va jQuery. Veb-dasturlash kursi” ga 5 fikr qoldirilgan

Miraziz Ergashev 27.07.2020 Javob qoldirish uchun, saytga a'zo sifatida kiring

Assalomualekum. Keyingisida vue.js haqida ham blog chiqaring. Rahmat

16+
- Akmal Kadirov Maqola avtori28.07.2020 Javob qoldirish uchun, saytga a'zo sifatida kiring
  
  Албатта, бу хакда хам дарс булади
  
  24+
Quvonchbek 03.08.2020 Javob qoldirish uchun, saytga a'zo sifatida kiring

Assalomu alaykum sizningcha Angular frameworkining kelajagi bormi? Hozirda React js va Vue js frameworklarini ishlatilish doirasi angularnikidan yuqori ekan. Shu haqida fikringiz qanaqa?

6+
- Akmal Kadirov Maqola avtori03.08.2020 Javob qoldirish uchun, saytga a'zo sifatida kiring
  
  Менимча ушбу 3 фреймворкнинг биттасини алохида ажратиш кийин. Улар бозорни учга булиб олишган. Бирини ургансангиз, иккинчисини урганволиш кийин булмайди, хаммаси бир бирига ухшайди
  
  18+
Farrux96 04.12.2020 Javob qoldirish uchun, saytga a'zo sifatida kiring

Ассалому алекум! Акмал ака Vuejs дарслигингиз качон чикади? Дарсларингизни урганиш зур кетяпти:)

14+

Fikr bildirish Javobni bekor qilish

Sharhlash uchun siz saytga kirishingiz lozim.