jamila aliyeva

Lesson 15

2023-08-02T09:26:22.182Z

DOM

Wha is is DOM?

DOM → Document Object Model

DOM'nig ikkita muhim tushunchasi bor:

Element va Node

Element — HTML teglari;
Node — teglar ham o'lishi mumkin, newline(text), comment ham bo'lishi mumkin.

HTMLCollection(getElementsByTagName, getElementsByClassName, children) vs NodeList(querySelectorAll, childNodes)

Selecting

getElementById()

html

.<!DOCTYPE html>
<html lang="en"> 
 <head>    <meta charset="UTF-8" />  
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />   
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />   
   <title>Document</title> 
     </head> 
      <body>   
       <header>     
        <nav>       
          <a href="#home">Home</a>     
          <a href="#about">About</a>      
          <button></button>     
         </nav>    
        </header>   
           <main>    
             <section id="home" class="home">      
                  <div class="home__container">
                  </div>     
            </section>    
          <section id="about" class="about">     
              <div class="about__container"></div>   
          </section>   
         </main>
      </body>
   </html>

javaScript

const homeSection = document.getElementById("home");
console.log(homeSection);

bu holatta id'si home bo'lgan elementni o'zlashtirdi.

getElementsByTagName()

HTML

.<!DOCTYPE html>
<html lang="en"> 
 <head>    <meta charset="UTF-8" />  
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />   
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />   
   <title>Document</title> 
     </head> 
      <body>   
       <header>     
        <nav>       
          <a href="#home">Home</a>     
          <a href="#about">About</a>      
          <button></button>     
         </nav>    
        </header>   
           <main>    
             <section id="home" class="home">      
                  <div class="home__container">
                  </div>     
            </section>    
          <section id="about" class="about">     
              <div class="about__container"></div>   
          </section>   
         </main>
      </body>
   </html>

JavaScript

const allDivs = document.getElementsByTagName("div");
console.log(allDivs);

bu holatta console'ga massive korinishida barcha mavjud bo'lgan divlarni chiqarib beradi. Lekin bular haqiqiy massive bo'lmaydi,

console.log(sectionTitles[0]);
console.log(sectionTitles[1]); //bunaqa ko'rinishda murojaat qilsak bo'ladi

getElementsByClassName()

HTML

..<!DOCTYPE html>
<html lang="en"> 
 <head>    <meta charset="UTF-8" />  
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />   
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />   
   <title>Document</title> 
     </head> 
      <body>   
       <header>     
        <nav>       
          <a href="#home">Home</a>     
          <a href="#about">About</a>      
          <button></button>     
         </nav>    
        </header>   
           <main>    
             <section id="home" class="home">      
                  <div class="home__container">
                  <h1> Hello DOM</h1>
                  </div>     
            </section>    
          <section id="about" class="about">     
              <div class="about__container">
              <h1> Hello DOM</h1>
              </div>   
          </section>   
         </main>
      </body>
   </html>

JavaScript

let containers = document.getElementsByClassName("container");
console.log(containers);

bu holatta esa xuddi tagNaem orqali chiqarganimizdek boladi.

querySelector() (faqat bottasini tanlab olishimiz mumkin)

 let homeTitle = document.querySelector("#home h1");
 console.log(homeTitle);

yuqoridagi HTML'ni ichidahi H1ni ichidagi textni console chiqarib beradi.

querySelectorAll() (tanlab olayoygan elementimiz nechta bo'layotgan bo'lsa shunchasini tanlab beradi)

let allH1 = document.querySelectorAll("section h1");
console.log(allH1);

Traversing

parentNode, parentElement

 let homeTitle = document.querySelector("#home h1");
 
 console.log(homeTitle.parentElement); // optimal
 console.log(homeTitle.parentNode);

yuqoridagi HTML code'da h1ni otasini tanlab olyapti

childNodes, children

 let main = document.querySelector("main");
 console.log(main);
 console.log(main.children); // optimal
 console.log(main.childNodes); // node ya;ni textlari bilan chiqaradi

main'ning ichidagi elementlarni chiqaradi;

nextSibling, nextElementSibling

..<!DOCTYPE html>
<html lang="en"> 
 <head>    <meta charset="UTF-8" />  
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />   
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />   
   <title>Document</title> 
     </head> 
      <body>   
       <header>     
        <nav>       
          <a href="#home">Home</a>     
          <a href="#about">About</a>      
          <button></button>     
         </nav>    
        </header>   
           <main>    
             <section id="home" class="home">      
                  <div class="home__container">
                  <h1> Hello DOM</h1>
                  </div>     
            </section>    
          <section id="about" class="about">     
              <div class="about__container">
              <h1> Hello DOM</h1>
              </div>   
          </section>  
        <section id="contuct" class="contuct">        
          <div class="contuct__container">
          <h1> Hello DOM</h1>
          </div>     
        </section> 
         </main>
      </body>
   </html>

