Harjoitustyö 3: Verkkosivujen toiminnallisuus (JavaScript)

Transkriptio

1 Harjoitustyö 3: Verkkosivujen toiminnallisuus (JavaScript) Kurssin toisessa harjoitustyössä tutustutaan verkkosivujen toiminnallisuuden toteuttamiseen JavaScript:n avulla. Lisäksi käydään läpi verkkosivuston optimointia. Harjoitustyö koostuu kolmesta osasta (katso Vaatimukset), jotka sisältävät erinäisen määrän tehtäviä. Toteutettavien tehtävien on liityttävä valitsemaasi teemaan. Harjoitustyö tehdään itsenäisesti. Harjoitustyötä varten on kurssille määritelty yksi luento ( ) sekä yksi viikkoharjoitus ( ). Yleisesti ottaen luennot tarjoavat kattavan tietopaketin harjoitustyöaiheeseen. Viikkoharjoituksissa puolestaan opiskelijat voivat tehdä harjoitustöitä sekä tarvittaessa kysyä neuvoa assistenteilta, mikäli harjoitustöiden kanssa ilmenee ongelmia. Voit myös lähettää sähköpostia assistenteille (ensisijaisesti Juuso Lappalainen 3. harjoitustyöhön liittyvissä asioissa), mikäli jäät jumiin tehtävän kanssa etkä saanut riittävästi apua viikkoharjoituksissa. Perustehtävien vaatimukset (0-3 pistettä) Harjoitustyön perustehtävien vaatimukset on jaettu kolmeen osaan: Numeronarvauspeli, Uutisikkuna ja Verkkosivuston optimointi. Osat ja niihin liittyvät tehtävät on suunniteltu toteutettavaksi annetussa järjestyksessä. Numeronarvauspeli Ensimmäisessä osassa tutustutaan JavaScript:n perusteisiin toteuttamalla yksinkertainen numeronarvauspeli. Alla vaatimuslista: Tehtävä 1: Satunnaisluvun generointi (JavaScript) o Luo JavaScript- tiedosto (esim. guessthenumber.js), johon tästä eteenpäin kirjoitetaan kaikki Numeronarvauspeli- osaan liittyvä ohjelmakoodi. Linkitä ko. tiedosto etusivulle (index.html). o Toteuta funktio getrandominteger( min, max ), joka nimensä mukaisesti palauttaa satunnaisen kokonaisluvun väliltä min ja max (mukaan lukien kyseiset numerot). Toteutuksessa kannattaa hyödyntää JavaScript:n Math- objektia: o Huom. Tehtävässä ei vaadita graafisen käyttöliittymän toteutusta etusivulle. Funktion testaus onnistuu näppärästi esim. Google Chrome selaimen Console- työkalun (Developer Tools) avulla. Tehtävä 2: Pelilogiikka (JavaScript) o Luo muuttuja, johon säilötään numero, jota pelaaja yrittää arvata pelissä. Aseta muuttujan arvoksi sivunlatauksen yhteydessä satunnainen kokonaisluku väliltä 1-10 (mukaan lukien kyseiset numerot). Hyödynnä tässä kohdassa edellisessä tehtävässä toteuttamaasi funktiota. o Toteuta funktio guessthenumber( guess ), joka sisältää numeronarvauspelin pelilogiikan. Funktion pitää kertoa, osuiko

