DEV Community: BekmuhammadDev

Frontend Question part-2

BekmuhammadDev — Sat, 07 Dec 2024 16:16:39 +0000

** Uchlik operator (?:)**
Uchlik operator shartlarni tekshirishda ishlatiladi va quydagicha ishlaydi.

let result = shart ? true_holat : false_holat;

Shart: True yoki False qiymat qaytaradigan ibora.
Agar shart true bo‘lsa, true_holat qaytadi; aks holda, false_holat qaytadi.
Shartli operator (True yoki False qaror qabul qiladi)
Uch qismdan iborat (shart, true, false)

Misol:

let age = 18;
let natija = age >= 18 ? "Kirish mumkin" : "Kirish mumkin emas";
console.log(natija); //kirish mumkin chunku age 18 ga teng 18 = 18 ga true holat.

Nullish birlashtiruvchi operator (??)**

Bu operator null yoki undefined qiymatlarni tekshirish uchun ishlatiladi. Agar chap tomondagi qiymat null yoki undefined bo‘lsa, o‘ng tomondagi qiymat qaytariladi.

misol:

let username = null;
let defaultName = "Mehmon";
let natija= username ?? defaultName;
console.log(natija); // "Mehmon" username null qiymatga teng va u chapda joylashgan natija Mehmon.

Agar chap_tomon null yoki undefined bo‘lsa, o‘ng_tomon qaytadi.
Aks holda, chap_tomon qaytariladi.

Frontend Questions

BekmuhammadDev — Wed, 04 Dec 2024 16:46:26 +0000

HTML ning asosiy taglari Tuzilma taglar

<html>: Sahifa HTML ekanligini belgilaydi.
<head>: Metama'lumotlar, uslub, skriptlar joylashadi.
<body>: Asosiy kontent shu yerda bo‘ladi.

Matn tuzish uchun taglar:

<h1> - <h6>: Sarlavhalar uchun.
<p>: Paragraf.
<br>: Yangi qatordan boshlash.
<strong> yoki <b>: Matnni qalin qilish.
<em> yoki <i>: Matnni qiyshiq qilish.

3.Rasm va multimedia

<img src="manba" alt="tavsif">: Rasm qo‘shadi.
<video> va <audio>: Video va audio qo‘shish uchun.

Havolalar va ro'yxatlar uchun

<a href="manzil">Havola matni</a>: Havola.
<ul>: Tartibsiz ro‘yxat.
<ol>: Tartibli ro‘yxat.
<li>: Ro‘yxat elementi.

Formalar va ma'lumotlar kiritish uchun

<form>: Forma yaratish.
<input type="text">: Matn kiritish.
<button>: Tugma.

6.Jadval yaratish:

<table>: Jadval.
<tr>: Qator.
<td>: Ustun.
<th>: Jadval sarlavhasi.

Javascriptni Htmlga ulash

inline usuli yani (ichki) Javascript codini to'g'ridan to'g'ri html tagi ichiga yozish.


<button onclick="alert('Hello!')">Click me</button>
<button onChange="alert('Thanks!')">Click me</button>

2.internal usuli ya'ni (ichki cod)
JavaScript-ni script tegi ichida HTML faylning ichida yozish:

<script>
  console.log("Hello from internal script!");
</script>

3.Extrenal usuli ya'ni (tashqi fayl orqali );
Loyiha ichida javasript codini js fayl orqali yozish.


<script src="app.js"></script>

async va defer haqida

async atributi;

Skript sahifa bilan bir vaqtning o'zida yuklanadi ya'ni ( asinxron).
Skript yuklanishi tugagandan keyin darhol bajariladi.

<script src="script.js" defer></script>

defer atributi;

Skript yuklanishi sahifa bilan bir vaqtda amalga oshadi, lekin bajarilishi sahifa to'liq yuklanib bo'lgandan keyin sodir bo'ladi.

<script src="script.js" defer></script>

SEO NIMA ?

SEO (Search Engine Optimization) — veb-saytlarni qidiruv tizimlari uchun optimallashtirish jarayonidir. Bu jarayon sahifangizni qidiruv tizimlari (Google, Bing) natijalarida yuqori o‘rinlarga chiqishga yordam beradi.
Sodda qilib aytganda foydalanuvchi google orqali qidiruv berganida sizning sahifangiz taqdim etilishi.

SEO ga yordam beradigan HTML teglar va atributlar;
Quyidagi teg va atributlar SEO uchun muhim hisoblanadi:

Meta-teglar; title Sahifa sarlavhasini belgilaydi.

<title>Mening Sahifam</title>

Sarlavha taglar h1 va h6 matnlar tuzulishi va hamida ishlatiladi.

<h1>Asosiy Sarlavha</h1>
<h2>Bo‘lim nomi</h2>

foydali bo'ladi- har bir sahifada faqat bitta h1 bo‘lishi kerak.

Img taglaridagi alt atributi Rasimga tavsif berish orqali qidiruv tizimlariga yordam beradi.

<img src="rasm.jpg" alt="SEO haqida tushuncha">

Hvola taglari title atributi; Havola haqida qo‘shimcha ma’lumot beradi.

<a href="https://www.example.com" title="Qo‘shimcha SEO maslahatlari">Bu yerga o'ting</a>

Lang atributi; sahifaning tilini belgilaydi;

<html lang="uz">

Mobile-friendly dizayn uchun teglar; meta name="viewport" Sahifani mobil qurilmalar uchun optimallashtiradi,

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Breadcrumbs (nav va aria-label); Foydalanuvchilar va qidiruv tizimlariga sahifa strukturasi haqida ma’lumot beradi.

<nav aria-label="Breadcrumb">
    <a href="/home">Bosh sahifa</a> > <a href="/blog">Blog</a>
</nav>

Responsive Nima ?

Responsive dizayn — bu veb-sahifalarni turli ekran o‘lchamlariga (kompyuter, planshet, telefon) moslashadigan qilib yaratish usuli.

