Deep Dive into Objects JavaScript-ում

Հասկանալով օբյեկտները

JavaScript-ում օբյեկտները հիմնարար կառուցվածքներ են, որոնք ներկայացնում են բանալի-արժեք զույգերի հավաքածուներ: Այս զույգերը, որոնք նաև հայտնի են որպես հատկություններ և մեթոդներ, ամփոփում են տվյալներն ու ֆունկցիոնալությունը՝ կապված օբյեկտի հետ: Օբյեկտները տրամադրում են համապատասխան տվյալների և վարքագծի կառավարման կառուցվածքային միջոց՝ դրանք դարձնելով կարևոր՝ մասշտաբային և պահպանվող հավելվածներ ստեղծելու համար:

Օբյեկտների հիմնական բնութագրերը.

• Բանալի-արժեք զույգեր. օբյեկտի յուրաքանչյուր հատկություն բանալի-արժեք զույգ է, որտեղ բանալին (կամ հատկության անվանումը) տող է, և արժեքը կարող է լինել ցանկացած տվյալների տիպի, ներառյալ մեկ այլ օբյեկտ, ֆունկցիա կամ զանգված:
• Ճկուն և դինամիկ. JavaScript-ի օբյեկտները դինամիկ են, ինչը նշանակում է, որ դուք կարող եք ավելացնել, փոփոխել և ջնջել հատկություններ և մեթոդներ գործարկման ժամանակ:

Օբյեկտների ստեղծում

Օբյեկտները կարող են ստեղծվել մի քանի եղանակով, ընդ որում օբյեկտների բառացիությունը ամենատարածված մեթոդն է: Օբյեկտի բառացիությունը ստորակետերով բաժանված բանալի-արժեք զույգերի ցանկ է, որը փակցված է գանգուր փակագծերում {}:

Օբյեկտ ստեղծելու օրինակ.

let book = {
title: "The Great Gatsby",
author: "F. Scott Fitzgerald",
year: 1925,
isAvailable: true
};

Այս օրինակում bookօբյեկտ է այնպիսի հատկություններով, ինչպիսիք են title, author, yearև isAvailable.

Օբյեկտների հատկությունների մուտք և փոփոխում

Օբյեկտի մեջ գտնվող հատկությունները կարելի է մուտք գործել և փոփոխել՝ օգտագործելով կետային նշում կամ փակագծային նշում:

• Կետերի նշում. objectName.propertyName
• Փակագծի նշում. objectName["propertyName"] (օգտակար է, երբ գույքի անունները դինամիկ են կամ վավեր նույնացուցիչներ չեն)

console.log(book.title);  // Outputs "The Great Gatsby"
book.isAvailable = false;  // Modifies the isAvailable property

Օբյեկտի մեթոդներ և «սա»

Մեթոդները գործառույթներ են, որոնք օբյեկտի հատկություններ են: Մեթոդի հիմնաբառը thisվերաբերում է այն օբյեկտին, որտեղից կոչվում է մեթոդը՝ ապահովելով օբյեկտի հատկությունների և մեթոդների հասանելիություն:

Օրինակ մեթոդով և this.

let person = {
firstName: "Alice",
lastName: "Johnson",
greet: function() {
    console.log("Hello, " + this.firstName + " " + this.lastName);
}
};

person.greet();  // Outputs "Hello, Alice Johnson"

In person.greet, thisվերաբերում է personօբյեկտին, որը թույլ է տալիս մուտք գործել նրա firstNameև lastNameհատկությունների:

Գործնական օրինակներ

Եկեք կիրառենք այս հասկացությունները՝ ստեղծելով և օգտագործելով առարկաներ գործնական սցենարներում.

1. Գրքի ներկայացում.

   let book = {
   title: "1984",
   author: "George Orwell",
   publishYear: 1949,
   getDescription: function() {
       return `${this.title} by ${this.author}, published in ${this.publishYear}`;
   }
   };
   
   console.log(book.getDescription());
   

