Bugungi kunda internetdagi har bir veb-sayt yoki platformaning foydalanuvchi bilan ishlash qismi – bu frontend dasturchilarning mehnati natijasi. Ular foydalanuvchiga qulay interfeys yaratish, saytning ko’rinishini va funksional imkoniyatlarini ta’minlash bilan shug’ullanadi. Ammo aynan kim bu frontend dasturchi? Keling, oddiy qilib tushuntiraman.

Foydalanuvchi ko’radigan qism – Frontend

Saytni ochganingizda birinchi ko’rgan narsangiz – bu veb-sahifaning interfeysi: ranglar, tugmalar, matnlar, animatsiyalar. Bu hammasi frontend dasturchi tomonidan yaratiladi. Frontend – bu sayt yoki ilovaning foydalanuvchi bilan bevosita muloqot qiladigan qismi. Agar foydalanuvchi tajribasi yaxshi bo’lsa, demak frontend dasturchi o’z ishini to’g’ri qilgan.

Frontend dasturchining vazifalari

Frontend dasturchi bir nechta muhim vazifalarni bajaradi:

1. Dizaynni kodinga aylantirish: Dasturchilar dizaynerlardan kelgan tayyor maketlarni HTML, CSS va JavaScript kabi texnologiyalar yordamida kodga aylantiradi.
2. Responsiv dizayn: Hozirgi kunda saytlar turli qurilmalarda ishlashi kerak: telefon, planshet, kompyuter va boshqalar. Frontend dasturchi saytning har qanday ekranda to’g’ri ko’rinishini ta'minlaydi.
3. Interaktivlik yaratish: Saytdagi tugmachalar, modal oynalar, slayderlar, o’yinlar yoki boshqa harakatlanadigan elementlar – bularning barchasini JavaScript yordamida jonlantiradi.
4. Foydalanuvchi tajribasini yaxshilash: Foydalanuvchilar sayt yoki ilovada nima qidirayotganini tez va oson topishi kerak. Bu esa interfeysning qulay va intuitiv bo’lishini taqozo qiladi.

Qanday texnologiyalar ishlatiladi?

Frontend dasturchilar bir necha asosiy texnologiyalardan foydalanishadi:

• HTML – saytning tuzilmasini yaratadi.
• CSS – saytning ko’rinishini bezaydi: ranglar, shriftlar, joylashuv.
• JavaScript – saytni dinamik qiladi, ya’ni interaktivlik qo’shadi.
• React, Vue, Angular kabi kutubxonalar va freymvorklar – katta loyihalarni osonroq boshqarish uchun ishlatiladi.

Frontend dasturchi nima uchun muhim?

Bugungi zamonaviy raqobat dunyosida foydalanuvchilar saytdan yoki ilovadan foydalanishni yoqimli va tez bo’lishini xohlashadi. Agar sayt sekin yuklansa yoki interfeys noqulay bo'lsa, foydalanuvchi boshqa xizmatga o‘tishi mumkin. Frontend dasturchi aynan shu yerda muhim rol o‘ynaydi. Ular sayt yoki ilovaning tezkor, zamonaviy va intuitiv bo‘lishini ta’minlaydi.

Xulosa

Frontend dasturchi bu foydalanuvchi ko’z o’ngida turgan veb-sahifani yaratadigan inson. Ular dizayndan tortib to interaktivlikka qadar barcha narsani amalga oshiradi. Agar siz internetda aylanayotgan bo‘lsangiz va saytlardan zavqlanayotgan bo‘lsangiz, bilib qo‘ying, bu frontend dasturchilarning mahsuli.

Umid qilamanki, bu maqola orqali siz "Frontend dasturchi kim?" degan savolga javob topdingiz. Agar bu soha sizni qiziqtirgan bo‘lsa, siz ham frontend dasturchi bo‘lishingiz mumkin!

Bu post sizga yoqsa, layk bosing va boshqa maqolalarimni o‘qishni unutmang

