meta data for this page
  •  


Anssi Hauvala TIMO-12/TITE

Oppimispäiväkirja: CT30A3201 WWW-sovellukset

javaScript

27.08.2013 (12 %)
- Noppa-uutisissa julkaistuun tehtävänantoon perehtyminen
- 12 ensimmäistä harjoitusta takana, vaikutti vielä toistaiseksi aika helpolta, mutta ohjelmointikokemus on niin vähäistä, että ajattelin jatkaa helppojenkin harjoitusten tekemistä, että saa vähän tuntumaa siihen mitä on tulossa.

28.08.2013 (33 %)
- Ensimmäinen osio tuli käytyä läpi (Introduction to JavaScript, harjoituksia 35 kpl)
- Ainakin omalla kohdalla ihan perusasiatkin on tarpeellisia, joten sikäli kaikki opitut asiat ovat olleet hyödyllisiä
- Ehtolauseet, muuttujat, tietotyypit jne. tulivat tässä nyt tutuksi.
- Aloitin 2. osa-alueen eli funktiot, joista suoritin ensimmäiset 13 harjoitusta joten myös funktioihin on alkanut päästä hyvin sisälle
- Sain funktiot valmiiksi. Kivi, paperi, sakset tuotti ongelmia, koska “if/else if” ei vaan millään toiminut, muutin sitten nuo peräkkäisiksi iffeiksi ja meni läpi tarkastuksesta, mutta aika rumaa jälkeä tuli kyllä..
- For-looppeja on myös yli puolet valmiina, ihan älykkään tuntuista koodia saa aikaan yhdistelemällä for-loopin ja array-tietotyypin mahdollisuudet
- JavaScript kurssin etenemä on tällä hetkellä 33 % - ja tuntuu, että nyt jo on opittu tosi paljon!

29. - 30.08.2013 (61 %)
- Valtava määrä opittu uutta asiaa javaScriptistä.. while ..do while ..case ..object, lisäksi erilaisia ratkaisumalleja ja paljon asiaa mitä ei tuolla codecademyssä ole vaan on pitänyt erikseen googlella kaivaa.
- epätoivo valtasi mielen parissa tehtävässä, mutta onneksi sain kurssikavereilta apua (thänks!)
- joidenkin osioiden viimeiset tehtävät ovat todella haastavia ja tuntuu että vaikka koodi on oikein niin ei mene tarkastuksesta läpi kun koodi ei ole odotusten mukainen..
- 4-5 kertaa on käynyt niin että codecademy -saitti on jumahtanut totaalisesti ja on pitänyt avata uusi istunto - monessa tehtävässä on ollut mukana paljon jo aikaisemmissa tehtävissä opittua - tämä on hyvä juttu, koska muuten asiat ei olisi jäänyt mieleen
- prosentit tällä hetkellä 61 % - jäljellä Control Flow -tehtäväsarja ja Objects I sekä Objects II

31.8. - 1.9.2013 (82 %)
- matka 61 % toteumasta 66 % toteumaan oli todella kivinen ja meinasi jo usko loppua jossain kohtaa..
- sinnittelin kuitenkin ja nyt tietyt asiat alkaa rutinoitumaan, mm. for, array, object, function käyttö lähinnä syntaxin ja periaatteiden osalta
- se että saa koodin tekemään täsmälleen halutun lopputuloksen on erittäin haastavaa, etenkin object-osiot ovat osoittaneet tämän
- codecademyn foorumeilta on pitänyt toistuvasti hakea apua, toistaiseksi kaikki tehtävät on kuitenkin saatu ratkaistua vaikka aikaa palaa tosi paljon
- edistyminen alkaa olla tosi hidasta koska ongelmien ratkominen ottaa aikaa tosi paljon, en olisi uskonut saavuttavani 82 % toteumaa omin avuin - mutta onnistuin kuitenkin!!
- sen verran monta kertaa on joutunut palaamaan aikaisempiin osioihin, että olen ajatellut tehdä itselleni tiivistelmän tietyistä asioista, joita voin hyödyntää jatkossa

2.9.2013 (100 %)
- Q&A ja Google kovassa käytössä, aika haastavia olivat nämä viimeiset tehtävät
- objekteja, ominaisuuksia, luokkia, objektien periytyminen, prototyypit jne. paljon uusia asioita vielä osion lopussa, joiden tehokas hyödyntäminen edellyttäisi Objekti-osioiden tehtävien ratkaisemisen udestaan tai ehkä jopa tekemällä tehtävät pari-kolmekin kertaa uudestaan
- ehtolauseet, silmukat, muuttujien alustaminen ja syntaksi yleisesti jäi hyvin pitkäkestoiseen muistiin, mutta em. objektit ja luokat vaatisi lisäharjoittelua