Bu dizaynda sahifa elementi ekran o‘lchamiga qarab avtomatik ravishda moslashadi:

Telefon: Kichik ekran uchun menyu yoki rasmlar ixcham ko‘rinadi.
Kompyuter: Katta ekran uchun kengaytirilgan formatda ko‘rinadi.

Asosan CSS media query va moslashuvchan o‘lchamlar (%, em, rem, vh) ishlatiladi.

masalan:

@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

responsive dizay yozishdan asosiy maqsad har qanday qurilmada sahifa qulay va chiroyli ko‘rinishi!

Sass Nima ?
SASS (Syntactically Awesome Stylesheets);
U oddiy CSS bilan taqqoslaganda kodni takrorlanmas, tartibli va oson boshqariladigan qiladi.

SASS nimga asosiy afzaliklari;

O‘zgaruvchilar (Variables); O‘zgaruvchilar yordamida ranglar, o‘lchamlar yoki boshqa qiymatlarni saqlab, ularni qayta ishlatishingiz mumkin.


$primary-color: #3498db;
body {
  background-color: $primary-color;
}

2.Nestlash (Nesting);
CSS qoidalarini ichma-ich yozib, tuzilmani aniqroq va cod yozishnin tazlashtiradi.

nav {
  ul {
    margin: 0;
    li {
      list-style: none;
    }
  }
}

Mixins

Ko‘p ishlatiladigan uslublarni bir joyga yig‘ib, kerakli joyda chaqirish uchun ishlatiladi.


@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.box {
  @include flex-center;
}

Functions

Hisob-kitoblarni yoki maxsus qiymatlarni qaytaruvchi funksiyalarni yaratishingiz mumkin.


@function rem($px) {
  @return $px / 16 * 1rem;
}
body {
  font-size: rem(18); // 18px ni rem ga o‘giradi
}

Inheritance (Meros olish)

Boshqa sinflar uslublarini meros qilib olish imkonini beradi.

%button-styles {
  padding: 10px 20px;
  border-radius: 5px;
}
.btn-primary {
  @extend %button-styles;
  background: blue;
}

SASS ning afzalliklari
Kod samaradorligi: Qayta-qayta yozishning oldini oladi.
Katta loyihalar uchun qulaylik: Tuzilmani boshqarishni osonlashtiradi.
O‘qilishi oson: Kod aniq va tuzilmali bo‘ladi.

Javascript Nima ?

JavaScript — bu veb-saytlarga interaktivlik qo‘shish uchun ishlatiladigan dasturlash tili. U dastlab veb-brauzerlarda ishlash uchun yaratilgan, lekin hozirda server tomonida ham ishlatiladi (Node.js orqali).

JavaScript nimani qilishi mumkin?

1.Veb-sahifalarni interaktiv qilish:

Tugmalarni bosganda harakat qilish.
Formadagi ma’lumotlarni tekshirish.
Slider yoki karusel yaratish.

masalan:

document.querySelector("button").addEventListener("click", function() {
    alert("Tugma bosildi!");
});

Dinamik kontent yaratish: HTML va CSS-ni o‘zgartirib, veb-sahifani yangilash.

document.querySelector("h1").innerText = "Yangi sarlavha!";

API-lar bilan ishlash: Masalan, boshqa xizmatlardan (ob-havo, yangiliklar) ma’lumot olish.

fetch("https://api.example.com/data")
    .then(response => response.json())
    .then(data => console.log(data));

4.Matematik va mantiqiy hisob-kitoblar:
Kalkulyator yaratish, o‘yinlar yozish, vaqtni hisoblash.

5.Animatsiyalar yaratish:
CSS bilan birgalikda elementlarni harakatlantirish yoki o‘zgarishlarni boshqarish.

JavaScript asosiy xususiyatlari

1.O‘zgarmasligi (Static) emas:
JavaScript bilan sahifa kontenti o‘zgaruvchan bo‘lishi mumkin.

2.Brauzerda ishlaydi:
Har bir brauzer JavaScript-ni tushunadi va ishlatadi. Masalan, Chrome, Firefox.

3.Objektga yo‘naltirilgan:
JavaScript ob’ektlar va metodlar yordamida ishlaydi.

4.Oson integratsiya:
HTML va CSS bilan birga ishlatiladi.

avaScript bilan qanday ishlay boshlash mumkin?
JavaScript-ni o‘rganishni boshlash uchun asosiy mavzular:

O‘zgaruvchilar: let, const, var.
Mantiqiy operatorlar: if, else, switch.
Funksiyalar va arraylar.
DOM bilan ishlash.
Hodisalar (click, hover) va ularning tinglovchilari.

Data typelar

