Verkkopalvelu | Käyttäjälähtöinen suunnittelu | Tehtävät

 

 

Verkkopalvelu | Käyttäjälähtöinen suunnittelu | Javascript Tehtävät

(12D) 13.8.- 30.8.2013

 

Javascript alkeet monisteet:

01, 01b, 02, 03 (korjattu versio esimerkistä 9.1)

Javascript Tehtäviä:

1a) laajenna monisteen esimerkkiä 3.5 (monisteessa 01) siten, että myös teksti tulostuu suomeksi sekä ja nimen lisäksi tulostuu myös ikä. (luo uusi muuttuja nimeltään age ja anna sille arvo) ( selaimeen tulostuu tekstit:
Nimi on junnu
ja ikä on 34


2) Laajenna monisteen esimerkkiä 4.3.
siten, että ohjelma tulostaa selaimeen tiedot kysytyistä
käyttäjän iästä ja asuinpaikasta ja poista alert funktiot. Tulostus selaimeen olisi silloin esimerkiksi tällainen:
Tervetuloa maailmaani! Jukka.
Onko ikäsi tosiaan 90 vuotta? Oletpa sinä vielä nuori!
Asuinpaikkasi on Vanda

 

3 a) Tee ohjelma, joka laskee ja tulostaa selaimeen RGB värien määrän. Määrittele muuttujat jokaiselle eri värille red, green ja blue (esim var red = 256;).

3 b) tee ohjelma, joka kertoo kuinka monta sekunttia on kuukaudessa. Käytä muuttujia apuna: esimerkiksi muuttuja nimeltään sekunttejaMinuutissa jne. (oletus: kuukaudessa 30 päivää). vinkki Math.floor(luku) pyöristää desimaaliluvut alaspäin kokonaisluvuksi. ks. vinkkiesimerkki.

3 c) tee ohjelma, joka kertoo kuinka monta päivää, tuntia, minuuttia ja sekunttia menee kaikkien RGB värien katsomiseen, jos jokaista väriä katsotaan sekunnin verran.

vastaukset tehtaviin 1,2,3

4) Muuta esimerkkikoodi 5.8. niin, että se antaa vastaukset myös muille ikäluokille. (luo uusia ehtolauseita, jolloin ohjelma vastaa erilaisia vastauksia mille tahansa syötetylle numerolle). Muokkaa ohjelmaa myös niin, että se tulostaa vastauksen suoraan web sivulle (document.write() metodilla).

4b) extra: tarkista, että edellinen ohjelma vastaa jotain kaikille syötteille.

 

5) Muuta esimerkkikoodi 5.9. niin, että se palauttaa myös muitakin vastauksia (käytä esim. switch case rakennetta ks. esim. 6.3.)

6) Tee ohjelma joka kysyy rahasummaa euroissa ja antaa vastaukseksi rahasumman dollareissa

Vinkki: ks. esim. 7.6 ja käytä .toFixed(2) metodia numerolle

7) Tee for silmukkaa (ja esim. table tagia avuksi käyttäen käyttäen) valuuttataulukko, jossa on euron, kruunun ja dollarin arvot 1-10 euron arvoille. Vinkki: ks myös Moniste: "Silmukka ja table elementti esimerkki"

 

8) Kokeile seuraavaa muutosta esimerkkikoodiin 7.6.

<body>
<div id="result"></div>
<script type="text/javascript">
var etaisyys=eval(prompt("Miten monta kilometriä ajoit? ", ""));
var bensa=eval(prompt("Miten paljon bensaa kului?", ""));
var kulutus = kmLitralla(etaisyys, bensa);
// document.getElementById:
// DOM method for accessing any element on the page via its ID attribute.
// http://www.javascriptkit.com/jsref/document.shtml
var blk = document.getElementById("result");
blk.innerHTML = "Ajat "+ kulutus.toFixed(2) +" kilometriä litralla.\n";
</script>

 

9) tee ohjelma, joka while silmukalla ja confirm boxilla laskee kuinka monta kertaa käyttäjä painaa ok nappia. (while silmukka pysähtyy kun käyttäjä painaa cancel nappia). ( ks. esim. 4.4., 6.4.) vinkki

============================

10). muuta tehtävän 6. käyttöliittymä, tämän: 01b quoryselector versio esimerkin mukaiseksi (lomake, text input, submit nappi ja document.querySelector metodi dynaamiselle palautteelle). querySelector-metodin selitys löytyy sivulta: http://www.javascriptkit.com/domref/documentmethods.shtml