18.9.2013 javaScript kertaus opituista asioista:
JS: kommentti
/ /kommentti

JS: numbers, calculations and more
+ - * /
http://www.codecademy.com/courses/getting-started-v2/0/4?curriculum_id=506324b3a7dffd00020bf661

JS: datatypes
numbers
string
length
http://www.codecademy.com/courses/getting-started-v2/1/5?curriculum_id=506324b3a7dffd00020bf661
boolean
http://www.codecademy.com/courses/getting-started-v2/1/6?curriculum_id=506324b3a7dffd00020bf661

JS: comparisons

Greater than

< Less than
⇐ Less than or equal to

= Greater than or equal to

=== Equal to
!== Not equal to
http://www.codecademy.com/courses/getting-started-v2/2/2?curriculum_id=506324b3a7dffd00020bf661

JS: batman-harkka
confirm
prompt
if..else
console.log
var
http://www.codecademy.com/courses/javascript-beginner-en-x9DnD/0/7?curriculum_id=506324b3a7dffd00020bf661

JS: modulo (jakojäännös)
Below is an example of printing the remainder of 18/4 using modulo:
console.log(18 % 4);
console.log(14 % 3)
console.log(99 % 8)
console.log(11 % 3)
http://www.codecademy.com/courses/getting-started-v2/3/3?curriculum_id=506324b3a7dffd00020bf661

JS: substring
console.log(“Hamburgers”.substring(3,11))
http://www.codecademy.com/courses/getting-started-v2/3/6?curriculum_id=506324b3a7dffd00020bf661
merkkijonon etsiminen:
http://www.codecademy.com/courses/javascript-beginner-en-XEDZA/0/4?curriculum_id=506324b3a7dffd00020bf661

JS: funktiot
function
if..else
return
http://www.codecademy.com/courses/javascript-beginner-en-6LzGd/2/4?curriculum_id=506324b3a7dffd00020bf661

JS: silmukat
for
http://www.codecademy.com/courses/javascript-beginner-en-NhsaT/0/5?curriculum_id=506324b3a7dffd00020bf661
do..while
http://www.codecademy.com/courses/javascript-beginner-en-ASGIv/2/4?curriculum_id=506324b3a7dffd00020bf661

JS: taulukot
array & for
http://www.codecademy.com/courses/javascript-beginner-en-NhsaT/2/4?curriculum_id=506324b3a7dffd00020bf661
array 2
http://www.codecademy.com/courses/javascript-beginner-en-9Sgpi/0/1?curriculum_id=506324b3a7dffd00020bf661

JS: summary
kaikki edelliset harjoitukset yhdisteltynä..
http://www.codecademy.com/courses/javascript-beginner-en-XEDZA/0/1?curriculum_id=506324b3a7dffd00020bf661

JS: math
floor (pyöristys)
random (satunnaisluku)
http://www.codecademy.com/courses/javascript-beginner-en-mrTNH-6VIZ9/0/1?curriculum_id=506324b3a7dffd00020bf661

JS: loogiset operaattorit
and (&&)
or (||)
and not (!)
http://www.codecademy.com/courses/javascript-beginner-en-qDwp0/2/1?curriculum_id=506324b3a7dffd00020bf661

JS: case transformation
toUpperCase
toLowerCase
http://www.codecademy.com/courses/javascript-beginner-en-ZA2rb/0/3?curriculum_id=506324b3a7dffd00020bf661

JS: objektit
what's an object
http://www.codecademy.com/courses/spencer-sandbox/1/1?curriculum_id=506324b3a7dffd00020bf661
dot ja bracket notation
http://www.codecademy.com/courses/spencer-sandbox/5/2?curriculum_id=506324b3a7dffd00020bf661
perusteet
http://www.codecademy.com/courses/javascript-beginner-en-9Sgpi/2/4?curriculum_id=506324b3a7dffd00020bf661
objektit ja array
http://www.codecademy.com/courses/javascript-beginner-en-9Sgpi/3/1?curriculum_id=506324b3a7dffd00020bf661
yhteenvetoa edellisistä
http://www.codecademy.com/courses/javascript-beginner-en-3bmfN/0/1?curriculum_id=506324b3a7dffd00020bf661
accessing properties
http://www.codecademy.com/courses/spencer-sandbox/1/4?curriculum_id=506324b3a7dffd00020bf661

JS: list them all
http://www.codecademy.com/courses/javascript-beginner-en-3bmfN/0/6?curriculum_id=506324b3a7dffd00020bf661

JS: methods
http://www.codecademy.com/courses/spencer-sandbox/5/4?curriculum_id=506324b3a7dffd00020bf661

HTML