JavaScript-da data typelar (ma'lumot turlari) — bu qiymatlarning turlarini aniqlash uchun ishlatiladi. Ular Primitive (oddiy) va Non-Primitive (murakkab) turlarga bo‘linadi.

Primitive Data Types (Oddiy ma'lumot turlari)
Bu turlar oddiy qiymatlar bilan ishlaydi va to‘g‘ridan-to‘g‘ri qiymatni saqlaydi.

String Matn yoki harflar ketma-ketligini saqlaydi.

let name = "Ismingiz";
console.log(name); // "Ismingiz"

Number Butun va o‘nlik sonlarni saqlaydi.

let age = 25;
let pi = 3.14;
console.log(age, pi); // 25, 3.14

Boolean true yoki false qiymatlarini saqlaydi (mantiqiy).

let isLoggedIn = true;
console.log(isLoggedIn); // true

Undefined Qiymat hali aniqlanmagan bo‘lsa, undefined qaytariladi.

let x;
console.log(x); // undefined

Null null qiymati qiymat yo‘qligini ifodalaydi.

let y = null;
console.log(y); // null

Symbol Unikal va o‘zgarmas qiymatlar uchun ishlatiladi.

let sym = Symbol("unique");
console.log(sym); // Symbol(unique)

BigInt Juda katta sonlarni saqlash uchun ishlatiladi.


let bigNumber = 123456789012345678901234567890n;
console.log(bigNumber); // 123456789012345678901234567890n

Non-Primitive Data Types (Murakkab ma'lumot turlari)
Bu turlar qiymatlarni to‘plam shaklida saqlaydi.

Object Kalit-qiymat juftliklarini saqlaydi.

let person = {
    name: "Ismingiz",
    age: 25
};
console.log(person.name); // "Ismingiz"

Array Qiymatlar ro‘yxatini saqlaydi.


let fruits = ["Olma", "Banan", "Uzum"];
console.log(fruits[0]); // "Olma"

Function Amal yoki kodni bajaruvchi obyekt.

function greet() {
    return "Salom!";
}
console.log(greet()); // "Salom!"

** Variables ? **

O'zgaruvchilar (Variables) dasturlashda ma'lumotlarni saqlash uchun ishlatiladi. Ularni o'zimiz xohlagan nom bilan belgilab, unga qiymat biriktirishimiz mumkin. Bu qiymat keyinchalik o'zgartirilishi yoki ishlatilishi mumkin.

Oddiy ta'rifi:
O'zgaruvchi — bu quti kabi. Quti ichiga raqam, matn, yoki boshqa ma'lumotlarni solib qo'yishimiz mumkin. Keyin bu qutidagi ma'lumotni oson topish uchun unga nom beramiz.

JavaScript variables

// O'zgaruvchi e'lon qilish
let ism = "Bekmuhammad"; // "ism" degan nomli qutiga "Bekmuhammad" qiymati solindi.

console.log(ism); // Bu "Bekmuhammad"ni ekranga chiqaradi

// Qiymatni o'zgartirish
ism = "Ali"; 
console.log(ism); // Endi "Ali" chiqadi

misol

let yosh = 25; // Raqam qiymat saqlash
let ism = "Ali"; // Matn qiymat saqlash
const PI = 3.14; // O'zgarmas qiymat

console.log("Mening ismim " + ism + " va yoshim " + yosh);

O'zgaruvchi turlari:

let – O'zgaruvchi qiymatini o'zgartirishingiz mumkin.
const – O'zgarmas qiymatni saqlaydi, keyinchalik uni o'zgartirib bo'lmaydi.
var – Eski usulda ishlatiladi, lekin ko'p hollarda letdan foydalanish tavsiya qilinadi.

Conditional operators (Shartli operatorlar (?) ba'zan ternar operator deb ham ataladi)

JavaScriptda oddiy if-else shartlarini qisqaroq yozish uchun ishlatiladi. Bu usulda ? va : belgilaridan foydalaniladi.

let yosh = 20;
let status = yosh >= 18 ? "Katta" : "Yosh";

// yosh 18 dan kichik yoki teng bo'lsa katta aks holda yosh javobi qaytadi

console.log(status); // Natija: "Katta"

Viteconfig / jsconfig

BekmuhammadDev — Mon, 26 Aug 2024 18:59:18 +0000

Vite.config.js

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { fileURLToPath } from "node:url";


export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [

      {
        find: "@",
        replacement: fileURLToPath(new URL('./src', import.meta.url)),
      },
      {
        find: "@components",
        replacement: fileURLToPath(new URL('./src/components', import.meta.url)),
      },
      {
        find: "@layouts",
        replacement: fileURLToPath(new URL('./src/components/layouts', import.meta.url)),

      },
      {
        find: "@layout",
        replacement: fileURLToPath(new URL('./src/layouts', import.meta.url)),

      },
      {
        find: "@mocks",
        replacement: fileURLToPath(new URL('./src/mocks', import.meta.url)),

      },
      {
        find: "@pages",
        replacement: fileURLToPath(new URL('./src/pages', import.meta.url)),

      },
      {
        find: "@router",
        replacement: fileURLToPath(new URL('./src/router', import.meta.url)),

      },
      {
        find: "@service",
        replacement: fileURLToPath(new URL('./src/service', import.meta.url)),

      },
      {
        find: "@utils",
        replacement: fileURLToPath(new URL('./src/utils', import.meta.url)),

      },
      {
        find: "@reducer",
        replacement: fileURLToPath(new URL('./src/reducer', import.meta.url)),

      },
    ],
  },
});

jsconfig.json

{
    "compilerOptions": {
        "paths": {
            "@/*": ["./src/*"],
            "@components/*": ["./src/components/*"],
            "@ui/*": ["./src/components/ui/*"],
            "@layouts/*": ["./src/components/layouts/*"],
            "@form/*":["./src/components/form/*"],
            "@images/*": ["./src/assets/images/*"],
            "@icons/*": ["./src/assets/icons/*"],
            "@mocks/*": ["./src/mocks/*"],
            "@utils/*": ["./src/utils/*"],
            "@layout/*": ["./src/layouts/*"],
            "@pages/*": ["./src/pages/*"],
            "@router/*": ["./src/router/*"],
            "@service/*": ["./src/service/*"],
            "@reducer/*": ["./src/components/reducer/*"],



        }
    }
}

Asinxron/Fetch/Https

BekmuhammadDev — Tue, 09 Jul 2024 15:39:40 +0000

Asinxron
"Asinxron" so'zi bir vaqtda bo'lmagan yoki bir vaqtda amalga oshirilmagan degan ma'noni anglatadi. Kompyuter dasturlashida asinxron kod deganda dastur bajarilishi davomida boshqa kodlar bilan parallel ravishda bajarilishi mumkin bo'lgan kod tushuniladi. Bu kodning bajarilishi natijasini kutish shart emas, ya'ni boshqa kodlar bajarilishini davom ettirishi mumkin.

Sinxron kod: Har bir kod qatori ketma-ketlikda bajariladi. Bir qator tugamasa, keyingi qator boshlanmaydi.

console.log('Birinchi');
console.log('Ikkinchi');
console.log('Uchinchi');

Asinxron kod: Ba'zi kod qatorlari bajarilishi vaqt talab qilishi mumkin, masalan, serverga so'rov yuborish yoki fayl o'qish. Bu jarayonlar tugaguniga qadar boshqa kodlar bajarilishi davom ettiriladi.

console.log('Birinchi');
setTimeout(() => {
  console.log('Ikkinchi');
}, 1000); // 1 soniyadan keyin bajariladi
console.log('Uchinchi');

setTimeout funksiyasi asinxron ravishda ishlaydi. setTimeout funksiyasi 1 soniyadan keyin "Ikkinchi" qatorini konsolga chiqaradi, ammo dastur bu vaqt davomida "Uchinchi" qatorini chiqarishni davom ettiradi.

Serverga so'rov yuborish va javobni kutish: fetch funksiyasi serverga so'rov yuboradi va javob kelgunicha dastur boshqa ishlarni bajarishi mumkin.
Fayl tizimi bilan ishlash: Faylni o'qish yoki yozish jarayonida dastur boshqa vazifalarni bajarishi mumkin.
Taymerlar va intervallar: Ma'lum vaqt o‘tgach yoki intervalda kodni bajarish.

Asinxronlikning Afzalliklari:
Tezkorlik: Ko'p vazifali dasturlash imkoniyati. Bir vaqtning o'zida bir nechta vazifalarni bajarish imkonini beradi.
Foydalanuvchi tajribasi: Foydalanuvchi interfeysi osonlik bilan bloklanmaydi va javob beruvchi bo‘lib qoladi.

Asinxron Kodinga JavaScriptda Yondashuvlar:

Callbacks: Funksiyalarni argument sifatida uzatish.
Promises: Vaqt talab qiluvchi operatsiyalar uchun natija yoki xatoni qaytaruvchi obyektlar.
Async/Await: Promises bilan ishlashni soddalashtiruvchi sintaktik qobiq.

async function getData() {
  try {
    let response = await fetch('https://api.example.com/data');
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Xato:', error);
  }
}

getData();

Ushbu misolda await kalit so'zi fetch va response.json() funksiyalarining natijalarini kutib turadi va kodni ko'rib chiqishni osonlashtiradi.

fetch Funksiyasidan Foydalanish

// URL dan ma'lumot olish
fetch('https://api.example.com/data')
  .then(response => {
    // Javobni JSON formatga o'girish
    return response.json();
  })
  .then(data => {
    // Olingan ma'lumotni ishlatish
    console.log(data);
  })
  .catch(error => {
    // Xatolarni tutish
    console.error('Xato:', error);
  });

HTTP So'rov Turlari
fetch yordamida GET, POST, PUT, DELETE kabi turli xil HTTP so'rovlarini amalga oshirish mumkin. Quyida POST so'rovi misoli keltirilgan:

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    ism: 'Ali',
    yosh: 25
  })
})
  .then(response => response.json())
  .then(data => {
    console.log('Yangi yozuv qo\'shildi:', data);
  })
  .catch(error => {
    console.error('Xato:', error);
  });

