Javascript-perusteet

Harjoitellaan Javascriptin perusteita. Tehtäviin löytyy myös malliratkaisu.

Alkuvalmistelut

Hello World

Muuttujat

Debuggaus

Tietorakenteet

Silmukat

If-lause

Funktiot

Objektit

var elukka = new Object();
elukka.tyyppi = 'Kissa';
elukka.nimi = 'Mirri';
elukka.paino = 4;
// objektin ominaisuuksiin voi viitata kuin taulukon alkioihin:
console.log ( elukka['tyyppi'] );
console.log ( elukka['nimi'] );
elukka['paino'] = 5;

// toinen tapa luoda ja alustaa objekti. Vrt json
var elukka2 = {
  tyyppi: 'Koira',
  nimi: 'Musti',
  paino: 10
};

Objektin sisältämät avaimet ja arvot voi käydä läpi for...in-silmukalla.

Luo omaan ohjelmaasi edellä tehdyt objektit ja kokeile tulostaa niiden sisältö konsoliin silmukalla.

Voit vapaasti keksiä ja lisätä uusia avaimia (attribuutteja) mihin tahansa javascript-objektiin.

Taulukot ja objektit ovat viitteitä

Javascriptissa objektit ovat viitteitä (osoittimia). Taulukko on vain erikoistapaus objektista. Taulukoiden ja objektien kopioiminen ei ole aivan yksinkertaista. Pelkkä sijoitusoperaatio kopioi vain osoittimen.

// kopioidaan elukat-taulukon osoitin uuteen muuttujaan
var otukset = elukat;
otukset[0] = 'Rotta';
// kokeile nyt tulostaa sekä elukat että otukset taulukot

jos halutaan kopioida koko taulukko se on tehtävä array.from-funktiolla. Tee oikea kopio elukat-taulukasta.

Array.from tekee taulukosta vain shallow-kopion eli jos taulukko sisältää osoittimia tai objekteja niin kopioidaan vain näiden osoittimet eikä oikeaa sisältöä.

let ihmiset = ["Tommi", "Ville", "Kalle"];
let elaimet = ["Kissa", "Koira", "Hevonen"]
let kaikki = [ihmiset, elaimet, "Testi", "testi"];
// tee kopioi kaikki-taulukosta array.from-funktiolla. Kokeile muuttaa ihmiset- ja elaimet-taulukoiden sisältöä. Miten kaikki-taulukosta tehdyn kopion sisältö muuttuu?
// Miten korjaisit asian?

Monimutkaisemmat tietorakenteet

Usein joudutaan käsittelemään sisäkkäisiä tietorakenteita. Taulukoita, joiden sisällä on lisää taulukoita tai objekteja, tai objekteja, jotka sisältävät uusia objekteja ja taulukoita.

Elaintarha on objekti, joka sisältää ominaisuudet tyypit ja elaimet. Tyypit on taulukko. Elaimet on myös taulukko. Tyypit sisältää merkkijonoja. Elaimet sisältää objekteja. Lisää seuraava tietorakenne omaan ohjelmaasi ja tulosta se console.log- tai console.dir-komennolla konsoliin. Tämän jälkeen voit konsolissa selailla tarkemmin rakennetta.

var elaintarha = {
  "tyypit": [
    "Kissa",
    "Koira",
    "Hiiri"
  ],
  "elaimet": [
    {
      "tyyppi": "Kissa",
      "nimi": "Mirri",
      "paino": 5
    },
    {
      "tyyppi": "Koira",
      "nimi": "Musti",
      "paino": 10
    },
    {
      "tyyppi": "Koira",
      "nimi": "Murre",
      "paino": 10
    }
  ]
};

Käyttäjien kommentit

Kommentoi Lisää kommentti
Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/tiea2120/ohjaus/ohjaus1/
© Tommi Lahtonen (tommi.j.lahtonen@jyu.fi) <http://hazor.iki.fi/>
2018-09-16 12:01:16
Informaatioteknologia - Jyväskylän yliopiston informaatioteknologian tiedekunta