3.9. - 4.9.2013 (19 %)
- HTML on huomattavasti tutumpaa kuin javaScript ja tehtävät vaikuttaa aika helpoilta.
- Oma HTML -osaaminen on kasvanut siten, että notepadilla aloitettiin ja sitten siirryttiin HotDogin käyttöön, joten moni asia on sen jälkeen muuttunut ja tiettyjä asioita tehdään nykyään eri tavalla. Aikaisemmin olen tekstin muotoilussa hyvin pitkälle tullut toimeen <font><b><i> jne yms -tageja hyödyntämällä, “style” vastaavasti on jäänyt hyödyntämättä..

5.9.2013 (41 %)
- Erilaisten listojen rakenteiden harjoittelua. - Lisää tekstin muotoilua ja “style” harjoituksia, värien vaihtamista, kuvien lataamista ja linkkejä, tuttuja asioita pääosin, mutta näköjään nämkin kannattaa tehdä läpi koska uusia asioita tulee eteen lähes koko ajan
- Ensimmäiset jQuery -harjoitukset, tätä en ole käyttänyt aikaisemmin, mutta vaikuttaa hyödylliseltä ja helposti sovellettavalta esim. kuvaajien esittämiseen.
- Taulukoiden rakenteiden ja muotoilun harjoittelua, näitäkin on joskus tullut tehtyä, mutta melko harvoin
- Stylesheet.css alkuun. Tämäkin on uutta asiaa, tiedostin olemassa olon, mutta en ole hyödyntänyt.

6.9. - 7.9.2013 (100 %)
- class-, id- ja child -harjoituksia, kaikki nämä olivat minulle uusia asioita.
- stylesheet ja sen hyödyntämien muiden jo opittujen asioiden ohella alkaa tuntua järkevältä.
- Opitut asiat vaikuttaa hyödyllisiltä ja niitä on helppo soveltaa käytäntöön ..luulisin - pitäisi muuten kokeilla käytännössä miten stylesheet otetaan käyttöön.
- Web Fundamentalsin viimeisen osion viimeinen tehtävä jäi aika solmuun, mutta meni silti tarkistuksesta läpi. Täytynee vielä korjailla sitä jossain välissä.
-
18.9.2013 HTML kertaus opituista asioista:

HTML: rakenne
yleinen rakenne
kuvat
linkit
http://www.codecademy.com/courses/web-beginner-en-LceTK/0/1?curriculum_id=50579fb998b470000202dc8b
style font
http://www.codecademy.com/courses/web-beginner-en-y2Yjd/1/4?curriculum_id=50579fb998b470000202dc8b
style align
http://www.codecademy.com/courses/web-beginner-en-y2Yjd/2/2?curriculum_id=50579fb998b470000202dc8b
div style
http://www.codecademy.com/courses/web-beginner-en-f8mcL/2/1?curriculum_id=50579fb998b470000202dc8b

HTML: taulukko
perustaulukko
http://www.codecademy.com/courses/web-beginner-en-f8mcL/1/2?curriculum_id=50579fb998b470000202dc8b
table style
http://www.codecademy.com/courses/web-beginner-en-f8mcL/1/1?curriculum_id=50579fb998b470000202dc8b
link them up
http://www.codecademy.com/courses/web-beginner-en-zrZ6c/0/1?curriculum_id=50579fb998b470000202dc8b

HTML CSS
stylesheet.css
http://www.codecademy.com/courses/web-beginner-en-UuBLw/0/1?curriculum_id=50579fb998b470000202dc8b

HTML: listat
erilaisia
http://www.codecademy.com/courses/web-beginner-en-y2Yjd/0/1?curriculum_id=50579fb998b470000202dc8b

HTML: yhteenvetoa edellisistä harjoituksista
http://www.codecademy.com/courses/web-beginner-en-9x6JW/0/1?curriculum_id=50579fb998b470000202dc8b

jQuery

13.9.2013 (21 %)
- interaktiivisien toimintojen harjoittelua johdanto-osiossa ..mouseover, mouseleave, fadeTo jne. yms. Kokonaisuudessaan uutta asiaa tässä formaatissa.

16.9.2013 (60 %)
- hieman on hidastunut näiden tehtävien tekeminen, johtuen uusien asioiden - mutta myös muun työkuorman lisääntymisestä.
- edelleen pyöritään samankaltaisten harjoitusten parissa, mutta enemmän käytännön esimerkkien kautta (esim. paneelin tuominen esiin tai piilottaminen).
- uutena asiana on tullut vahvemmin mukaan html-elementtien käsittely jQueryn avulla (lisäys, muokkaus, poisto).
- saadut opit vaikuttavat hyödyllisiltä, ja esimerkiksi yksinkertaisen pelin tekeminen perustuen jo opittuun saattaisi hyvinkin olla mahdollista.
- aika paljon ratkaisuja on joutunut etsimään foorumilta. Lopulta kuitenkin tehtävät on saanut ratkaistua, mutta uutena ilmiönä on se, ettei aina välttämättä täysin ymmärrä ratkaisua..

