Kampyuter injinering

O’ZBEKISTON RESPUBLIKASI RAQAMLI TEXNOLOGIYALAR VAZIRLIGI. MUHAMMAD AL-XORAZMIY NOMIDAGI TOSHKENT AXBOROT TEXNOLOGIYALAR UNIVERSITETI.
KAMPYUTER INJINERING FAKULTETI
MULTIMEDIA TEXNOLOGIYALAR KAFEDRASI
Web dastrulashga kirish fanidan
MUSTAQIL ISH

GURUH: WEB009(713_21)

BAJARDI: Madatov Islam
TEKSHIRDI: Nabiyev Inomjon
TOSHKENT 2023

26. 
    variant
    1. CSS da Formalarga bezak berish
    2. Sass da ranglar bilan ishlash (color methods)
    3. JavaScript da strelkali funksiyalar (Arrow function) yaratish
    

1. 
   CSS da formalarga bezak berish uchun quyidagi tartibni amalga oshiring:
   

HTML faylida CSS-ni ulashing. HTML faylingizning head bo'limida quyidagi taglarni qo'shing:



Bu HTML faylingizga stil.css nomli CSS faylini ulaydi. Sizning CSS kodlaringizni stil.css faylida yozasiz.
stil.css faylida formalarni stilini belgilang. Quyidagi misolni ko'rib chiqing:
/* Umumiy stil */body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
/* Formalar */form {
margin: 20px auto;
width: 300px;
padding: 20px;
background-color: #f2f2f2;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
/* Formalar bilan bog'liq elementlar */label {
display: block;
margin-bottom: 10px;
font-weight: bold;
}
input[type="text"],input[type="email"],textarea {
width: 100%;
padding: 5px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 3px;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 10px 15px;
border: none;
border-radius: 3px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #45a049;
}
/* Xatolarni ko'rsatish */.error {
color: red;
margin-top: 5px;
}
Ushbu kodlar umumiy stilni (body), formalarni (form), formalardagi elementlarni (label, input, textarea) va xatolarni (error) belgilaydi.
HTML faylida formalarni qo'shing. Quyidagi misolni ko'rib chiqing:

Ism:


Email:


Xabar:

Ushbu kodlar bir nechta formalardan (ism, email, xabar) iborat formani yaratadi.

1. 
   Sass, yoki Syntactically Awesome Stylesheets, CSS kodini yozishga yordam beradigan bir CSS preprosessor hisoblanadi. Sass-da ranglarni boshqarish uchun bir nechta usullar mavjud. Bu usullardan foydalanish orqali, ranglar ustida o'zgarishlar kiritishingiz, o'zgarishlarni qayta ishlatishingiz va dinamik efektlar yaratishingiz mumkin.
   

Quyidagi rang metodlari Sass-da foydalaniladigan asosiy rang boshqaruv usullaridan ba'zilaridir:
Ranglar nomi: Ranglarni nomlash orqali ularni o'zgarishlarni amalga oshirishda ishlatishingiz mumkin. Sass-da, ranglarni nomlash uchun odatiy CSS nomlari yoki hech qanday qoidalar bilan o'zgarishsiz nomlar ishlatishingiz mumkin. Masalan:

$primary-color: #ff0000;$secondary-color: #00ff00;

.button {
background-color: $primary-color;
color: $secondary-color;
}
Rang funksiyalari: Sass-da rang funksiyalari, ranglarni o'zgarishlarni qayta ishlash va yangi ranglar yaratish uchun ishlatiladi. Sass-da standart rang funksiyalari mavjud, masalan, lighten(), darken(), saturate(), desaturate(), mix() va hokazo. Misol uchun:
$base-color: #336699;$lighter-color: lighten($base-color, 20%);$darker-color: darken($base-color, 10%);
.button {
background-color: $lighter-color;
border-color: $darker-color;
}
Rang interpolatsiyasi: Sass-da ranglar bilan interpolatsiya qilish orqali yangi ranglar yaratishingiz mumkin. Interpolatsiya qilish uchun #{} belgisi ishlatiladi. Misol uchun:
$suffix: "-highlight";
.button {
$base-color: #336699;
$highlight-color: $base-color + $suffix;

background-color: $highlight-color;

}
Rang variantlari: Sass-da ranglar uchun variantlar yaratish ham mumkin. Bu, bir turgan rangni boshqa turdagi rangga aylantirish vaqtinchalik o'zgarishlarni qayta ishlatishni osonlashtiradi. Misol uchun:
.button {
$base-color: #336699;

&-primary {

background-color: $base-color;
}

&-secondary {

background-color: lighten($base-color, 20%);
}
}

Ushbu misollar Sass-da foydalaniladigan ba'zi rang boshqaruv usullarini ko'rsatish uchun mavjud. Sass-da ranglar bilan ishlash, CSS kodini boshqarishni osonlashtiradi va dinamikligini oshiradi.

3.JavaScriptda strelkali funksiyalar, ES6 (ECMAScript 2015) dan boshlab mavjud bo'lgan yangiliklardan biridir. Ushbu sintaksis orqali strelkali funksiyalarni osonlik bilan yaratishingiz mumkin. Strelkali funksiyalar asosan qisqa va osonlik bilan yoziladi va kerakli xususiyatlarni o'z ichiga oladi. Quyidagi sintaksis orqali strelkali funksiya yarating:
(param1, param2, ..., paramN) => { function_body }
Bu sintaksisda (param1, param2, ..., paramN) parameterlar ro'yxati va function_body funksiya tanasi mavjud bo'ladi. Agar funksiya bir qatordan iborat bo'lsa, {} ajratishingiz kerak emas.
Masalan:
// Strelkali funksiya yaratishconst sayHello = () => {
console.log("Salom");
};
// Parametrlar bilan strelkali funksiyaconst sum = (a, b) => {
return a + b;
};
// Bitta parametrli strelkali funksiyaconst square = x => x * x;
Ushbu misolda, sayHello() strelkali funksiyasi hech qanday parametrga ega emas va "Salom" matnini konsolga chiqaradi. sum(a, b) funksiyasi a va b ni qo'shadi va natijani qaytaradi. square(x) funksiyasi esa x ning kvadratini qaytaradi.
Strelkali funksiyalar oson va qulay sintaksisga ega bo'lib, lekin ularning qo'shimcha xususiyatlari mavjud emas, masalan, arguments obyekti yoki this konteksti strelkali funksiyalarda mavjud emas. Bu sababli, agar funksiyangizning bu xususiyatlardan foydalanishi kerak bo'lsa, klassik funksiya sintaksisini ishlatishingiz tavsiya etiladi.

Manba:
Bootstrap и CSS-препроцессор Sass Автор: Прохоренок Н. А
JavaScript для профессионалов Авторы: Джон Резиг, Расс Фергюсон Год издания: 2016
https://t.me/frontbooks
https://www.w3schools.com
https://www.geeksforgeeks.org