Viikkotehtävä 7 ja Ajax - Luento 16

• Luentotaltiointi
• Viikkotehtävä 7
  • Huomioita
  • Kysymyksiä
• Ajax-esimerkkejä
  • Kaaviot Javascriptillä (plotr)

Käsittelemme edellisen viikkotehtävän ja jatkamme Ajaxin parissa.

Viikkotehtävä 7

• Palautteet ja kuvaajat
• Malliratkaisut

Huomioita

• Tyhjän laatikon huomioiminen
• Laatikoiden läpikäynti napin painamisen jälkeen.
• Tekstilaatikon poistaminen
• innerHTML hyihyi! :)

Kysymyksiä

• Missä JS loppuu ja DOM alkaa?
• Miten saadaan teksti ulos erilaisista elementeistä (value, nodeValue, textContent)?
• Mahtaakohan JavaScriptistä löytyä jotain format-vastinetta?
• Kuinka JavaScriptissä voisi määrittää luokkia/olioita ja tehdä niiden avulla näppärästi uudelleenkäytettäviä komponentteja?
  • Core Javascript 1.5 Guide: Details of the Object Model
  • Prototype: Class.create ja Object.extend
  • Esim.

    function Koordinaatti(nimi) {
      this.pistenimi = nimi;
    }
    Koordinaatti.prototype.kerroNimi = function() {
      alert(this.pistenimi);
    }
    var pisteA = new Koordinaatti("A");
    var pisteB = new Koordinaatti("B");
    pisteA.kerroNimi();
    pisteB.kerroNimi();
    
    // perintä
    function Koordinaatti2d(nimi, x, y) {
      this.base = Koordinaatti;
      this.base(nimi);
      this.x = x;
      this.y = y;
    }
    Koordinaatti2d.prototype = new Koordinaatti;
    Koordinaatti2d.prototype.kerroNimi = function() {
      alert(this.pistenimi + " (" + this.x + ", " + this.y + ")" );
    }
    var pisteC = new Koordinaatti2d("C", 3.1, 3.2);
    
    // koostaminen
    function Koordinaatti3d(nimi, x, y, z) {
      this.base = Koordinaatti;
      this.base(nimi);
      this.tasoOsa = new Koordinaatti2d(x, y);
      this.z = z;
    }
    Koordinaatti3d.prototype = new Koordinaatti;
    var pisteD = new Koordinaatti("D", 4.1, 4.2, 4.3);
    

    Tutki Firebugin DOM-välilehdeltä objektien luonti kerrallaan mitä tapahtuu.

Ajax-esimerkkejä

Esimerkit tarvitsevat Prototype-kirjastoa.

• Rekisteröitymislomake
  • Lisätty harrastuslajien ja harrastuksien haku.
  • Huomaa, että Form.serialize ja Form.Element.serialize vaativat, että lomake-elementeillä on name-ominaisuus.
• Ajax-chat
  • Versiot 1 & 2 ovat kokeiluja, ne toimivat vain yhden käyttäjän kesken :)
  • Versiossa 3 on kommenteissa ehdotuksia miten toteutus voitaisiin saada toimimaan monen käyttäjän kesken.
  • Huomaa myös uusi Ajax.PeriodicalUpdater, jota chatin päivittämisessä silloin kun käyttäjä ei itse lähettele viestejä.
• Drag & drop
  • Tässä tarvitaan Scriptaculous-kirjastoa Prototypen lisäksi.

Kaaviot Javascriptillä (plotr)

Käytetään Plotr-kirjastoa, jonka avulla on helppo tehdä kaavioita. Plotr piirtää kaaviot epästandardin Canvas-elementin sisään. Canvas-elementtiä tukevat kuitenkin Firefox-, Opera- ja Safari-selaimet ja sitä voidaan emuloida Internet Explorerissa excanvas.js-kirjaston avulla.

Käyttöesimerkki

Esimerkin kooditiedostot.

var dataset = {
	'tiedot1': [[0, 640428], [1, 616841], [2, 594194], [3, 244296], [4, 234429],
	            [5, 134790], [6, 126520], [7, 112256]]
};

var options = {
	strokewidth: 1,
	backgroundColor: '#ffffff',
	colorScheme: 'blue',
   	xTicks: [{v:0, label:'KESK'},
	   	{v:1, label:'KOK'},
	   	{v:2, label:'SDP'},
	  	{v:3, label:'VAS'},
	   	{v:4, label:'VIHR'},
	  	{v:5, label:'KD'},
	  	{v:6, label:'RKP'},
	  	{v:7, label:'PS'}
	]
};


var piirakka = new Plotr.PieChart('kaavio',options);
piirakka.addDataset(dataset);
piirakka.render();

Kaavion piirtämisessä tarvittava data voidaan hakea myös Ajaxin avulla tietokannasta. Data saadaan parhaiten Plotr- kirjaston käyttöön, kun se tuodaan JSON-muodossa eli "javascript-objektin merkkijonorepresentaatiomuodossa". Varsinainen stringin objektiksi muuttaminen vaatii String.evalJSON-metodia, joka on saatavilla vasta Prototypen versiosta 1.5.1 lähtien.