Javascript demo 3

Javascript-demo 3, taulukot

Demon asiat käydään yhdessä tunnilla. Tarkoitus on tehdä yksi tiedosto johon lisätään pikku hiljaa demon osatehtävät. Aloita uusi tiedosto, tallenna se kansioon demot nimellä jsdemo3.html. Tee javascript omaan tiedostoon jsdemo3.js. Lähdemateriaalina käytetään w3schoolin javascript-materiaalia.

1. Henkilöt

Tee html-tiedstoon painike jolla kutsutaan javascript-funktiota listPersons(). Lisää myös div tuloksen syöttämistä varten (id esimerkiksi divPersons).

persons = ["aku", "hessu", "mikki"];

Esittele javascript-tiedostossa taulukko persons. Laadi funktio listPersons joka a.) luo uuden ul-elementin, b.) käy läpi persons-taulukon ja luo jokaisesta henkilöstä li-elementin, c.) lisää ul-elementin divPersons-lapseksi.

Apua löydät w3schoolin materiaalista (taulukot, createElement)

2. Lisää henkilö

Lisää pieni form jolla voidaan syöttää uusi henkilö taulukkoon persons.

Nappia painamalla kutsutaan funktiota addPerson joka a.) lisää henkilön taulukkoon ja b.) kutsuu listPersons()-funktiota.

3. Sort

Lisää painike joka järjestää listan aakkosjärjestykseen.

4. Poistaminen

Lisää painike jolla voidaan poistaa henkilö. delete-metodi jättää aukkoja taulukkoon joten käytä splice-metodia.

5. Olio

Tee js-tiedostoon kolme autoa.

let car1 = {
    name: "Toyota Corolla Verso",
    motor: "1.8",
    year: 2003,
    price: 4400
}

Lisää autot taulukkoon:

let cars = [car1, car2, car3];

Tehdään funktio joka listaa autot html-sivulle.

uusi funktio (esimerkiksi listaaAutot())
käy läpi taulukko cars
tee uusi div-elementti createElement-metodin avulla
lisää div-elementille auton nimi otsikolla ja listana auton tiedot.