• JavaScripta asli data tayplar 8 ta va ular 2 ga bo'linadi primativ va no primativ , primativ turga faqat ozida bita qiymat saqlay oladigan typlar kiradi ular : string , number , undefiend , null , bool , bigint , symbol . No primativga esa o'zida birqancha qiymatlarni saqlay oladigan tiplar kiradi : Object.

2. variables ?

• JavaScript o'zgaruvchilari dasturlashda ma'lumotlarni saqlash va ular bilan ishlash uchun keng foydalaniladigan vositalardan biridir. O'zgaruvchilar yordamida ma'lumotlarni saqlash, qayta ishlatish, tuzatish va dastur boshqaruvini osonlashtiradi. JavaScript da o'zgaruvchilarni 3 hil korinishi mavjud ular : var , let const .

3. Number methods

• JavaScript-da Number obyekti ichidagi bir nechta methodlar mavjud. Bu methodlar sonlar (numbers) bilan ishlashda yordam bermoqda. Quyidagi, ba'zi Number obyektining metodlari:

1. toFixed(): Belirlangan qanday son bo'lishi kerakligini aniqlash uchun ishlatiladi. Natijada bu sonning desimal (qoldiq) qismi qanday ko'rsatilayotganini bildiradi, yani "toFixed(4)" biz qaysi raqamni kiritsak sonnin qoldiq qisminig shuncha honasini olib beradi.

let son = 3.14159;
let yangiSon = son.toFixed(2);
console.log(yangiSon);  // 3.14

2. toString(): Sonni matn ko'rinishiga o'tkazish uchun ishlatiladi.

let son = 42;
let sonMatn = son.toString();
console.log(sonMatn);  // "42" 

3. toPrecision(): Sonning belirlangan miqdorda bo'lishini taqdim etadi.

let son = 1234.567;
let yangiSon = son.toPrecision(4);
console.log(yangiSon);  // 1234

4. isNaN(): Qiymatning son bo'lmaganligini (Not a Number) tekshiradi.

let qiymat1 = 42;
let qiymat2 = "salom";
console.log(isNaN(qiymat1));  // false
console.log(isNaN(qiymat2));  // true

5. isFinite(): Qiymatning cheklanib bo'lishini (finite) tekshiradi.

let son1 = 42;
let son2 = Infinity;
console.log(isFinite(son1));  // true
console.log(isFinite(son2));  // false

4. Math object

5. String methods

• String length: Matn uzunligini qaytaradi.

var str = "Hello";
console.log(str.length); // 5

• String charAt(): Berilgan indeksdagi belgini qaytaradi.

var str = "Hello";
 console.log(str.charAt(1)); // "e"

• String charCodeAt(): Berilgan indeksdagi belgining Unicode qiymatini qaytaradi.

var str = "Hello";
console.log(str.charCodeAt(1)); // 101

• String [ ]: Matndagi belgi indeks orqali qaytariladi.

var str = "Hello";
console.log(str[1]); // "e"

• String slice(): Berilgan indekslar orasidagi qismni kesib olish.

var str = "Hello, World!";
console.log(str.slice(7, 12)); // "World"

• String substring(): Berilgan indekslar orasidagi qismni kesib olish (slice bilan bir xil, lekin manfiy indekslar bilan ishlaydi).

var st
r = "Hello, World!";
console.log(str.substring(7, 12)); // "World"

• String substr(): Berilgan indeksdan boshlab belgilangan uzunlikdagi qismni kesib olish.

var str = "Hello, World!"; 
console.log(str.substr(7, 5)); // "World"

• String toUpperCase(): Matndagi harlarni katta qiladi.
• String toLowerCase(): Matndagi harlarni kichik qiladi.

 var str = "hello"; 
 console.log(str.toUpperCase()); // "HELLO"
 var str = "HELLO"; 
 console.log(str.toLowerCase()); // "hello"

6. Undefined vs null

• Biz qanchonki ozgaruvchi elon qilsagu umga qiymat bermasak bu undefined bo'ladi agar unig bo'sh ekanligini aytsak yanig null qiyamat bersak u null bo'lasdi rasimda yaqol ko'rishligimiz mumkun .

