Javascript/Html/Css
Tags: javascript, html, css
Published: 2024-06-30 03:03:39


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pdq7jvr8gzfkwt93l3bs.png)

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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6qxquvuo5vt0w0org8h4.png)

_javascript,html,css strukturasi:_

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2xzsu57h86ywjqor0jfk.png)

**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 <h1> 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:

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

Mashhur freymvorklar va kutubxonalar:

1. React: Facebook tomonidan ishlab chiqilgan va bir sahifali ilovalar (SPA) yaratishda keng qo'llaniladi.
2. Angular: Google tomonidan ishlab chiqilgan va katta va murakkab veb-ilovalarni yaratish uchun mo'ljallangan.
3. Vue.js: Juda moslashuvchan va oddiy sintaksisga ega bo'lgan freymvork bo'lib, kichik va katta loyihalarda ishlatiladi.
4. 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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/93d0i8zprt2wp70ta952.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w6a9ridpmpjzc0yrh25o.png)