HTTPS STATUS CODLARI

Javascript Promis

BekmuhammadDev — Tue, 09 Jul 2024 08:04:18 +0000

JavaScript promises asinxron operatsiyalarni boshqarishning qulay usullaridan biri hisoblanadi. promises kelajakda bajarilishi yoki muvaffaqiyatsiz tugashi mumkin bo'lgan qiymatlarni ifodalaydi. Ular asinxron operatsiyalarning natijalarini boshqarish uchun ishlatiladi va callback funksiyalar bilan bog'liq muammolarni kamaytiradi.

promis table

promises yaratish

JavaScript-da promis yaratish uchun Promise konstruktoridan foydalaniladi.

let myPromise = new Promise((resolve, reject) => {
    let success = true; // Bu yerda sizning asinxron operatsiyangiz bo'lishi mumkin

    if (success) {
        resolve("Bu operatsiya muvaffaqiyatli tugadi!");
    } else {
        reject("Bu operatsiya muvaffaqiyatsiz tugadi.");
    }
});

resolve
reaject

resolve va reject funksiyalari JavaScript promises asinxron operatsiyalarning natijasini boshqarish uchun ishlatiladi.

resolve

resolve funksiyasi promis muvaffaqiyatli bajarilganda chaqiriladi. Bu funksiya o'ziga argument sifatida biror qiymat oladi, va bu qiymat keyinchalik .then() metodiga uzatiladi.

let Promise = new Promise((resolve, reject) => {
    let success = true; // Bu yerda sizning asinxron operatsiyangiz bo'lishi mumkin

    if (success) {
        resolve("Bu operatsiya muvaffaqiyatli tugadi!");
    }
});

Yuqoridagi misolda, success o'zgaruvchisi true bo'lsa, resolve funksiyasi chaqiriladi va "Bu operatsiya muvaffaqiyatli tugadi!" qiymatini uzatadi.

then metodi orqali cansole.log da natijani chiqarish:

Promise.then((result) => {
    console.log(result); // "Bu operatsiya muvaffaqiyatli tugadi!" ni cansole.log da chiqaradi
});

reject

reject funksiyasi promis muvaffaqiyatsiz tugaganda chaqiriladi. Bu funksiya o'ziga argument sifatida biror xatolik yoki muvaffaqiyatsizlik haqidagi ma'lumotni oladi, va bu qiymat keyinchalik .catch() metodiga uzatiladi.

let mPromise = new Promise((resolve, reject) => {
    let success = false; // Bu yerda sizning asinxron operatsiyangiz bo'lishi mumkin

    if (!success) {
        reject("Bu operatsiya muvaffaqiyatsiz tugadi.");
    }
});

Yuqoridagi misolda, success o'zgaruvchisi false bo'lsa, reject funksiyasi chaqiriladi va "Bu operatsiya muvaffaqiyatsiz tugadi." qiymatini uzatadi.

