JavaScript Darslar | O'zbekcha!

...

1.Kirish

REJA:

HTML bo'yicha boshlang'ich ko'nikmaga ega bo'lish <html> <⁄html>

CSS bo'yicha boshlang'ich ko'nikmaga ega bo'lish CSS

Kursdan asosiy maqsadi JavaScript Dasturlash tilini to'liq o'rganib olib, uning yordamida osonlik bilan responsive va zamonaviy web loyihalarni yaratishni o'rganish. Albatta kursni oxirida, JavaScriptdan foydalanib yordamida o'zimizning loyihani yaratib chiqamiz

Yuqori darajali, ozu, ram ni hisoblamaysiz. Interpretatorli | Konpilatsiya qilinmaydigan. dasturlash tili

ECMAScript spetsifikatsiyasi

Multi-Paradigma. - Hohlasangiz OOPga moslab Hohlasangiz funksional qilib kod yozsa bo'ladi.

JavaScript Client / Browser va Serverda (Node.Js) ham ishga tushirish.

O'zgaruvchi va Data types

Massivlar

Obyektlar

String, massiv, obyekt va boshqa data typelarning metodlari

Looplar (for, for of, foreach, map va hokazolar)

Shartlar (if, ternar va switch)

Funksiyalar (Odatiy va strelka funksiyalar)

OOP (prototype va class)

DOM elementlar

DOM bilan manipulyatsiya

Eventlar

Forma validatsiyasi

Yuqori darajali metodlar (massiv uchun)

Asinxron JavaScript

Promise

Fetch API