2. Անձի մոդելավորում.

   let person = {
   name: "John Doe",
   age: 30,
   occupation: "Software Developer",
   introduce: function() {
       console.log(`Hi, I'm ${this.name}, a ${this.age}-year-old ${this.occupation}.`);
   }
   };
   
   person.introduce();
   

3. Ապրանքի նկարագրությունը.

   let product = {
   name: "Laptop",
   price: 999.99,
   discount: 0.10,
   calculateDiscountPrice: function() {
       return this.price * (1 - this.discount);
   }
   };
   
   console.log("Discounted price:", product.calculateDiscountPrice());
   

Այս օրինակները ցույց են տալիս, թե ինչպես են JavaScript-ի օբյեկտները կարող են ամփոփել առնչվող տվյալներն ու վարքագիծը՝ ապահովելով կառուցվածքային և ինտուիտիվ եղանակ՝ բարդ սուբյեկտները կոդում ներկայացնելու համար: Օբյեկտներ օգտագործելով՝ մշակողները կարող են ստեղծել ավելի կազմակերպված, ընթեռնելի և պահպանվող ծրագրեր:

Զանգվածներ և զանգվածի մեթոդներ JavaScript-ում

Ներածություն Arrays

Զանգվածները JavaScript-ում օգտագործվում են տարրերի պատվիրված հավաքածուներ պահելու համար, որոնք կարող են լինել ցանկացած տեսակի տվյալների, ներառյալ թվեր, տողեր, առարկաներ կամ նույնիսկ այլ զանգվածներ: Զանգվածները ինդեքսավորված հավաքածուներ են՝ սկսած 0-ից առաջին տարրի համար, ինդեքս 1-ից երկրորդի համար և այլն:

Զանգվածի տարրերի ստեղծում և մուտք.

Զանգված ստեղծելու համար դուք օգտագործում եք քառակուսի փակագծեր []՝ ստորակետերով բաժանված տարրերով: Դուք մուտք եք գործում զանգվածի տարրեր՝ նշելով ինդեքսը քառակուսի փակագծերում:

let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits[0]); // Outputs "Apple"
console.log(fruits[2]); // Outputs "Cherry"

Զանգվածի ընդհանուր մեթոդներ

Զանգվածները գալիս են ներկառուցված մեթոդներով, որոնք հեշտացնում են զանգվածի բովանդակության շահարկումն ու հարցումը:

• mapՓոխակերպում է զանգվածի տարրերը և փոխակերպված տարրերով վերադարձնում նոր զանգված:

  let numbers = [1, 2, 3];
  let squares = numbers.map(x => x * x); // [1, 4, 9]
  

• filterՍտեղծում է նոր զանգված բոլոր տարրերով, որոնք անցնում են տրամադրված ֆունկցիայի կողմից իրականացվող թեստը:

  let evenNumbers = numbers.filter(x => x % 2 === 0); // [2]
  

• reduceԿիրառում է ֆունկցիա կուտակիչի և զանգվածի յուրաքանչյուր տարրի նկատմամբ՝ այն իջեցնելու մեկ արժեքի:

  let sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0); // 6
  

• forEach. Յուրաքանչյուր զանգվածի տարրի համար մեկ անգամ կատարում է տրված գործառույթը:

  fruits.forEach(fruit => console.log(fruit));
  

• pushԱվելացնում է մեկ կամ մի քանի տարրեր զանգվածի վերջում և վերադարձնում զանգվածի նոր երկարությունը:

  fruits.push("Durian"); // ["Apple", "Banana", "Cherry", "Durian"]
  

• pop: Հեռացնում է վերջին տարրը զանգվածից և վերադարձնում այդ տարրը:

  let lastFruit = fruits.pop(); // Removes "Durian"
  

• shiftՀեռացնում է առաջին տարրը զանգվածից և վերադարձնում է հեռացված տարրը:

  let firstFruit = fruits.shift(); // Removes "Apple"
  

• unshiftԱվելացնում է մեկ կամ մի քանի տարր զանգվածի սկզբում և վերադարձնում նոր երկարությունը:

  fruits.unshift("Strawberry"); // ["Strawberry", "Banana", "Cherry"]
  

