Tänään aloittelin loppuprojektin, mobiililemmikin, koodaamista. Päätin luoda ensiksi etusivun, eli ‘valitse hahmo’-sivun, jonka koodaaminen osoittautuikin yllättävän hankalaksi – päätin nimittäin luoda hahmot eli lemmikit samantyyppisesti kuin Java-ohjelmoinnissa luodaan oliot, jotta uusien hahmojen lisääminen myöhemmin olisi mahdollisimman yksinkertaista. Loin siis kolme tiedostoa, index.html, lemmikki.js ja lemmikki.css. HTML-tiedostossa ei varsinaisesti ole mitään uutta ja css-määrittelykin alkaa olla jo aikalailla tuttua. Siksi käyn tässä läpi vain JavaScript-koodin (tähänasti tehdyn): Koodi tässä:

Image

Apunani käytin seuraavaa sivustoa: http://www.phpied.com/3-ways-to-define-a-javascript-class/

function Hahmo(nimi, kuva) {
this.name = nimi;
this.image = kuva;
}

Ensimmäiseksi loin siis funktion Hahmo, jolle annoin sisäänmenoparametreiksi nimen ja kuvan. Tämä tarkoittaa siis, että kun luon myöhemmin uuden Hahmon, voin syöttää sille arvot, joita se sitten käyttää.

var Tiikeri = new Hahmo(” “, “valintatikru.png”);

Seuraavaksi loinkin ensimmäisen hahmon, lemmikin, Tiikerin. Annoin muuttujan nimeksi Tiikeri ja sen tyypiksi Hahmo, sisälle syötin parametrit ” ” ja “valintatikru.png” eli kuvan osoite. Nimi on siis toistaiseksi tyhjänä, mutta Tiikerin kuvana näkyy nyt valitsemani piirros.

var Hahmot = new Array(Tiikeri);

Seuraavaksi loin listan ( http://www.w3schools.com/js/js_obj_array.asp ), jonne syötin toistaiseksi vain yhden jäsenen.

for (var i=0; i < Hahmot.length; i++) {
var html = “<div class=’tausta’>”;
html += “<img class=’hahmo’ src='” + Hahmot[i].image + “‘ />”;
html += “<input type=’text’ class=’nimi’ value=” />”;
html += “<input type=’submit’ class =’laheta’ value=’Name it!’ title='” + i + “‘/>”;
html += “</div>”;
$(‘#content’).append(html);
}

Sitten lisäsin documentReadyn sisälle for-loopin, joka toi jokaisen hahmon näkyviin ja loi divit niiden ympärille. Kävin siis läpi taulukon jokaisen arvon ja lisäsin elementit “html”-muuttujaan.  Lopussa append-funktiolla lisäsin html-muuttujan sisällön index-html divin “content”-sisälle. Loin kaikille class-luokat, jotta voin myöhemmin viitata aina juuri haluamaani kohtaan (this)-rakenteella.

Tällä tavalla tehty hahmonluontirakenne mahdollistaa jatkossa uusien hahmojen luonnin ja käyttöönoton pelkästään lisäämällä uuden muuttujan, joka määritellään Hahmoksi ja lisätään Hahmot-listaan. Näinollen ei tarvitse koodata jokaisen hahmon diviä ja inputteja ja funktioita ja muita erikseen.

Sitten lisäsin

$(“.hahmo”).hover(
function() { $(this).css(‘cursor’,’pointer’); },
function() { $(this).css(‘cursor’,’default’); }
);

Eli kun johonkin hahmo-luokkaan kuuluvan kuvan päälle siirretään hiiri, kursori muuttuu pointer-tyyppiseksi.

$(‘.hahmo’).click(function(){
$(this).siblings(‘.laheta’).show();
$(this).next(‘.nimi’).show();
$(this).siblings(‘.laheta’).click(function() {
$(“.nimi”).hide();
$(“.laheta”).hide();
var index = $(this).attr(‘title’);
Hahmot[i].nimi = $(this).siblings(‘nimi’).val();

});
});

Hahmo-luokkaan kuuluvaa kuvaa klikattaessa, sen kyseisen hahmon lähetä-nappula ja input-boxi ilmestyvät. Kun klikkaa sitä tiettyä “lähetä”-nappulaa, nimi- ja lähetä- luokkiin kuuluvat kentät häviävät, index-muuttuja saa arvon ‘title’, joka on määritelty ylempänä kohdassa lähetä. Se on siis Hahmot-taulukon i:des arvo. Taulukon i:des hahmo saa myös nimi-arvokseen tämän annetun nimen.

Toistaiseksi olen luonut siis vasta yhden lemmikin, Tiikerin, joten selaimessa  näytti tältä:

Screen Shot 2013-10-23 at 10.35.32 AMScreen Shot 2013-10-23 at 10.35.34 AM

Advertisements