O‘zbekiston Respublikasi Raqamli texnologiyalari vazirligi Muhammad al-Xorazmiy nomidagi Toshkent axborot texnologiyalari universiteti Veb dasturlashga Kirish Fanidan Mustaqil ish Bajardi:Eshboboyev Diyorbek WEB009 guruh Tekshirdi: Nabiyev Inomjon Maxammadayub o'g'li Toshkent-2023 16-variant 1. CSS da Transitions 2. Sass texnologiyasi 3. .Javascript da Random va matematik funksiyalar 1. CSS da Transitions Dokumentatsiya: CSS-dagi o'tishlar sizga ma'lum vaqt davomida CSS xususiyatlaridagi o'zgarishlarni muammosiz jonlantirish imkonini beradi. Ular vebsahifangizdagi elementlarga dinamik va interaktiv effektlar qo'shish usulini taqdim etadi. Bu erda CSS o'tishlari haqida qo'shimcha ma'lumotlar: O'tish xususiyati: Bu transition xususiyat o'tkazilishi kerak bo'lgan CSS xususiyatlarini belgilash uchun ishlatiladi. U mulk nomlarining vergul bilan ajratilgan ro'yxatini yoki allbarcha xususiyatlarni o'tkazish uchun kalit so'zni qabul qiladi. Masalan: transition: width 0.3s, color 0.5s;. O'tish muddati: transition-durationxususiyat o'tish effektining davomiyligini belgilaydi. Bu o'tishning qancha davom etishini aniqlaydi. Davomiylikni soniya (s) yoki millisekund (ms) da belgilashingiz mumkin. Masalan: transition-duration: 0.5s;. O'tish vaqtini belgilash funktsiyasi: transition-timing-functionxususiyat o'tish effektining tezlashishi va sekinlashishini belgilaydi. Bu sizga animatsiya tezligini boshqarish imkonini beradi. Turli xil vaqt funksiyalari mavjud, masalan ease, linear, ease-in, ease-out, ease-in-out, va boshqalar. Masalan: transition-timing-function: ease-in-out;. O'tish kechikishi: transition-delayxususiyat o'tish effekti boshlanishidan oldin kechikishni o'rnatadi. Bu elementning xossasi o'zgarishi va o'tish effektining boshlanishi o'rtasidagi kechikishlarni yaratishga imkon beradi. Masalan: transition-delay: 0.2s;. transitionO'tish stenografiyasi: Bitta deklaratsiyada o'tish bilan bog'liq barcha xususiyatlarni o'rnatish uchun stenografiya xususiyatidan foydalanishingiz mumkin . Qiymatlarning tartibi: transition-property, transition-duration, transition-timing-function, va transition-delay. Masalan: transition: width 0.3s ease-in-out 0.2s;. Muayyan xususiyatlar bo'yicha o'tish: Siz alohida CSS xususiyatlariga o'tishlarni ularning tegishli xususiyatlaridan, masalan transition-property, transition-duration, va hokazolardan alohida foydalanish orqali belgilashingiz mumkin. O'tish paytida ko'rsatilgan CSS xususiyatlari boshlang'ich holatidan qo'llaniladigan uslublar tomonidan belgilangan yangi holatga silliq o'zgaradi. Bu vizual tarzda yoqimli animatsiya effektini yaratadi. O'tish xususiyatlarini , hover, focus kabi boshqa CSS xususiyatlari bilan birlashtirib active yoki o'tishlarni dinamik ravishda ishga tushirish uchun JavaScript-dan foydalanib, turli o'tish effektlari bilan tajriba qilishingiz mumkin. CSS-da o'tishlar bilan ishlashda e'tiborga olish kerak bo'lgan yana bir nechta fikrlar: Bir nechta xususiyatlarni o'tkazish: Siz bir vaqtning o'zida bir nechta xususiyatlarni qiymatda vergul bilan ajratib o'tkazishingiz mumkin transition-property. Masalan: transition-property: width, height, color;. Barcha xususiyatlarni o'tkazish: Agar siz elementning barcha xususiyatlarini o'tkazmoqchi bo'lsangiz, allkalit so'zni qiymati sifatida ishlatishingiz mumkin transition-property. U barcha tegishli xususiyatlarga o'tish effektini qo'llaydi. Masalan: transition-property: all;. Oʻtish oʻzgarishlari: , rotate, translate, va hokazo kabi CSS konvertatsiyalari scale ham xususiyat yordamida oʻtkazilishi mumkin transition. Bu silliq va jonlantirilgan o'zgarishlarga imkon beradi. Masalan: transition: transform 0.3s ease-in-out;. Transitioning Opacity: transition Xususiyatni o'tkazish orqali o'chirish yoki o'chirish effektlarini yaratish uchun xususiyatdan foydalanish mumkin opacity. Bu elementlarni ko'rsatish yoki yashirishda silliq o'tishlarni yaratish uchun foydalidir. Masalan: transition: opacity 0.5s ease;. Hover va Focus Transitions: O'tishlar odatda interaktiv effektlarni yaratish :hover va shunga o'xshash psevdo-sinflar bilan qo'llaniladi . :focus Foydalanuvchi tajribasini yaxshilash uchun element ustida yoki fokusda bo'lganda, turli o'tish uslublarini qo'llashingiz mumkin. Masalan: .button { transition: background-color 0.3s ease; }.button:hover { background-color: #f7c08a; } O'tishlarni moslashtirish: Funktsiyadagi vaqt funksiyalaridan foydalanib cubic-bezier(), individual xususiyatlar uchun turli muddatlar va kechikishlarni belgilash va o'tishlarni gradientlar yoki quti soyalari kabi boshqa CSS effektlari bilan birlashtirish orqali o'tishlarni qo'shimcha sozlashingiz mumkin. O'tishlar veb-sahifalaringizga silliq animatsiyalarni qo'shishning oddiy usulini ta'minlaydi, foydalanuvchi tajribasini va vizual jozibasini yaxshilaydi. Turli xil o'tish xususiyatlari, qiymatlari va kombinatsiyalari bilan tajriba o'tkazish orqali siz turli xil ijodiy effektlarga erishishingiz va veb-saytingizning umumiy interaktivligini oshirishingiz mumkin. 2. Sass texnologiyasi Sass kuchli CSS protsessoridir, u o'zgaruvchilar, joylashtirish, miksinlar, meros va boshqalar kabi xususiyatlarni qo'shish orqali CSS imkoniyatlarini kengaytiradi. Bu CSS kodini yozish va boshqarish jarayonini soddalashtiradi va yaxshilaydi. Hujjatlarni topishingiz va Sass haqida ko'proq ma'lumot olishingiz mumkin bo'lgan ba'zi manbalar: 1. Sass rasmiy veb-sayti: Rasmiy Sass veb-sayti keng qamrovli hujjatlarni, jumladan, qo'llanmalar, o'quv qo'llanmalar va ma'lumotnomalarni taqdim etadi. Buni quyidagi manzilda topishingiz mumkin: https://sasslang.com/documentation Sass asoslari bo'yicha qo'llanma: Sass asoslari bo'yicha qo'llanma yangi boshlanuvchilar uchun yaxshi boshlanish nuqtasidir. U Sass asoslarini, jumladan o'rnatish, o'zgaruvchilar, joylashtirish, mixinlar va boshqalarni qamrab oladi. Uni bu yerda topishingiz mumkin: https://sasslang.com/guide Sass funktsiyalari va operatorlari: Sass hujjatlari Sassda mavjud bo'lgan funktsiyalar va operatorlarning to'liq ro'yxatini taqdim etadi. U matematik amallarni, ranglarni manipulyatsiya qilishni, satr funktsiyalarini va boshqalarni qamrab oladi. Buni bu yerda topishingiz mumkin: https://sass-lang.com/documentation/functions Sass pazandalik kitobi: Sass pishirish kitobi Sass bilan ishlashda tez-tez uchraydigan muammolarga amaliy misollar va yechimlar to'plamidir. U media so'rovlari, tarmoq tizimlari, sezgir tipografiya va boshqalar kabi mavzularni qamrab oladi. Buni bu yerda topishingiz mumkin: https://sass-lang.com/documentation/at-rules SassMeister: SassMeister - bu Sass kodi bilan tajriba o'tkazish va real vaqtda tuzilgan CSS chiqishini ko'rish imkonini beruvchi onlayn Sass o'yin maydonchasi. Bu Sass kodini o'rganish va sinab ko'rish uchun ajoyib vosita. Bu yerda topishingiz mumkin: https://www.sassmeister.com/ Codecademy Sass kursi: Codecademy interaktiv Sass kursini taklif etadi, u Sass asoslarini qamrab oladi va sizga amaliy mashqlarni bajarishga yordam beradi. Bu yangi boshlanuvchilar uchun ajoyib manba. Buni bu yerda topishingiz mumkin: https://www.codecademy.com/learn/learn-sass CSS-Tricks Sass maqolalari: CSS-Tricks - bu turli veb-texnologiyalar, jumladan Sass bo'yicha maqolalar va o'quv qo'llanmalarini o'z ichiga olgan mashhur veb-ishlab chiqish blogidir. Sass bilan bog'liq maqolalar to'plamini bu yerda topishingiz mumkin: https://css-tricks.com/tag/sass/ Ushbu manbalar sizga Sassni tushunish va undan foydalanishda mustahkam asos yaratishi kerak. Sass texnologiyasi haqida yana bir nechta fikrlar: Modulli va qayta ishlatilishi mumkin bo'lgan kod: Sass sizga aralash va qisman kabi xususiyatlardan foydalangan holda modulli va qayta ishlatiladigan CSS kodini yozish imkonini beradi. Miksinlar takroriy foydalanish mumkin bo'lgan kod bloklari bo'lib, ular bir nechta uslublarga kiritilishi mumkin, bu takrorlashni kamaytiradi. Qisman boshqa Sass fayllariga import qilinadigan alohida Sass fayllari boʻlib, kodingizni tartibga solish va boshqarishni osonlashtiradi. O'zgaruvchilar: Sass o'zgaruvchilarni taqdim etadi, bu sizga uslublar jadvallarida qiymatlarni saqlash va qayta ishlatish imkonini beradi. Bu yagona o'zgaruvchan qiymatni yangilash orqali izchillikni saqlashni va global o'zgarishlarni amalga oshirishni osonlashtiradi. Nesting: Sass CSS selektorlarini bir-birining ichiga joylashtirish imkonini beruvchi joylashtirish sintaksisini taqdim etadi. Bu o'qishni yaxshilaydi va takroriy kodga bo'lgan ehtiyojni kamaytiradi. Meros: Sass to'ldiruvchi tanlash vositalaridan foydalanish orqali merosni qo'llab-quvvatlaydi. Bu xususiyat sizga boshqa selektorlar tomonidan kengaytirilishi mumkin bo'lgan uslublar to'plamini aniqlash imkonini beradi, bu kodning takrorlanishini kamaytiradi. Funktsiyalar va operatorlar: Sass hisob-kitoblarni amalga oshirish, ranglarni manipulyatsiya qilish, satrlar bilan ishlash va hokazolarni amalga oshirish imkonini beruvchi bir qator o'rnatilgan funksiyalar va operatorlarni o'z ichiga oladi. Ushbu funktsiyalar CSS imkoniyatlarini oshiradi va uslublar jadvallarida ko'proq moslashuvchanlikni ta'minlaydi. Boshqaruv ko'rsatmalari: Sass shartli mantiqni qo'llash va ro'yxatlar yoki diapazonlarni takrorlash imkonini beruvchi @if, @for va @each kabi boshqaruv direktivalarini taklif qiladi. Ushbu direktivalar dinamik va moslashuvchan uslublar jadvallarini yozishga imkon beradi. Qurilish asboblari bilan integratsiya: Sass Grunt, Gulp yoki webpack kabi qurish vositalaridan foydalangan holda ishlab chiqish ish oqimiga qo'shilishi mumkin. Ushbu vositalar Sass fayllarini CSS, kichiklashtirish va boshqa optimallashtirish vazifalariga kompilyatsiya qilishni avtomatlashtirishi mumkin. Hamjamiyat va manbalar: Sass o'z ekotizimiga hissa qo'shadigan jonli dasturchilar hamjamiyatiga ega. Sassning eng yaxshi amaliyotlarini o'rganish va yangilab turishga yordam beradigan ko'plab onlayn manbalar, forumlar va qo'llanmalar mavjud. Sass veb-ishlab chiqish hamjamiyatida keng qo'llaniladi va CSS yozish uchun sanoat standarti vositasiga aylandi. U kodni saqlab turish, qayta foydalanish va tartibga solishni yaxshilaydigan bir qator xususiyatlarni taklif etadi. Sass-da yana bir nechta tushunchalar va xususiyatlar: O'zgaruvchilar: Sass sizga uslublar jadvallarida qiymatlarni saqlash va qayta ishlatish uchun o'zgaruvchilarni aniqlash imkonini beradi. Bu ranglar, shrift o'lchamlari, chetlari yoki boshqa CSS qiymatini o'z ichiga olishi mumkin. O'zgaruvchilar qiymatlarni bir joyda yangilashni osonlashtiradi, bu esa o'zgaruvchi ishlatiladigan barcha holatlarni avtomatik ravishda yangilaydi. Qisman: Sass sizga uslublar jadvallarini qisman deb ataladigan kichikroq, modulli fayllarga ajratish imkonini beradi. Qisman fayllar fayl nomida pastki chiziq (_) bilan old qo'yilgan va boshqa Sass fayllariga import qilish uchun mo'ljallangan. Ushbu modulli yondashuv tashkilotni yaxshilaydi va katta kod bazalarini boshqarish va saqlashni osonlashtiradi. Kontent bloklari bilan miksinlar: Sass-dagi miksinlar shuningdek, qo'ng'iroq qiluvchi tomonidan sozlanishi va kengaytirilishi mumkin bo'lgan uslublarni aniqlash imkonini beruvchi kontent bloklarini ham o'z ichiga olishi mumkin. Kontent bloklari miksin kiritilganda maxsus uslublar bilan to'ldirilishi mumkin bo'lgan joy egalaridir. Interpolatsiya: Sass #{...} sintaksisi yordamida interpolyatsiyani ta'minlaydi. Interpolatsiya sintaksisi ichidagi o'zgaruvchilar yoki ifodalarni baholash orqali CSS selektorlari, xususiyat nomlari yoki qiymatlarini dinamik ravishda yaratishga imkon beradi. Ota-ona selektori: Sass ota-selektorni ifodalovchi maxsus "&" selektorini taqdim etadi. Bu sizga ichki uslublar ichida ota-selektorga murojaat qilish imkonini beradi, bu sizga yanada aniqroq va maqsadli uslublarni yaratishga imkon beradi. O‘rnatilgan funksiyalar: Sass qatorlarni manipulyatsiya qilish, rangli amallarni bajarish, ro‘yxatlar va xaritalar bilan ishlash va boshqalar kabi turli operatsiyalar uchun keng o‘rnatilgan funksiyalarni taqdim etadi. Ushbu funktsiyalar uslublaringizni o'zgartirish va boshqarish uchun kuchli imkoniyatlarni taklif etadi. Modul tizimi: Sass Sass kodini yaxshiroq tashkil etish va inkapsulyatsiya qilishni ta'minlaydigan modul tizimini joriy qildi. Modullar yordamida siz qayta foydalanish mumkin bo'lgan uslublar to'plamini belgilashingiz va import qilishingiz mumkin, bu esa loyihalar bo'ylab kod almashish va boshqarishni osonlashtiradi. Maxsus direktivalar: Sass @funksiyasi va @mixin qoidalaridan foydalangan holda maxsus direktivalarni aniqlash imkonini beradi. Maxsus direktivalar murakkab mantiq yoki uslublarni qamrab olish va ularni kodingizda qayta foydalanish mumkin bo'lish usulini taqdim etadi. Manba xaritalari: Sass kompilyatsiya qilingan CSS-ni asl Sass fayllariga bog'laydigan manba xaritalarini yaratishni qo'llab-quvvatlaydi. Manba xaritalari kompilyatsiya qilingan CSS bilan ishlaganda ham to'g'ridanto'g'ri Sass fayllaridagi uslublarni tekshirish va o'zgartirish imkonini berib, nosozliklarni tuzatishni osonlashtiradi. Bular Sass-da mavjud bo'lgan ba'zi xususiyatlar va tushunchalar. Sass hujjatlari ushbu xususiyatlarning har biri uchun chuqurroq tushuntirishlar, misollar va foydalanish bo'yicha ko'rsatmalar beradi. Sass taqdim etayotgan imkoniyatlar va imkoniyatlarni chuqurroq o'rganish uchun rasmiy Sass hujjatlarini ( https://sass-lang.com/documentation ) o'rganishingizni tavsiya qilaman. Kod namunasi: // Define variables $primary-color: #3366ff; $font-size: 16px; // Define a mixin @mixin button-styles { display: inline-block; padding: 10px 20px; background-color: $primary-color; color: white; font-size: $font-size; border: none; border-radius: 4px; cursor: pointer; &:hover { background-color: darken($primary-color, 10%); } } // Define a nested style rule .container { width: 100%; .heading { font-size: 24px; color: $primary-color; } .content { margin-top: 20px; p{ line-height: 1.5; a{ color: $primary-color; &:hover { text-decoration: underline; } } } } } // Use the mixin .button { @include button-styles; } // Use interpolation $property: 'color'; $color: #ff0000; .my-class { #{$property}: $color; } Kod tahlili: Ushbu misolda: O'zgaruvchilar ( $primary-color va $font-size) uslublar jadvalida qayta ishlatilishi mumkin bo'lgan qiymatlarni saqlash uchun ishlatiladi. Mixin ( button-styles) tugmacha uslublari to'plamini o'z ichiga olgan holda qayta ishlatilishi mumkin bo'lgan inkapsulyatsiya qilish uchun belgilangan @include. Ichki uslub qoidalari muayyan asosiy elementlar ichidagi elementlarni nishonga olish uchun ishlatiladi, bu esa ko'proq tartibga solinadigan va tuzilgan uslublarga imkon beradi. Interpolatsiya ( #{$property}) o'zgaruvchan qiymatlarga asoslangan CSS xususiyat nomlarini dinamik ravishda yaratish uchun ishlatiladi. Sass funksiyalari ( darken()) ranglarni manipulyatsiya qilish va hover effektlarini yaratish uchun ishlatiladi. Yakuniy CSS chiqishi Sass kodini kompilyatsiya qilish orqali yaratiladi. Yana bir kod na’munasi: // Variables $primary-color: #ff0000; $font-size: 16px; // Selector with styles .header { background-color: $primary-color; font-size: $font-size; } // Nesting and parent selector .nav { ul { margin: 0; padding: 0; list-style: none; li { display: inline-block; &:hover { color: #ffffff; } &.active { font-weight: bold; } } } } // Mixin @mixin center-element { display: flex; justify-content: center; align-items: center; } .box { @include center-element; width: 200px; height: 200px; background-color: #ccc; } // Partial and import @import 'reset'; @import 'buttons'; // Functions $color: #336699; .button { background-color: darken($color, 20%); color: lighten($color, 40%); } Ushbu kod tahlili: Oʻzgaruvchilar: Kod qayta foydalanish mumkin boʻlgan qiymatlarni saqlash uchun $primary-color va $font-size kabi oʻzgaruvchilarni belgilaydi. Tanlagichlar va uslublar: Uslublar .nav ichidagi .header va ichki o'rnatilgan elementlar uchun belgilangan. Nesting va ota-ona selektori: Nesting ul, li kabi ichki oʻrnatilgan elementlarning uslublarini hamda ularning kursor va faol holatlarini aniqlash uchun ishlatiladi. Ota-selektor & ota-selektorga murojaat qilish uchun ishlatiladi. Mixin: @mixin direktivasi markazlashtiruvchi elementlar uchun uslublarni o'z ichiga olgan markaziy element deb nomlangan miksinni belgilaydi. Qisman va import: @import alohida Sass fayllari bo'lgan qayta o'rnatish va tugmalar kabi qismlarni kiritish uchun ishlatiladi. Funktsiyalar: Dark() va lighten() kabi Sass funksiyalari ranglarni boshqarish uchun ishlatiladi. Sass boshqa ko'plab funktsiyalarni taklif etadi, jumladan, boshqaruv direktivalari, tsikllar, shartlar va boshqalar. Yuqoridagi kod Sass sintaksisining asosiy ko'rinishini va ba'zi tez-tez ishlatiladigan xususiyatlarni taqdim etadi. 3 .Javascript da Random va matematik funksiyalar JavaScript turli maqsadlarda foydalanishingiz mumkin bo'lgan bir nechta o'rnatilgan tasodifiy va matematik funktsiyalarni taqdim etadi. JavaScript-da tez-tez ishlatiladigan tasodifiy va matematik funktsiyalardan ba'zilari: Math.random(): 0 dan 1 gacha (1dan tashqari) tasodifiy kasr sonini hosil qiladi. Kod: const randomNumber = Math.random(); // Example: 0.782314567 Math.floor(): Sonni eng yaqin butun songacha yaxlitlaydi. Kod: const roundedNumber = Math.floor(3.8); // Example: 3 Math.ceil(): Sonni eng yaqin butun songacha yaxlitlaydi. Kod: const roundedNumber = Math.ceil(3.2); // Example: 4 Math.round(): Sonni eng yaqin butun songa yaxlitlaydi. Kod: const roundedNumber = Math.round(3.5); // Example: 4 Muayyan diapazonda tasodifiy butun sonni yaratish: Kod: function getRandomInteger(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } const randomInt = getRandomInteger(1, 10); // Example: Random integer between 1 and 10 Belgilangan sonli kasrli tasodifiy sonni yaratish: Kod: function getRandomNumber(min, max, decimalPlaces) { const randomNum = Math.random() * (max - min) + min; return randomNum.toFixed(decimalPlaces); } const randomFloat = getRandomNumber(1, 5, 2); // Example: Random number with 2 decimal places between 1 and 5 Math.abs(): Raqamning mutlaq qiymatini qaytaradi. Kod: const absoluteValue = Math.abs(-5); // Example: 5 Math.pow(): Raqamni boshqa raqamning darajasiga ko'taradi. Kod: const powerResult = Math.pow(2, 3); // Example: 8 (2 raised to the power of 3) Math.sqrt(): Sonning kvadrat ildizini hisoblaydi. Kod: const squareRoot = Math.sqrt(16); // Example: 4 Math.max(): Raqamlar roʻyxati orasidagi maksimal qiymatni qaytaradi. Kod: const maximumValue = Math.max(10, 5, 8, 12); // Example: 12 Math.min(): Raqamlar roʻyxati orasidagi minimal qiymatni qaytaradi. Kod: const minimumValue = Math.min(10, 5, 8, 12); // Example: 5 Math.random()diapazon bilan: Muayyan diapazonda tasodifiy sonni yaratish Math.random()va ba'zi hisoblar. Kod: function getRandomNumberInRange(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }const randomInRange = getRandomNumberInRange(1, 100); // Example: Random number between 1 and 100 Raqamlarni ma'lum o'nli kasrga yaxlitlash: Math.round() Raqamni ma'lum bir kasrga yaxlitlash uchun foydalanish va ba'zi hisoblar. Kod: function roundToDecimalPlace(number, decimalPlaces) { const factor = 10 ** decimalPlaces; return Math.round(number * factor) / factor; }const roundedNumber = roundToDecimalPlace(3.14159, 2); // Example: 3.14 (rounded to 2 decimal places) Math.sin() Trigonometrik funktsiyalar: JavaScript mos ravishda sinus, kosinus va tangens qiymatlarini hisoblash uchun , , Math.cos()kabi trigonometrik funktsiyalarni taqdim etadi Math.tan(). Kod: const sineValue = Math.sin(Math.PI / 2); // Example: 1 (sine of 90 degrees) const cosineValue = Math.cos(0); // Example: 1 (cosine of 0 degrees) const tangentValue = Math.tan(Math.PI / 4); // Example: 1 (tangent of 45 degrees) Bu JavaScript-dagi ilg'or matematik funktsiyalar va texnikalarning bir nechta misollari. JavaScript murakkab hisob-kitoblar va manipulyatsiyalarni bajarishga imkon beruvchi boy matematik funktsiyalar va operatsiyalarni taqdim etadi. Ushbu funktsiyalar bilan tajriba qiling va qo'shimcha ma'lumot va qo'shimcha matematik funktsiyalar uchun JavaScript hujjatlarini o'rganing.