• spliceՓոփոխում է զանգվածի բովանդակությունը՝ հեռացնելով կամ փոխարինելով գոյություն ունեցող տարրերը և/կամ ավելացնելով նոր տարրեր:

  fruits.splice(1, 1, "Mango"); // Replaces "Banana" with "Mango"
  

Զանգվածի մեթոդների կիրառում

Զանգվածի այս մեթոդները կարող են օգտագործվել զանգվածների մեջ տվյալների մշակման և մանիպուլյացիայի համար՝ ծառայելով տարբեր նպատակների՝ փոխակերպումից մինչև համախմբում:

• mapտվյալների փոխակերպման համար. Ստեղծեք նոր զանգված՝ կատարելով գործողություն բնօրինակ զանգվածի յուրաքանչյուր տարրի վրա:
• filterտվյալների զտման համար. հանել զանգվածի ենթաբազմությունը՝ հիմնվելով պայմանի վրա:
• reduceարժեքներ կուտակելու համար. զանգվածը վերածել մեկ արժեքի՝ կուտակային կերպով միավորելով դրա տարրերը:

Ձեռքի վարժություն

Սովորողները պետք է կիրառեն զանգվածի այս մեթոդները՝ ընդհանուր առաջադրանքները կատարելու համար.

1. Տվյալների փոխակերպում -ով map. Թվերի զանգվածը վերածել իրենց քառակուսի արմատների զանգվածի:

   let numbers = [4, 9, 16];
   let roots = numbers.map(Math.sqrt); // [2, 3, 4]
   

2. Տվյալների զտում հետևյալով filter. զանգվածից հանել որոշակի արժեքից մեծ թվեր:

   let filteredNumbers = numbers.filter(x => x > 5); // [9, 16]
   

3. Արժեքների կուտակում .-ով reduce. հաշվարկեք զանգվածի բոլոր թվերի ընդհանուր գումարը:

   let total = numbers.reduce((sum, current) => sum + current, 0); // 29
   

4. Որոնում և տեսակավորում. Գտեք տարրեր զանգվածում կամ տեսակավորեք դրանք որոշակի չափանիշների հիման վրա՝ օգտագործելով find, some, everyկամ sort:

   let found = numbers.find(x => x > 10); // 16
   numbers.sort((a, b) => a - b); // Sorts numbers in ascending order
   

Այս վարժությունների միջոցով ուսանողները ձեռք կբերեն գործնական փորձ JavaScript զանգվածի մեթոդների հետ՝ սովորելով, թե ինչպես արդյունավետ կերպով շահարկել և մշակել զանգվածի տվյալները: Այս պրակտիկան ուժեղացնում է զանգվածների և դրանց մասին նրանց պատկերացումները

Ներածություն DOM մանիպուլյացիայի մեջ

Ի՞նչ է DOM-ը:

Փաստաթղթի օբյեկտի մոդելը (DOM) ծրագրավորման միջերես է HTML և XML փաստաթղթերի համար: Այն ներկայացնում է էջի կառուցվածքը որպես օբյեկտների ծառ՝ թույլ տալով սկրիպտներին մուտք գործել և շահարկել փաստաթղթի բովանդակությունը, կառուցվածքը և ոճերը: DOM-ի միջոցով JavaScript-ը կարող է ավելացնել, հեռացնել և փոփոխել տարրեր և ատրիբուտներ, փոխել ոճերը, արձագանքել օգտատերերի իրադարձություններին և այլն՝ հնարավորություն տալով դինամիկ և ինտերակտիվ վեբ փորձառություններ:

Ընտրելով տարրեր

DOM-ը շահարկելու համար նախ պետք է ընտրել այն տարրերը, որոնց հետ ցանկանում եք աշխատել: JavaScript-ը տրամադրում է մի քանի մեթոդներ DOM-ից տարրեր ընտրելու համար.

• getElementByIdԸնտրում է տարրն իր ID-ով:

  let element = document.getElementById('myElement');
  

• getElementsByClassNameՎերադարձնում է բոլոր տարրերի կենդանի HTML հավաքածուն՝ նշված դասի անունով:

  let elements = document.getElementsByClassName('myClass');
  