javaScript

let aboutSection = document.querySelector("#about");
console.log(aboutSection);
console.log(aboutSection.nextElementSibling); // optimal
console.log(aboutSection.nextSibling);

birinchi logda about sectionni ozini chiqariub beradi,

ikkinchisida about'dan keyingi section ( contuct)ni chiqarib beradi;

uchunchisida esa text ya;ni newline bilan ciqarib beradi

previousSibling, previousElementSibling

let aboutSection = document.querySelector("#about");

console.log(aboutSection.previousElementSibling);
console.log(aboutSection.previousSibling);

bu holatta aboutdan oldingi section (home) chiqadi

firstChild, firstElementChild

 let main = document.querySelector("main");
 console.log(main.firstElementChild);
 console.log(main.firstChild);

birinchi sectinni tanlab beradi;

lastChild, lastElementChild

 let main = document.querySelector("main");

console.log(main.lastElementChild);

 console.log(main.lastChild);

oxirgi sectinini tanlab beradi;

Styling

style property

..<!DOCTYPE html>
<html lang="en"> 
 <head>    <meta charset="UTF-8" />  
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />   
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />   
   <title>Document</title> 
     </head> 
      <body>   
       <header>     
        <nav>       
          <a href="#home">Home</a>     
          <a href="#about">About</a>      
          <button></button>     
         </nav>    
        </header>   
           <main>    
             <section id="home" class="home">      
                  <div class="home__container">
                  <h1 class=home_title > Hello DOM</h1>
                  </div>     
            </section>    
          <section id="about" class="about">     
              <div class="about__container">
              <h1 class=home_title> Hello DOM</h1>
              </div>   
          </section>  
        <section id="contuct" class="contuct">        
          <div class="contuct__container">
          <h1 class=home_title> Hello DOM</h1>
          </div>     
        </section> 
         </main>
      </body>
   </html>

javaScript

let homeTitle = document.querySelector("#home h1");
homeTitle.style.backgroundColor = "red";
homeTitle.style.padding = "10px 20px";
homeTitle.style.color = "white";

homeTitle.style = `

  margin: 20px 40px;

  padding: 10px 20px;

border: 5px solid black;

  color: white;

  background-color: red; `;

getComputedStyle(element, [pseudoElement])

 let styleObj = getComputedStyle(homeTitle);
console.log(styleObj.backgroundColor);
console.log(styleObj.padding);

bu style'lani object korinishida chiqarib beradi

offsetWidth, offsetHeight ( margini hisobga olinmaydi, borderini , paddingni, contentini hisobga oladi)

 let styleObj = getComputedStyle(homeTitle);

console.log(homeTitle.offsetHeight);

console.log(homeTitle.offsetWidth);

clientWidth, clientHeight ( boredini marginini hisobga olmaydi, faqat padding, cintentni hisoblab beradi)

let styleObj = getComputedStyle(homeTitle);

console.log(homeTitle.clientHeight);

console.log(homeTitle.clientWidth);

Class

selector.className;

let homeTitle = document.querySelector("#home h1");
console.log(homeTitle.className);

idisi home bolgan sectionni h1'ni classini cbiqarib beradi. (home_title)

.<!DOCTYPE html>
<html lang="en"> 
 <head>    <meta charset="UTF-8" />  
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />   
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />   
   <title>Document</title> 
   <style>     
    .home_title{       
     font-size: 30px;       
      color: red;      
     }      
     .home_title_text{     
        color: yellow;
      }
      </style>
     </head> 
      <body>   
       <header>     
        <nav>       
          <a href="#home">Home</a>     
          <a href="#about">About</a>      
          <button></button>     
         </nav>    
        </header>   
           <main>    
             <section id="home" class="home">      
                  <div class="home__container">
                  <h1 class=home_title > Hello DOM</h1>
                  </div>     
            </section>    
          <section id="about" class="about">     
              <div class="about__container">
              <h1 class=home_title> Hello DOM</h1>
              </div>   
          </section>  
        <section id="contuct" class="contuct">        
          <div class="contuct__container">
          <h1 class=home_title> Hello DOM</h1>
          </div>     
        </section> 
         </main>
      </body>
   </html>

let homeTitle = document.querySelector("#home h1");

homeTitle.className = "home_title_text";

bu holatta home_title classi .home_title_text'ga o'zgaradi, home_titlega style bersak ham element ozgarmaydi

homeTitle.className += " home_title_text";

agar bu holatta yozadigan bo'lsak ikkala class ham ishlayveradi

classList

let homeTitle = document.querySelector("#home h1");

homeTitle.classList.add("home_title_text");

