🧡🧡🧡 HAPPY CODING 🧡🧡🧡
Author:
Asabeneh Yetayeh
January, 2022
- JavaScript-ning 30 kuni
- 📔 1-kun
- 💻 1-kun: Mashqlar
JavaScript-ning 30 kuni dasturlash tanlovida ishtirok etishga qaror qilganingiz bilan tabriklaymiz . Ushbu tanlovda siz JavaScript dasturchisi bo'lish uchun kerak bo'lgan hamma narsani va umuman dasturlash tushunchasini o'rganasiz. Tanlov yakunida siz 30DaysOfJavaScript dasturlash topshirigʻini bajarish sertifikatiga ega boʻlasiz. Agar sizga yordam kerak bo'lsa yoki boshqalarga yordam berishni xohlasangiz telegram guruhiga qo'shilishingiz mumkin .
JavaScript-ning 30 kuni dasturlash tanlovi yangi boshlanuvchilar va ilg'or JavaScript dasturchilari uchun qo'llanmadir. JavaScript-ga xush kelibsiz. JavaScript - bu internet tili. Menga JavaScript-dan foydalanish va o‘rgatish yoqadi va siz ham shunday qilasiz degan umiddaman.
Ushbu bosqichma-bosqich JavaScript sinovida siz insoniyat tarixidagi eng mashhur dasturlash tili bo'lgan JavaScript-ni o'rganasiz. JavaScript veb-saytlarga interaktivlikni qo'shish, mobil ilovalar, ish stoli ilovalari, o'yinlar ishlab chiqish uchun ishlatiladi va hozirda JavaScript mashinani o'rganish va AI uchun ishlatilishi mumkin . JavaScript (JS) so'nggi yillarda mashhurligi oshdi va ketma-ket olti yil davomida etakchi dasturlash tili bo'lib kelmoqda va Github'da eng ko'p ishlatiladigan dasturlash tilidir.
Ushbu muammoni bajarish uchun dasturlash bo'yicha oldindan bilim talab etilmaydi. Sizga faqat kerak:
- Motivatsiya
- Kompyuter
- Internet
- Brauzer
- Kod muharriri
Ishonamanki, sizda dasturchi, kompyuter va Internet bo'lish uchun motivatsiya va kuchli istak bor. Agar sizda ular bo'lsa, demak sizda boshlash uchun hamma narsa bor.
Sizga hozir Node.js kerak emas, lekin keyinroq kerak bo'lishi mumkin. node.js ni o'rnating.
Yuklab olingandan so'ng, ikki marta bosing va o'rnating
Qurilma terminalimiz yoki buyruq satrini ochish orqali mahalliy mashinamizda tugun o'rnatilganligini tekshirishimiz mumkin.
asabeneh $ node -v
v12.14.0Ushbu qo'llanmani yaratishda men Node 12.14.0 versiyasidan foydalanardim, lekin hozir yuklab olish uchun tavsiya etilgan Node.js versiyasi v14.17.6.
U erda ko'plab brauzerlar mavjud. Biroq, men Google Chrome-ni tavsiya qilaman.
Agar sizda hali mavjud bo'lmasa , Google Chrome brauzerini o'rnating . Biz brauzer konsolida kichik JavaScript kodini yozishimiz mumkin, lekin biz ilovalarni ishlab chiqish uchun brauzer konsolidan foydalanmaymiz.
Siz Google Chrome konsolini brauzerning yuqori oʻng burchagidagi uchta nuqtani bosish, “ Qoʻshimcha vositalar” -> “Ishlab chiquvchi asboblar ” ni tanlash yoki klaviatura yorligʻidan foydalanish orqali ochishingiz mumkin. Men yorliqlardan foydalanishni afzal ko'raman.
Chrome konsolini klaviatura yorlig'i yordamida ochish uchun.
Mac
Command+Option+J
Windows/Linux:
Ctl+Shift+J
Google Chrome konsolini ochganingizdan so'ng, belgilangan tugmalarni o'rganishga harakat qiling. Biz ko'p vaqtimizni Konsolda o'tkazamiz. Konsol - bu JavaScript kodingiz ketadigan joy. Google Console V8 dvigateli JavaScript kodingizni mashina kodiga o'zgartiradi. Keling, Google Chrome konsolida JavaScript kodini yozaylik:
Biz har qanday JavaScript kodini Google konsolida yoki istalgan brauzer konsolida yozishimiz mumkin. Biroq, bu muammo uchun biz faqat Google Chrome konsoliga e'tibor qaratamiz. Konsolni oching:
Mac
Command+Option+I
Windows:
Ctl+Shift+IBirinchi JavaScript kodimizni yozish uchun biz o'rnatilgan console.log() funksiyasidan foydalandik . Biz argumentni kirish ma'lumotlari sifatida topshirdik va funktsiya chiqishni ko'rsatadi. Biz console.log() funksiyasida “Salom, dunyo” ni kiritish maʼlumotlari yoki argument sifatida oʻtkazdik.
console.log('Hello, World!')console.log() funksiyasi vergul bilan ajratilgan bir nechta parametrlarni qabul qilishi mumkin . Sintaksis quyidagicha ko'rinadi: console.log(param1, param2, param3)
console.log('Hello', 'World', '!')
console.log('HAPPY', 'NEW', 'YEAR', 2022)
console.log('Welcome', 'to', 30, 'Days', 'Of', 'JavaScript')Yuqoridagi parcha kodidan ko'rinib turibdiki, console.log() bir nechta argumentlarni qabul qilishi mumkin.
Tabriklaymiz! Siz birinchi JavaScript kodingizni console.log() yordamida yozdingiz .
Kodimizga sharhlar qo'shamiz. Kodni yanada o'qilishi va bizning kodimizda izohlar qoldirish uchun sharhlar juda muhimdir. JavaScript bizning kodimizning sharh qismini bajarmaydi. JavaScript-da, JavaScript-da // bilan boshlangan har qanday matn qatori sharhdir va bu /* */ kabi o'ralgan har qanday narsa ham sharhdir.
Misol: Bir qatorli izoh
// Bu birinchi izoh // Bu ikkinchi izoh // Men bitta qatorli izohman
Misol: Ko'p qatorli sharh
/* Bu ko'p qatorli sharh Ko'p qatorli sharhlar bir nechta satr olishi mumkin JavaScript — internet tili */
Dasturlash tillari inson tillariga o'xshaydi. Ingliz yoki boshqa ko'plab tillar mazmunli xabarni etkazish uchun so'zlar, iboralar, jumlalar, qo'shma jumlalar va boshqalardan foydalanadi. Sintaksisning ingliz tilidagi ma'nosi tilda yaxshi tuzilgan jumlalarni yaratish uchun so'zlar va iboralarni tartibga solishdir . Sintaksisning texnik ta'rifi - bu kompyuter tilidagi bayonotlar tuzilishi. Dasturlash tillarida sintaksis mavjud. JavaScript - bu dasturlash tili va boshqa dasturlash tillari kabi uning o'ziga xos sintaksisi mavjud. Agar biz JavaScript tushunadigan sintaksisni yozmasak, u turli xil xatolarni keltirib chiqaradi. Keyinchalik JavaScript xatolarining har xil turlarini ko'rib chiqamiz. Hozircha sintaksis xatolarini ko'rib chiqamiz.
Men ataylab xato qildim. Natijada, konsol sintaktik xatolarni oshiradi. Aslida, sintaksis juda ma'lumotli. Qaysi turdagi xatolikka yo'l qo'yilganligi haqida xabar beradi. Xato haqida fikr-mulohaza qo'llanmasini o'qib, biz sintaksisni to'g'irlashimiz va muammoni hal qilishimiz mumkin. Dasturdagi xatolarni aniqlash va yo'q qilish jarayoni disk raskadrovka deb ataladi. Keling, xatolarni tuzatamiz:
console.log('Hello, World!')
console.log('Hello, World!')Hozirgacha biz console.log() yordamida matnni qanday ko'rsatishni ko'rdik . Agar biz matn yoki satrni console.log() yordamida chop etayotgan bo'lsak, matn bitta qo'shtirnoq, qo'sh qo'shtirnoq yoki teskari tirnoq ichida bo'lishi kerak. Misol:
console.log('Hello, World!')
console.log("Hello, World!")
console.log(`Hello, World!`)Keling, raqamli ma'lumotlar turlari uchun Google Chrome konsolida console.log() yordamida JavaScript kodlarini yozishni ko'proq mashq qilaylik . Matnga qo'shimcha ravishda biz JavaScript-dan foydalanib matematik hisoblarni ham amalga oshirishimiz mumkin. Keling, quyidagi oddiy hisob-kitoblarni qilaylik. Konsol to'g'ridan-to'g'ri console.log() funktsiyasisiz argumentlarni qabul qilishi mumkin. Biroq, u ushbu kirishga kiritilgan, chunki bu qiyinchilikning aksariyati funksiyadan foydalanish majburiy bo'lgan matn muharririda amalga oshiriladi. Siz to'g'ridan-to'g'ri konsoldagi ko'rsatmalar bilan o'ynashingiz mumkin.
console.log(2 + 3) // Qo'shish
console.log(3 - 2) // Ayirish
console.log(2 * 3) // Ko'paytirish
console.log(3 / 2) // Bo'lish
console.log(3 % 2) // Modul-qoldiq topish
console.log(3 ** 2) // Darajaga ko'tarish 3 ** 2 == 3 * 3Kodlarimizni brauzer konsolida yozishimiz mumkin, lekin bu kattaroq loyihalar uchun ishlamaydi. Haqiqiy ish muhitida ishlab chiquvchilar o'z kodlarini yozish uchun turli xil kod muharrirlaridan foydalanadilar. Ushbu JavaScript-ning 30 kuni sinovida biz Visual Studio kodidan foydalanamiz.
Visual studio kodi juda mashhur ochiq manbali matn muharriri. Men Visual Studio Code - ni yuklab olishni tavsiya qilaman , lekin agar siz boshqa muharrirlarni qo'llab-quvvatlasangiz, o'zingizda mavjud bo'lgan narsalarni kuzatib boring.
Agar siz Visual Studio kodini o'rnatgan bo'lsangiz, undan foydalanishni boshlaymiz.
Visual Studio kodini uning belgisini ikki marta bosish orqali oching. Uni ochganingizda, siz bunday interfeysga ega bo'lasiz. Belgilangan piktogramma bilan ishlashga harakat qiling.
JavaScript-ni veb-sahifaga uch xil usulda qo'shish mumkin:
- Inline script
- Internal script
- External script
- Multiple External scripts
Quyidagi bo'limlar veb-sahifangizga JavaScript kodini qo'shishning turli usullarini ko'rsatadi.
Ish stolida yoki istalgan joyda loyiha papkasini yarating, uni 30DaysOfJS deb nomlang va loyiha papkasida index.html faylini yarating. Keyin quyidagi kodni joylashtiring va uni brauzerda oching, masalan, Chrome .
<!DOCTYPE html>
<html>
<head>
<title>30DaysOfScript:Inline Script</title>
</head>
<body>
<button onclick="alert('Welcome to 30DaysOfJavaScript!')">Click Me</button>
</body>
</html>Endi siz birinchi inline skriptingizni yozdingiz. Biz alert() o'rnatilgan funksiyasidan foydalanib qalqib chiquvchi ogohlantirish xabarini yaratishimiz mumkin .
Ichki skript boshida yoki tanasida yozilishi mumkin , lekin uni HTML hujjatining tanasiga qo'yish afzalroqdir. Birinchidan, sahifaning bosh qismiga yozamiz.
<!DOCTYPE html>
<html>
<head>
<title>30DaysOfScript:Internal Script</title>
<script>
console.log('Welcome to 30DaysOfJavaScript')
</script>
</head>
<body></body>
</html>Ko'pincha biz ichki skriptni shunday yozamiz. Tana qismida JavaScript kodini yozish eng maqbul variant hisoblanadi. console.log() dan olingan ma'lumotlarni ko'rish uchun brauzer konsolini oching.
<!DOCTYPE html>
<html>
<head>
<title>30DaysOfScript:Internal Script</title>
</head>
<body>
<button onclick="alert('Welcome to 30DaysOfJavaScript!');">Click Me</button>
<script>
console.log('Welcome to 30DaysOfJavaScript')
</script>
</body>
</html>console.log() dan olingan ma'lumotlarni ko'rish uchun brauzer konsolini oching.
Ichki skriptga o'xshab, tashqi skript havolasi sarlavhada yoki tanada bo'lishi mumkin, lekin uni asosiy qismga qo'yish afzaldir. Birinchidan, .js kengaytmali tashqi JavaScript faylini yaratishimiz kerak. .js kengaytmasi bilan tugaydigan barcha fayllar JavaScript fayllaridir. Loyiha katalogingiz ichida introduction.js nomli fayl yarating va quyidagi kodni yozing va ushbu .js faylini tananing pastki qismiga havola qiling.
console.log('Welcome to 30DaysOfJavaScript')Boshdagi tashqi skriptlar :
<!DOCTYPE html>
<html>
<head>
<title>30DaysOfJavaScript:External script</title>
<script src="introduction.js"></script>
</head>
<body></body>
</html>Tanadagi tashqi skriptlar :
<!DOCTYPE html>
<html>
<head>
<title>30DaysOfJavaScript:External script</title>
</head>
<body>
<!-- it could be in the header or in the body -->
<!-- Here is the recommended place to put the external script -->
<script src="introduction.js"></script>
</body>
</html>console.log() chiqishini ko'rish uchun brauzer konsolini oching.
Shuningdek, biz bir nechta tashqi JavaScript fayllarini veb-sahifaga ulashimiz mumkin. 30DaysOfJS jildida helloworld.js faylini yarating va quyidagi kodni yozing.
console.log('Hello, World!')<!DOCTYPE html>
<html>
<head>
<title>Multiple External Scripts</title>
</head>
<body>
<script src="./helloworld.js"></script>
<script src="./introduction.js"></script>
</body>
</html>main.js faylingiz boshqa barcha skriptlar ostida bo'lishi kerak . Buni eslab qolish juda muhimdir.
JavaScript va boshqa dasturlash tillarida har xil turdagi ma'lumotlar mavjud. Quyida JavaScript-ning ibtidoiy ma'lumotlar turlari mavjud: String, Number, Boolean, undefined, Null va Symbol .
- Butun sonlar: Butun (salbiy, nol va musbat) sonlar Misol: ... -3, -2, -1, 0, 1, 2, 3 ...
- Float-nuqtali raqamlar: O'nlik raqam Misol ... -3,5, -2,25, -1,0, 0,0, 1,1, 2,2, 3,5 ...
Ikkita bitta qoʻshtirnoq, qoʻsh qoʻshtirnoq yoki teskari belgilar orasidagi bir yoki bir nechta belgilar toʻplami. Misol:
'Asabeneh'
'Finlyandiya'
'JavaScript - chiroyli dasturlash tili'
'Men o\'qitishni yaxshi ko\'raman'
'Birinchi kun sizga yoqadi degan umiddaman'
'Biz teskari belgidan foydalanib qator yaratishimiz ham mumkin'
'String birdek kichik bo\'lishi mumkin ko\'p sahifalar kabi katta belgi'Mantiqiy qiymat True yoki False hisoblanadi. Har qanday taqqoslashlar mantiqiy qiymatni qaytaradi, bu haqiqiy yoki noto'g'ri.
Mantiqiy ma'lumotlar turi haqiqiy yoki noto'g'ri qiymatdir.
Misol:
true // agar yorug'lik yoqilgan bo'lsa, qiymat rost
false // agar chiroq o'chirilgan bo'lsa, qiymat noto'g'riJavaScript-da, agar biz o'zgaruvchiga qiymat bermasak, qiymat aniqlanmagan. Bunga qo'shimcha ravishda, agar funktsiya hech narsa qaytarmasa, u aniqlanmagan holda qaytariladi.
let firstName
console.log(firstName) // aniqlanmagan, chunki u hali qiymatga tayinlanmaganJavaScript-da null bo'sh qiymatni bildiradi.
let emptyValue = nullMuayyan o'zgaruvchining ma'lumotlar turini tekshirish uchun biz typeof operatoridan foydalanamiz. Quyidagi misolga qarang.
console.log(typeof 'Asabeneh') // string
console.log(typeof 5) // number
console.log(typeof true) // boolean
console.log(typeof null) // object type
console.log(typeof undefined) // undefinedJavaScript-da sharhlash boshqa dasturlash tillariga o'xshashligini unutmang. Sharhlar sizning kodingizni yanada o'qilishi uchun muhim ahamiyatga ega. Fikr bildirishning ikki yo'li mavjud:
- Bir qatorli sharhlash
- Ko'p qatorli sharhlash
// kodning o'zini bitta izoh bilan izohlash
// let firstName = 'Asabeneh'; bitta qatorli izoh
// let lastName = 'Yetayeh'; bitta qatorli sharhKo'p qatorli sharhlar:
/*
let location = 'Xelsinki';
yosh = 100;
let isMarried = rost;
Bu ko'p qatorli sharh
*/O'zgaruvchilar ma'lumotlar konteyneridir . O'zgaruvchilar ma'lumotlarni xotira joyida saqlash uchun ishlatiladi . O'zgaruvchi e'lon qilinganda, xotira joylashuvi zahiraga olinadi. O'zgaruvchi qiymatga (ma'lumotlarga) tayinlanganda xotira maydoni shu ma'lumotlar bilan to'ldiriladi. O'zgaruvchini e'lon qilish uchun biz var , let yoki const kalit so'zlaridan foydalanamiz.
Boshqa vaqtda o'zgaruvchan o'zgaruvchi uchun biz let dan foydalanamiz . Agar ma'lumotlar umuman o'zgarmasa, biz const dan foydalanamiz . Misol uchun, PI, mamlakat nomi, tortishish o'zgarmaydi va biz const dan foydalanishimiz mumkin . Biz bu tanlovda var dan foydalanmaymiz va uni ishlatishingizni tavsiya etmayman. Bu o'zgaruvchini e'lon qilishning xatoga moyil usuli bo'lib, unda juda ko'p oqish mavjud. Var, let va const haqida boshqa bo‘limlarda (ko‘lamda) batafsil to‘xtalamiz. Hozircha yuqoridagi tushuntirish yetarli.
Yaroqli JavaScript oʻzgaruvchi nomi quyidagi qoidalarga amal qilishi kerak:
- JavaScript o'zgaruvchisi nomi raqam bilan boshlanmasligi kerak.
- JavaScript oʻzgaruvchi nomi dollar belgisi va pastki chiziqdan tashqari maxsus belgilarga ruxsat bermaydi.
- JavaScript oʻzgaruvchisi nomi camelCase konventsiyasiga amal qiladi.
- JavaScript o'zgaruvchisi nomida so'zlar orasida bo'sh joy bo'lmasligi kerak.
Quyida yaroqli JavaScript oʻzgaruvchilariga misollar keltirilgan.
firstName
lastName
country
city
capitalCity
age
isMarried
first_name
last_name
is_married
capital_city
num1
num_1
_num_1
$num1
year2022
year_2022Ro'yxatdagi birinchi va ikkinchi o'zgaruvchilar JavaScript-da e'lon qilishning camelCase konventsiyasiga amal qiladi. Ushbu materialda biz camelCase o'zgaruvchilaridan foydalanamiz.
Yaroqsiz o'zgaruvchilarga misol:
first-name
1_num
num_#_1Keling, har xil turdagi ma'lumotlarga ega o'zgaruvchilarni e'lon qilaylik. O'zgaruvchini e'lon qilish uchun o'zgaruvchi nomidan oldin let yoki const kalit so'zidan foydalanishimiz kerak . O'zgaruvchi nomidan keyin biz tenglik belgisini (tayinlash operatori) va qiymatni (tayinlangan ma'lumot) yozamiz.
// Syntax
let nameOfVariable = valueE'lon qilingan o'zgaruvchilarga misollar
// Har xil turdagi ma'lumotlarning turli o'zgaruvchilarini e'lon qilish
let firstName = 'Asabeneh' // shaxsning ismi
let lastName = 'Yetayeh' // shaxsning familiyasi
let country = 'Finland' // country
let city = 'Helsinki' // poytaxt
let age = 100 // yil bo'yicha yosh
let isMarried = true
console.log(firstName, lastName, country, city, age, isMarried)Asabeneh Yetayeh Finland Helsinki 100 true// Raqamli qiymatlar bilan o'zgaruvchilarni e'lon qilish
let age = 100 // yil bo'yicha yosh
const gravity = 9.81 // yerning tortishish kuchi m/s2
const boilingPoint = 100 // suvning qaynash nuqtasi, °C
const PI = 3.14 // geometrik doimiy
console.log(gravity, boilingPoint, PI)9.81 100 3.14// O'zgaruvchilar bir qatorda vergul bilan ajratilgan holda e'lon qilinishi ham mumkin
let name = 'Asabeneh', // shaxs nomi
job = 'teacher',
live = 'Finland'
console.log(name, job, live)Asabeneh teacher Finland01-Day papkasida index.html faylini ishga tushirganingizda , buni olishingiz kerak:
🌕 Siz ajoyibsiz! Siz hozirgina 1-kuni yakunladingiz va siz buyuklik sari yo'ldasiz. Endi miyangiz va mushaklaringiz uchun bir nechta mashqlarni bajaring.
-
Bitta qatorli sharh yozing, unda sharhlar kodni o'qilishi mumkin bo'lishi mumkin
-
“ 30DaysOfJavaScript-ga xush kelibsiz” degan yana bitta izoh yozing
-
Ko'p qatorli sharh yozing, unda sharhlar kodni o'qish mumkin, qayta foydalanish oson va ma'lumotli qiladi
-
variable.js faylini yarating va o'zgaruvchilarni e'lon qiling va string, mantiqiy, aniqlanmagan va null ma'lumotlar turlarini belgilang
-
Datatypes.js faylini yarating va turli maʼlumotlar turlarini tekshirish uchun JavaScript typeof operatoridan foydalaning. Har bir o'zgaruvchining ma'lumotlar turini tekshiring
-
To'rtta o'zgaruvchini qiymatlarsiz e'lon qiling
-
Belgilangan qiymatlar bilan to'rtta o'zgaruvchini e'lon qiling
-
Ismingiz, familiyangiz, oilaviy ahvolingiz, mamlakatingiz va yoshingizni bir nechta qatorda saqlash uchun o'zgaruvchilarni e'lon qiling
-
Ismingiz, familiyangiz, oilaviy ahvolingiz, mamlakatingiz va yoshingizni bitta qatorda saqlash uchun o'zgaruvchilarni e'lon qiling
-
Ikkita myAge va yourAge o'zgaruvchilarini e'lon qiling va ularga boshlang'ich qiymatlarni belgilang va brauzer konsoliga kiring.
I am 25 years old.
You are 30 years old.🎉 TABRIKLAYMAN ! 🎉