JavaScript

JS - JavaScript

Containers

Container bu õzida ma'lumot saqlovchi quti. Containerlar var let const kalit sõzlari orqali hosil qilinadi.

let name="Mansurbek"
O'zgaruvchan C.
var age=15
Aniqlanmagan
const from="Uzbekistan"
Asl qiymati õzgarmaydigan

Ma'lumot turlari

String
Matn
Number
Raqam
Boolen
Mantiqiy (true/false)
Array
Ro'yhat
Object
Luğat
JSON
JSON
undefined
Aniqlanmagan
null
Qiymatsiz

Kiritish va chiqarish

var name=prompt("Ismingiz: ")
Kiritish
alert("Salom, "+name)
Chiqarish (Qalqib chiquvchi oyna)
console.log(`Salom, ${name}`)
Chiqarish (Consol oynasi)

Strings, Matnlar bilan ishlash

let txt="Mening ismim Shokir. Men Õzbekistonlikman. Yoshim 19 da. Hozirgi kunda TATU talabasiman."
Matn
txt.split('☆')
Matnni belgi(☆) bor joyidan bõlib arrayga aylantiruvchi property.
txt.repeat(10)
Matnni takrorlash
.toUpperCase()
Elementni tõliq bosh harfga õtkazish ®
.toLowerCase()
Elementni tõliq kichik harfga õtkazish ®
.includes('TATU')
Matn ichida element borligini tekshirish ®
.slice(¹0,²5)
Qirqish ¹(dan), ²(gacha) ®
.length
Belgilar soni ®
typeof txt
Element turini aniqlash ®

Array, Rõyhatlar bilan ishlash

var names=['Orif','Duma','Robiya','Kimsan']
Rõyhat
names.pop()
R. oxiridan bir element õchirish
names.push('Shomurod')
R. oxiriga bir element qõshish
names.shift()
R. boshidan bir element õchirish
names.unshift()
R. boshiga element qõshish
names.concat(name2)
2ta R.ni birlashtirish.
Buni orniga oddiy "+" ham bolaveradi😆
names.join('-')
R.da har bir sõz oxiriga belgi qõyish
const [oqsoqol,buva]=names;
R. dan qiymat olib õzgaruvchiga saqlash
names[0]
R.dan ma'lumot chiqarish[indeks orqali]

Object,Lug’atlar bilan ishlash

let User={
  name: 'Muzaffar',
  lastName: 'Shomurodov',
  age: 10,
  from: 'Uzbekistan',
  address:{
    street: 'Olmazor',
    village: 'Kõtarma',
    city: 'Tashkent'
  }
}

Lug’at
User.name="Olimjon"
L. ichidagi data(name)ni õzgartirish. ⚠Agarda data(name) yõq bõlsa, qõshish.
User.name
Object ichidagi datani olish
User.address.city
Object ichidagi data ichidagi datani olish
const {name}=User
Object ichidagi datani doimiy kontainerga aylantirib, chiqarib olish
const {address{city}}=User
Object ichidagi data ichidagi datani doimiy kontainerga aylantirib, chiqarib olish
Object.assign(User,User2)
2ta Objectni bir-biriga qõshish
"name" in User
Object ichida key borligini tekshirish
Object.keys(User)
Object key(kalit)larini olish
Object.values(User)
Object value(qiymat)larini olish
const {name="Homit"}=User
Default qiymat berish

JSON ma'lumot turi bilan ishlash

JSON.stringify(¹User)
JSON yasash.
1.Qiymatga har qanday ma'lumot turini berish mumkin
JSON.parse(User)
JSONdan chiqarish

Loop, Aylanmalar bilan ishlash
(for loop, while loop)

for(var ¹i=0; ²i=<10; ³i++){   
   ⁴alert(i)
}

for loop

Container
Shart
Vazifa
Amal

let ¹i=0;
while(²i==10){
    ³console.log(i)
    ⁴i+=1
    }

while loop

Container
Shart
Amal
AmalVazifa

while(true){•••}
Cheksiz loop

for(let i=0; i<names; i++){  
    console.log(names[i])
    }

for loop orqali rõyhat elementlarini chiroyli chiqarish

for(let e of names){  
    console.log(e)
    }

Yuqoridagini soddarog’i

Shart operatorlari
(if, else, else if)

