Lähteitä: Lahtonen, Ekonoja: JavaScript tietorakenteet, Wikla: Oliot, w3schools
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.
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 (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.
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.
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 ovat joko kokonaislukuja tai pisteellä tehtyjä desimaalilukuja (float). Numeroissa ei luonnollisesti käytetä lainausmerkkejä ympärillä.
Arvo voi olla true tai false.
{ "sale":true }
Olion ympärillä on aaltosulut, avaimen ja arvon välissä on kaksoispiste.
var person = { "nimi":"Juuso", "ika":31, "koti":"Pori" };
// palauttaa Juuso person.nimi;
Toinen vaihtoehto
// palauttaa Juuso person["nimi"];
person.nimi="Jooseppi";
Toinen vaihtoehto
person["nimi"] = "Jooseppi";
myObj = { "nimi":"Juuso", "ika":30, "auto":null }; for (x in myObj) { document.getElementById("demo").innerHTML += x; }
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 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]; }
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>
<!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>
<!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>
<!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>
<!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>