classlariga qoshimcha class qoshib beradi

homeTitle.classList.remove("home__title");

berilgan classni olib tashlaydi

homeTitle.classList.replace("home__title", "home_title_text");

home_tiitleni orniga home_title_text ni olib kelyapti

console.log(homeTitle.classList.contains("home__title"));

bu berigan class bormi yoqmi tekshirib beradi

toggle() — berigan class bolsa olib tashlaydi, yoq bolsa qo;shib beradi

homeTitle.classList.toggle("home_title_text");

Attributes

let homeImg = document.querySelector("#home img"); console.log(homeImg.src); // optimal

console.log(homeImg.alt);

console.log(homeImg.image);

console.log(homeImg.attributes);

console.log(homeImg.attributes[0]);

getAttribute(name)
setAttribute(name, value) homeImg.setAttribute("height", 400);
hasAttribute(name) console.log(homeImg.hasAttribute("alt"));

data-* attributes → dataset

DOM events

Event handlers

<button onclick="func()"> Click </button>

selector.onclick = function () {}

selector.addEventListener("click", function () {})

dblclick

ikki marta bosganimida isshlaydi.

mouseup (bir marta bossak ishlaydi)

let aboutSection = document.querySelector("#about"); aboutSection.addEventListener("mouseup", function ()

{ this.style.backgroundColor = "red";

});

mousedown ( bosib tursak ishlaydi)

aboutSection.addEventListener("mousedown", function () {

this.style.backgroundColor = "yellow";

});

mouseenter ( mouseenter va mouseleave hoverni birlashgani)

aboutSection.addEventListener("mouseenter", function () {

this.style.backgroundColor = "red";

});

"mouseleave

aboutSection.addEventListener("mouseleave", function () {

this.style.backgroundColor = "white";

});

Manipulating

createElement() — element yaratish uchun ishlatamiz;

Masalan: const productCard = document.createElement("div");

createTextNode() — yaratgan elementimizni ichiga yozish uchun foydalanamiz;

Masalan: const productTitleText = document.createTextNode(product.name);

append()

bu ichidagi bolalarini qo'shib beradi;

Masalan: productCard.append(productCardBody, productCardFooter);

appendChild() — agar bitta qoshmoqchi bolsak, bundan foydalanamiz

Masala: productCardBody.appendChild(productImg);

prepend() — oldidan qo'shib beradi;

Masalan: productCardFooter.prepend(productBtn); productCardFooter.prepend(productPrice);

button turadi undan oldin, productPrice'ni qoshib beradi

Javascript Lesson-4

2023-07-11T04:50:12.266Z

Scopes

What is scope?

Scope o'zgaruvchilarni o'zini tutish maydoni

Scope'ni 5xil turi bor

Global
Block
Local or Function
Lexical
Module

var and let

var - global-scoped
let - block-scoped

masala:

var a = 3
{
var a = 10
{ var a = 15
{
a= 40
}
}
}
console.log(a)

code yozyotganimiz global scope hisoblanadi, qavsni ichidagilar block spcope hisoblanadi.

console'dag9i qiymat oxiri 40 chiqadi

let a = 3 // globalniy scope'da 3ga teng
{
let a = 5 // block scope'da 5ga teng
console.log(a) // 5 chiqadi blockni ichidagi qiymat sifatida
}
console.log (a) // 3 chiqadi global scope sifatida
// elon qilmasak, bitta ozgaruvchi bo'lib, ozgaradi, lkn elon qilsak block va global scopelar alohida bo'ladoi

agar biz varda qilayotgan bo'lsak, umumiy oxiridagi qiymatini ozgartirib qoyadi, let block va global scopelarni ajratib beradi

FOR LOOP

for (initializer; condition; iterator) {

// statements

}

bu for'ning strukturasi

masalan:

(misollar orqali tushuntiriligan)

// for (let i = 1; i <= 10; i++) {//   console.log(i);// }
// for (let i = 1; i <= 100; i++) {//   console.log(i);// }
// for (let i = 1; i <= 100; i++) {//   if (i % 2 == 1) {//     console.log(i);//   }// } // 100 times
// for (let i = 1; i <= 100; i += 2) {//   console.log(i);// } // 50 times
// for (let i = 2; i <= 100; i += 2) {//   console.log(i);// }
// for (let i = 10; i >= 1; i--) {//   console.log(i);// }
// for (let i = 100; i >= 1; i--) {//   console.log(i);// }
// for (let i = 99; i >= 1; i -= 2) {//   console.log(i);// }
// for (let i = 100; i >= 2; i -= 2) {//   console.log(i);// }