1. VS Code IDE (Live Server) (https://code.visualstudio.com/docs/?dv=win)


Auto Close Tag | Tagni avtomatik yozish

Auto Complete Tag | Taglarni avtomatik yopish

Auto Rename Tag | Taglarni avtomatik o'zgartirish

Beautify | Kodni chiroyli formatirovat qilib ko'rsatadi.

Bracket Pair Colorizer | JS Koddagi qavslarni rangga ajratib ko'rsatadi.

CSS Peek | HTML tagda qaysi CSS ga tegishli ekanini ko'rsatadi. CTRL

ESLint | JavaScriptdagi Kodni to'g'ri yozilayotganini nazorat qiladi.

JavaScript (ES6) code Snippets | Import va Export dagi kodlarni avtomatik chiqaradi.

Path autocomplete | Boshqa faylni import qilganda avtomatik

VScode-icons | Fayl iconkalarini ajratib ko'rsatadi.

2. Google Chrome Browser (https://www.google.com/chrome/)

USULLAR


Console nega kerakligining sababi, Backenddan siz biror bir narsani yubordingiz. Lekin Frontentda chiqmaganda har xil baglarni xatoliklarni tekshirish vaqtida datadan kelyaptimi yoqmi shuni tekshirish uchun kerak bo'ladi. Xatolikni topish uchun qo'llaniladi.

console.log("Bu text console logda chiqmoqda")

Console.assert()Agar birinchi argument noto'g'ri bo'lsa, konsolda (veb -konsoli) xabar va usul so'rovlar to'plamini chop etadi.

Console.clear()Konsolni tozalash

Console.count()Muayyan yorliqli usul so'rovlari sonini ko'rsatadi (usul parametrida berilgan)

Console.error() Xato xabarni ko'rsatish uchun

Console.group()Hammasini guruhlar, keyingi barcha chiqish chiziqlarini o'ng darajaga o'tkazish orqali. Guruhni tugatish uchun so'rov yuboradi groupEnd().

Console.groupCollapsed() Xabarlarning yangi guruhini yaratadi,

Console.groupEnd() Hozirgi guruhni tark etish

Console.info()E'lon. Info Formatlash uchun siz qo'shimcha parametrlarga ega belgilarni (maskalarni) ishlatishingiz mumkin.

Console.profile()Brauzerda o'rnatilgan profilerni ishga tushiradi (masalan, Firefox ishlash vositasi). Siz profil yorlig'ini belgilashingiz mumkin (ixtiyoriy).

Console.table() Jadvaldagi ma'lumotlarni jadval sifatida ko'rsatadi.

Console.time() O'tkazilgan parametrdan nomi bilan taymerni ishga tushiradi. Bir sahifada bir vaqtning o'zida 10 000 ta taymer ishlash mumkin.

Console.warn() Ogohlantirish xabarini ko'rsatadi. Formatlash uchun siz qo'shimcha parametrlarga ega Simvollarni belgilarni (maskalarni) ishlatishingiz mumkin.


‹script› alert("Men JavaScriptman") ‹/script› | Browser oynasiga xabar chiqarish.


‹script src="./script.js"›‹script› | JavaScriptni fayl ko'rinishida yaratib unga FAYLNOMI.JS nomi bilan ulanish


VAR, LET, CONST

-VAR global bo'lib, Var uchun block doirasi yoq.

-LET esa o'sha funksiya yoki shart ichida oxirgi qatorda ishlaydi.


if(3‹4){

var a = "Shart Togri"}

console.log(a);


if(3‹4){

let a = "Shart Togri"

console.log(a);}


-CONST O'zgarmaydigan o'zgaruvchini bildiradi. Bir marta e'lon qilgandan so'ng qaytib boshqa o'zgaruvchiga tenglashtira olmaymiz. Misolda Letdan farqini ko'ramiz.

let a = 5;

a = 7;

console.log(a) bu vaziyatda consoleda 7 chiqadi. JavaScript kodlarni qatorma qator o'qiydi.


const a = 5;

a = 8;

console.log(a) deb kod yozsak. Consolda constanta deb e'lon qilingan o'zgaruvchini o'zgartirishga harakat qilinilyapti deb xatolik beradi.


String, Numbers, Boolean, null, undefined, symbol

String -qator

Numbers -son

Boolean -mantiqiy

null -Bo'sh

Undefined -O'zgaruvchiga hech qanday qiymat berilmagan

symbol -Symbol


let string = "Bu yerda qator"

const raqam = 5

const kasrraq = 2.5

const mantiqamal = true yoki false

const buush = null

const qiymatyoq = undefined

const qiymatyoq1


console.log(typeof o'zgaruvchinomi) o'zgaruvchi tipni aniqlash uchun.

Komentariya bu - Izoh: Bor bir kodni yozganingizda kod haqida ma'lumotni yozib ketish kerak sababi sizning kodingizni boshqa dasturchi tushinishi yoki o'zingiz tushunmay qolishingiz mumkin. Kodni o'qilish jarayonini tezlashtirish maqsadida yoziladi.

Bir qatorli Komentariyalar ikkta slesh belgisi bilan yoziladi.

// bu bir qatorli komentariya

Ko'p qatorli Komentariyalar slesh yulduzcha va yulduzcha slesh bilan yoziladi.

/* bu ikki qatorli komentariya */


Konkatenatsiya - bu O'zgaruvchilarni bitta qatorga chiqarib beradi.

Ya'ni ikki uchta o'zgaruvchilarni bir biriga qo'shib chiqarish desak to'g'riroq bo'ladi.

Stiring - bu qator. Metodlari (Usullari)

String metodlari - bu qanaqadir vazifani, logikani bajaradigan funksiyalar hisoblanadi. Odatda bularni metod deyiladi.

Array bu - O'z ichida ko'plab o'zgaruvchilarni saqlaydigan o'zgaruvchi. ya'ni bir vaqtning o'zida bitta containerdan ko'plab o'zgaruvchilar
Arrayni o'ziga yangi o'zgaruvchi qo'shish

Arrayni manipulyatsiya qilish, qo'shimcha va boshqalar

Object bu - Obyekt, obyekt va uning hususiyatlari, Juda ko'p qo'llaniladigan o'zgaruvchi turi hisoblanadi. Biror shaxsni obyekt deb oladigan bo'lsak, ismi, familiyasi, yoshi, manzili, hobbiysi va boshqa hususiyatlari, Obyektlar kalit va qiymat ko'rinishida e'lon qilinadi.
JSON haqida

JSON bu - JavaScriptdagi objectning matn ko'rinishi va tez ma'lumot almashish turi hisoblanadi.

Serverdan Web sahifaga ma'lumot uzatishda JSONdan foydalanishimiz mumkin.

JavaScript object ma'lumotlarni JSONga o'zgartirishimiz va JSONni objectga aylantirishimiz mumkin. JSON matn ko'rinishida bo'ladi.

Asosan frontend uchun ham backend uchun ham ma'lumotlarni object ko'rinishida uzatish qulay, odatda frontend ham ma'lumot keldanda massivni ichiga solingan object ko'rinishida bo'ladi.

1 - misol: Massivni JSON formatga o'kazish

2 - misol: JSONni massivga o'kazish

Sikl bu - ma'lum bir shart (false) yolg'on bo'lib qolmaguncha bajariladigan jarayonga aytiladi.

Bu yerda x = 0; Dastlabki qiymatni nol deb qabul qiladi va siklga kirib nolni chiqaradi.

x++ (Increment-kattalashtirish) qiymatini qabul qilib keyin siklga kiradi va x = 8 dan kichik ekanligini tekshirib bitta ga oshirib siklga chiqaradi

Shu tariqa x toki sakkizga teng bo'lmaguncha siklni tekshiradi.

while sikli ham shu forga o'xshash bo'lib, faqatgina qiymadi sikldan tashqarida yoziladi.
for sikliga misol ko'raylik
for sikli yangi yozilishi
Yuqori darajali array metodlari forEach(ES6), map, filter
map metodi yangi arrayni qaytaradi.
filter metodi shart bajarilgandagi natijalarni qaytaradi

if else bu - ma'lum bir shartni tekshiradi ya'ni true va false.

Terner operatsiyasi

Ternerlar ham if bilan bir xil funksiyani bajaradi

faqat yozilishida farq qiladi

Misol
switch case

Funksiya bu - ma'lum bir vazifani bajarganda kodni qayta qayta ishlatmaslik uchun ma'lum bir qolip

OOP Bu - Obyektga mo'ljallangan dasturlash tili, ES6 dan boshlab JavaScriptda klasslar qo'shilganidan (Javascriptda klass degan tushuncha yo'q, shunchaki klass ko'rinishini olgan sintaksis) so'ng OOP ni ham qo'llash mumkin bo'ldi. Ungacha konstruktor funksiyalar degan tushunchalar bor edi.

CLASSLAR - bu OOPning asosi, CLASSLAR ham konsturktrlarning boshqacha ko'rinishi

DOM - ELEMENTLAR - WINDOW, GETELEMENTBYID, QUERYSELECTOR,

ADDEVENTLISTENER

const btn = document.querySelector('.btn')

btn.addEventListener('click', (e)=>{

e.preventDefault()

console.log("cliked");

})

const btn = document.querySelector('.btn')

btn.addEventListener('click', (e)=>{

e.preventDefault()

document.querySelector('.reg').style.background = 'rangnomi'

document.querySelector('body').classList.add('bg-rangnomi')

document.querySelector('.texts').innerHTML = '<h2>Submit bosildi</h2>'

})

const btn = document.querySelector('.btn')

btn.addEventListener('click', (e)=>{

e.preventDefault()

document.querySelector('.reg').style.background = 'rangnomi'

document.querySelector('body').classList.add('bg-rangnomi')

document.querySelector('.texts').innerHTML = '<h2>Submit bosildi</h2>'

})

const form = document.querySelector('.formclassnomi')

const printerName = document.querySelector('#idnomi')

const printerModel = document.querySelector('#idnomi')

const printerYear = document.querySelector('#idyear')

const xabar = document.querySelector('.divclassnomi')

const lists = document.querySelector('.list-group')

form.addEventListener('submit', onSubmit)

function onSubmit(e){

e.preventDefault()

if(printerName.value === '' || printerModel.value === '' || printerYear.value === ''){

xabar.style.background = 'red'

xabar.style.color = 'white'

xabar.innerHTML = '<h2>xabar</h2>'

setTimeout(()=> xabar.remove(), 2000)

} else {

const li = document.createElement('li')

li.appendChild(document.createTextNode(`

${printerName.value} : ${printerModel.value} : ${printerYear.value}`))

lists.appendChild(li)

printerName.value = ''

printerModel.value = ''

printerYear.value = ''

}

}

This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Bundan oldin HTML va CSS bo'yicha boshlang'ich ko'nikma yaxshi o'rganib olish

Videolarni etibor bilan ko'rib chiqish.

Video davomida yozilayotgan kodlarni o'zingizda ham yozib oling.

Tushunmagan va qiyin tuyilgan mavzular yoki savollarni yozib boring.

Practice, Practice va yana Practice.

1. VS Code IDE (Live Server) https://code.visualstudio.com/docs/?dv=win

2. Google Chrome Browser (https://www.google.com/chrome/)