DEV Community

BekmuhammadDev
BekmuhammadDev

Posted on

Frontend Questions

#htmltags #responsive #javascript #frontend
  1. HTML ning asosiy taglari Tuzilma taglar 
<html>: Sahifa HTML ekanligini belgilaydi.
<head>: Metama'lumotlar, uslub, skriptlar joylashadi.
<body>: Asosiy kontent shu yerda bo‘ladi.
Enter fullscreen mode Exit fullscreen mode
  1. 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.
Enter fullscreen mode Exit fullscreen mode

3.Rasm va multimedia

<img src="manba" alt="tavsif">: Rasm qo‘shadi.
<video> va <audio>: Video va audio qo‘shish uchun.
Enter fullscreen mode Exit fullscreen mode
  1. Havolalar va ro'yxatlar uchun 
<a href="manzil">Havola matni</a>: Havola.
<ul>: Tartibsiz ro‘yxat.
<ol>: Tartibli ro‘yxat.
<li>: Ro‘yxat elementi.
Enter fullscreen mode Exit fullscreen mode
  1. Formalar va ma'lumotlar kiritish uchun 
<form>: Forma yaratish.
<input type="text">: Matn kiritish.
<button>: Tugma.
Enter fullscreen mode Exit fullscreen mode

6.Jadval yaratish:

<table>: Jadval.
<tr>: Qator.
<td>: Ustun.
<th>: Jadval sarlavhasi.
Enter fullscreen mode Exit fullscreen mode

Javascriptni Htmlga ulash

  1. 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>
Enter fullscreen mode Exit fullscreen mode

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

<script>
  console.log("Hello from internal script!");
</script>
Enter fullscreen mode Exit fullscreen mode

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


<script src="app.js"></script>
Enter fullscreen mode Exit fullscreen mode

async va defer haqida

  1. 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>
Enter fullscreen mode Exit fullscreen mode
  1. 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>
Enter fullscreen mode Exit fullscreen mode

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:

  1. Meta-teglar; title Sahifa sarlavhasini belgilaydi. 
<title>Mening Sahifam</title>
Enter fullscreen mode Exit fullscreen mode
  1. Sarlavha taglar h1 va h6 matnlar tuzulishi va hamida ishlatiladi. 
<h1>Asosiy Sarlavha</h1>
<h2>Bo‘lim nomi</h2>
Enter fullscreen mode Exit fullscreen mode

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

  1. Img taglaridagi alt atributi Rasimga tavsif berish orqali qidiruv tizimlariga yordam beradi. 
<img src="rasm.jpg" alt="SEO haqida tushuncha">
Enter fullscreen mode Exit fullscreen mode
  1. 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>
Enter fullscreen mode Exit fullscreen mode
  1. Lang atributi; sahifaning tilini belgilaydi; 
<html lang="uz">
Enter fullscreen mode Exit fullscreen mode
  1. Mobile-friendly dizayn uchun teglar; meta name="viewport" Sahifani mobil qurilmalar uchun optimallashtiradi, 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Enter fullscreen mode Exit fullscreen mode
  1. 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>
Enter fullscreen mode Exit fullscreen mode

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

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;

  1. 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;
}
Enter fullscreen mode Exit fullscreen mode

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

nav {
  ul {
    margin: 0;
    li {
      list-style: none;
    }
  }
}
Enter fullscreen mode Exit fullscreen mode
  1. 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;
}
Enter fullscreen mode Exit fullscreen mode
  1. 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
}
Enter fullscreen mode Exit fullscreen mode
  1. 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;
}
Enter fullscreen mode Exit fullscreen mode

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!");
});
Enter fullscreen mode Exit fullscreen mode
  1. Dinamik kontent yaratish: HTML va CSS-ni o‘zgartirib, veb-sahifani yangilash. 
document.querySelector("h1").innerText = "Yangi sarlavha!";
Enter fullscreen mode Exit fullscreen mode
  1. 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));
Enter fullscreen mode Exit fullscreen mode

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.

  1. String Matn yoki harflar ketma-ketligini saqlaydi. 
let name = "Ismingiz";
console.log(name); // "Ismingiz"
Enter fullscreen mode Exit fullscreen mode
  1. Number Butun va o‘nlik sonlarni saqlaydi. 
let age = 25;
let pi = 3.14;
console.log(age, pi); // 25, 3.14
Enter fullscreen mode Exit fullscreen mode
  1. Boolean true yoki false qiymatlarini saqlaydi (mantiqiy). 
let isLoggedIn = true;
console.log(isLoggedIn); // true
Enter fullscreen mode Exit fullscreen mode
  1. Undefined Qiymat hali aniqlanmagan bo‘lsa, undefined qaytariladi. 
let x;
console.log(x); // undefined
Enter fullscreen mode Exit fullscreen mode
  1. Null null qiymati qiymat yo‘qligini ifodalaydi. 
let y = null;
console.log(y); // null
Enter fullscreen mode Exit fullscreen mode
  1. Symbol Unikal va o‘zgarmas qiymatlar uchun ishlatiladi. 
let sym = Symbol("unique");
console.log(sym); // Symbol(unique)
Enter fullscreen mode Exit fullscreen mode
  1. BigInt Juda katta sonlarni saqlash uchun ishlatiladi. 

let bigNumber = 123456789012345678901234567890n;
console.log(bigNumber); // 123456789012345678901234567890n
Enter fullscreen mode Exit fullscreen mode

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

  1. Object Kalit-qiymat juftliklarini saqlaydi. 
let person = {
    name: "Ismingiz",
    age: 25
};
console.log(person.name); // "Ismingiz"
Enter fullscreen mode Exit fullscreen mode
  1. Array Qiymatlar ro‘yxatini saqlaydi. 

let fruits = ["Olma", "Banan", "Uzum"];
console.log(fruits[0]); // "Olma"
Enter fullscreen mode Exit fullscreen mode
  1. Function Amal yoki kodni bajaruvchi obyekt. 
function greet() {
    return "Salom!";
}
console.log(greet()); // "Salom!"
Enter fullscreen mode Exit fullscreen mode

** 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
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

wallacefreitas profile image

Understanding God Objects in Object-Oriented Programming

Wallace Freitas -

ninjasoards profile image

Setup PostgreSQL w/ pgvector in a docker container

David Y Soards -

arindam_1729 profile image

Top 5 Open Source Projects You Must Explore Before 2025

Arindam Majumder -

eddiegulay profile image

Secure Text Encryption and Decryption with Vanilla JavaScript

Eddie Gulay -