Objektide süntaks ja struktuur - Anastasiia Radasheva Portfoolio

JavaScripti objektid – võimsad andmestruktuurid, mis võimaldavad koondada omavahel seotud andmeid ühte tervikusse. Objekt koosneb võtme ja väärtuse paaridest, kus võti on string ning väärtus võib olla mis tahes JavaScripti andmetüüp näiteks arv, string, massiiv või isegi funktsioon. Objektid on suurepärane vahend andmete korrastamiseks ja nendega töötamiseks.

JS sisseehitatud objektid:

Math objekt sisaldab matemaatilisi funktsioone ja konstante.
Date objekt võimaldab töötada kuupäevade ja kellaaegadega
Array objekt on sisseehitatud objekt, mida kasutatakse massiivide loomiseks ja manipuleerimiseks.
String objekt sisaldab meetodeid, mis võimaldavad töötada sõnedega.
Object objekt on JavaScripti alusobjekt, mida kasutatakse kõikide objektide baasina.

Objekti loomine

Saama aga on veebilehel

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

Saama aga on veebilehel

let arvuti = {
    mark: "Apple",
    mudel: "MacBook pro",
    aasta: 2025,
    varv: "valge",
    kirjeldus: ["XDR ekraan", "Bluetooth 5.3", "Wi-Fi 6E"]
};

// Prindib välja kogu objekti sisu konsooli
console.log(arvuti);


console.log(arvuti.mark);
console.log(arvuti.mudel);
console.log(arvuti.aasta);
console.log(arvuti.varv);
console.log(arvuti.kirjeldus);

Code language: JavaScript (javascript)

Objekti meetodid ja this kasutamine

Uus Javascript ES6 lubab nüüd meetodi panna kirja ka lühemalt.

Kui omadused on massiivis, siis kasuta for või forEach tsüklit.

Kood:


let arvuti = {
    //omadused
    mark: "Apple",
    mudel: "MacBook pro",
    aasta: 2025,
    varv: "valge",
    kirjeldus: ["XDR ekraan", "Bluetooth 5.3", "Wi-Fi 6E"],

    //meetodid
    taisnimi() {
        return this.mark + " " + this.mudel;
    },
    kuvaOmadused() {
        this.kirjeldus.forEach(kirjeldus => console.log(kirjeldus));
    }
};

arvuti.kuvaOmadused();



//console.log(arvuti.taisnimi());
Code language: JavaScript (javascript)

Objektide massiivid

Objektide massiiv on massiiv, kus iga element on objekt. Iga objekt sisaldab võtme-väärtuse paare (nt nimi, vanus). Seda struktuuri kasutatakse, kui tahad hoida järjestatud andmeid, kus iga objektil on oma omadused.

Objektide massiivi loomine ja kuvamine

Kõikide mudelite nägemiseks kasutame jällegi forEach tsüklit

Kood:


let arvutid = [
    { mark: 'Apple', mudel: 'MacBook pro', aasta: 2025 },
    { mark: 'Lenovo', mudel: 'V15', aasta: 2018 },
    { mark: 'Asus ', mudel: 'Vivobook 15', aasta: 2020 }
];


arvutid.forEach((arvuti) => {
    console.log(`
    Mark: ${arvuti.mark},
    Mudel: ${arvuti.mudel},
    Aasta: ${arvuti.aasta}
    `);
});
//console.log(arvutid);
//console.log();//tühja välja jaoks
//console.log(arvutid[0]);// massiivide indekseerimine algab 0-st
//console.log();
//console.log(arvutid[0].mudel);//punkti-süntaksiga
Code language: JavaScript (javascript)

Objekti massiivi meetodid

Kood:

let arvutid = [
    { mark: 'Apple', mudel: 'MacBook Pro', aasta: 2025 },
    { mark: 'Lenovo', mudel: 'V15', aasta: 2018 },
    { mark: 'Asus', mudel: 'Vivobook 15', aasta: 2020 }
];

// Kasutame forEach() kõigi arvutite kohta info kuvamiseks
arvutid.forEach((arvuti) => {
    console.log(`
    Mark: ${arvuti.mark},
    Mudel: ${arvuti.mudel},
    Aasta: ${arvuti.aasta}
    `);
});

// Lisame uue arvuti massiivi lõppu
arvutid.push({ mark: 'Dell', mudel: 'XPS 13', aasta: 2023 });
console.log();
// Lisame arvuti massiivi algusesse
arvutid.unshift({ mark: 'HP', mudel: 'Pavilion', aasta: 2022 });
console.log();
// Eemaldame teise arvuti massiivist (indeks 1)
arvutid.splice(1, 1);

// Lisame arvuti teise kohta massiivis
arvutid.splice(1, 0, { mark: 'Microsoft', mudel: 'Surface Laptop', aasta: 2024 });

Code language: JavaScript (javascript)

Massiivist otsimine

Kood:

// Massiivist otsimine: leidke arvuti, mille aasta on suurem kui 2020
let otsing = arvutid.find(arvuti => arvuti.aasta > 2020);
console.log(otsing);
Code language: JavaScript (javascript)

Massiivi filtreerimine ja sorteerimine

Kood:

// Massiivi filtreerimine: leidke kõik arvutid, mis on toodetud pärast 2020. aastat
let filter = arvutid.filter(arvuti => arvuti.aasta > 2020);
console.log(filter);