17.9.2013 (100 %)
- viimeisissä osioissa ymärrys erilaisista animaatioista ja niiden hyödyntämisestä tulivat tutuksi.
- highlight, drag jne. yms.
- nyt täytyykin aloittaa alusta ja silmäillä tehtävät vielä kertaalleen läpi ja pyrkiä täydentämään oppimispäiväkirjaa soveltuvilta osin.

18.9.2013 jQuery kertaus opituista asioista:

jQ: perusteet (what is jQuery)
http://www.codecademy.com/courses/web-beginner-en-bay3D/0/1?curriculum_id=50a3fad8c7a770b5fd0007a1

jQ: funktiot
div slide down
http://www.codecademy.com/courses/web-beginner-en-bay3D/1/5?curriculum_id=50a3fad8c7a770b5fd0007a1
div fade out slow by click
http://www.codecademy.com/courses/web-beginner-en-GfjC6/0/1?curriculum_id=50a3fad8c7a770b5fd0007a1

jQ: luokka & id
selecting by class
http://www.codecademy.com/courses/web-beginner-en-GfjC6/1/2?curriculum_id=50a3fad8c7a770b5fd0007a1
selecting by id
http://www.codecademy.com/courses/web-beginner-en-GfjC6/1/3?curriculum_id=50a3fad8c7a770b5fd0007a1

jQ: slide panel up/down
http://www.codecademy.com/courses/web-beginner-en-GfjC6/2/3?curriculum_id=50a3fad8c7a770b5fd0007a1

jQ: html elementtien (ml. class) luonti
http://www.codecademy.com/courses/web-beginner-en-v6phg/0/1?curriculum_id=50a3fad8c7a770b5fd0007a1

jQ: muistikirja / viikkoharjoitus 4 ratkaisu
http://www.codecademy.com/courses/web-beginner-en-v6phg/2/1?curriculum_id=50a3fad8c7a770b5fd0007a1

jQ: Sivujen linkittäminen
http://www.codecademy.com/courses/web-beginner-en-jtFIC/1/1?curriculum_id=50a3fad8c7a770b5fd0007a1
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<script type='text/javascript' src='script.js'></script>
<script src=“ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js”></script>

jQ: hiiren ja näppäimistön komentojen perusteella ohjaaminen
mouseover
mouse leave
key down
http://www.codecademy.com/courses/web-beginner-en-JwhI1/1/1?curriculum_id=50a3fad8c7a770b5fd0007a1

jQ: dynaamiset valikot - hieno!! (UI)
http://www.codecademy.com/courses/web-beginner-en-jtFIC/1/1?curriculum_id=50a3fad8c7a770b5fd0007a1

jQ: listan itemien paikan vaihtaminen drag and drop -menetelmällä
http://www.codecademy.com/courses/web-beginner-en-jtFIC/1/1?curriculum_id=50a3fad8c7a770b5fd0007a1

\\10.9.2013 –> viikkoharjoitukset
Viikko 4 - harjoitus 1 & Viikko 5 - harjoitus 1
Samankaltainen harjoitus (todo-lista) tehtiin osana Codeacademyn harjoituksia, otin mallia siitä.
Ensimmäinen versio ei sisältänyt “nappulaa” vaan se oli toteutettu piirrettynä html-elementtinä kuten codeacademyssä. Tein Viikko 5-harjoituksen täsmälisesti tehtävänannon mukaisesti ja muutin piirretyn HTML-elementin nappulaksi, samalla lisäsin bullettilistan.
Kyllähän tämä kaikki lisää rutiininomaisen tekemisen omaksumista, joten vaikka varsinaisesti nyt ei opittu uutta, niin hyödynnettiin kuitenkin juuri opittua ja minusta tämäkin on ihan hyvä asia.
Uutena asian opin myös sen, että JQuery-linkki piti vaihtaa vanhempaan versioon, koska uusin ei toiminut halutulla tavalla. Tästä ilmiöstä en tykännyt yhtään, kolme tuntia meni harakoille.

17.9.2013 → Codeacademyn PHP
\\Odottelen osiota jossa opetettaisiin tekemään CRUD-sovellus. Nyt on tullut vastaan if-elseif-else ja case -ehtolauseke. Näissä ei varsinaisesti ole ollut mitään uutta. Array-tietotyyppi näyttäisi tulevan seuraavaksi, joten ainakaan vielä ei päästä crudiin.

27.9.2013 Canvas-opas ja Codeacademyn Canvas-palikka
\\Canvas oli tuttu object pascalista (Turbo Bascal ja Borland Delphi), jota aikoinaan tuli käytettyä paljonkin. Uutta oli se, että sitä pystyy hyödyntämään myös osana HTML-dokumentteja