Johdatus ohjelmointiin

Sorakuilu

Sisältö

  1. Orientaatio
  2. Työvälineet ja ympäristö, Javascriptin kirjoittaminen
  3. Muuttujat, tietotyypit ja operaattorit
  4. Ehtolauseet, boolean
  5. Funktiot (lohkot)
  6. Taulukot ja toistorakenteet
  7. Olioista, perusteet
  8. Osa 8, DOM, perusteita
  9. Osa 9, DOM, lomakkeet, listat
  10. Osa 10, JSON, perusteita

Osa 10, JavaScript olioita, JSON

Lähteitä: Lahtonen, Ekonoja: JavaScript tietorakenteet, Wikla: Oliot, w3schools

Tietorakenne

Tietorakenne (data structure) on tapa organisoida dataa (tyypillisesti tietokoneen muistiin) siten, että se on tarvittavalla tavalla käytettävissä ja muokattavissa. Tietorakenteeseen kuuluu talletusrakenne: miten data esitetään koneen muistissa (tms.) operaatiot: miten tietorakennetta muokataan ja siellä oleva data saadaan käyttöön.

JavaScript tietorakenteet

Yksinkertaisin JavaScriptin tietorakenne on taulukko, joka on oikeastaan jo käyty läpi.


var a = [1,2,3,4];

Olio on toinen mahdollinen tietorakenne. Se on assosiaatiotaulukko, jossa on joukko pareja avain - arvo.

Seuraava rakenne luo olion:


let retki = 
      {matka: 150,
       aika: 2
	  }

Avaimeen voi liittyä myös funktio:


let retki = 
  {matka: 150,
   aika: 2,
   nopeus: function() {return this.matka/this.aika}
  }
write(retki.nopeus());  // 75

//tai vaihtoehtoisesti nykyisin

nopeus: () => this.matka/this.aika

JavaScriptin tietorakenteet ovat samanlaisia, kuin JSON-tiedostomuoto.

JSON, monen ympäristön tiedonsiirtomuoto

JSON (JavaSCript Object Notation) on kevyt tiedonsiirtomuoto ja helposti sekä ihmisen että koneen luettavissa. JSON on kielestä riippumaton, mutta käyttää samoja ilmaisuja kuin esim: C, C++, C#, Java, JavaScript, Perl, Python.

Miksi JSON?

Kun lataat sivun uudestaan, se latautuu kokonaan. Joissakin tilanteissa olisi parempi, että vain pienempi datamäärä liikkuisi palvelimelta. Uusissa sovelluksissa tähän käytetään datan siirtoformaattia JSOnia.

JavaScript -oliot voidaan muuntaa JSON-tekstiksi ja ja toisin päin.

Syntaksi

JSON on pääosin samanlaista kuin JavaScript, toki poikkeuksiakin on.

JSONissa käytetään merkkijonojen ympärillä lainausmerkkejä, JavaScriptissä voidaan käyttää lainausmerkkejä tai heittomerkkejä.

JSON datassa (tekstimuotoista) on parina nimi ja arvo


"name":"Liisa"

Huomaa, että JSONissa nimet vaativat ympärilleen lainausmerkit eli ne ovat merkkijonoja. JavaScriptin avainkentät voivat olla merkkijonoja, numeroita jne eikä niiden ympärille tule lainausmerkkejä.

JSONin arvot voivat olla:

Numerot

Numerot ovat joko kokonaislukuja tai pisteellä tehtyjä desimaalilukuja (float). Numeroissa ei luonnollisesti käytetä lainausmerkkejä ympärillä.

Boolean

Arvo voi olla true tai false.


    { "sale":true }

Oliot

Olion luominen JavaScriptillä/JSONilla

Olion ympärillä on aaltosulut, avaimen ja arvon välissä on kaksoispiste.

    
var person = { "nimi":"Juuso", "ika":31, "koti":"Pori" };
Olion lukeminen
 
   
// palauttaa Juuso
person.nimi;

Toinen vaihtoehto

    
// palauttaa Juuso
person["nimi"];
Olion muuttaminen
 
   
person.nimi="Jooseppi";

Toinen vaihtoehto

    
person["nimi"] = "Jooseppi";
Olion lukeminen silmukalla
    
myObj = { "nimi":"Juuso", "ika":30, "auto":null };
for (x in myObj) {
    document.getElementById("demo").innerHTML += x;
}
Sisäkkäiset oliot
    
myObj = {
    "nimi":"John",
    "ika":30,
    "autot": {
        "auto1":"Ford",
        "auto2":"BMW",
        "auto3":"Fiat"
    }
 }

Lukeminen

     
x = myObj.autot.auto2;
//tai
x = myObj.autot["auto2"];

Muuttaminen

    
myObj.autot.auto2 = "Mercedes";

//tai 

myObj.autot["auto2"] = "Mercedes";

Poista ominaisuus

    
delete myObj.autot.auto2;

Taulukot (array)

Taulukot ovat samanlaiset kuin JavaScriptissä ja myös luetaan samalla tavalla viittaamalla kentän paikkaan:

    
[ "Ford", "BMW", "Fiat" ]

Taulukon lukeminen

 
   
for (i in myObj.autot) {
    x += myObj.autot[i];
}

//tai

for (i = 0; i < myObj.cars.length; i++) {
    x += myObj.cars[i];
}

Merkkijonojen muuttaminen JSONista JavaScriptiksi

JSONia käytetään tiedon välittämiseen palvelimelle tai palvelimelta.

Kun tieto tulee palvelimelta, se on aina tekstiä ja se täytyy muuntaa JavaScriptiksi.

 
   
{ "name":"John", "age":30, "city":"New York"}

JavaScript funktio JSON.parse() muuntaa tekstin JavaScript olioksi.

 
   
var obj = JSON.parse('{ "name":"John", "age":30, "city":"New York"}');

Käyttö sivuilla


<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = obj.name + ", " + obj.age; 
</script>

Esimerkkejä

JSON paikallisena tietovarastona

<!DOCTYPE html>
<html>
<body>

<h2>Tallenna ja hae dataa paikallisesti</h2>

<p id="demo"></p>

<script>
var myObj, myJSON, text, obj;

//Tallenna data:
myObj = { "nimi":"Eemeli", "age":17, "koti":"Tampere" };
myJSON = JSON.stringify(myObj);
localStorage.setItem("testJSON", myJSON);

//Hae data:
text = localStorage.getItem("testJSON");
obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.nimi;
</script>

</body>
</html>

Muunna JSON JavaScriptiksi

<!DOCTYPE html>
<html>
<body>

<h2>Muunna JSON -muotoinen teksti JavaScript-olioksi</h2>

<p id="demo"></p>

<script>

var myJSON = '{ "nimi":"Juuso", "age":21, "koti":"Kangasala" }';
var myObj = JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myObj.nimi;

</script>

</body>
</html>

Datan lähetys palvelimelle

<!DOCTYPE html>
<html>
<body>

<h2>Muunna JavaScript olio JSON tekstiksi ja lähetä palvelimelle.</h2>

<script>

var myObj = { "nimi":"Leevi", "ika":100, "koti":"Tampere" };
var myJSON = JSON.stringify(myObj);
window.location = "jsondemo.php?x=" + myJSON;

</script>

</body>
</html>

Palvelinpään lähetyksen käsittelijä

<!doctype html>
<html>
<head>
<title>JSON kokeilu</title>
</head>
<body>

<?php
if(isset($_GET["x"])){
    $myArr=$_GET["x"];    
    $myJSON = json_encode($myArr);
    echo $myJSON;
}
?>

</body>
</html>