let titl; 
console.log(titl) // => undefined 

let titl = null; 
console.log(titl) // => null

7. truthy , falthy

• Folthy ( 0 , folse , "" , null , undefined , Nan , 0n )
• Truth ( 1 , 1234 , 34343523n , "o" , ' ' , "folse" , true , infinit , -infinit , {} , vbsh..)

8. conditional operator

• if else , else if
• switch case

• ternary operator "('..'? ".." : "..")"

• nalish operator "null || undefind ?? "Yes"

9. taqqoslash operatorlari

• ==, === , <= , >= , !== , !=

10. o’zlashtirish operatorlari

11. Logical Operators

• && Logical and
• || Logical or
• ! Logical not

12. callstack and heap

13. array

• JavaScript (JS) tilida massivlar (arrays) o'zgarmas, ko'p o'lchamli ma'lumotlarni boshqarish uchun foydalaniladi. Massivlar o'z ichiga bir nechta elementlarni saqlaydi va ularga indekslar orqali murojaat qilish mumkin. Massivlar "heap"da joylashadi va dinamik tarzda o'zgaruvchan yaratiladi. Quyidagi misol massiv yaratish va undan elementlarga murojaat qilishni namoyish etadi:

// Massiv yaratish 
let fruits = ['Apple', 'Banana', 'Orange', 'Mango']; 
// Massivdagi birinchi elementga murojaat qilish 
let firstFruit = fruits[0]; console.log(firstFruit); // Natija: 'Apple' 
// Massivdagi elementlarni o'zgartirish 
fruits[1] = 'Grapes'; 
// Massivdagi barcha elementlarni chiqarish 
for (let i = 0; i < fruits.length; i++) { 
    console.log(fruits[i]); 
}

• Array - bir vaqitning o'zida bir nechta qiymatlarni o'zida saqlashi mumkun bo'lgan obect. uni ikki hil ko'rinishda yaratishlik mumkun : 1- ko'rinishii va eng ko'p qo'lanadiga usul bu ( [ ] ) figurni qavuslar ichida yozishlik , 2- uslibi esa (new) kalit so'zidan foydalanib.

// 1- misol 
let arrayName = ['js' ,'java' , 'go']; 
// 2- misol 
let arrayName = new Array('js' ,'java' , 'go');

• Array - elementlarini uning indexslaridan foydalanib oloshligimiz mumkun . Array elementlarining raqamlari ( 0 ) - dan boshlanadi.

 let arrayName = ['js' ,'java' , 'go']; 
 console.log(arrayName[0]); // natija ==> js 
 console.log(arrayName[2]); // natija ==> go

• Array'ga element qo'shish uchun " push() " va " ushift() " metodlaridan foydalanishligimiz mumkun . Bunda " push() " - metodi bizga massivnig ohiridan element qo'shin=b bersa " ushift() " meto'di esa aksincha boshidan element qo'shinb beradi , yaqshiroq tushunishlik uchun misol koramiz.

// push() metodiga misol 

let name = ['js' ,'java']; 
name.push('go'); 
console.log(name); //natija => ['js' ,'java' , 'go'] 

//unshift metodiga misol 

let name = ['java' , 'go']; 
name.unshift('js'); 
console.log(name); //natija => ['js' ,'java' , 'go']

• Array - elementlarini o'chirishlik uchun "pop( )" va "shift( )"metodlaridan foydalansak bo'ladi , bubda "pop( )" - metodi massiv ichidagi ohirgi elamentni o'chiradi va o'chirilgan elamentni ham qaytarish imkoni mavjuv bu metodda , "shift( )"- metodi massiv ichidagi boshidagi elamentni o'chiradi va o'chirilgan elamentni ham qaytarish imkoni mavjuv bu metodda.

// "pop()" metodi 

