Internet-pohjaisen oppimisympäristön laadinta Luento 3
Aiheena tänään Toteutustekniikoista yleisesti Selainriippumattomuudesta Hot Potatoes -ohjelmasta JavaScriptin perusteista 29.01.2015 IPOPPLA 2
Toteutustekniikoista yleisesti Kurssilla suositeltavat toteutustekniikat: JavaScript ja sen kirjastot/frameworkit (Backbone, AngularJS) PHP CGI (Perl, Python, tmv.) Java Hot Potatoes HTML5 JavaScript näistä helpoin, ei tarvita erillistä suoritusympäristöä tai apuohjelmia 29.01.2015 IPOPPLA 3
Toteutustekniikoista yleisesti Valmiita koodinpätkiä voi käyttää, mutta työssä ilmoitettava, mitkä osat on lainattu muualta Harjoitustyössä oma panos oleellista, oli se sitten itse tehtyä koodia, tekstisisältöä tai kuvia Ei kannata yrittää tehdä liian monimutkaista. Yksinkertaisetkin ratkaisut voivat olla hienoja, jos ne sulautuvat sujuvasti muuhun toteutukseen 29.01.2015 IPOPPLA 4
Toteutustekniikoista yleisesti Lähde: Reichert, R. and Hartmann, W. (2004). On the Learning in E-Learning. Proceedings of EDMEDIA 2004. June 23-26, 2004, Lugano, Switzerland, AACE 29.01.2015 IPOPPLA 5
W3C - http://www.w3c.org Vastaa WWW:n kehityksestä ja siten esim. HTML- ja CSS-standardeista Perustettu lokakuussa 1994 Koostuu erilaisista työryhmistä Tavoitteena esimerkiksi: Verkko maailmanlaajuiseen käyttöön Semanttinen verkko Luotettava verkko 29.01.2015 IPOPPLA 6
Toteutustekniikoista yleisesti Kurssilla oletetaan, että kaikki osaavat ennalta ainakin HTML: n ja CSS:n (esitietosuosituksena JWT) Javascript Oletettavasti useimman työn toteutustapa Helppo, kohtuullisen suoraviivainen menetelmä Luennoilla käydään läpi perusteita ja erilaisia esimerkkejä harjoitustöiden lähtökohdiksi 29.01.2015 IPOPPLA 7
Toteutustekniikoista yleisesti Mahdoton tehtävä: Ohjelmointikielen opettaminen täysin kahdessa luennossa Pyritään käymään läpi tietyt perusasiat, joista on helppo jatkaa eteenpäin Kurssin koodiesimerkkisivustolta löytyy linkkejä erilaisiin hyödyllisiin lähteisiin Ohjelmointi on siis opeteltava itsenäisesti, netti on tulvillaan oppaita ja esimerkkejä W3Schools Codecademy
Selainriippumattomuus Yksi hyvän suunnittelun lähtökohdista Yksi harjoitustyön arviointikriteereistä Saavutetaan noudattamalla standardeja Voidaan nähdä kuuluvaksi WWW-sivustoissa osaksi käytettävyyttä Mahdoton tavoite? 29.01.2015 IPOPPLA 9
29.01.2015 IPOPPLA 10 Selainriippumattomuus Tärkeitä seikkoja: Kuinka nopeasti WWW-tekniikat kehittyvät Selainohjelmat ja -versiot tulevat ja menevät Kehityksen seuraavia askelia on vaikea ennustaa Olennaista eivät ole vuosiluvut Helpointa on tukeutua standardeihin, jotta oppimisympäristön elinikä ei jää hyvin lyhyeksi
Merkitys harjoitustyön kannalta Tekijöiden itse varmistettava sivustonsa toimivuus Valitkaa jokin tietty suosittu selainohjelma, jolle hiotte työnne Testatkaa, että sivut toimivat myös muilla moderneilla selaimilla (IE, Firefox, Safari, Chrome, Opera) ja raportoikaa mahdolliset ongelmat, joita ette saaneet korjatuksi Valittava käytettävät standardit sen mukaan, millaisilla koneilla ja ohjelmilla ympäristöä tullaan käyttämään Vanhat selaimet tukevat standardeja huonommin kuin uudet, jne. HTML-editorit eivät aina tuota oikeaoppista koodia tarkistettava itse! 29.01.2015 IPOPPLA 11
Hot Potatoes Helppo ratkaisu yksinkertaisiin tarpeisiin 29.01.2015 IPOPPLA 12
Hot Potatoes Ohjelma vuorovaikutteisten osioiden luomiseen WWWsivuille Tarkoitettu opetussivustojen tekoon Oma versionsa useammalle eri käyttöjärjestelmälle (Windows, OS X, Linux, ) Kotisivu: http://hotpot.uvic.ca/ Ohjelma on nykyisin maksuton ja vapaasti käytettävissä 29.01.2015 IPOPPLA 13
Hot Potatoes Sisältää kuusi osaa: Monivalinta ja tekstinsyöttö (short-answer, JQuiz) Lauseen rakentaminen (jumbled-sentence, JMix) Ristisana (crossword, JCross) Raahaus (matching/ordering, JMatch) Aukkotehtävät (gap-fill, JCloze) Erilaisten osioiden yhdisteleminen (Masher) Perustuu JavaScriptiin: ohjelma generoi tarvittavan ohjelmakoodin käyttäjän puolesta Koodi voi olla jossain määrin bugista Muista testaus! 29.01.2015 IPOPPLA 14
Hot Potatoes Esimerkkejä... 29.01.2015 IPOPPLA 15
Hot Potatoes - Huomioita Ohjelman kotisivuilta löytyy oppaita ja esimerkkejä Verkosta löytyy myös suomenkielisiä oppaita ohjelman käyttöön (esimerkkien kera) Googlaa esim. Hot Potatoes opas Ohjelmaan on valittavissa suomenkielinen käyttöliittymä Harjoitustyön kaikki vuorovaikutteiset osiot voi tehdä pelkästään Hot Potatoes -ohjelmalla, mutta itse tuotettu materiaali huomioidaan arvostelussa 29.01.2015 IPOPPLA 16
29.01.2015 IPOPPLA 17 JavaScript Lyhyt oppimäärä JavaScriptin käyttöön WWW-sivulla
JavaScript Yleistä Prototyyppipohjainen olio-ohjelmointikieli Tulkattava (eli skriptikieli); ei vaadi erillistä kääntämistä suorittamista varten Perustuu löyhästi C-kieleen Dynaamiset tietotyypit Tapahtumaohjautunut Tyylioppaita olemassa 29.01.2015 IPOPPLA 18
JavaScript ja HTML JavaScript-koodi voidaan kirjoittaa joko suoraan HTML:n sekaan (upotus): <body> <div> </div> </body> <h1> Otsikko 1 </h1> <script type= text/javascript > ohjelmakoodi </script> 29.01.2015 IPOPPLA 19
JavaScript ja HTML JavaScript-koodi voidaan kirjoittaa erilliseen tiedostoon, joka liitetään HTML-tiedostossa (tuonti): <head> </head> <script type= text/javascript src= tiedostonnimi.js ></script> 29.01.2015 IPOPPLA 21
JavaScript Ohjelmakoodin suorittaminen Sivulle upotettu / tuotu JavaScript-koodi suoritetaan siinä järjestyksessä ja kohdassa, missä se sivulla esiintyy Selain käsittelee sivun HTML:n alusta loppuun ja samassa suorittaa JavaScriptin Jos halutaan liittää ohjelmakoodia, joka suoritetaan vasta myöhemmin, on käytettävä funktioita 29.01.2015 IPOPPLA 22
JavaScript Muuttujat Muuttujan määrittely var x; Arvon asettaminen muuttujaan x = 10; var y = teksti ; var z = 5 * 5; var istrue = true; Muuttujat ovat case sensitive Muuttuja fname on eri kuin fname 29.01.2015 IPOPPLA 23
JavaScript Muuttujat Dynaamiset tietotyypit var digit1 = 10; var digit2 = 5; var result = digit1 + digit2; // result saa arvon 15 Tietotyyppien muutosten kanssa oltava varovaisia digit1 = "10"; result = digit1 + digit2; // result saa arvon 105 result = digit1 - digit2; // result saa arvon 5 Tietotyypin selvittämiseen voi käyttää typeof-operaattoria 29.01.2015 IPOPPLA 24
JavaScript Muuttujat JavaScriptissä on muuttujille myös kaksi erikoisarvotyyppiä: undefined muuttujan tyyppi silloin, kun muuttujalle ei ole vielä asetettu arvoa null (pätemätön) muuttujan tyyppi silloin, kun muuttujan arvo on epäkäypä JavaScript-kieli sisältää joukon varattuja sanoja, joita ei voi käyttää muuttujien niminä 29.01.2015 IPOPPLA 25
JavaScript Muuttujat Globaali muuttuja Funktion ulkopuolella esitelty muuttuja, jota voidaan käsitellä ilman rajoituksia var i = 0; function count() { i++; console.log(i); // output: 1, 2, 3,4... } 29.01.2015 IPOPPLA 26
JavaScript Muuttujat Lokaali muuttuja Funktion sisäpuolella esitelty muuttuja, jota voidaan käsitellä vain funktiossa itsessään function count() { var i = 0; i++; console.log(i); // output: 1, 1, 1, 1... } // ReferenceError: i is not defined console.log(i); 29.01.2015 IPOPPLA 27
JavaScript Funktiot Koodinpätkä, joka suorittaa jonkin tietyn tehtävän Suoritetaan kutsuttaessa function sayhello (fname, lname) { } alert( Hello + fname + + lname); // Hello John Smith // Jostain päin koodia voidaan tehdä esim. kutsu sayhello( John, Smith ); 29.01.2015 IPOPPLA 28
JavaScript Oliot Samoin kuin taulukot, oliot säilyttävät useita arvoja yhdessä muuttujassa var myobject = {}; // tai new Object(); var person = { "fname": 'John', "lname": 'Smith', "age": 33, "getfullname": function(){ return this.fname + ' ' + this.lname; } }; 29.01.2015 IPOPPLA 29
JavaScript Oliot Olion sisältöön päästään käsiksi viittaamalla nimettyihin indekseihin pistenotaation avulla tai taulukkotyyppisesti antamalla indeksin nimi hakasulkeiden sisällä console.log(person.fname); // John console.log(person.getfullname()); // John Smith console.log(person["age"]); // 33 29.01.2015 IPOPPLA 30
JavaScript Esimääritellyt oliot JavaScriptissä on käytettävissä joukko esimääriteltyjä olioita, joiden avulla voidaan vaikuttaa sivun rakenteeseen ja sisältöön. Esimerkiksi: document parhaillaan näytettävää sivua kuvaava olio, jonka avulla voidaan muokata sivun rakennetta ja sisältöä window selainikkunaa kuvastava olio, jonka avulla voidaan esimerkiksi avata uusia ikkunoita 29.01.2015 IPOPPLA 31
JavaScript Prototyyppi Prototyypin rakentaja on funktio function person(fname, lname, age) { this.fname = fname; this.lname = lname; this.age = age; this.getfullname = function() { return this.firstname + " " + this.lastname}; } new-avainsanaa käyttämällä voidaan luodaan uusia olioita var person1 = new person('john', 'Smith', 33); var person2 = new person('david', 'Copperfield', 53); 29.01.2015 IPOPPLA 32
JavaScript Taulukot Taulukot säilyttävät useita arvoja yhdessä muuttujassa Taulukkoon voi lisätä mitä tahansa tietotyyppejä: lukuja, merkkijonoja, olioita, toisia taulukoita jne. Taulukoiden manipulointiin olemassa valmiita apumetodeja var myarray = []; // tai var myarray = new Array(); var myarray2 = [5, 6, seven ]; myarray2[1]; // 6 myarray2[3] = 8; // taulukko nyt [5, 6, seven, 8] 29.01.2015 IPOPPLA 33
JavaScript Kielen perusrakenteista Ehtolausekkeet if / if-else / else-if switch-case Silmukat for / for-in / while / do-while break, continue Virheen nappaamiseen ja heittämiseen tarvittavia rakenteita käytetään harvemmin try-catch-finally throw 29.01.2015 IPOPPLA 34
JavaScript Kielen perusrakenteista Loogiset operaattorit && (AND), (OR),! (NOT) Vertailuoperaattorit == (yhtä suuri) === (yhtä suuri ja samaa tyyppiä)!= (eri suuri)!== (eri suuri tai eri tyyppiä)) >, >=, <, <= Ehdollinen operaattori var muuttuja = (ehto)? arvo1 : arvo2 29.01.2015 IPOPPLA 35
JavaScript Tapahtumat Tapa liittää JavaScript toiminnalliseksi osaksi WWW-sivua Useimpiin HTML-elementteihin voidaan liittää erilaisia tapahtumia Voidaan esimerkiksi suorittaa jokin koodinpätkä, kun käyttäjä klikkaa jotakin elementtiä Tapahtumatyyppejä: onclick, onmouseover, onfocus, onchange, onload... http://www.w3schools.com/js/js_htmldom_events.asp 29.01.2015 IPOPPLA 36
JavaScript Tapahtumat Esim. suoritetaan funktio sayhello, kun painiketta klikataan <input type="button" value="say hello" onclick="sayhello()"/> <script> function sayhello() { alert("hello!"); } </script> 29.01.2015 IPOPPLA 37
Ensi kerralla... Muistakaa tehtäväanalyysin palauttaminen, deadline 5.2. JavaScript jquery HTML5 Cookiet Lyhyt kertaus Kurssin jatkuminen 29.01.2015 IPOPPLA 38