// let sum = 0;// let mul = 1;
// for (let i = 1; i <= 10; i++) {//   sum += i;//   mul *= i;// }
// console.log(sum);
// console.log(mul);
// let sum = 0;// let mul = 1;
// for (let i = 3; i <= 9; i += 3) {//   sum += i;//   mul *= i;// } // 3 times
// let i = 1;
// for (;;) {//   if (i > 10) {//     break;//   }//   if (i % 3 === 0) {//     sum += i;//     mul *= i;//   }//   i++;// } // 10 times
// console.log(sum);// console.log(mul);
// console.log(i);
// let sum = 0;
// for (let i = 0; i < 10; i++, sum += i);
// console.log(sum);

simple:
for (let i = 1; i <= 10; i++) {

console.log(i);

}

E'lon qilishlarsz:

let j = 1; // initilizer for (; j <= 10; j += 1) {

console.log(j);

}

conditionsz:

for (let j = 1; ; j += 1) {

console.log(j); if (j > 10) { break; } // condition

}

iteratorsz:
for (let j = 1; ; j += 1) {

console.log(j); if (j > 10) {

break;

} // condition

}

expressionsz:
let j = 1; // initilizer for (;;) { if (j > 10) {

break;

} // condition console.log(j); j += 1; // iterator

}

bodysz:

for (let i = 0; i <= 10; i++, console.log(i));

while

while synatxis:

while (condition) { // code block to be executed }

let count = 1;

while (count < 10) { console.log(count); count +=2; }

masalan:

let i = 1;

while ( i > 10){ //condition togri bolayotgan bo'lsa, shuni ichidagi code'lar ishlaydi)

console.log(i );

i++;

}

initializition va iteratorlari har xil joyda boladi

masalalar:

N va K butun musbat sonlari berilgan. Faqat ayirish va qo'shish amallarini ishlatib N sonini K soniga bo'lgandagi qoldiq va butun qismini aniqlovchi programma tuzilsin.

let n = 55;

let k = 9;

let count= 0;

bizni iteratsiyamiz 9 dan kichik son paydo bolguncha davom etadi. Iteratsiya 9 ga teng va undan katta bolyotgan bolsagina davom etayotgan bolishi kerak

while (n > = k ){

count ++ n - = k

}

console.log(n)

console.log(count)

manashuni nomi BOLIB BUTUNNI VA QOLDIQNI ANIQLASH

2 sonining qandaydir darajasini bildiruvchi n butun soni berilgan (n > 0). n = 2^k ni aniqlovchi programma tuzilsin.

Input: 128

Output: 7

let n =32;

count = 0

while ( n !=1){
n = n / 2;

}

console.log(count);

DO WHILE;

do { statement;

} while (expression);

let count = 0;

do { console.log(count);

count++;

} while (count < 5)

bu strukturasi;

let i = 1;

do {
console.log (i);

i ++;

} while (i > 10);

PROJECT

const realPasword = "12345";

let password;

let count = 0

do {
password = prompt ("enter the password")

count ++;

} while (password !== reaslpassword);

alert ( "Siz passwordni " + count + "martada topdingiz!")

BREAK keyword

for (let i = 0; i < 5; i++) {

console.log(i);

if (i == 2) {

break; }

}

bunda console'ga 0, 1, 2 chiqadi sababi break orqali codemiz toxtatilgan

while

let i = 0; while (i < 5) {

i++; console.log(i); if (i == 3)

{

break;

}

0, 1, 2 , 3 console'ga chiqadi 4ga otkazmaydi

continue keyword

for (let i = 0; i < 10; i++) {

if (i % 2 === 0)

{

continue;

}

console.log(i);

}

while

for (let i = 0; i < 10; i++) {

if (i % 2 === 0)

{

continue;

} console.log(i);

}

break — codelari toxtadi va iteratsiya ham toxtaydi, continue esa ozidan keyingi codelarni ishlatmaydi lekin iteratsiayadavom etadi

Javascript LESSON-3

2023-07-10T05:00:26.814Z

Number constructor:

1.EPSILON — contata qiymat

2.MAX_VALU — s'ning qabul qilinishi mumkin bo;lgan eng kattta qiymati hisoblanadi

3.MIN_VALUE — qbul qilisji mumkin bo'lgan ebf kichik qiymati

4.MAX_SAFE_INTEGER — js'da eng katta qiymat 2**53 edi, bu osha sonni aniqlab beradi

5.MIN_SAFE_INTEGER — manfiy qiymati bo'ladi yuqoridagini

6.POSITIVE_INFINITY — infinity bilan bir xil bo'ladi.

7 NEGATIVE_INFINITY — manfiy qiymati, bundan kichik son yo'q!

METHODS

n.tostring() — boolen qiymatni string turiga o'tkazish

n.toExponential() — buni ichih=ga berilayotgan qiynmat bugun sonlardan keyin nechta bo'lishi kerak shuni anilab beradi

n.toFixed() — qiymat bersak ichiga yaxlitlab, verguldan keyin o'shancha sonni chiqarib beradi

n.toPrecision() — ichiga qiymat bersak, bu bugun son bilan hisoblab, jami nechta son chiqishini aniqlaydi. Masalan, ichiga 5 bersak, 12.356338 son bolsa, 12,356 chiqarib beradi

parseInt(n) — bu butun songa o'tkazib beradi

Number.isInteger() — bu qiymat son butun sonmi yoki float toifasiga tegishli sonligini aniqlab beradi

Number.isSafeInteger() — butun sonlarni tekshiradi, agar 2 **53dan yuqori bolsa, FALSE, shu darajada bo'lsa, true. Bu faqat butun sonlarni tekshiradi!

Javascript (lesson-1)

2023-07-03T11:34:22.611Z

Javascript history:

Brenden Eich Netscape developer) 1995-yil 10 kun ichida yaratilgan;

Mocha - Livescript - JavaScript (Java was popular) java mashhur bo'lgani uchun uni teztroq mashhur bo'lishi uchun shu nom bilan nomlagan.

Microsoft Internet Explorer 3'ni Netscape'ga raqobatdosh qilib yaratadi.

Javascipt 2 xil versiyada paydo bolgan :

Netscape Navigator Javascript.
Internet Explorer Javascript.

Web Browserlarda JS'ning asosiy 3 ta qismdan iborat:

1. ES Mascript

2. DOM ( Document Object Modal) - events, (scroll, keyboard), forms.

3. BOM ( Browser Object Modal) - location, notifications.

JS'ni ulash usullari:

Inline
internal
extrernal

input and output.

Input.

FirstName = prompt ('enter ur first name');
lastName = prompt (' enter ur last name');

yuqorida ma'lumot kiritildi endi uni amal bajarib chiqarishimiz kerak.

output qilishning bir necha yo'llari bor.

innerHTML;
Documentwrite();
window.alert();
window.confirm();

(optimal) console.log();

//innerHTML:

fullName = fistName + "" + lastName;
// output
document.body.innerHTML = fullName;

// document.write:
fullName = fistName + "" + lastName;
// output
document.write(fullName);

//window.alet:
fullName = fistName + "" + lastName;
// output
window.alert(fullName);

// window.confirm:
fullName = fistName + "" + lastName;
//output
window.confirm(fullName);

// console.log:
fullName = fistName + "" + lastName;
//output
console.log(fullName);

console.log'da uning outputni browserdagi inspect bo'limidagi output sifatida consoledan foydalanamiz.

Syntax and comments:

comments: // and /* ... */ xilda bolib, /* ... */ bunisi bilan bir necha qatorni kamentariyaga olishimiz mumkin.

// bunisi bilan bir necha qatorni kamentariyaga olishimiz mumkin.

Konseptsiyalari:

Statements va semicolon

semicolon (;) manushu belgi bo'lib,statement esa yozgan code'mizni qatori masalan:

console.log(fullName);

manu bu bir stetement hisoblanadi.

Block ({})

jingalak qavslar bilan yozilgan code'larimiz block hisoblanadi. Masalan:

btn.onclick = function () {
this.style.display = "none";
}

mana bu Block hisoblanadi.

Expression

3+4 matematik qoidalar expression hisoblanadi.

Whitespace - bo'sh joylar degani;
space - "...";
new line - yangi qator;
tab - otasi bolasi bir tarafda bo'lib turishi;
pritter - code'mizni tartib bilan yozilishini ta'minlaydi. Ctrl + S - bilan amalga oshiriladi

Nomlash:

Nomlashda e'tibor beriladigan narsalar:

Harflardan iborat bo'lishi
Raqamlardan iborat bo'lishi
underscore'dan iborat bo'lishi yoki
Dollor belgisida iborat bo'lishi

Ammo raqamlar bilan boslanmasligi kerak.

shuningdek, katta harf va kichkina harfni farq bor

masalan:

A = 2;
a = 3;

bunda A bitta o'zgaruvchi a esa bitta o'zgaruvchi hisoblanadi

Nomlashda qisqa va tushunarli nomlash kerak.

masalan:

groupNumber = "N13"
groupStudentsNumber = 20 - //descriptivelik bor 
grStudentsNum = 20 - //descriptivelik va short bor

Javascriptning keyworkdlari:

var
let
const
if
else
switch
function
new
class.....

Nomlashda javascriptning keywordlaridan foylanmasligimiz kerak. Chunki JS qaysi birini tanlashni bilmay qoladi.

Nomlashning turlari:

Hypens ya'ni (-) belgisidan foydalanishga ruhsat berilmagan. masalan: ( first-name);

Underscore or SnackCase (first_name) va CamelCase (FirstName or firstName);

Variables.

O'zgaruvchi bu ma'lumotlarni ozida saqlovchi container;

O'zgaruvchi bu ma'lumotlar uchun nomlangan xotira, biz store goodies, visitors and other data'lar uchu o'zgaruvchilardan fotydalanamiz.

o'zgaruvchilarning turlari:

var
let
const

firstName = "Jamila";
lastName = "Aliyeva";

bu holatda hech narsa yozmaydigon bolsak o'zgaruvchilarning oldiga bu var halatida taniydii.

 var firstName = "Jamila";
 var lastName = "Aliyeva";

agar o'zgaruvchi yaratmoqchi bo'lsak oldiga var/ let/ const qo'yishimiz kerak.

var JS yaratilganidan beri bor.

Let bilan Const esa ES6 ya'ni 2016 versiyasidan beri chiqishni boshlagan.

Let Varni bir qancha kamchiliklarini to'g'rlaydi.

Biz asosan LET'dan foydalanamiz.

Muhim tushunchalar:

| DECLARATION (DACLARE) - E'LON QILISH;

| INILITILIZE (INITIALIZATION) - ISHGA TUSHIRISH;

| ASSIGN (ASSIGNMENT) - O'ZLASHTIRISH;

let firstName; // declation - o'zgaruvchi e'lon qilindi
firstName = "Jamila" // inilitialization - o'zgaruvchi ishga tushurildi
firstName = "Aliyeva" // assigment - o'zgaruvchi initilize'dan o'zgarib,  asssigmentga o'zgaradi.
console.log(firstName);  // output

bu holatta oxirgi ya'ni Aliyeva console'ga chiqadi.

masalan:

let  a = 4;
let b = 10;
let c = a + b;
console.log (c);

bu misolda console'ga chiqgan qiymat 14 bo'ladi.

let  a = 4;
let b = 10;
a = a + b;
b = a - b;
console.log(a);
console.log(b);

bu misoldagi console'ga chiqgan qiymat 4 bo'ladi, ya'ni a qiymatni o'zlashtirib oladi birinchi a ning qiymati 14 bo'lsa, o'sha qiymatdan bdagi 10 ayriladi va 4 qiymati chiqadi.

Ba'zi foydali narsalar:

variables in declaration → undefined

agar declaration'da initialize qilmasak, uning qiymati undefined bo'ladi.

assignment operator → =

o'zlashtirish operatori degani)

just algebra

masalan:

let = 10;
let = 4;
let c = 5;
let res = (a * b - c + b) / 10;
console.log(res);

dynamically typed language;

javascript dinamikali til hisoblanadi. Masalan, biz boshqa tillarda bu qiymat string yoki number deb aytamiz lekin JS'da unaqa emas o'zi aniblab o'ladi.

one statement, many variables ( aren’t recommended);

 let x = 3, y = 5, z = 10;

bu holatta yozish tafsiya etilmaydi. Lekin hato emas.

let x = 3;
let y = 5;
let z = 10;

ko'p steatment bo'layotgan bo'lsa ham yuqoridagi usul yaxshiroq;

two types of data (string and number);

undefined vs. undeclared variables

undefined e'lon qilingan lekin hali qiymat berilmagan,

let group;
console.log(group);

bu holatta console'ga undefined chiqadi.

undeclared agar o'zgaruvchi e'lon qilinmagan bo'lsa undeclared chiqadi.

console.log(pupil);

bu hali hech qayerda e'lon qilinmagan, shuning uchun console'ga not declare deb chiqadi.

var va let 'ning farqi

var a = 4;
var a = 5;
var a = 10;
console.log(a);

var yuqorida aytganimizdek eski versiyasi hisoblanadi, unda bitta o'zgaruvchini bir necha marta e'lon qilishimiz mumkin bo'lgan lekin bitta o'zgaruvchini bir marta e'lon qilsak shu yetarli bo'ladi aslida. Bu logikaviy jihatdan xato bo'ladi.

agar biz let'da bitta o'zgaruvchini qayta e'lon qilmoqchi bo'lsak ruhsat bermaydi.

redeclere bo'ladi ya'ni qayta e'lon qilib bo'lmaydi.

constants (simple and uppercase)

constants o'zi nomidan bilsak bo'ladiki o'zgarmas dean ma'noni anlatadi. Uni declaration qilishimiz mumkin, initilization qilishimiz mumkin ammo assig qila olmaymiz. Uni birdaniga initilation qilish orqali ishga tushura olamiz. Consrtatani bilishimiz uchun ham uni katta hardlarda yozishimiz kerak.

Arithmetic operator

→ qo’shish
→ ayirish
→ ko’paytirish
→ bo’lish
** → daraja
% → qoldiqli bo’lish

Type operator

typeof

let str = "Jamila";let age = 17;
console.log(typeof str);
console.log(typeof age);

bu operatorning vazifasi turini chiqarib berish.

Unary opteratorlari

+x → musbat songa almashtiradi.
-x → manfiy songa almashtiradi.
++x → o’zgaruvchini 1 ga oshiradi.
--x → o’zgaruvchini 1 ga kamaytiradi.
x++ → o’zgaruvchini 1 ga oshiradi.
x— → o’zgaruvchini 1 ga kamaytiradi.

bular o'zgaruvchilarning oldiga yoki orqasiga qo'yiladi.

masalan:

let a = "5";
let b = 10;
console.log("a ning turi: ", a);

bu holatta console'ga qiymat 510 chiaqadi chunki string sifatida qo'shyapti.

let a = "5";
 let b = 10;
console.log("a ning turi: ", typeof +a);

bu halatta esa console'ga qiymat number bo'lib chiqadi.

agar shu qiymatlarga yuqaridagidek amallarni qo'ysak, berilgan defination'inidek console'da ishga tushib ketaveradi

Javascript LESSSON-2

2023-07-03T06:29:35.183Z

Data type - ma'lummot turlari.

Ikki xil ma'lumot turlari bor:

1. Primative

2.Complex (reference deb nomlasak ham bo'ladi, va non-primative)

Primative'da 7 ta ma'lumot turi bor:
1.null

2.undefined

3.boolen (true, false)

4.number

5.string

6.symbol

7.bigint (2**53 and ...n);

| Null bu ham ma'lumot turi hisoblanadi xudding number, string kabi)

masalan:

let selected = null;
console.log(typeof selected);

bu holatta console'ga object chiqadi. (turi object hisoblanadi) Bu JS'ning bugi hisoblanadi.

| Boolen'ning ikkita qiymati bor true and false.

masalan:

let check = true;
console.log( typeof check);
let isPerson = false;
console.log( typeof isPesron);

bu boolen turidagi ma'lumot turi hisoblanadi shuning uchun console'ga bollen chiaqadi.

| Number'da infonity degan qiymat bor undan katta hech qanday qiymat yo'q.

console.log(Infinity, typeof Infinity);

Bunda qiymat infinity va uning turi number;

NaN - not a number bu ham bir qiymat hisoblanadi, son emas degan ma'noni bildiradi.

console.log(NaN, typeof NaN);

bunda console'ga NaN qiymat turi number bo'lib chiaqadi

float (e, 0.1 + 0.2) - dasturlash tilida nuqtali sonlar float deb ataladi.

masala:

 let float = 1.256;
 console.log(float, typeof float);

console'ga 1.256 qoiymat chiqadi, number turida)

number seperator ( _ ) - bu raqam yozayotganimizda o'qishga osonroq bo'lishi uchun foydalaniladi.

masala:

let bigNumber = 123_894_017;
console.log(bigNumber, typeof bigNumber);

console'ga qiymati bu seperatorsiz chiqadi 123894017. bu hech qayday qiymatni o'zgartirmaydi, yoki boshqa bir qo'shimcha narsa qo'shmaydi shunchaki sonni o'qishni osonlashtirish vazifasini bajaradi.

| String — string'ni hosil qilishda biz odatda duble quote ( "" ) foydalanamiz, lekin bu holatta ham ishlatsak bo'ladi ekin ularni hech qanday farqi yo'q.

single-quote - ’…’
double quote - “…”
backticks - `...`

length — so'zning uzunligini hoisoblaychi masalan:

let fullName = "Aliyeva Jamila";
console.log(fullName.length);

bun holatta console'ga 14ta number chiqadi, stringda uni ichudagi so'zlar soni va space hisoblanadi holos)

| Symbol —

let symbol = Symbol();
console.log(typeof symbol);

| Bigint (2**53 and ...n);

agar biz son kiritayotganda 2 ni darajasi 53ga teng yoki katta son kiritadigan bo'lsak, bu son xato hisonblanadi va notogri hisob kitob qiladi.

let a = 482379798123219371n;
let b = 3247834892347384n;

console.log(2 ** 53 - 1);

console.log(2 ** 53 - 1); — bu JS'da ishlatiladigan eng katta son hisoblanadi.

 let a = 482379798123219371n;
 let b = 3247834892347384n;
 console.log(typeof a);
 console.log(typeof b);
 console.log(a + b);
 console.log(2 ** 53 - 1);

bu sonlarni togri hisob-kitob qilmoqchi bo'lsak, bigintga o'tkazisjhinmiz kerak shuning uchun sonlarni oldiga "n" qoyamiz. Shunda uniq qiymati to'g'ri hisoblanadi.

Complex'da 1ta:
object.

complex yuqoridagi 7 ta qiymatni ozida jamlab bitt qilib yoza oladi

let obj = {
 str: "Abdulaziz",
 groupNumber: 23,
 isDiplom: false, 
}

shung uchun ham complex — murakkab deyiladi.

OPERATORLAR

Arifmetik operatorlar

number+string = string

console.log(10 + 20 + "30");
console.log(10 + 20 + "30" + 40 + 50);
console.log(10 + 20 + "30" + (40 + 50));

num /*-str(num) = number

stringni ichida son bo'lsa, shunsagina numberga o'tkazadi.

agar "+" bo'lsa string bo'ladi.

console.log(12 / "3");
console.log(12 * "3");
console.log(12 - "3");

str(num)/*-str(num) = number

console.log("24" / "2");
console.log("24" * "2");
console.log("24" - "2");

others = NaN

//masala:
console.log("2abc" / 2);

O'zlashtirish operatorlari

= — x = y;

+= — x+ =y;

bunida oziga yangi qiymatnio'zlashitib oladi masalan

let a = 100;

a += 50

ani qiymati 150ga o'zgaradi. a oziga 50ni o'zlashtiradi

shunday boshqa shu kabi beriladigan qiymatlar ham o'zlashtirib ketaveradi.

daraja= (negadir daraja yozilsa yoq bo'lib ketti)

Taqqoslash opertaorlari

== - tengmi; === - bu ham tengligini ham turini aniqlaydi

!= — teng emas

!== not equal valu and not equal type;

> - katta ;

>= - katta yoki teng;

< - kichik;

<= - kichik yoki teng;

agar

console.log(false < true);

qilsak, true chiqadui chunki

console.log(false == 0); console.log(true == 1);

Extra:
JS string bilan numberni taqqoslayotganda,songa almashtiradi. Agar bo'sh string bo'lsa, 0 qabul qiladi. Son bo'lmagan string bo'lsa, NaN bo'ladi yoki False.

Logical operatorlari

Agar biz boolen turidan foydalanayotgan bo'lsak, loical operatorlaridan foydalanamiz.

&& - va; bu operator ikki tomoni true bo'lsagina true qiymat oladi agar False bo'lsa orasida False qiymat oladi.

|| — yoki; bu operator esa agar faqat false bo'lsa false qiymat qaytaradi, true aralashib qolsa, True qiymat qaytaradi

! — emas; bu operator true'ni false qiladi, false'ni true qiladi.

Swapping

let A = 10
let B = 20;
let K;
K = A;
A = B;
B = K;

Math

constants, properties
Math.E // returns Euler's number
Math.PI // returns PI
Math.SQRT2 // returns the square root of 2

bular console'da ozgarmaydigan qiymatlari hisoblanadi

methods

Math.round(x) — berigan qiymatga eng yaqin sonni yaxlitlab beradi, masalan 12,72345 bo'lsa, bu 13 boladi. agar 12,4567 bo'lsa, 12 ni chiqaradi console'ga. -12.35 bo'lsa, -12ni chiaqaradi

Math.ceil(x) — tom yani o'ng tomondagi son ceil 12 bn 13 bo'lsa 12 ceil — tom 13 floor hisoblanadi. agar -12,23 bolsa -12 chiqadi ceilga

Math.floor(x) — pol yani chap tomondagi son floo hisoblanadi. Floor 12,33455 kiritilsa, bunda qiymati 12 chiqadi

Math.trunc(x) — bu ozini butun sonini yaxlitlab beradi. Masalan 12,34566 kiritilsa, 12ni ozini chiqaradi

bular sonni yaxlitlash vazifasini bajaradi

Math.sign(x) — musbat bo'layotgan bo'lsa, bir qaytaradi, manfiy bo'lsa, -1 qaytaradi. 0 bo'lsa 0 chiqaradi console'ga.

Math.pow() — daraja degan ma'noni anglaytadi.

console.log(Math.pow(3,5)) bu 3**5 degani)

Math.sqrt() — kasrni bildiradi, CONSOLE.LOG(Math.sqt(9)) bolsa unda uning qiymati 3 chiaqadi

Math.abs() — modelni bildiradi, // console.log(Math.abs(-10)); //bunday holatta consolega -10 chiqadi.

agar 10ni ozi bolyatgan bolsa, 10ni ozi chiaqveradi.

abc'ni vazifasi, manfiy sonlarni musbat qilib berish

Math.min() — sonlarni ichidan eng minimalini chiqarib beradi masalan 5, 0, 6 (0 ) ni chiqarib beradi.

and

Math.max() — sonlarni ichidan eng maximalini chiqarib beradi 5, 0 , 6 (6 ) ni chiqarib beradi.

Random

returns a random number between 0 (inclusive), and 1 (exclusive) [0, 1)
Math.floor(Math.random() * (max - min) ) + min; [min, max)
Math.floor(Math.random() * (max - min + 1) ) + min; [min, max]