2 arvaus oikeaan vai oliko se kenties liian pieni tai suuri. Toisin sanoen, vertaillaan arvausta muuttujan numeroa vasten. o Huom. Tehtävässä ei vaadita graafisen käyttöliittymän toteutusta etusivulle. Funktion testaus onnistuu näppärästi esim. Google Chrome selaimen Console- työkalun (Developer Tools) avulla. Muut vaatimukset o Tehtävässä 1 luomasi JavaScript- tiedoston pitää validoitua ilman virheitä ja/tai varoituksia (engl. errors and/or warnings): Mikäli tiedostoon jää virheitä ja/tai varoituksia, pitää niiden olemassaolo perustella. Uutisikkuna Toisessa osassa verkkosivustolle toteutetaan uutisikkuna. Alla vaatimuslista: Tehtävä 3: Uutisten määrittely (JSON) o Luo JSON- tiedosto (esim. news.json), joka sisältää vähintään kolme uutista. Uutiset pitää esittää taulukkomuodossa (engl. array) ja niistä pitää löytyä kentät ainakin otsikolle, päivämäärälle ja itse sisällölle. Kentille annettavat nimet ovat vapaavalintaisia. o JSON- tiedoston pitää validoitua ilman virheitä (engl. errors): Mikäli tiedostoon jää virheitä, pitää niiden olemassaolo perustella. Tehtävä 4: Uutisten tallennus pilvipalveluun (Firebase) o Rekisteröidy Firebase- pilvipalveluun: o Kirjauduttuasi sisään luo itsellesi uusi Firebase- sovellus (Account Dashboard - näkymä). Anna sovelluksen nimeksi (APP NAME) ja osoitteeksi (APP URL) oma Aalto- tunnuksesi (esim. aalto- tunnuksesi ja tunnuksesi.firebaseio.com). Avaa sovelluksen hallintapaneeli painamalla Manage App - nappia. o Data- välilehti: Tallenna edellisessä tehtävässä luomasi JSON- tiedosto sovellukseen Import JSON - napin kautta. o Security Rules - välilehti: Kytke sovelluksen kirjoitusoikeudet pois päältä määrittelemällä.write - kentän arvoksi false. Muista tallentaa muutokset Save Rules - napista. o Testaa sovelluksesi toimivuutta (REST API:a) syöttämällä selaimen osoitekenttään sovelluksesi URL sekä lisäämällä loppuun /.json (esim. tunnuksesi.firebaseio.com/.json). Nyt sinun pitäisi nähdä selaimessa sovellukseen tuomasi JSON- tiedoston sisältö (uutiset). o Huom. Selaimeen kannattaa asentaa esim. JSONView- lisäosa, joka muuntaa JSON- tiedostot luettavampaan muotoon. Tehtävä 5: Uutisten haku pilvipalvelusta (Ajax) o Luo JavaScript- tiedosto (esim. news.js), johon tästä eteenpäin kirjoitetaan kaikki Uutisikkuna- osaan liittyvä ohjelmakoodi. Linkitä ko. tiedosto niihin verkkosivuihin, joissa uutisikkuna on tarkoitus näyttää (esim. Etusivu, index.html). o Lisää tapahtumakuuntelija, joka Uutisikkuna- sivun latauduttua hakee Ajax:n avulla edellisessä tehtävässä Firebase- pilvipalveluun tallentamasi JSON- tiedoston ja tulostaa sen sisällön selaimen