==========================

Seuraavat tehtävät pohjautuvat esimerkkeihin moniste 03 : ssa.

 

11a) toteuta ohjelma, jossa on Array tyyppinen muuttuja (taulukko) esim nimeltään automerkit. Ohjelma lataa taulukkoon vähintään 5 automerkkiä ja tulostaa ne for silmukkaa käyttäen.

11b) tee ohjelma, joka kysyy mitä kirjoitetaan ostoslistaan. Ohjelma lisää vastaukset Array taulukkoon. Kun käyttäjä kirjoitaa ok, ohjelma tulostaa listan sivulla.

11d). Tee ohjelma, joka valitsee satunnaisen
kuvatiedostonimen Array listasta ja näyttää sen selaimessa.
Uusi kuva tulee kun selain ladataan uudelleen.

12d). Tee ohjelma, joka arpoo lottorivin.

 

Ohjeita:

  • Nimeä tiedostot niin, että tiedostonimestä selviää tehtävänumero

Monisteet:

  1. tiedosto vareja.js löytyy kansiosta: (kopioi se samaan kansioon kuin monisteen esimerkki) Y:\Käpylä\AV-Viestinta_2\12D\verkkopalvelu_kayttajalahtoinen_javascript
  2. tehtävä 7 ratkaisu
  3. Numeroarvauspeli
  4. Hirsipuu
    1. sanoja
  5. canvas noppa
  6. uusmediataidot lomake case:

Q&A

Javascript sovelluksia netissä

Kurssin arviointiperusteet

Arvosanat ja tehdyt tehtävät:

Päivän 13.8. jälkeen 100% on 9 tehtävää

Päivän 14.8. jälkeen 100% on 13 tehtävää (a,b,c jne lasketaan eri tehtäviksi)

Päivän 16.8. jälkeen 100% on 18 tehtävää (a,b,c jne sekä monisteet lasketaan eri tehtäviksi)

Päivän 23.8. jälkeen 100% on 18 tehtävää (a,b,c jne sekä monisteet lasketaan eri tehtäviksi) + 3 moniste esimerkkiä (numeroarvaus, hirsipuu ja canvas noppa)

Päivän 30.8. jälkeen 100% on 20 tehtävää (a,b,c jne sekä monisteet ennen 23.8. lasketaan eri tehtäviksi) + 4 moniste esimerkkiä (numeroarvaus, hirsipuu, canvas noppa ja uusmediataidot sivu)

1 => vähintään puolet tehtävistä tehty niin että ne toimii

2 => vähintään 70% tehtävistä tehty niin että ne toimii

3 => vähintään 90% tehtävistä tehty niin että ne toimii + sen lisäksi vapaaehtoisia tehtäviä sekä huomiota kiinnitetty näihin:

  • koodin siisteys
  • muuttujien ja funktioiden nimeäminen
  • tehtävän annon tulkinta ux näkökulmasta: käyttäjää ajateltu
  • lisäpisteitä itsekeksityistä toiminnoista ja ominaisuuksista

