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

input id="num1" type="text" size="5" />
<span>+span>
<input id="num2" type="text" size="5" />
<button type="button">=button>
<span id="result">0span>
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.


<