mPromise
    .then((result) => {
        console.log(result); // Bu yerga kirmaydi keyingi blockga o'tadi
    })
    .catch((error) => {
        console.error(error); // "Bu operatsiya muvaffaqiyatsiz tugadi." ni cansole.logda chop  etadi
    });

Javascript OOP

BekmuhammadDev — Sat, 06 Jul 2024 22:55:49 +0000

JavaScript and Object-Oriented Programming

Obyektga yo'naltirilgan dasturlash OOP - bu dasturiy ta'minotni loyihalash va rivojlantirishda keng qo'llaniladigan yondashuv bo'lib, u ma'lumotlar va kodlarni obyektlar ko'rinishida tashkil etish orqali amalga oshiriladi. JavaScript ham OOP usullarini qo'llab-quvvatlaydi.Ob'ektga yo'naltirilgan dasturlash yoki OOP zamonaviy ilovalarni ishlab chiqish paradigmasi bo'lib, Java, C# yoki JavaScript kabi asosiy tillar tomonidan qo'llab-quvvatlanadi.

Oddiy misol JavaScript OOP ning asosiy tamoyillarini qanday amalga oshirishini ko'rishga yordam beradi. Savatingizga mahsulotlarni qo'yish va keyin to'lashingiz kerak bo'lgan umumiy narxni hisoblab chiqadigan xarid qilish holatini ko'rib chiqing. Agar siz JavaScript-dagi bilimingizni olsangiz va OOPsiz foydalanish holatini kodlasangiz, u quyidagicha ko'rinadi:

const non = {nomi: 'Non', narxi: 1};
const suv = {nomi: 'suv', nsrxi: 0.25};

OOP istiqboli yaxshiroq kod yozishni osonlashtiradi, chunki biz ob'ektlarni haqiqiy dunyoda duch kelganimizdek o'ylaymiz. Bizning foydalanish holatimiz mahsulotlar savatini o'z ichiga olganligi sababli, bizda allaqachon ikkita turdagi ob'ektlar mavjud - savat ob'ekti va mahsulot ob'ektlari.

const savat = [];
savat.push(non);
savat.push(non);
savat.push(non);
savat.push(suv);
savat.push(suv);

bu kod orqali savat nomli o'zgaruvchi ochiladi va maxsulotlar ya'ni non va suv push metodi orqali savat nomli o'zgaruvchiga saqlanadi va savatimizda objectlar mavjud bo'ladi

class

JavaScript-da class sinf obyektlarni yaratish va ularni boshqarish uchun qo'llaniladigan yangi sintaksisdir. Classlar ES6 ECMAScript 2015 versiyasidan boshlab qo'llab-quvvatlanadi va bu obyektga yo'naltirilgan dasturlashni amalga oshirishda katta qulaylik yaratadi.

JavaScript-da Class

Class yaratish

class Person {
  constructor(name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;
  }

  // Method
  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

// Classdan obyekt yaratish
let person1 = new Person("Alice", 25, "Designer");
person1.sayHello(); // "Hello, my name is Alice"

Konstruktor

constructor - bu sinfda maxsus metod bo'lib, u yangi obyekt yaratilganda avtomatik ravishda chaqiriladi. Konstruktor orqali obyektning dastlabki qiymatlari o'rnatiladi.

class Animal {
  constructor(name, species) {
    this.name = name;
    this.species = species;
  }

  // Method
  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

let animal1 = new Animal("Lion", "Mammal");
animal1.speak(); // "Lion makes a noise."

Metodlar

Class ichida metodlar aniqlash juda oson. Faqat metod nomini yozish va uni funksiya kabi belgilash kerak.

class Car {
  constructor(brand, model) {
    this.brand = brand;
    this.model = model;
  }

  startEngine() {
    console.log(`${this.brand} ${this.model} engine started.`);
  }
}

let car1 = new Car("Toyota", "Corolla");
car1.startEngine(); // "Toyota Corolla engine started."

Statik Metodlar

Statik metodlar sinfning o'ziga tegishli bo'lib, ularni sinf nomi orqali chaqirish mumkin, obyektlar orqali emas.

class MathUtilities {
  static add(a, b) {
    return a + b;
  }
}

console.log(MathUtilities.add(5, 3)); // 8

Meros olish

extends kalit so'zi orqali bir sinfni boshqa sinfdan meros olish mumkin. super kalit so'zi yordamida esa ota sinfning konstruktorini yoki metodlarini chaqirish mumkin.

class Employee extends Person {
  constructor(name, age, job, salary) {
    super(name, age, job); // Ota sinf konstruktorini chaqirish
    this.salary = salary;
  }

  // Method
  displaySalary() {
    console.log(`Salary: ${this.salary}`);
  }
}

let employee1 = new Employee("David", 28, "Developer", 50000);
employee1.sayHello(); // "Hello, my name is David"
employee1.displaySalary(); // "Salary: 50000"

JavaScript-da classlar obyektga yo'naltirilgan dasturlashni qulayroq va osonroq amalga oshirish imkonini beradi. Classlar yordamida kodni tartibga solish, qayta foydalanish va kengaytirish osonlashadi. Agar qo'shimcha savollaringiz bo'lsa yoki boshqa mavzular haqida bilmoqchi bo'lsangiz, marhamat, so'rang!

Javascript/Html/Css

BekmuhammadDev — Tue, 02 Jul 2024 02:23:09 +0000

JavaScript, HTML and CSS are the three main technologies for creating web pages. Each of them has its own unique features, and when used together, they are very effective in creating and managing web pages.

javascript,html,css structura:

HTML (HyperText Markup Language)
HTML is used to define the structure of web pages. It detects the components of web pages, such as text, images, videos, links, and other elements.

Basic Structure of HTML:

An HTML document consists of three main parts: the doctype declaration, the head part, and the body part.

The basic structure of HTML is:



<!DOCTYPE html>
<html>
<head>
  <title>Mening Veb Sahifam</title>
</head>
<body>