• getElementsByTagNameՎերադարձնում է տվյալ պիտակի անունով տարրերի կենդանի HTML հավաքածու:

  let elements = document.getElementsByTagName('div');
  

• querySelectorՎերադարձնում է առաջին տարրը, որը համապատասխանում է նշված CSS ընտրիչին:

  let element = document.querySelector('.myClass');
  

• querySelectorAllՎերադարձնում է բոլոր տարրերի ստատիկ NodeList, որոնք համապատասխանում են նշված CSS ընտրիչին:

  let elements = document.querySelectorAll('.myClass');
  

DOM-ի մանիպուլյացիա

Էլեմենտներ ընտրելուց հետո դուք կարող եք շահարկել DOM-ը տարբեր ձևերով.

• Տարրերի հատկությունների և ատրիբուտների փոփոխում . Փոխել այնպիսի հատկություններ, ինչպիսիք են innerText, innerHTML, կամ ատրիբուտները, ինչպիսիք են src, href.

  let heading = document.getElementById('heading');
  heading.innerText = 'New Heading Text';
  

• Ոճերի փոփոխություն . փոփոխեք տարրի ոճը ուղղակիորեն օգտագործելով styleհատկությունը:

  heading.style.color = 'red';
  

• Էլեմենտների ստեղծում և տեղադրում . Ստեղծեք նոր DOM տարրեր document.createElementև տեղադրեք դրանք՝ օգտագործելով մեթոդները, ինչպիսիք են appendChildկամ insertBefore.

  let newElement = document.createElement('p');
  newElement.innerText = 'This is a new paragraph.';
  document.body.appendChild(newElement);
  

• Էլեմենտների հեռացում . Հեռացրեք տարրերը DOM-ից՝ օգտագործելով removeChildկամ remove:

  let parentElement = document.getElementById('parent');
  parentElement.removeChild(heading); // Assuming 'heading' is a child of 'parent'
  

Ինտերակտիվ DOM վարժություն

Եկեք զբաղվենք գործնական վարժություններով՝ DOM մանիպուլյացիա իրականացնելու համար.

1. Ընտրել և փոփոխել տարրերը. Ընտրել տարրեր վեբ էջի վրա և փոփոխել դրանց բովանդակությունը, ոճը կամ այլ հատկություններ: Օրինակ, փոխեք վերնագրի տարրի տեքստը և գույնը:

2. Ստեղծեք դինամիկ ցուցակ. Կառուցեք պարզ ինտերակտիվ ցուցակ, որտեղ օգտվողները կարող են ավելացնել և հեռացնել տարրեր: Օգտագործեք prompt՝ նոր տարրերի համար օգտատերերի մուտքագրում ստանալու և դրանք վեբ էջում ցուցադրվող ցանկում ավելացնելու համար:

    let ulElement = document.createElement('ul');
   document.body.appendChild(ulElement);
   
   function addItem() {
    let itemText = prompt('Enter item text');
    if (itemText) {
        let liElement = document.createElement('li');
        liElement.innerText = itemText;
        ulElement.appendChild(liElement);
    }
   }
   
   function removeItem() {
    if (ulElement.hasChildNodes()) {
        ulElement.removeChild(ulElement.lastChild);
    }
   }
   

3. Պատասխանել օգտատիրոջ իրադարձություններին. վեբէջին ավելացրեք կոճակներ, որոնք զանգում են addItemև removeItemգործում են սեղմելիս՝ թույլ տալով օգտվողին դինամիկ կերպով փոխազդել ցանկի հետ:

Այս վարժություններում ուսանողները կսովորեն, թե ինչպես ընտրել և շահարկել DOM տարրերը, ստեղծել ինտերակտիվ բովանդակություն և արձագանքել օգտատերերի իրադարձություններին՝ ձեռք բերելով վեբ էջի դինամիկ մանիպուլյացիայի գործնական հմտություններ և բարելավելով իրենց հասկացողությունը, թե ինչպես է JavaScript-ը փոխազդում DOM-ի հետ:

Original text

Rate this translation

Your feedback will be used to help improve Google Translate