// Massiivi sorteerimine: järjestame arvutid aastate järgi kasvavas järjekorras
arvutid.sort((a, b) => a.aasta - b.aasta);
console.log(arvutid);

// Massiivi filtreerimine paarisarvudeks, kui arvutite aasta jagub 2-ga
let paarisarvud = arvutid.filter(arvuti => arvuti.aasta % 2 === 0);
console.log(paarisarvud);

Code language: JavaScript (javascript)

Sõnastik:

Eesti keel	Vene keel	Selgitus
objekt	объект	Andmestruktuur, mis koosneb võtme-väärtuse paaridest
võti	ключ	Objekti omaduse nimi
väärtus	значение	Objekti omaduse sisu
andmetüüp	тип данных	Näitab, mis tüüpi andmeid kasutatakse (nt number, sõne)
massiiv	массив	Järjestatud andmete kogum
funktsioon	функция	Koodiplokk, mida saab käivitada
sisseehitatud objekt	встроенный объект	JavaScripti enda poolt loodud objekt
omadus	свойство	Objekti üksik tunnus või andmeväli
meetod	метод	Funktsioon, mis kuulub objektile

Raamatukogu

1. Objekt raamat (Raamat):

let raamat = {
    pealkiri: "Tarkuse tee",
    autor: "Jaan Tamm",
    aasta: 2020,

    kuvaKirjeldus() {
        let output1 = document.getElementById('output1');
        let msg = this.pealkiri + " — " + this.autor + ", " + this.aasta;
        output1.innerHTML = 'Meetod, mis kuvab raamatu kirjelduse. ' + msg + '<br>';
        console.log(msg);
    },

    muudaAasta(uusAasta) {
        this.aasta = uusAasta;
        let msg = 'Raamatu "' + this.pealkiri + '" uus aasta: ' + this.aasta;
        document.getElementById('output1').innerHTML += 'Meetod, mis muudab väljaandmise aastat ja prindi tulemused konsooli: ' + msg + '<br>';
        console.log(msg);
    }
};

Code language: JavaScript (javascript)

Selgitus:

raamat on objekt, mis esindab ühte raamatut. Sellel on:
- pealkiri: raamatu nimi (“Tarkuse tee”),
- autor: raamatu autor (“Jaan Tamm”),
- aasta: raamatu väljaandmise aasta (2020).
Meetod kuvaKirjeldus:
- Kuvab raamatu kirjelduse (pealkiri, autor, aasta) veebilehe output1 elemendis ja ka konsoolis.
Meetod muudaAasta:
- Muudab raamatu väljaandmise aasta, kui sellele antakse uus väärtus (uusAasta), ja kuvab selle uuesti veebilehe elemendis output1 ja konsoolis.

2. Objekt raamatukogu (Raamatukogu):


let raamatukogu = {
    raamatud: [
        { pealkiri: "Tarkuse tee", autor: "Jaan Tamm", aasta: 2020 },
        { pealkiri: "Mõtete jõud", autor: "Kati Kask", aasta: 2015 },
        { pealkiri: "Elu täis", autor: "Mati Maasikas", aasta: 1999 }
    ],

    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;
    },

    kuvaKoguarv() {
        let kogu = "Raamatukogus on " + this.raamatud.length + " raamatut";
        document.getElementById('output').innerHTML += kogu + '<br>';
        console.log(kogu);
    },

    lisaRaamat(pealkiri, autor, aasta) {
        this.raamatud.push({ pealkiri, autor, aasta });
        console.log("Lisati raamat: ${pealkiri} — ${autor}, ${aasta}");


        this.kuvaRaamatud();
        this.kuvaKoguarv();
    },

    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);
    }
};

Code language: JavaScript (javascript)

Selgitus:

raamatukogu on objekt, mis esindab raamatukogu, sisaldades raamatud massiivi, kus on kõik raamatud.
- Igal raamatul on pealkiri, autor ja aasta.
Meetod kuvaRaamatud:
- Kuvab kõik raamatud raamatukogus veebilehe elemendis output ja logib need konsooli.
Meetod kuvaKoguarv:
- Kuvab raamatukogu raamatute koguarvu.
Meetod raamatudParast2000:
- Arvutab ja kuvab raamatud, mis on ilmunud pärast 2000. aastat.
Meetod lisaRaamat:
- Lisab uue raamatu raamatukogusse ja kuvab selle lisamise sõnumi.

Meetodite kutsumine:

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

raamatukogu.kuvaRaamatud();
raamatukogu.kuvaKoguarv();
raamatukogu.raamatudParast2000();

raamatukogu.lisaRaamat("Uus raamat", "Marek Metsa", 2022);
raamatukogu.kuvaRaamatud();


Code language: CSS (css)

Tulemus:

–Minu meetod

See meetod otsib täpselt vastava pealkirja järgi

otsiRaamatPealkirjaJargi(pealkiri) {
    let leid = this.raamatud.filter(r => r.pealkiri == pealkiri); // Otsib täpselt vastava pealkirja järgi
    let msg = "Leitud raamatud pealkirjaga '" + pealkiri + "': " + leid.length + " raamatut";
    console.log(msg);
    document.getElementById('output').innerHTML += msg + '<br>';
    }
Code language: JavaScript (javascript)

Console:

Veebilehel:

link: https://anastasiiaradasheva24.thkit.ee/HTMLtood/Objektide/Objektid.html