3-amaliy ish Mavzu: jquery selektorlar,hodisalar. Jquery ui

div id="error">Iltimos, raqam kiritingdiv>
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:

<