meta data for this page
  •  

Juuso Valkin oppimispäiväkirja

2.9.2013

Sain tehtyä viimeisetkin JavaScipt kurssin tehtävät. Kurssi oli hyvää olio-ohjelmoinnin kertausta ja kielen syntaksikin on hyvin lähellä C/C++ kieliä.

18.9.2013

Tänään tuli tehtyä ensimmäinen varsinainen harjoitustehtävä, jossa piti koodata muistikirjasovellus käyttäen HTML/CSS/JavaScript ohjelmointikieliä. Opin sen, että Jquery-kirjasto pitää ladata erikseen ja linkittää html tiedostoon, muuten eivät Jqueryn ilot ole käytettävissä. Muistikirjasovelluksen koodaminen tehtävänä itsessään on pohjimmiltaan melko yksinkertainen, mutta haasteen siihen toi se, että nyt ei ollut Codecademy vieressä kertomassa mitä mihinkin pitää kirjoittaa, vaan nyt pääsi ihan itse soveltamaan oppimaansa. HTML rungon tekeminen sujui suhteellisen helposti, mutta CSS:n ja Jqueryn kanssa joutuikin useasti käymään Codecademyn puolella ja muualta internetissä kertaamassa funktioiden nimiä ja parametreja.

Harjoitusta tehdessäni opin, että $(this).effect('explode'); ei osaakaan räjäyttää tekstiä pois ruudulta :-|. Opin myös käyttämään HTML:n yhteydessä <textarea></textarea> elementtiä, mikä on kuuleman mukaan parempi vaihtoehto <form><input></input></form> käyttämiselle tekstikenttänä. Harjoituksen myötä koen myös hiukan kehittyneeni elementtien sijoittelussa/asettelussa vaikka edelleenkin tuntuu siltä, että en saa elementeistä aivan sellaisia kuin haluaisin, joten kehitysvaraa on vielä paljon tältä osin.

23.9.2013

Tänään opiskelin <canvas> elementin käyttöä HTML:ssä ja sitä, miten kyseisen elementin sisältöä muokataan javascriptin avulla. Canvas elementti vaikuttaa todella hyödylliseltä ominaisuudelta, sen avulla luulisi olevan mahdollista luoda näyttävääkin grafiikkaa, joka on samalla myös kevyttä nettiliikenteen kannalta; Canvas elementin grafiikka piirretään ohjelmallisesti javascript koodin perusteella asiakkaan koneella, eikä siinä näin ollen siirretä kuvatiedostoja asiakkaan ja palvelimen välillä.

Canvas elementin piirtämisessä voidaan käyttää arc() javascriptmetodia, kyseinen metodi on tarkoitettu erilaisten käyrien ja ympyröiden piirtämiseen. Parametreja arc() ottaa viisi kappaletta. Alkuun arc() metodi näytti todella epäselvältä, kun en ymmärtänyt sen ottamien parametrien merkitystä. Codecademyssä oli onneksi selitetty selkeästi jokaisen parametrin käyttötarkoitus, opin siis, että viisi parametriä järjestyksessään ovat: aloituspisteen x-koordinaatti, aloituspisteen y-koordinaatti, säde, piirron alkamiskulma, piirron lopetuskulma. Lisäksi on huomioitava, että kulmasuureina arc() käyttää radiaaneja.

Jos halutaan piirtää nelikulmioita, niin silloin käytetään strokeRect() metodia, strokeRect() ottaa sisäänsä neljä parametriä; Kaksi ensimmäistä parametriä määräävät piirron aloittamiskohdan X- ja Y-koordinaatit samaan tapaan kuin arc() metodissakin, loput kaksi parametriä määräävät nelikulmion leveyden ja korkeuden.

Kaikin puolin canvas vaikutti todella käyttökelpoiselta elementiltä ja uskon, että tulen sitä käyttämään tulevaisuudessa, jos webbisovellusten kanssa olen tekemisissä. Eritoten pidin canvas elementissä sen säädettävyydestä, sen avulla voi piirtää juuri sen mallisia kuvioita kuin itse haluaa ja kuviot pystyy vielä sijoittamaan pikselintarkasti oman mielensä mukaan.

24.9.2013

Tänään opin todella hyödyllisen asian, nimittäin JavaScript debuggerin. Debuggerin avulla löytää syntaksivirheet ja viittaukset tuntemattomiin funktioihin/metodeihin helposti. Joskus html dokumentti voi käyttäytyä oudosti tai funktio ei toimi odotetulla tavalla, syynä tähän voi olla ihan pieni kirjoitusvirhe, jonka etsiminen koodia silmäilemällä voi olla hankalaa ja aikaa vievää, debuggerin avulla tämänlaiset pienet mutta vaikeasti huomattavat virheet on helppo korjata. Debuggeri löytyy ainakin Googlen Chrome selaimesta ja oletettavasti myös muistakin yleisimmistä selaimista. Tästä eteenpäin tulen aina WWW-sovellusta koodatessani käyttämään debuggeria.