Mavzu. JavaScript asoslari. Reja: JavaScript ssenariyli tilining xususiyatlari

HTML bilan JavaScriptni bog’lash.

HTMLda JavaScript kodi teglari orasida yoziladi.

1. 
   Sahifaning o‘zida yozish.
   

   5

   
   

2. 
   js fayldan o‘qib olish.
   

3. 
   Hodisalar yordami bilan elementning o‘ziga yozish.
   Try it
   

Natija:

innerHTML	document.getElementById('p').innerHTML = "Hello world"
innerTEXT	document.getElementById('p').innerText = "Hello world"
value	document.getElementById('age’).value = 5
document.write()
window.alert() alert()
console.log()

JavaScriptda izohlar.


Bir qatorli izoh
// Change heading:
document.getElementById("myH").innerHTML = "My First Page";
var x = 5; // Declare x, give it the value of 5

Ko‘p qatorli izoh
/*
The code below will change the heading with id = "myH"
and the paragraph with id = "myP" in my web page:
*/
document.getElementById("myH").innerHTML = "My First Page";


2. JavaScript o‘zgaruvchilari
Javascriptda o‘zgaruvchilarni e’lon qilish uchun 2015 yilgacha var kalit so‘zidan foydalanilgan. Undan so‘ng esa const va let kalit so‘rlari qo‘shildi.
Shunday qilib JavaScriptda 3ta o‘zgaruvchi bor.
Bular:

1. 
   Var – global o‘zgaruvchi
   
2. 
   Let – local o‘zgaruvchi
   
3. 
   Const – constanta o‘zgaruvchi.
   

O‘zgaruvchilarni e’lon qilish:

const pi = 3.14;
let person = "John Doe";
var answer = 'Yes I am!';
var x = 5 + 2 + 3;
var x = "John" + " " + "Doe";
var x = "5" + 2 + 3;
var x = 2 + 3 + "5";

JavaScript o‘zgaruvchilarini alohida misollar yordamida ko‘rib chiqamiz.

2.1-rasm. JavaScriptda var o‘zgaruvchiga misol.

2.2-rasm. JavaScriptda let o‘zgaruvchiga misol.

2.3-rasm. JavaScriptda const o‘zgaruvchiga misol.

3. JavaScript ma’lumotlar turlari.
JavaScript dinamik ma’lumotlar turlariga ega. Bu shuni anglatadiki, bir xil o‘zgaruvchi turli xil ma’lumotlar turlarini saqlash uchun ishlatilishi mumkin.
Quyida JavaScriptning ma’lumotlar turlari keltirilgan.

JavaScriptda 3 xil ma’lumotlar turlari mavjud.







2. Satrli ma’lumotlar

1. Mantiqiy ma’lumotlar

3. Sonli ma’lumotlar


JavaScriptda mantiqiy ma’lumotlar

Mantiqiy ma’lumotlar faqat ikkita qiymatga ega bo‘lishi mumkin. Bular true yoki false.

3.1-jadval

Mantiqiy amallar	Ta’rifi
&	AND
|	OR
~	NOT
^	XOR
<<	left shift
>>	right shift
>>>	unsigned right shift

3.1-rasm. JavaScriptda mantiqiy ma’lumotlarga misol.

JavaScriptda Satrli ma’lumotlar

Satrlar “…” (qo‘shtirnoqlar) bilan beriladigan belgilar qatoridir. Satrlar tirnoq bilan yoziladi. Bunda bitta yoki ikkita tirnoqdan foydalanish mumkin (3.2-jadval).

3.2-jadval

“Helo”, 'Hello', ‘Hello ${x}'	Strlarni e’lon qilish
s.length	Satr uzunligi
var n = str.includes(“world”);	Satr ichida satr mavjudligiga tekshirish (true | false)
var n = str.indexOf(“abc”)	Satrning joylashgan o‘rnini izlash (-1 | position)
var rep = str.repeat(2)	satrning nusxalari sonini ko‘paytirish
var res = str.replace(“Microsoft”, “W3Schools”);	Satr qiymatini o‘zgartirish
var res = str.split(“ ”);	Satrni bo‘laklarga bo‘lish
res = res.join(“ ”);	Massivni birlashtirish

3.2-rasm. JavaScriptda satrli ma’lumotlarga misol.

JavaScriptda sonli ma’lumotlar

Sonlar var yoki let kalit so‘zlari bilan e’lon qilinadi.

3.3-jadval

num.toString(x)	Sonni x lik sanoq sistemasiga satr ko‘rinishda o‘tiradi. (123).toString(2); //1111011
toFixed()	Haqiqiy sonni x aniqlikda chiqarish uchun foydalaniladi. x.toFixed(6); // returns 9.656000
Number() parseInt() parseFloat()	o‘zgaruvchini boshqa turdan son ko‘rinishiga o‘tkazish uchun foydalaniladi.

JavaScriptda faqat bitta turdagi raqamlar mavjud. Raqamlar o‘nli kasrlar bilan yoki o‘nlik kasrlarsiz yozilishi mumkin (3.3-rasm):

3.3-rasm. JavaScriptda sonli ma’lumotlarga misol.
4. JavaScriptda massivlar va operatorlar.
Massiv – bu bir nechta qiymatga ega bo‘lishi mumkin bo‘lgan maxsus o‘zgaruvchi. Massiv bitta nom ostida ko‘p qiymatlarni saqlashi mumkin va indeks raqamiga murojaat qilish orqali qiymatlarni chiqarish mumkin.
Sintaksis:
const array_name = [item1, item2, ...];
Massivlarni const kalit so‘zi bilan e’lon qilinadi.

Eslatma: Massiv indekslari 0 dan boshlanadi.
[0] birinchi element, [1] ikkinchi element hisoblanadi.



4.1-rasm. JavaScriptda massivlar.

4.2-rasm. JavaScriptda indeksli massivlar.

JavaScriptda operatorlar

Tayinlash operatorlari JavaScript o‘zgaruvchilariga qiymatlarni tayinlaydi. Qo‘shishni tayinlash operatori ( += ) o‘zgaruvchiga qiymat qo‘shadi. Tayinlash operatori ( = ) o‘zgaruvchiga qiymat beradi.

4.1-jadval
Tayinlash operatorlari.

Operator	Misol	Kengaytmasi
=	x = y	x = y
+=	x += y	x = x + y
-=	x -= y	x = x - y
*=	x *= y	x = x * y
/=	x /= y	x = x / y
%=	x %= y	x = x % y
**=	x **= y	x = x ** y

Arifmetik operatorlar raqamlar ustida arifmetikani bajarish uchun ishlatiladi.

4.2-jadval
Arifmetik operatorlar.

Operatorlar	Qisqa ko‘rinishi	Ta’rif
+	x +=	Qo‘shish
-	x -=	Ayirish
*	x *=	Ko‘paytirish
**	x **=	Daraja
/	x /=	bo‘lish
%	x %=	qoldiq
--	x --	Decrement(kamaytirish)
++	x ++	Increment(oshirish)

Bir xil tipli ma’lumotlar qo‘shilganda umumiy qiymat yoziladi, har xil turdagi ma’lumotlari qo‘shganda esa birinchi ma’lumot ketidan ikkinchi ma’lumot turi yozib qo‘yiladi holos. Quyidagi misolda aynan shu ko‘rsatilgan (4.3-rasm):

4.3-rasm. JavaScriptda satr va sonli ma’lumotlarni qo‘shish.

4.3-jadval

Taqqoslash operatorlari

Ko‘rinishi___Ta’rifi__=='>Ko‘rinishi	Ta’rifi
==	teng(equa)
===	Qiymati va turi bo‘yicha teng
!=	Teng emas
!==	Qiymati va turi bo‘ycha teng emas
>	katta
<	kichik
>=	Katta yoki teng
<=	Kichik yoki teng
:?	Uchinchi operator

4.4-jadval

Mantiqiy operatorlar

Ko‘rinishi	Ta’riflari
&&	AND (mantiqiy va)
||	OR (mantiqiy yoki)
!	NOT (mantiqiy inkor)

Savol va topshiriqlar.

1. 
   JavaScript ssenariyli tilining xususiyatlari haqida gapirib bering.
   
2. 
   JavaScriptning dastlabki nomi nima?
   
3. 
   HTML bilan JavaScriptni bog‘lash usullarini ko‘rsatib bering.
   
4. 
   JavaScriptda nechta o‘zgaruvchi mavjud?
   
5. 
   JavaScriptda nechta ma’lumotlar turlari mavjud?
   
6. 
   Mantiqiy ma’lumotlar qanday qiymatlarga ega?
   
7. 
   Satrli ma’lumotlarga misol keltiring.
   
8. 
   JavaScriptda massivlar qanday e’lon qilinadi?
   
9. 
   Indeksli massivga misol keltiring.
   
10. 
    Arifmetik operatorlari sanab bering.
    
11. 
    Har xil tipli ma’lumotlar qanday qo‘shiladi?