Poissaolon korvaavia tehtäviä

  1. Käyttökokemuspäiväkirja: pidä käyttökokemuspäiväkirjaa viikon ajan. Kirjaa ylös huomioita hyvistä ja huonoista käyttökokemuksista (nettisivut, ohjelmistot, laitteet ja koneet, tuotteet, palvelut yms.)
    Kuvaile kokemustasi: mikä toimi, mikä yllätti positiivisesti, mikä oli hankalaa, missä vaiheessa paloi päreet tms.
    Liitä mukaan kuvakaappauksia, valokuvia (ja tai videota, ääntä)(jos kuvailet käyttökokemusta jonkin muun laitteen kanssa kuin tietokoneen ruudulla näkyvän ohjelman kanssa) Pituus n. 2 A4.
  2. Käyttäjäkokemus etnografia: tarkkaile jonkin teknisen laitteen kanssa haasteita kohtaavan henkilön toimintaa (esim iäkäs sukulainen etsimässä tietoa kännykästä siitä kuka soitti tms.) Kuvaile havaitsemaasi käyttökokemusta ja ideoi miten tuotetta, käyttöliittymää, laitetta tai ohjelmaa voisi kehittää ja muokata niin, että se olisi helppokäyttöisempi, lisää tekstiin havainnollistavia kuvia (esim. käyttöliittymästä ). Laadi havainnoista ja ideoinnista raportti 1-2 A4
  3. Arvioi monisteharjoitus esimerkin (numeroarvauspeli ja/tai hirsipuu) käyttäjäkokemusta ja ideoi miten sitä voisi parantaa (ota huomioon kaikki tuntemasi html5, css3, javascript yms. verkkojulkaisutekniikoiden tarjoamat mahdollisuudet). Laadi ideoista suunnitelmamuistiinpanot.
  4. Ota edellisestä 1-2 ideaa ja toteuta ne. Kirjoita vapaamuotoinen raportti projektista: mitä opit, mikä oli haasteellista, mistä löytyi vinkkejä. Listaa käyttämäsi lähteet (esim netin tutorial sivut)
  5. Tee netistä löytyvä jQuery tutorial ja referoi se ja liitä palautustiedostoihin myös tutorialin tuloksena syntynyt sivu. Liitä raporttiin käyttämäsi lähteet (linkit)
  6. Miten tällä -> sivulla on sovellettu javascriptiä ja jQueryä? (listaa linkit, josta löytyy selityksiä koodissa sovelletuista elementeistä ja selitä omin sanoin. Löydätkö toteutuksesta puutteen tai puutteita? miten puutteet voisi korjata?
  7. Kehitä hirsipuupeliesimerkin käytettävyyttä (esim. ulkoasu: css tyylit, numeroarvauspelin koodirakenteet: endGame funktio, tapahtumakäsittelijöiden poisto, palaute lopussa jos hävitty: mitä sanaa haettiin yms.)
  8. Toteuta uusmediataidot kyselyesimerkkiin sivutus (moniste koodin integrointi esim tämän esimerkkikoodin kanssa: http://www.jquery4u.com/demos/jquery-quick-pagination/)
  9. Toteuta hirsipuupeliin S ikärajalle sopiva vaihtoehtoinen kuvasarja (http://www.meku.fi/index.php?option=com_content&view=article&id=23&Itemid=390&lang=fi) (jokin "häviöön" johtava visuaalinen tarinan kulku, joka ei assosioituisi mahdollisesti hieman ahdistavaan ajatukseen teloituksesta ja kuolemasta?)
  10. Etsi netistä esimerkkejä sivuista, jossa javascriptiä on sovellettu mielenkiintoisella tavalla. Listaa 3-5 esimerkkiä ja kirjoita niistä blogikirjoitus arvioiden visuaalista, taiteellista ja/tai käyttäjäkokemuksen totetutusta. Tutki lähdekoodia ja kirjoita myös huomioita käytetystä koodausratkaisuista.
  11. jQuery, modernizr, jne. Mitä muita mainitsemisen arvoisia javascript kirjastoja on olemassa ja mihin niitä käytetään? Listaa 3-5 kirjastoa ja kirjoita niistä lyhyt kuvaus. Valitse yksi kirjasto ja tee jokin tutorial. Tee referaatti tutorialista.
  12. Kirjoita lyhyt kirjoitelma näistä aiheista (1-2 A4):
  13. Viimeisen päivän harjoituksessa tehtiin pieniä muokkauksia uusmediataidot surveysivun käyttökokemukseen vaikuttaviin ominaisuuksiin. Ota netistä harjoitukseksi joku toinen sivu, josta olet tehnyt käyttökokemukseen liittyviä huomioita ja kokeile toteuttaa parannuksia käytännössä soveltaen esim. javascriptiä, css ja html koodausta.
  14. Suunnittele uusmediataidot kyselyn palautesivu uudelleen. Ulkoasu, typografia, datan visualisointi?
  15. Suunnittele av-stadi.fi etusivun ulkoasu uudelleen
  16. Koodaa lukkarinäkymä uudelleen. Esim tämä sivu: http://okresurssi.edu.hel.fi/lukuj3.aspx?tunnus=S12VAD1&tyyppi=ryhma&tpiste=xxxpoista kaikki turhat html tagit ja atribuutit ja css koodit siten, että kuitenkin näkymä selaimessa pysyy mahdollisimman identtisenä. Poista kaikki virheet, jotka validaattori tuottaa: http://validator.w3.org/
    (siirrä "inline" tyylisäännöt erilliseen tyylitiedostoon)
    Miten monta % sivun tiedostokokoa voi pienentää?

 

 




linkkejä

Kirjallisuutta

  • Quigley: Javascript by Example
  • Rex van der Spuy: Foundation Game Design with HTML5 and JavaScript