Internet-pohjaisen oppimisympäristön laadinta. Luento 3

Transkriptio

1 Internet-pohjaisen oppimisympäristön laadinta Luento 3

2 Aiheena tänään Toteutustekniikoista yleisesti Selainriippumattomuudesta Hot Potatoes -ohjelmasta JavaScriptin perusteista IPOPPLA 2

3 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 IPOPPLA 3

4 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 IPOPPLA 4

5 Toteutustekniikoista yleisesti Lähde: Reichert, R. and Hartmann, W. (2004). On the Learning in E-Learning. Proceedings of EDMEDIA June 23-26, 2004, Lugano, Switzerland, AACE IPOPPLA 5

6 W3C - 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 IPOPPLA 6

7 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 IPOPPLA 7

8 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

9 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? IPOPPLA 9

10 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

11 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! IPOPPLA 11

12 Hot Potatoes Helppo ratkaisu yksinkertaisiin tarpeisiin IPOPPLA 12

13 Hot Potatoes Ohjelma vuorovaikutteisten osioiden luomiseen WWWsivuille Tarkoitettu opetussivustojen tekoon Oma versionsa useammalle eri käyttöjärjestelmälle (Windows, OS X, Linux, ) Kotisivu: Ohjelma on nykyisin maksuton ja vapaasti käytettävissä IPOPPLA 13

14 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! IPOPPLA 14

15 Hot Potatoes Esimerkkejä IPOPPLA 15

16 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 IPOPPLA 16

17 IPOPPLA 17 JavaScript Lyhyt oppimäärä JavaScriptin käyttöön WWW-sivulla

18 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 IPOPPLA 18

19 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> IPOPPLA 19

20 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> IPOPPLA 21

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 IPOPPLA 22

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 IPOPPLA 23

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 IPOPPLA 24

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ä IPOPPLA 25

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... } IPOPPLA 26

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); IPOPPLA 27

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 ); IPOPPLA 28

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; } }; IPOPPLA 29

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"]); // IPOPPLA 30

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 IPOPPLA 31

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); IPOPPLA 32

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] IPOPPLA 33

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 IPOPPLA 34

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 : arvo IPOPPLA 35

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 IPOPPLA 36

36 JavaScript Tapahtumat Esim. suoritetaan funktio sayhello, kun painiketta klikataan <input type="button" value="say hello" onclick="sayhello()"/> <script> function sayhello() { alert("hello!"); } </script> IPOPPLA 37

37 Ensi kerralla... Muistakaa tehtäväanalyysin palauttaminen, deadline 5.2. JavaScript jquery HTML5 Cookiet Lyhyt kertaus Kurssin jatkuminen IPOPPLA 38