  <h1>Sarlavha</h1>
  <p>Bu paragraflar.</p>

</body>
</html>

An HTML element is defined using tags. The tags consist of opening and closing tags, and the content between them makes up the content of the HTML element.

Basic HTML Tags

'html': start and end of HTML document.
'head': Contains metadata, styling and scripts.
'title': Text to be displayed in the browser's title section.
'body': Contains the main content of the web page.
'h1' to 'h6': Labels for headings, 'h1' is the largest, 'h6' is the smallest heading.
'p': Paragraph text.
'a': Link (anchor) element.
'img': Image element.
'div': A section or container element.
'span': Inline container element.

HTML is used to define the basic structure of web pages. It has a simple and understandable syntax, making it a very powerful tool when used in combination with other technologies. Using HTML, CSS, and JavaScript together, you can create interactive and aesthetically beautiful web pages.

CSS (Cascading Style Sheets)
CSS is used to specify the appearance, that is, the style of web pages. It controls the color, font, size, position and other visual properties of HTML elements.

css kod:



<!DOCTYPE html>
<html>
<head>
  <title>Mening Veb Sahifam</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f0f0f0;
      color: #333;
    }
    h1 {
      color: #0066cc;
    }
  </style>
</head>
<body>

  <h1>Sarlavha</h1>
  <p>Bu paragraflar.</p>

</body>
</html>

css example:



h1 {
  color: blue;
  font-size: 24px;
}

In the example above, the h1 selector sets the color and font-size properties for all

tags.

JavaScript
JavaScript adds dynamism to web pages. It manages user interaction, changes page content, validates data, and performs many other tasks.JavaScript is mainly used to make web pages dynamic and interactive. JavaScript was originally created by Netscape and is now one of the most popular and widely used programming languages in the world.

javascript code:



<!DOCTYPE html>
<html>
<head>
  <title>Mening Veb Sahifam</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f0f0f0;
      color: #333;
    }
    h1 {
      color: #0066cc;
    }
  </style>
</head>
<body>

  <h1 id="sarlavha">Sarlavha</h1>
  <p id="matn">Bu paragraflar.</p>
  <button onclick="matnniOzgartirish()">Matnni O'zgartirish</button>

  <script>
    function matnniOzgartirish() {
      document.getElementById("sarlavha").innerHTML = "Yangi Sarlavha";
      document.getElementById("matn").innerHTML = "Matn o'zgartirildi!";
    }
  </script>

</body>
</html>

Usage of JavaScript:

Web Development: Mainly used in front-end development, but also used in back-end development thanks to Node.js.
Mobile Apps: Used to create mobile apps through frameworks like React Native and Ionic.
Games: Frameworks like Phaser and Babylon.js are used to create games that can be played in the browser.
Server-side programming: Using Node.js, you can write programs that run on the server.

Popular frameworks and libraries:

React: Developed by Facebook and widely used to create Single Page Applications (SPAs).
Angular: Developed by Google and designed for building large and complex web applications.
Vue.js: A framework with a very flexible and simple syntax, used in small and large projects.
Node.js: Used for server-side programming, and helps create highly efficient and scalable web applications.

HTML defines the structure of the page, CSS decorates the page, and JavaScript adds dynamism to the page. Together, these three technologies are used to make web pages beautiful and interactive.

In the ranking of technologies in 2023, javascript is the leader, html, css is in 2nd place and other languages.

Javascript/Html/Css

BekmuhammadDev — Sun, 30 Jun 2024 03:03:39 +0000

JavaScript, HTML va CSS veb sahifa yaratishda uch asosiy texnologiyasi hisoblanadi. Ularning har biri o'ziga xos funksiyalarga ega bo'lib, birgalikda ishlatilganda veb-sahifalarni yaratish va boshqarishda juda samarali bo'ladi.

javascript,html,css strukturasi:

HTML (HyperText Markup Language)
HTML veb-sahifalarning tuzilishini belgilash uchun ishlatiladi. U veb-sahifalarning tarkibiy qismlarini aniqlaydi, masalan, matn, tasvirlar, videolar, havolalar va boshqa elementlarni.

HTML ning Asosiy Tuzilishi:

HTML hujjati asosiy uch qismdan iborat: doctype deklaratsiyasi, head qismi va body qismi.

HTML ning asosiy tuzilishi:

<!DOCTYPE html>
<html>
<head>
  <title>Mening Veb Sahifam</title>
</head>
<body>

  <h1>Sarlavha</h1>
  <p>Bu paragraflar.</p>

</body>
</html>

HTML Elementlari:

HTML elementi teglar yordamida belgilangan. Teglar ochuvchi va yopuvchi teglardan iborat bo'ladi va ular orasidagi kontent HTML elementining mazmunini tashkil qiladi.

Asosiy HTML Teglari

'html': HTML hujjatining boshlanishi va tugashi.
'head': Metama'lumotlar, stil va skriptlarni o'z ichiga oladi.
'title': Brauzerning sarlavha qismida ko'rsatiladigan matn.
'body': Veb-sahifaning asosiy mazmunini o'z ichiga oladi.
'h1' dan 'h6' gacha: Sarlavhalar uchun teglar, 'h1' eng katta, 'h6' eng kichik sarlavha.
'p': Paragraf matni.
'a': Havola (anchor) elementi.
'img': Tasvir elementi.
'div': Bo'lim yoki konteyner elementi.
'span': Inline konteyner elementi.

HTML veb-sahifalarning asosiy tuzilishini belgilash uchun ishlatiladi. U oddiy va tushunarli sintaksisga ega bo'lib, boshqa texnologiyalar bilan birgalikda ishlatilganda juda qudratli vositaga aylanadi. HTML, CSS va JavaScript bilan birga ishlatib, interaktiv va estetik jihatdan chiroyli veb-sahifalar yaratishingiz mumkin.