const name = ['js' , 'java' , 'go' , 'c++' , 'c#']; 
const name2 = name.pop(); 
console.log(name); // natija => ['js' , 'java' , 'go' , 'c++' ] 
console.log(name2); // natija => c# 
//---------------------------------------------------------- 
//"shift()" metodi 
const name = ['js' , 'java' , 'go' , 'c++' , 'c#']; 
const name2 = name.shift(); 
console.log(name); // natija => [ 'java' , 'go' , 'c++' , 'c#' ] 
console.log(name2); // natija => js

• concat() -metodi ikki yoki undan ortiq arraylarni bitlashtiridshlik uchun ishlatiladi . bu ularni birlashtiradi va natiga qaytaradi .

const array1 = [ 1, 4 ]; 
const array2 = [ 2, 3, 7 , 9 ]; 
const result = array1.concat(array2); 
console.log(result); // natija ==> [1, 4, 2, 3, 7, 9]

• indexOf() belgilangan elementni birinchi marta qaysi indeksda ekanligini qaytaradi, lastIndexOf() esa oxirgi marta qaysi indeksda ekanligini.

let fruits = ["apple", "banana", "kiwi", "melon", "banana"]; 
console.log(fruits.indexOf("banana")); // 1 
console.log(fruits.lastIndexOf("banana")); // 4

• find() - metodi birinchi bo'lib shart bajargan array elamentini qaytaradi , kopincha bu metod array ichida meto'd qaytarishlikda ishlatiladi.

const result = [1, 4, 2, 3, 7, 9 ]; 
const findValue = (n) => n = = = 2 ; 
const findValue2= result.find(findValue); 
console.log(findValue2); // natiga => 2 
// agar shartga tushmasa undefaind qaytaradi misol uchun n = = = 5 korinishini kiritsak.

• splice(start, deleteCount, item1, .., itemN) Metodi: splice() metodi massivda belgilangan indeksdan boshlab ma'lum bir soni o'chiradi va/ya yangi element(lar)ni qo'shadi.

let fruits = ["apple", "banana", "orange", "grape"]; 
fruits.splice(2, 1, "kiwi", "melon"); 
console.log(fruits); 
// natija ==> ["apple", "banana", "kiwi", "melon", "grape"]

• slice(start, end) Metodi: slice() metodi massivning belgilangan oraliqni ko'chirib olish uchun ishlatiladi.

let fruits = ["apple", "banana", "kiwi", "melon", "grape"]; 
let subArray = fruits.slice(1, 4); 
console.log(subArray); //natija ==> ["banana", "kiwi", "melon"]

• includes() metodi massivda berilgan elementni qidiradi va mavjud bo'lsa true, aks holda false qaytaradi.

let fruits = ["apple", "banana", "kiwi", "melon"]; 
console.log(fruits.includes("kiwi")); // true 
console.log(fruits.includes("grape")); // false

Hozirda biz arrayning (massivnig) ayrim methodlarini ko'rib chiqdik bundan boshqa ko'plagan meto'dlari ham mavjut .

14. function

• JavaScript (JS) tilidagi function so'zi funksiyalarni aniqlash va yaratish uchun ishlatiladi. Funksiya, delli bir vazifani bajarish uchun yozilgan JavaScript kod blokini ifodalaydi. Funksiya yaratilgandan so'ng, uni istalgan joyda chaqirish mumkin. function so'zi quyidagi ko'rinishda ishlatiladi:

function functionName(parameters) { 
    // Funksiya ichidagi kod bloki 
    // Bajariladigan vazifa 
    return result; // Agar kerak bo'lsa, natija qaytariladi 
  }

• functionName: Funksiya nomi. Uni chaqirishda ushbu nomdan foydalaniladi.
• parameters: Funksiyaga uzatiladigan o'zgaruvchilar (argumentlar) ro'yxati. Funksiyaga argument uzatilganda, ular funksiya ichidagi kod blokida ishlatiladi.
• return: Natijani qaytarish uchun ishlatiladi. Funksiya biror narsa qaytarsa, uni qo'lda qaytaradi.