Kurssin toisella tunnilla kertasimme JavaScriptin alkeita ja koodailimme sillä yksinkertaisia ohjelmia. Läksyksi saimme seuraavan tehtävän ( http://terokarvinen.com/2013/aikataulu-–-mobiilituotekehitys-bus4tn008-3-syksylla-2013 ):

– Hello jQuery

– Lue ja kirjoita arvoja lomakkeen kenttiin, reagoi napin painalluksiin (jQueryllä)

– Keksi oma ohjelma ja toteuta se jQuerylla

Tämänkin läksyn tein iMac2011-tietokoneellani, mutta tällä kertaa päätin tehdä sen Mac OS X Lion-käyttöjärjestelmällä. Aloitin käynnistämällä Terminalin ja luomalla kotihakemistooni tiedoston harjoitus.html komennolla

$ nano harjoitus.html

Tämän jälkeen kirjoitin html-Hello Worldin:

<!DOCTYPE HTML>
<html>
<head>
<title>HeiMaailma</title>
</head>

<body>
Hei Maailma!
</body>
</html>

Avasin tiedoston Safari-selaimessani File-kohdasta “Open File…” ja sieltä valitsemalla juuri luomani tiedoston. Selaimeen avautui näkymä:
Image

Tämän jälkeen Googlasin “Hello World jQuery” ja löysin helposti ymmärrettävän ohjeen jQueryn käyttöä varten: http://blog.createbrilliance.com/blog/getting-started-with-jquery-hello-world/

Kopion ensimmäisestä kohdasta <script src>-osuuden, jossa siis opeteltiin viittaaamaan jQuery-kirjastoon. Lisäsin tämän pätkän omaan koodiini headin sisälle. Lisäksi opettelin luomaan HelloWorld-funktion sivun ohjeiden mukaan. Halusin sekä HTML- että JavaScript- HelloWorldit näkymään, joten tein uuden divin “js”, jolle laitoin JavaScript -Hello Worldin. HTML- Hello World jäi näin näkyviin bodyyn.
Tässä koodi:
Image

ja tässä kuva selaimesta. Ylempi on siis “HTML Hello World” ja alempi “jQuery Hello World”.
Image

Seuraavaksi opettelin lomakkeen luomisen jälleen Googlaamalla “form jQuery”. Löysin nettisivun http://malsup.com/jquery/form/ , jonka ohjeiden mukaan lisäsin koodiini seuraavat kohdat:
– bodyyn uuden lomakkeen eli fprm-elementin, jossa text-kohta Nimi ja textarea Kommentointi sekä Lähetä-nappulan
– scriptiin loin funktion, joka hälyttää “Kiitos”, kun Lähetä-nappia klikataan.

Koodi näytti nyt tältä:

Screen Shot 2013-09-08 at 10.37.50 PM

Sivu puolestaan tältä:

Screen Shot 2013-09-08 at 10.38.00 PM
Ja click-tapahtuman jälkeen

Screen Shot 2013-09-08 at 10.38.13 PM

Seuraavaksi aloin koodata omaa miniohjelmaa. Loin uuden tiedoston

$ nano minisofta.html

ja kopion sinne kaikki aiemmin tekemäni harjoitukset. Päätin aloittaa lisäämällä taustakuvan, jonka löysin googlaamalla  osoitteesta http://www.hdwallpapersplus.com/free-wallpaper-background.html

Mietiskelin ideaa miniohjelmalleni ja koska pidän kovasti piirtämisestä ( ;P ), tulin ajatelleeksi seuraavaa:
Tavoittena on tehdä ohjelma, joka käynnistyessään tuo ruudulle kolme hahmoa. Ylhäällä lukee “Anna hahmoille nimet” ja joka hahmon alla on nimilaatikko. Kun nimi on syötetty, input-boxin tilalle muuttuu kiinteä teksi, jossa lukee hahmon nimi. Tämän jälkeen hahmoja voi vielä klikkailla ja ne tekevät jonkin pienen liikkeen (kuten vilkutus tms).

Poistin Hei Maailmat ja aloitin lisäämällä kaksi nimiboxia kuten yllä opin. Nimesin ne nimi1, nimi2 ja nimi3. Tämän jälkeen lisäsin bodyyn (testivaiheen vuoksi) kolme Internetistä Googlattua hahmoa. Lisäksi loin divit, jotka edustaisivat lomakkeisiin annettuja nimiä. Näille annoin tunnuksiksi hnimi1, hnimi2 ja hnimi3. Style-osiossa määrittelin nyt nämä alkuun näkymättömiksi.

Tämän jälkeen lisäsin Lähetä-funktion sisään seuraavat tapahtumat:
$(“#nimi1”).hide(); joka piilottaisi input-tekstikentät
$(“#hmimi1”).html($(‘#nimi1’).val()); joka antaisi nimi-inputtiin kirjoitetun arvon hnimi:lle (löysin ohjeen tästä http://api.jquery.com/val/ )
$(“#hnimi1”).show(); joka laittaisi nyt hnimi:t näkyviin

Tässä vaiheessa koodi näytti tältä, mutta ei toiminut vielä oikein, sillä se ei näyttänyt kirjoitettuja nimiä.
Screen Shot 2013-09-09 at 2.50.03 PM

Syy koodin toimimattomuuteen ei selvinnyt minulle, joten kysyin neuvoa. Sain vastaukseksi, että form-elementti on tässä tapauksessa ongelma. Olin jättänyt “action”-kentän tyhjäksi, mikä tarkoitti, että selain latasi nyt esillä olevan sivun uudelleen eli palasi alkutilanteeseen. Normaalisti action-kenttään laitetaan sivu, jonka kuuluisi latautua seuraavaksi.
Tästä syystä poistin koko form-osuuden ja jätin vain input id:t.

Koodi toimi nyt moitteitta, mutta sivun ulkoasu oli ruma ja nimet tulivat allekkain, vaikka halusin ne riviin. Päätin siis asettaa kuvat ja nimet taulukoksi, jolloin ne olisivat kohdakkain. Lisäsin tablen, jonne kaksi riviä tr, jonne kumpaankin kolme solua td. Laitoin Styleen määrittelyn text-align: center;, jolloin nimet näkyivät tasaisesti.

Nyt koodi näytti tältä:
Screen Shot 2013-09-09 at 4.02.11 PM

Ja selaimessa tältä:

Screen Shot 2013-09-09 at 4.02.57 PM
Screen Shot 2013-09-09 at 4.04.07 PM
Screen Shot 2013-09-09 at 4.03.07 PM

Lisäsin vielä  $(“#laheta”).hide(); click-funktion sisään, jolloin viimeisestä kohdasta häipyi “Lähetä”-nappi.

Mielestäni yllä näkyvä fontti ei ole kovin tyylikäs, joten muutin sen. Googlasin fontteja ja löysin kivan. Sivustolta http://www.google.com/fonts valitsin Bubbler Onen ja lisäsin alkuun pyydetyn määrittelyn: link href=’http://fonts.googleapis.com/css?family=Bubbler+One&#8217; rel=’stylesheet’ type=’text/css’
Tämän jälkeen vain Stylen kohtaan body font-family: ‘Bubbler One’;Screen Shot 2013-09-09 at 4.15.58 PM

Seuraavaksi päätin lisätä omat kuvani. Piirsi ja skannasin ne, jonka jälkeen väritin kuvat Photoshopilla. Sitten lisäsin kahdelle ensimmäiselle kuvalle muutaman uuden version, ja tavoitteena olisi yhdistää ne animaatioksi.

piirrokset

apinat kissat

Tämän jälkeen pienensin kuvat ja siirsin ne haaga-helian myy-serverille. Kirjauduin ensin sisään ja loin uuden kansion. Tämän jälkeen avasin uuden Terminal-ikkunan, siirryin omalla koneellani vastaavaan kansioon ja siirsin kuvat ko. kansioon. Sen jälkeen siirsin vielä tämän kansion public_html-kansioon, jolloin kuvat olivat Internetissä.

$ ssh a*******@myy.haaga-helia.fi
$ ls -l
$ mkdir MOBIILITUOTEKEHITYS
$ exit
(Toisella Terminalilla)
$ pwd

$ cd Desktop
$ cd MOBIILIKUVAT/
$ scp *.jpg a*******@myy.haaga-helia.fi:MOBIILITUOTEKEHITYS/

ensimmäisellä Terminalilla
$ mv MOBIILITUOTEKEHITYS/ public_html/

Tämän jälkeen vaihdoin koodissani olevan img src-kohdan vastaamaan myy-palvelimella olevia kuvia.

Nyt koodi näytti tältä:
Screen Shot 2013-09-09 at 11.38.54 PM

ja selaimessa tältä:

Screen Shot 2013-09-09 at 11.41.06 PM

Screen Shot 2013-09-09 at 11.41.12 PM

Kuvat on talletettu jpg-tiedostoiksi, joten tausta näkyy valkoisena. Seuraavaksi täytyi tehdä kuvista PNG-versiot ja siirtää ne samalla tavalla myylle kuin nämäkin kuvat.

Nyt annoin vain yhden komennon:

$ scp *.png a1102086@myy.haaga-helia.fi:public_html/MOBIILITUOTEKEHITYS/

ja kuvat siirtyivät. Menin takaisin koodiini ja vaihdoin .jpg:t .png:ksi. Nyt selain näytti tältä:

Screen Shot 2013-09-10 at 11.49.08 AM

Hiukan valkoista on havaittavissa kuvien reunoilla, joten vaihdoin taustakuvan hiukan erilaiseksi.

Screen Shot 2013-09-10 at 12.04.09 PM

Viimeinen tavoite olisi saada hahmot liikkumaan, kun niitä klikkaa.
Kokeilin klikkaus-funktiota niin, että klikatessa hahmo alerttaa pienen lausahduksen. Lisäsin

$(“#hahmo2”).click(function(){

alert(“Haivy!”);
});
klikkausfunktion “lähetä” sisälle. Toimi moitteitta. (0hje click-funktioon: http://api.jquery.com/click/ )

tämän jälkeen lisäsin hover-ominaisuuden (http://api.jquery.com/hover/) eli kun kursorin vie hahmon päälle, nuoli muuttuu tassuksi eli käyttäjä huomaa heti, että kuvasta voi klikata.

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

Toimi moitteitta. Seuraavaksi haasteena on vaihtaa alert-kohdat kuva-animaatioksi. Googlailin ja löysin sivuston:
http://stackoverflow.com/questions/5864294/jquery-animate-images

Kopioin sivulta löytyneen koodin omaan koodiini, vaihdoin vain kuvien osoitteet ja animaatio alkoi toimia!

$(“#hahmo1”).click(function(){
var myImages = [
http://myy.haaga-helia.fi/~a1102086/MOBIILITUOTEKEHITYS/miniapina2.png&#8221;,
http://myy.haaga-helia.fi/~a1102086/MOBIILITUOTEKEHITYS/miniapina3.png&#8221;,
http://myy.haaga-helia.fi/~a1102086/MOBIILITUOTEKEHITYS/miniapina2.png&#8221;,
http://myy.haaga-helia.fi/~a1102086/MOBIILITUOTEKEHITYS/miniapina.png&#8221;,
];
var counter = 0;

function switchImage() {
$(‘#hahmo1’).attr(‘src’, myImages[counter]);
counter += 1;

if (counter == myImages.length) {
counter = 0;
}
}

$(document).ready(function() {
setInterval(switchImage, 5000);
});
});

Ongelmat:
– animaatio oli kovin hidas
– haluaisin, että liike tehtäisi vain yhden kerran. Nyt animaatio jatkuu ikuisesti.

Ensimmäisen ongelman sain ratkaistua muuttamalla kohdan setInterval(switchImage, 5000); -lukua 5000:sta 50:een.
Toisen ongelman ratkaisin muuttamalla kohtaa if (counter == myImages.length) {
counter = 0;
}
}

Löysin Googlaamalla “JQuery stop Interval” linkin: http://stackoverflow.com/questions/109086/stop-setinterval-call-in-javascript
Huomasin funktion clearInterval ja päätin kokeilla sitä. Vaihdoin kohdan counter = 0 —> clearInterval(switchImage);
Nyt siinä tapauksessa kun counter on sama kuin läpikäytyjen kuvien määrä, Intervalli stoppaantuu. 🙂 Ohjelma toimii nyt halutulla tavalla!!!

Lopuksi vaihdoin vielä suoraankopioidut muuttujien nimet suomeksi. Näin koodia on mielestäni helpompi lukea.

Sitten latasin koodin myylle komennolla
$ scp minisofta.html a*******@myy.haaga-helia.fi:public_html/MOBIILITUOTEKEHITYS/

ja nyt minisofta on nähtävissä netissä osoitteessa
http://myy.haaga-helia.fi/~a1102086/MOBIILITUOTEKEHITYS/minisofta.html

EDIT: HUOM!!!!!!!!!!!
Kokeiltuani useammilla käyttöjärjestelmillä ja selaimilla, vaikuttaisi siltä, että animaatio ei toimi kaikissa. Jatkan testailua ja raportoin myöhemmin tuloksia. Pyrin saamaan softan toimimaan kaikilla… Kuvasin kuitenkin videon, jossa näkyy, miten ohjelman pitäisi toimia. Käytössä siis Safari-selain.

Koodi softaan seuraavassa:
Screen Shot 2013-09-10 at 4.36.56 PM

Advertisements