CSS (Cascading Style Sheets)
CSS veb-sahifalarning ko'rinishini, ya'ni stilini belgilash uchun ishlatiladi. U HTML elementlarining rangini, shriftini, o'lchamini, joylashuvini va boshqa vizual xususiyatlarini boshqaradi.

css kod:

<!DOCTYPE html>
<html>
<head>
  <title>Mening Veb Sahifam</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f0f0f0;
      color: #333;
    }
    h1 {
      color: #0066cc;
    }
  </style>
</head>
<body>

  <h1>Sarlavha</h1>
  <p>Bu paragraflar.</p>

</body>
</html>

css misol:

h1 {
  color: blue;
  font-size: 24px;
}

Yuqoridagi misolda h1 selektori barcha

teglari uchun color va font-size xususiyatlarini belgilaydi.

JavaScript
JavaScript veb-sahifalarga dinamiklik qo'shadi. U foydalanuvchi bilan o'zaro aloqani boshqaradi, sahifa mazmunini o'zgartiradi, ma'lumotlarni tekshiradi va boshqa ko'plab vazifalarni bajaradi.JavaScript asosan veb-sahifalarni dinamik va interaktiv qilish uchun ishlatiladi. JavaScript dastlab Netscape tomonidan yaratilgan bo'lib, hozirda dunyodagi eng ommabop va keng qo'llaniladigan dasturlash tillaridan biridir.

javascript kod:

<!DOCTYPE html>
<html>
<head>
  <title>Mening Veb Sahifam</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f0f0f0;
      color: #333;
    }
    h1 {
      color: #0066cc;
    }
  </style>
</head>
<body>

  <h1 id="sarlavha">Sarlavha</h1>
  <p id="matn">Bu paragraflar.</p>
  <button onclick="matnniOzgartirish()">Matnni O'zgartirish</button>

  <script>
    function matnniOzgartirish() {
      document.getElementById("sarlavha").innerHTML = "Yangi Sarlavha";
      document.getElementById("matn").innerHTML = "Matn o'zgartirildi!";
    }
  </script>

</body>
</html>

JavaScript'ning qo'llanilishi:

Veb rivojlantirish: Asosan front-end rivojlantirishda ishlatiladi, ammo Node.js tufayli back-end rivojlantirishda ham ishlatiladi.
Mobil ilovalar: React Native va Ionic kabi freymvorklar orqali mobil ilovalar yaratish uchun foydalaniladi.
O'yinlar: Phaser va Babylon.js kabi freymvorklar yordamida brauzerda o'ynaladigan o'yinlar yaratish uchun ishlatiladi.
Server tomon dasturlash: Node.js yordamida serverda ishlaydigan dasturlar yozish mumkin.

Mashhur freymvorklar va kutubxonalar:

React: Facebook tomonidan ishlab chiqilgan va bir sahifali ilovalar (SPA) yaratishda keng qo'llaniladi.
Angular: Google tomonidan ishlab chiqilgan va katta va murakkab veb-ilovalarni yaratish uchun mo'ljallangan.
Vue.js: Juda moslashuvchan va oddiy sintaksisga ega bo'lgan freymvork bo'lib, kichik va katta loyihalarda ishlatiladi.
Node.js: Server tomon dasturlash uchun ishlatiladi, va yuqori samarali va kengaytiriladigan tarmoqli dasturlar yaratishga yordam beradi.

HTML sahifaning tuzilishini belgilaydi, CSS sahifani bezaydi, va JavaScript sahifaga dinamiklik qo'shadi. Bu uchala texnologiya birgalikda veb-sahifalarni chiroyli va interaktiv qilish uchun ishlatiladi.

2023-yildagi texnalogiyalar reytingida javascript yetakchi html,css 2-o'rinda va boshqa tillar.

JS Runtime / Execution context

BekmuhammadDev — Sun, 30 Jun 2024 02:27:28 +0000

JavaScript runtime is the environment or engine required to run JavaScript code. These runtime environments parse and execute JavaScript code. JavaScript is the only language that runs in the browser.

Runtime types and operating environment:
1-Google chrome (Browser)

Browsers are the main runtime environment of JavaScript. Each browser has its own JavaScript engine:

Google Chrome: V8 engine.
Mozilla Firefox: SpiderMonkey engine.
Safari: JavaScriptCore (Nitro) engine.
Microsoft Edge: Chakra old versions and V8 new versions.

In the browser JavaScript runtime environment, JavaScript code can be used together with HTML and CSS.

2-Node.js

Node.js is a runtime environment for running JavaScript on the server side. This environment is based on the V8 engine and allows JavaScript code to be executed outside the browser.
Nodejs technology runs javascript codes outside the browser.

Server scripts: HTTP servers, APIs, etc.
Asynchronous performance: The asynchronous nature of Node.js makes it highly efficient and fast.
Large ecosystem: There are many modules and libraries for Node.js.

Execution context
In the JavaScript programming language, the execution context is the environment that contains all the information necessary to execute the code. Each executable code has its own execution context. Execution context contains the following elements:

Variable Object All variables, functions and arguments are stored here.
Scope Chain
Scope chain represents the search order of variables and functions. Each execution context has its own scope chain, and this scope chain contains references to the outer parent execution contexts.
this Keyword
The this keyword can refer to different objects depending on the execution context.

Types of Execution Context

There are 2 main types of execution context in JavaScript:

1-Global Execution Context:

2-Function Excution Context:

javascript in global execution vs function execution

Execution context:

Execution Context

When JavaScript is running in a browser, it cannot be understood directly, so it must be converted into a machine-readable language. When the browser's JavaScript engine encounters JavaScript code, it "translates" the JavaScript code we wrote and creates a special environment that controls the execution. This environment is called Execution context.

**Execution context* can have global scope and function scope. When JavaScript first runs, it creates a global scope.*

Next, the JavaScript **parses* and stores the variable and function declarations in memory.*

Finally, the code will initialize the variables stored in memory.

