Adriana Pikaljov Portfoolio

en_GBet

Javascript objektid ja meetodid konspekt

Objekti loomine

Objekti süntaks tähendab, et objekt koosneb võtme ja väärtuse paaridest.
Võti on sõne, ja väärtus võib olla ükskõik milline andmetüüp (nt arv, sõne, massiiv, funktsioon jne).

Iga objekti omadustele saab juurde pääseda, kasutades punktisüntaksit.

let auto = {
    mark: "BMW",
    mudel: "i8",
    aasta: 2022,
    varv: "must",
    lisavarustus: ["kliimaseade", "elektriaknad", "navigatsioonisüsteem"]
};
console.log(auto);
console.log(auto.mark); // Output: "Toyota"
console.log(auto.mudel); // Output: "Corolla"
console.log(auto.aasta); // Output: 2022
console.log(auto.varv); // Output: "punane"
console.log(auto.lisavarustus); // Output: ["kliimaseade", "elektriaknad", "navigatsioonisüsteem"]

Objekti meetodid ja this kasutamine

Javascripti objektid võivad sisaldada nii omadusi (andmeid) kui ka meetodeid (funktsioone).
Meetodid on lihtsalt funktsioonid, mis kuuluvad objektile ja saavad kasutada selle omadusi.
Selleks kasutatakse võtmesõna this, mis viitab samale objektile.

let telefon = {
    //omadused
    mark: "Apple",
    mudel: "iphone 14",
    aasta: 2023,
    varv: "valge",
    omadused: ["kaamera", "naogatuvastamine"],

    //meetodid
    taisnimi: function() {
        return this.mark + " " + this.mudel;
    }
};

console.log(telefon.taisnimi());

Meetodi lühendamine

let arvuti  = {
    //omadused
    mark: "Apple",
    mudel: "MacBook Air M3",
    aasta: 2024,
    varv: "hõbedane",
    omadused: ["Retina ekraan", "Touch ID", "macOS Sonoma", "M3 protsessor"],

    //meetodid
    taisnimi2() {
        return this.mark + " " + this.mudel;
    },

    kuvaOmadused() {
        this.omadused.forEach(omadus => console.log(omadus));
    }
};
arvuti.taisnimi2()
arvuti.kuvaOmadused();

Objektide massiivi loomine ja kuvamine

Objektide massiiv on nimekiri objektidest, kus iga objekti saab kätte tema indeksi järgi.
Iga objekt koosneb võtme–väärtuse paaridest, mis hoiavad andmeid (nt teksti, arve, tõeväärtusi jne).

let autod = [
    { mark: 'BMW', mudel: 'X5', aasta: 2021 },
    { mark: 'Audi', mudel: 'A6', aasta: 2018 },
    { mark: 'Mercedes-Benz', mudel: 'C-Class', aasta: 2023 }
];

console.log(autod);
console.log(autod[2]);
console.log(autod[1].mark);
Kõikide mudelite nägemiseks kasutame jällegi forEach tsüklit
autod.forEach((auto) => {
    console.log(`
    Mark: ${auto.mark},
    Mudel: ${auto.mudel},
    Aasta: ${auto.aasta}
    `);
});

Objekti massiivi meetodid

JavaScriptis on massiivide jaoks palju kasulikke meetodeid, mida saab kasutada nii tavaliste massiivide kui ka objektide massiivide puhul.

  • push() – lisab elemendi lõppu
  • pop() – eemaldab viimase elemendi
  • shift() – eemaldab esimese elemendi
  • unshift() – lisab elemendi algusesse
  • slice() ja splice() – lõikavad või muudavad massiivi
  • forEach(), map(), filter(), reduce(), sort() – töötlevad ja muudavad andmeid
autod.push({ mark: 'BMW', mudel: '320i', aasta: 2015 });
autod.unshift({ mark: 'Ford', mudel: 'Focus', aasta: 2020 });
console.log(autod);
Meetod splice ühaegselt kustutab ja lisab.
autod.splice(1, 0, { mark: 'Nissan', mudel: 'Qashqai', aasta: 2018 });
console.log(autod);