3 konsolille console.log( data ) komentoa käyttäen. Ajax- haku kannattaa toteuttaa jonkin JavaScript- kirjaston avulla, kuten esimerkiksi jquery:llä ( tai Firebase:llä ( o Huom. Konsoli löytyy esim. Google Chrome selaimen Developer Tools:n työkaluista. Tehtävä 6: Uutisten näyttö (DOM) o Näytä edellisessä tehtävässä Ajax:n avulla hakemasi uutiset uutisikkunassa. Uutisten on tarkoitus vaihtua automaattisesti X sekunnin välein ts. vain yksi uutinen näytetään kerrallaan. Tämän aikaansaamiseksi verkkosivun DOM- puuta (uutisikkuna- elementin sisältöä) pitää manipuloida. Manipuloinnin voi toteuttaa haluamallaan tavalla, kuten esimerkiksi DOM API:lla ( US/docs/DOM/DOM_Reference) tai jquery:llä ( o Huom. Uutisten automaattiseen vaihtumiseen voi käyttää esimerkiksi window.settimeout tai window.setinterval - metodeita. Tehtävä 7: Uutisikkunan hallinta (Napit) o Lisää uutisikkunan yhteyteen hallintapaneeli uutisten kontrollointia varten. o Hallintapaneelista pitää löytyä seuraavat kolme nappia: (1) Edellinen (engl. Previous), (2) Toista/Tauota (engl. Play/Pause) joista vain toinen teksti näkyy riippuen uutisikkunan sen hetkisestä tilasta ja (3) Seuraava (engl. Next). Nappien toiminnallisuutta voi korostaa ikoneilla, esimerkiksi käyttäen ilmaista Font Awesome - ikonikirjastoa: Awesome/. o Huom. Uutisten automaattisen vaihtumisen tauottamiseen voi käyttää esimerkiksi window.cleartimeout tai window.clearinterval - metodeita. Tehtävä 8: Uutisikkunan tila (Web Storage) o Tallenna Web Storage:n (localstorage, avulla uutisikkunan tila aina, kun uutinen vaihtuu. Toisin sanoen, pidä muistissa, mikä uutinen käyttäjälle on viimeksi näytetty. o Hae Web Storage:n avulla uutisikkunan tila aina, kun uutiset on haettu Firebase- pilvipalvelusta. Toisin sanoen, hae muistista, mikä uutinen käyttäjälle on viimeksi näytetty ja näytä se ensimmäisenä verkkosivun latauduttua. Tehtävä 9: Uutisten animointi (jquery) o Lataa tai linkitä jquery- kirjasto ( niihin verkkosivuihin, joissa uutisikkuna on tarkoitus näyttää (esim. Etusivu, index.html). o Lisää vapaavalintainen animaatio/efekti (esim. fade in/out) uutisten vaihtumisen yhteyteen jquery- kirjaston avulla: o Huom. Lisäksi voit käyttää jquery UI:ta ja/tai jquery- plugineja. Muita JavaScript- kirjastoja ei saa käyttää animointiin.

4 Muut vaatimukset o Tehtävässä 5 luomasi JavaScript- tiedoston pitää validoitua ilman virheitä ja/tai varoituksia (engl. errors and/or warnings): Mikäli tiedostoon jää virheitä ja/tai varoituksia, pitää niiden olemassaolo perustella. Verkkosivuston optimointi Kolmannessa osassa verkkosivusto optimoidaan yksinkertaisin menetelmin. Alla vaatimuslista: Tehtävä 10: Ohjelmakoodin tiivistys (HTML, CSS ja JavaScript) o Luo optimointia varten Dime- verkkopalvelimelle hakemisto /public_html/optimized/. Tämän jälkeen kopioi koko olemassa oleva verkkosivustostasi ko. hakemistoon. Näin ollen optimoitavan verkkosivuston tulisi olla tarkasteltavissa osoitteessa tunnuksesi/optimized/. Tästä eteenpäin kaikki optimointiin liittyvät toimenpiteet tehdään ko. hakemiston sisällä oleviin tiedostoihin. o Tiivistä kaikki verkkosivustolla käyttämäsi ohjelmakooditiedostot (HTML, CSS ja JavaScript) käyttäen esimerkiksi HTML Compressor - palvelua: Käytetyille parametreille ei ole rajoituksia, kunhan ne ovat järkeenkäypiä. o Huom. Mikäli ääkkösten kanssa ilmenee ongelmia, niin valitse oikea merkistökoodaustapa (todennäköisesti Unicode (UTF- 8)). Tehtävä 11: Kuvien optimointi (*.jpg, *.png,...) o Pienennä kaikki verkkosivustolla käyttämäsi kuvat (*.jpg, *.png,...) tarvittavan kokoisiksi, esimerkiksi käyttäen Pic Resize - palvelua: Tämän jälkeen optimoi sekä pienennetyt että pienentämättömät kuvat valitsemaasi palvelua käyttäen: optimization- tools/ (katso erityisesti kohta "Online tools" ja sieltä esim. Kraken.io). Käytetyille optimointiparametreille ei ole rajoituksia, kunhan ne ovat järkeenkäypiä. Yleistä Riittää, että harjoitustyö on testattu ja se toimii jollain seuraavista selaimista: (1) Google Chrome, (2) Mozilla Firefox tai (3) Apple Safari. Mikäli tehtävänannon suhteen on epäselvyyksiä, niin ota yhteyttä kurssin henkilökuntaan joko postituslistan kautta tai viikkoharjoituksissa. Bonustehtävän vaatimukset (0-1 pistettä) Bonustehtävä on astetta haastavampi ja sen voi suorittaa vain, jos on tehnyt/yrittänyt tosissaan tehdä kaikki perustehtävät. Tämänkertaisessa bonustehtävässä tutustutaan REST API:en käyttöön eli miten hakea avointa tietoa verkosta rajapintojen kautta. Alla vaatimuslista: Tehtävä 12: Tiedon haku (REST) o Luo JavaScript- tiedosto (esim. rest.js), johon tästä eteenpäin kirjoitetaan kaikki bonustehtävään liittyvä ohjelmakoodi. Linkitä

5 ko. tiedosto niihin verkkosivuihin, joissa REST API:en kautta haettavaa tietoa on tarkoitus hyödyntää (esim. Etusivu, index.html). o Hae teemaasi liittyvää tietoa kahden tai useamman eri palveluntarjoajan REST API:n kautta. Käytettävät REST API:t ovat vapaavalintaisia. Kattava lista REST API:sta löytyy esimerkiksi täältä: tai Faceook Graph API: api. o Hyödynnä ja käytä REST API:en kautta haettua tietoa monipuolisesti verkkosivustollasi. Muut vaatimukset o Tehtävässä 12 luomasi JavaScript- tiedoston pitää validoitua ilman virheitä ja/tai varoituksia (engl. errors and/or warnings): Mikäli tiedostoon jää virheitä ja/tai varoituksia, pitää niiden olemassaolo perustella. Ohjelmistot Harjoitustyö tehdään asiakaspään web- teknologioita käyttäen, tarkemmin sanottuna JavaScript- kielen ja jquery- kirjaston avulla. Harjoitustyön tekemiseen ei saa käyttää palvelinpään ohjelmointikieliä (esim. PHP), sillä näiden tuki on poistumassa kurssin Dime- verkkopalvelimelta tämän vuoden aikana. Katso myös tehtävien yhteydessä määritellyt muut toteutusrajoitukset. Lisäksi harjoitustyön tekeminen vaatii vapaavalintaisen ohjelmointiympäristön tai tekstieditorin (esim. Brackets, Sublime Text, Notepad++ tai GNU Emacs) käyttämistä. Harjoitustyön tekemiseen ei saa käyttää visuaalista editoria vaan ohjelmakoodi on kirjoitettava käsin. Arvostelu Harjoitustyö arvostellaan asteikolla hyväksytty (0-4 pistettä) tai hylätty (merkittäviä puutteita). Arvostelussa huomioidaan ensisijaisesti vaatimusten täyttyminen sekä panostuksen määrä. Tämän lisäksi harjoitustyön arvosteluun vaikuttavat sen idea ts. kuinka vahvasti harjoitustyö liittyy valittuun teemaan sekä sen tekninen ja taiteellinen toteutus. Myöhässä palautetut harjoitustyöt arvostellaan samoin perustein, paitsi että jokaiselta alkavalta myöhästymisvuorokaudelta vähennetään 1 piste. Hylätyt harjoitustyöt puolestaan uusitaan assistenttien kanssa erikseen sovitun aikataulun mukaisesti tai kurssin lopussa järjestettävän rästikierroksen yhteydessä. Uusintapalautetuista harjoitustöistä voi saada hyväksyttynä vain 0 pistettä.

6 Palautus Harjoitustyö palautetaan kurssin Dime- verkkopalvelimelle (katso ohjeet kurssin MyCourses- sivuilta) viimeistään maanantaina klo mennessä. Palautettujen tehtävien tulisi olla tarkasteltavissa osoitteessa tunnuksesi/ (sekä mahdollisesti lisäksi osoitteessa tunnuksesi/optimized/). Ennen palautusta harjoitustyöstä on kirjoitettava lyhyt kuvaus Harjoitustyö 3:n alle Harjoitustyöt- sivulle. Kuvauksessa voit kertoa mm. harjoitustyön hienouksista/puutteista tai mitkä osiot siitä on toteutettu kolmannen osapuolen komponentein. Kerro myös, mitkä tehtävät teit sekä millä selaimella (+versio) ja käyttöjärjestelmällä (+versio) harjoitustyön pitäisi toimia virheettömästi. Korjaus: tässä kohdassa luki aikaisemmin että palautuksen yhteydessä on lähetettävä sähköpostia kurssin sähköpostilistalle. Se ei ole tarpeellista, riittää että palautat työn mycoursesiin kuten aiemmillakin kierroksilla.