Execution context is a block of data opened by JavaScript for each block of code, which contains all the information needed for the currently running code. For example, the variables/functions/this keyword

Creation phase - variables declared with var are assigned undefined, variables declared with let are uninitilized and functions are read.
Execution phase - variables are assigned values and functions are called.

Javascript Ls/ss/cookies

BekmuhammadDev — Fri, 28 Jun 2024 02:50:53 +0000

Browser Memory:

localStorage
Session Storage
Cookies

Method

SetItem();
GetItem();
RemoveItem();
Clear();

Local Storage
localStorage for long-term storage of data in the browser. 5-10 MB of memory is allocated for each origin domain by taking number.localStorage even after the cached data browser is closed. This amount may vary slightly depending on the browser and device.

Data storage(SetItem):

localStorage.setItem('key', 'value');

cancole:

Get information(GetItem):

let value = localStorage.getItem('key');
cansole.log(value)

cansole:

Delete data(removeItem):

localStorage.removeItem('key');

Delete all data(Clear):

localStorage.clear();

Session Storage
sessionStorage is also used to store data in the user's browser, but this data is only stored for the duration of the session. That is, the data is deleted when the browser window is closed. sessionStorage is also usually allocated 5-10 MB of memory for each originating domain. This amount may also vary by browser and device. sessionStorage only stores data for the duration of the session, and when the session ends (when the browser window is closed), the data is deleted.

Data storage:

sessionStorage.setItem('key', 'value');

Get information(GetItem):

let value = sessionStorage.getItem('key');

Delete data(removeItem):

sessionStorage.removeItem('key');

Delete all data(Clear):

sessionStorage.clear();

Cookies
Cookies are small pieces of information that are stored in the browser and can be read by websites. Cookies can be set with a specific term and can be deleted when the browser is closed or at a specific time interval.

Data storage:

document.cookie = "key=value; path=/; max-age=3600"; //it is kept for 1 hour

Get information

function getCookie(key) {
  let name = key + "=";
  let decodedCookie = decodeURIComponent(document.cookie);
  let ca = decodedCookie.split(';');
  for(let i = 0; i < ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

Delete data

document.cookie = "key=; path=/; max-age=0";

Memory size may vary slightly by browser and platform. An overview of the localStorage and sessionStorage sizes of some popular browsers:

Google Chrome: About 10 MB.
Mozilla Firefox: About 10 MB.
Microsoft Edge: About 10 MB.
Safari: About 5 MB.
Opera: About 10 MB.

Javascript Ls/ss/cookies😎

BekmuhammadDev — Thu, 27 Jun 2024 14:10:51 +0000

Browser Memory:

localStorage
Session Storage
Cookies

Method

SetItem();
GetItem();
RemoveItem();
Clear();

Local Storage
localStorage foydalanuvchi brauzerida ma'lumotlarni uzoq muddat saqlash uchun ishlatiladi. Saqlangan ma'lumotlar brauzer yopilgandan keyin ham saqlanadi.localStorage odatda har bir kelib chiqadigan domen uchun taxminan 5-10 MB xotira ajratiladi. Bu miqdor brauzer va qurilmaga qarab biroz farq qilishi mumkin.

Ma'lumot saqlash(SetItem):

localStorage.setItem('kalit', 'qiymat');

cancole:

Ma'lumot olish(GetItem):

let qiymat = localStorage.getItem('kalit');
cansole.log(qiymat)

cansole:

Ma'lumotni o'chirish(removeItem):

localStorage.removeItem('kalit');

Barcha ma'lumotlarni o'chirish(Clear):

localStorage.clear();

Session Storage
sessionStorage ham foydalanuvchi brauzerida ma'lumotlarni saqlash uchun ishlatiladi, lekin bu ma'lumotlar faqat sessiya davomida saqlanadi. Ya'ni, brauzer oynasi yopilganda ma'lumotlar o'chiriladi.sessionStorage ham odatda har bir kelib chiqadigan domen uchun 5-10 MB xotira ajratiladi. Bu miqdor ham brauzer va qurilmaga qarab o'zgarishi mumkin. sessionStorage faqat sessiya davomida ma'lumotlarni saqlaydi va sessiya tugashi bilan (brauzer oynasi yopilganda) ma'lumotlar o'chiriladi.

Ma'lumot saqlash:

sessionStorage.setItem('kalit', 'qiymat');

Ma'lumot olish:

let qiymat = sessionStorage.getItem('kalit');

Ma'lumotni o'chirish:

sessionStorage.removeItem('kalit');

Barcha ma'lumotlarni o'chirish:

sessionStorage.clear();

Cookies
Cookies kichik ma'lumotlar bo'lib, ular brauzerda saqlanadi va veb-saytlar tomonidan o'qilishi mumkin. Cookies maxsus muddat bilan belgilanishi mumkin va brauzer yopilganda yoki maxsus vaqt oralig'ida o'chirilishi mumkin.

Cookie saqlash:

document.cookie = "kalit=qiymat; path=/; max-age=3600"; // 1 soat davomida saqlanadi

Cookie olish:

function getCookie(kalit) {
  let name = kalit + "=";
  let decodedCookie = decodeURIComponent(document.cookie);
  let ca = decodedCookie.split(';');
  for(let i = 0; i < ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

Cookie o'chirish:

document.cookie = "kalit=; path=/; max-age=0";

Xotira hajmi brauzer va platformaga qarab biroz farq qilishi mumkin. Ba'zi mashhur brauzerlarning localStorage va sessionStorage hajmlari haqida umumiy ma'lumot:

Google Chrome: Taxminan 10 MB.
Mozilla Firefox: Taxminan 10 MB.
Microsoft Edge: Taxminan 10 MB.
Safari: Taxminan 5 MB.
Opera: Taxminan 10 MB.

Javascript Ls/ss/cookies

BekmuhammadDev — Thu, 27 Jun 2024 14:10:04 +0000