Massiivist otsimine

let otsing = autod.find(auto=>auto.aasta > 2020);
console.log(otsing);

let otsing2 = autod.find(auto=>auto.aasta > 2021 && auto.mark === "Mercedes-Benz");
console.log(otsing2);

Massiivi filtreerimine

let arvud = [11, 12, 13, 14, 15, 16, 17, 18, 19, 20];

const filtreeritud = arvud.filter(arv => arv % 2 === 0);
console.log(filtreeritud);

let filter = autod.filter(auto=>auto.aasta > 2018);
console.log(filter);

Massiivi sorteerimine

autod.sort((a, b) => a.aasta - b.aasta);
console.log(autod);

Ülesanne

Objekt raamat – üksik raamat

Kirjeldus:
Hoidab ühe raamatu andmeid ja võimaldab neid kuvada ning muuta.

let raamat = {
    pealkiri: "Spider-Man: The Amazing Fantasy #15",
    autor: "Stan Lee",
    aasta: 1962,

Meetodid:

  • kuvaKirjeldus() – kuvab raamatu info HTML-elemendis ja konsoolis
kuvaKirjeldus() {
    let output1 = document.getElementById('output1');
    let kir = this.pealkiri + " — " + this.autor + ", " + this.aasta;
    output1.innerHTML = kir + '<br>';
    console.log(kir);
}
  • muudaAasta(uusAasta) – muudab raamatu ilmumisaasta
muudaAasta(uusAasta) {
    this.aasta = uusAasta;
    let au = 'Raamatu "' + this.pealkiri + '" uus aasta: ' + this.aasta;
    document.getElementById('output1').innerHTML += au + '<br>';
    console.log(au);
}

Kasutus:

raamat.kuvaKirjeldus();
raamat.muudaAasta(2023);

Objekt raamatukogu – raamatute kogum

Kirjeldus:
Hoidab massiivi raamatutest ja võimaldab lisada, kuvada ja filtreerida.

let raamatukogu = {
    raamatud: [
        { pealkiri: "Spider-Man: The Amazing Fantasy #15", autor: "Stan Lee", aasta: 1962 },
        { pealkiri: "Spider-Man: The Amazing Spider-Man #1", autor: "Stan Lee", aasta: 2001 },
        { pealkiri: "Spider-Man: Kraven's Last Hunt", autor: "J. M. DeMatteis", aasta: 1987 }
    ],

Meetodid

  1. kuvaRaamatud() – kuvab kõik raamatud
kuvaRaamatud() {
    let output = "";
    this.raamatud.forEach(r => {
        output += r.pealkiri + " — " + r.autor + ", " + r.aasta + "<br>";
        console.log(r.pealkiri + " — " + r.autor + ", " + r.aasta);
    });
    document.getElementById('output').innerHTML = output;
}
  1. kuvaKoguarv() – näitab, mitu raamatut on raamatukogus
kuvaKoguarv() {
    let kogu = "Raamatukogus on " + this.raamatud.length + " raamatut";
    document.getElementById('output').innerHTML += kogu + '<br>';
    console.log(kogu);
}
  1. lisaRaamat(pealkiri, autor, aasta) – lisab uue raamatu
lisaRaamat(pealkiri, autor, aasta) {
    this.raamatud.push({ pealkiri, autor, aasta });
    console.log(`Lisati raamat: ${pealkiri} — ${autor}, ${aasta}`);
    this.kuvaRaamatud();
    this.kuvaKoguarv();
}

seda me kasutame et meie andmed uueneks:

this.kuvaRaamatud();     this.kuvaKoguarv();
  1. raamatudParast2000() – loendab raamatud pärast 2000. aastat
raamatudParast2000() {
    let paras = this.raamatud.filter(r => r.aasta > 2000).length;
    let prst = "Pärast 2000. aastat: " + paras + " raamatut";
    document.getElementById('output').innerHTML += prst + '<br>';
    console.log(prst);
}

TULEMUSED VEEBILEHEL JA KONSOOLIS

Tehtud Töö