¹let name=prompt('Ismingiz: ')
²if(³name=='admin'){
    ⁴alert('Salom, hurmatli Admin.')
    }else if(name!=''){
      alert('Hush kelibsiz!'+name)
    }else{
      alert("Iltimos, ism kiriting!!!") 
    }

Shart operatori

Continer
Operator
Shart
Shart bajarilsa bajariladigan amal

if - Agar
else if - Aks holda,agar
else - Aks holda
¹let reply=prompt("Javob: ")
let ball=²reply=="A" ³? ⁴100:50
Qisqa shart

Continer
Shart
Operator
Amal

Funksiyalar

Funksiyalar 2 hil usulda yaratiladi, birinchisi function kalit sõzi bilan, ikkinchisi ()=> belgilar bilan.
Misol:
1

function ¹SalomBer(²ism){
      ³alert('Assalomu alaykum '+ism)
      }
      ⁴SalomBer("Alisher");

Funktsiya nomi
Qabul qiluvchi qiymati
Vazifa
Funktsiya chaqirish(ishlatish)

var ¹SalomBer=(²ism)=>{
      ³alert('Assalomu alaykum '+ism)
      }
      ⁴SalomBer('Temur')

lekin ikkalsi ham bir hil natija beradi.

function SalomBer(ism='User'){
      return 'Assalomu alaykum '+ism   
      }
      console.log(SalomBer('Temur'))

F.ga default qiymat berish

function kalk(...son){ 
  alert(son)
  }

kalk(4,3,'salom')

F.ni cheksiz qiymat qabul qiladigan qilish

DOM methods

let body=document.body
Document ichidan element olish
.bodyTana qismini
.imagesRasmlarni
.titleSahifa nomini
.linkLinklarni
⚠CSS dan keluvchi elementlarni olib bo'lmaydi
let N=document.getElementById('#id')
E.ni faqat ID orqali olish
let N=document.querySelctor('#ID')
E. olish. ID, .Class yoki tag nomi orqali
let N=document.querySelctorAll('h3')
E.lar kõp bõlsa, hammasini olish

let a=0;

let N=document.querySelectorAll('h3');

N.forEach(function(elements¹){
   elements.innerHTML=a+=1;²
})

Harbir element uchun xususiyat yozish

Referens
Amal

let N=document.createElement('div')
E. yaratish
let N=document.createTextNode('txt')Matnli e. yaratish
var div=document.querySelector('div');
let txt=document.createTextNode('Hello div')
div.append(txt)
E.ni belgilagan joyga qõshish
let element=document.createElement('img');
let div=document.querySelector('div');
let p=document.querySelector('p');
div.insertBefore(element,p)
Yangi e.(img)ni obyekt(div) ichidagi eski e.(p)dan oldin qõyish
N.remove()
E.ni õchirish
N.innerHTML="Text"
E. matnini õzgartirish
N.id="1859362"
E.ga id berish
N.hasAttribute('class')
Atribut borligini tekshirish(true/false)
N.getAttribute('style')
E. atributini qiymatini olish
N.setAttribute('¹class','²Class1202')
E.ga atribut birlashtirish

Atribut nomi
Atribut qiymati

N.removeAttribute('id')
Atribut õchirish
.after('txt')
E. matnini yozish
.parentNode; E.ni qaysi obyekt ichida joylashganini aniqlash
.textContent;

E. ichidagi matnini aniqlash
.tagName;
E. tag nomini aniqlash
.className;
E. Class nomini aniqlash
.id
E. IDsi
.clientWidth || .clientHeight
E. eni va bõyini aniqlash
.baseURI
E.turgan document url manzili

Event, Hodislar bilan ishlash

let button=document.querySelector('button');

button.addEventListener('¹click',²()=>{
  ³alert('Tugma bosildi.')
})

Sahifada biror hodisa sodir bõlganida unga javob qaytaruvchi maxsus funktsiya yaratish.

Hodisa
Funktsiya
Amal

Hodisalar

'click'Bosilganda
'load'Yuklanganda
'beforunload'Sayt yopilishidan oldin
'focus'E. ustiga cursor olib borilganda
'blur''focus'ni teskarisi
'dblclick'ikki marta bosilganda
'contextmenu'Sichqoncha õng tugmasi bos.
'keypress'"Enter" bosilganda
'change'E. õzgarganda
'mauseout'Cursor e.dan tashqari chiqganda
'mauseover'Cursor e. ichiga kirganda
'resize'E. õlchami õzgarsa
'input'E. ma'lumot qabul qilayotganda