(JavaScript) T Digitaalisen median työvälineet (3 op) ME-C2300 Verkkojulkaisemisen perusteet (5 op)

Transkriptio

1 Selainohjelmointi Verkkosivujen toiminnallisuus (JavaScript) (JavaScript) T Digitaalisen median työvälineet (3 op) ME-C2300 Verkkojulkaisemisen perusteet (5 op) DI Juuso Markku Lappalainen Laine Mediatekniikan Informaatioverkostot laitos / Mediatekniikan laitos 30. syyskuuta 2014

2 Luennon jälkeen osaan toteuttaa verkkosivuille toiminnallisuutta JavaScript:llä.

3 Luennon sisältö Kertausta JavaScript JSON DOM API jquery ja ECMAScript 6 Tiedon tallennus Verkkosivujen optimointi Yhteenveto ja tehtävänanto

4 Kertausta

5

6

7 developer- tools/

8

9 developer- tools/

10

11

12 JavaScript

13 Tulkattava skriptikieli Pääasiallinen käyttö selaimessa Verkkosivun toiminnallisuus API:en kautta pääsy selaimeen/laitteeseen Prototyyppipohjainen, dynaamisesti tyypitetty,...

14 T Digitaalisen median työvälineet (3 op) 16. lokakuuta 2012 Kalvo 14

15

16 Historia

17 Kehittäjä Brendan Eich. Ensiesiintyminen Netscape Navigator 2.0:ssa Standardoitavaksi Ecma International:iin. Standardoitu nimellä ECMAScript.

18 HTML-sivujen manipuloiminen DOM Level 1, 2 ja 3 API:ien avulla JSON-tiedonsiirtoformaatti. Kehittäjä Douglas Crockford Asynkroninen kommunikointi palvelimen kanssa, AJAX. Termin kehittäjä Jesse James Garrett.

19 2006 Asiakaspään JavaScript-kirjastot, kuten jquery (kehittäjä John Resig) ja Prototype ?? HTML5 ja siihen liittyvät JavaScript API:t Standardoitu palvelinpään JavaScript-kirjasto, CommonJS. Kehittäjä Kevin Dangoor.

20 Syntaksi

21 JavaScript

22 Käyttö *.js / <script>

23 KÄYTTÖTAVAT 1) Ulkoinen skriptimäärittely (*.js tiedosto) 2) Sisäinen skriptimäärittely (<script> elementti)

24 ULKOINEN SKRIPTIMÄÄRITTELY Skriptit voidaan määritellä ulkoisessa tiedostossa (*.js). Ulkoinen skriptitiedosto voidaan linkittää verkkosivuun ja näin ollen samoja skriptimäärittelyitä voidaan käyttää usealla eri verkkosivulla (helpottaa ylläpitoa). Selaimet voivat myös tallentaa ulkoisen skriptitiedoston välimuistiin (nopeuttaa verkkosivujen lataamista). Suositeltavin käyttötapa. Käyttäminen verkkosivuilla * <script type= text/javascript src= scripts.js ></script> * Perinteisesti <head> osion sisään

25 SISÄINEN SKRIPTIMÄÄRITTELY Skriptit voidaan määritellä verkkosivun sisällä (<script>). Sisäinen skriptimäärittely keskittää verkkosivun skriptimäärittelyt yhteen paikkaan (helpottaa hieman ylläpitoa). Samoja skriptimäärittelyjä ei kuitenkaan voi käyttää muilla verkkosivuilla eivätkä selaimet pysty tallentamaan niitä välimuistiin. Käyttäminen verkkosivuilla * <script type= text/javascript >...</script> * Perinteisesti <head> osion sisään

26 HTML JavaScript HTML

27 HTML JavaScript HTML

28 Debuggaus ja testaus

29 Debuggaus Firebug Liitännäinen Firefoxiin sekä JavaScript-pohjainen Lite versio kaikkiin selaimiin Developer Tools Sisäänrakennettu työkalu Safariin ja Chromeen console.log(... ) metodi Tulostaa viestit konsolille Huomattavasti parempi vaihtoehto kuin vanha alert(... ) metodin käyttäminen, joka avaa ponnahdusikkunan

30

31 Testaus BrowserStack Maksullinen testauspalvelu web-sovellusten alustariippumattomuuteen, vuorovaikutteinen Browsershots Ilmainen testauspalvelu web-sovellusten alustariippumattomuuteen, vain kuvakaappauksia

32 Testaus QUnit Sovelluskehys JavaScriptin yksikkötestaukseen Selenium, CasperJS Sovelluskehyksiä Web-sovellusten automatisoituun testaukseen

33 Validointi

34

35

36 Selaintuki

37 Selaimet tulkitsevat JavaScript:ä selainmoottoreiden (engl. JavaScript engine) avulla. Eri selaimissa on yleensä eri selainmoottorit, mistä johtuen JavaScript:n tulkinta vaihtelee hitusen selaimesta toiseen.

38 Syntaksin perusteet

39 Kommentit Yksirivinen kommentti Monirivinen kommentti

40 Muuttujat Määritellään var sanalla Tyyppi jätetään määrittelemättä Määrittyy dynaamisesti Arvo määrittelee tyypin undefined, null, totuusarvo, merkkijono, numero, olio Esimerkki

41 Primitiivityypit undefined Ei määritelty null Ei viittausta mihinkään Totuusarvo (boolean) true tai false Määritellään tarvittaessa: new Boolean( totuusarvo )

42 Primitiivityypit Numero Kokonais- tai desimaaliluku Laskuoperaattorit: +, -, *, /, jne. Huom. JavaScriptin liukuluvut aiheuttavat tietyissä tilanteissa yllättäviä ongelmia: Ole tarkkana yhdistäessäsi numeroita merkkijonojen kanssa isnan( muuttuja ) testaa onko luvaton numero (Not-a-Number) Merkkijonosta numeroksi

43 Primitiivityypit Merkkijono (string) Arvo ympäröidään joko lainausmerkein ( ) tai puolilainausmerkein ( ) Merkkijonojen yhdistäminen + merkillä Myös olio, jolla useita ominaisuuksia ja metodeita, esim. length Numerosta merkkijonoksi

44 Oliotyypit Taulukko (array) Lista arvoja Alkioiden arvot voivat olla eri ja/tai mitä tahansa tyyppiä Myös olio, jolla useita ominaisuuksia ja metodeita, esim. length Kaksi tapaa luoda taulukko Alkioiden arvojen käsittely indeksinumeroiden kautta Indeksointi alkaa nollasta

45 Oliotyypit Funktio (function) Lohko ohjelmakoodia, joka eriyttää tietyn ja/tai usein suoritettavan toiminnon Määrittely koostuu function sanasta sekä funktion nimestä, parametreista, ja paluuarvosta Funktion nimi, parametrit ja paluuarvo ovat valinnaisia Funktiot voivat myös olla muuttujien arvoina Esimerkki

46 Oliotyypit Olio (object) Kuvaa jotakin käsitettä ja sen ominaisuuksia, esim. kurssi Oliolla on ominaisuuksia, jota koostuvat avain-arvo pareista Avaimet ovat merkkijonoja Arvot voivat olla mitä tahansa tyyppiä, esim. funktio Avain-arvo parit (ominaisuudet) erotetaan toisistaan pilkulla Määrittelyesimerkki

47 Oliotyypit Olion (object) käyttö Ominaisuuksia voi lukea, lisätä ja poistaa Joustava Kaksi eri notaatiota: piste- ja sulkumerkkinotaatio Esimerkki

48 Muita oliotyyppejä Date Päivämäärään ja aikaan liittyvät metodit Math Matemaattisiin operaatioihin liittyvät ominaisuudet ja metodit RegExp Säännöllisiin lausekkeisiin liittyvät toiminnot

49 Näkyvyys (scope) Muuttujat ilman var sanaa (global) näkyvät kaikkialla, esim. funktion ulko- ja sisäpuolella Ohjenuora: määrittele muuttujat aina var sanaa käyttäen Funktion ulkopuolella var sanalla määritellyt muuttujat näkyvät sekä funktion ulko- että sisäpuolella Funktion sisäpuolella var sanalla määritellyt muuttujat näkyvät vain funktion sisäpuolella

50 this Viittaa käytettävissä olevaan kontekstiin (itseviite) Määräytyy kutsuja(olio)n mukaan Käytetään esim. olion sisällä viittaamaan sen ominaisuuksiin Esimerkki

51 Laskuoperaattorit + lisäys - vähennys * kerto / jako % jakojäännös ++ yhden lisäys -- yhden vähennys

52 Vertailuoperaattorit == arvot vastaavat toisiaan === arvot ja tyypit vastaavat toisiaan!= arvot eivät vastaa toisiaan!== arvot tai tyypit eivät vastaa toisiaan > suurempi kuin < pienempi kuin >= suurempi tai yhtä suuri kuin <= pienempi tai yhtä suuri kuin

53 Logiikkaoperaattorit && ja tai! vastakohta

54 Valintalauseet if lause Suorita lohko, mikäli lauseen ehto toteutuu if else lause Suorita lohko, mikäli lauseen ehto toteutuu tai muussa tapauksessa toisen lauseen lohko if else if else lause Suorita yksi (ensimmäinen) lohko, joka toteuttaa lauseen ehdon tai muussa tapauksessa toisen lauseen lohko

55 Valintalauseet switch lause Suorita yksi (ensimmäinen) lohko, joka toteuttaa lauseen ehdon tai vaihtoehtoisesti vakiolauseen lohko (default) break sana estää suoritusta jatkamasta seuraavaan lohkoon (tästä lisää Hyppylauseet kohdassa)

56 Toistolauseet while lause Suorita lohko nolla tai useampi kertaa, niin kauan kuin toistolauseen ehto toteutuu do while lause Suorita lohko yksi tai useampi kertaa, niin kauan kuin toistolauseen ehto toteutuu

57 Toistolauseet for lause Suorita lohko nolla tai useampi kertaa, niin kauan kuin toistolauseen ehto toteutuu Toistojen määrä yleensä etukäteen tiedossa

58 Hyppylauseet return lause Poistu metodista tai silmukasta Voi palauttaa arvon break lause Poistu toistolauseesta tai silmukasta continue lause Poistu toistolauseen lohkosta

59 Virhetilanteiden käsittely try...catch...finally lause Suorita catch lohko, mikäli try lohkon suorituksessa tapahtuu poikkeus Suorita lopuksi vielä valinnainen finally lohko Esimerkki

60 Virhetilanteiden käsittely throw lause Virheviestit voidaan räätälöidä throw lauseen avulla Esimerkki

61 Varatut sanat abstract const enum function boolean continue export goto break debugger extends if byte default false implements case delete final import catch do finally in char double float instanceof class else for int

62 Varatut sanat interface public throw void long return throws while native short transient with new static true null super try package switch typeof private synchronized var protected this volatile

63 > Introduction to JavaScript

64 Olio-ohjelmointi

65 Olio-ohjelmointi JavaScriptillä JavaScript on oliopohjainen kieli JavaScript ei kuitenkaan tarjoa Javan kaltaista tukea olio-ohjelmoinnille Ei suoranaisesti tue luokkia, perintää, jne. Voidaan simuloida funktioiden ja prototyyppien avulla luokat, rakentajat, muuttujat, vakiot, metodit, Luokkien määrittelyyn useita eri tapoja Tarjolla myös erillisiä kirjastoja

66 Olio-ohjelmointi JavaScriptillä

69 JSON

70 JavaScript Object Notation (JSON) Kevyt, tekstipohjainen (string), kieliriippumaton tiedonsiirtoformaatti Erittäin suosittu webissä, kuten XML Toimii erittäin hyvin yhteen JavaScriptin kanssa Avoin teknologia (ts. ei ole standardoitu) Pohjautuu ECMAScript 3:een XML:ään verrattuna teknisesti hieman rajoittuneempi

71 JavaScript Object Notation (JSON) Olio tai taulukko Olio kuvaa jotakin käsitettä ja sen ominaisuuksia, esim. kurssi Taulukko listaa arvoja Arvojen sallitut tyypit null, boolean, numero, merkkijono, taulukko, olio Helppokäyttöinen sekä ihmisen että koneen näkökulmasta Natiivituki tullut selaimiin vasta 2009 Käytä erillisiä kirjastoja vanhojen selaimien kanssa

72 Esimerkki JSON

73 JSON:n käyttö Olion ominaisuuksien lukeminen Kaksi eri notaatiota: piste- ja sulkumerkkinotaatio Esimerkki course[ "credits" ] course.credits Taulukon arvojen lukeminen Haetaan indeksin perusteella (alkaa nollasta) Esimerkki courses[0] Syvähierarkisen JSON:n lukeminen Tarvittaessa käytä molempia tapoja useampaan kertaan ja/tai yhdistele niitä keskenään Esimerkki courses[0].credits

74 DOM API

75 Document Object Model (DOM) W3C:n kehittämä ohjelmointirajapinta (API) HTML- ja XML-dokumenteille Määrittelee, miten dokumenttia luetaan, käytetään ja muokataan Ohjelmoijat voivat rakentaa dokumentteja, navigoida rakenteessa, poistaa tai lisätä elementtejä sekä muokata niitä Voidaan käyttää minkä tahansa ohjelmointikielen kanssa

76 Document Object Model (DOM)

77

78 Elementtien valinta (vanha tapa) DOM Level 3 Core W3C:n suositus, huhtikuu 2004 Toimii myös vanhoissa selaimissa Hankala ohjelmointirajapinta document.getelementbyid( elementinid ) document.getelementsbytagname( elementinnimi ) document.getelementsbytagnamens( nimiavaruusuri, elementinnimi )

79 Elementtien valinta (uusi tapa) Selectors API Level 1 W3C:n suositusehdotus, joulukuu 2012 Määrittelee metodit DOM-puun elementtien valintaan Kattava selaintuki (uudet selaimet) Tehokas ohjelmointirajapinta, esim. document.queryselector( valitsimet ) document.queryselectorall( valitsimet )

80 Elementtien valinta

81 Elementtien manipulointi (vanha tapa) DOM Level 3 Core W3C:n suositus, huhtikuu 2004 Toimii myös vanhoissa selaimissa Hankala ohjelmointirajapinta, esim. document.createelement(... ) document.createtextnode(... ) document.createattribute(... ) node.firstchild node.appendchild(... ) node.removechild(... )

82 Elementtien manipulointi ( uusi tapa ) DOM Parsing and Serialization W3C:n työluonnos, syyskuu 2012 Standardoi selaimien yleisesti tukeman toiminnallisuuden Kattava selaintuki Tehokas ohjelmointirajapinta, esim. element.innerhtml element.outerhtml

83 Elementtien manipulointi

84 JavaScript ja DOM -referenssit US/docs/DOM/DOM_Reference DOM-oliot DOM-tapahtumat JavaScript-oliot Selainoliot DOM-oliot HTML DOM -oliot

85 Tapahtumat

86

87 Tapahtumat Suuri osa JavaScript-ohjelmakoodista liittyy tapahtumien kuunteluun ja niihin reagoimiseen HTML-sivun latauksen valmistuminen Linkin painaminen Hiiren liikkeiden seuraaminen Tapahtumasta välittyy muun muassa sen tyyppi ja kohde

88 Tapahtumat DOM Level 3 Events W3C:n työluonnos, syyskuu 2012 Määrittelee tapahtumat, niiden kuuntelun ja etenemisen, jne. Yleisimmät tapahtumatyypit Käyttöliittymätapahtumat, esim. load Kohdistustapahtumat, esim. focus Hiiritapahtumat, esim. click, mouseover ja mousemove Näppäimistötapahtumat, esim. keyup ja keydown Lista tapahtumatyypeistä

89 Tapahtumarajapinnat ja niiden perintä

90 Tapahtumien kulku

91 Tapahtumien käyttö Tapahtumakuuntelijoiden lisääminen addeventlistener( tyyppi, kuuntelija ) Tapahtumakuuntelijoiden poistaminen removeeventlistener( tyyppi, kuuntelija ) US/docs/DOM/element.removeEventListener Tapahtumien lähettäminen dispatchevent( tapahtuma ) US/docs/DOM/element.dispatchEvent

92 Tapahtumien käyttö

93 jquery ja ECMAScript 6

94 jquery

95 JavaScript-kirjastot

96

97 Yleiskuvaus jquery on JavaScript-kirjasto, joka helpottaa ja nopeuttaa yleisimpien JavaScript-toimintojen toteutusta asiakaspäässä Yksinkertainen ja tiivis syntaksi Tukee yleisimmin käytettäviä toimintoja Ottaa huomioon selainten väliset eroavaisuudet Laajennettavissa liitännäiskoodin avulla

98 Syntaksi

99 Toiminnot Elementtien valitseminen DOM-puusta (Selectors) DOM-puun manipuloiminen Tapahtumat Efektit ja animaatiot Ajax Liitännäiset

100 Linkkejä jquery jquery API jquery UI jquery UI API wpcontent/uploads/2011/03/jquery -fundamentals-book.pdf jquery-harjoituksia acks/jquery Microjs jquery-kirja

101 ECMAScript 6

102

103 Yleiskuvaus ECMAScript 6 (ES6 Harmony) on ECMA standardin uusin, työn alla oleva versio Helpottaa monimutkaisten web-sovellusten kehitystä

104 Toiminnot Luokat Moduulit Kokoelmat jne.

105 Linkkejä ECMAScript ECMAScript 6 -luonnos ndorff/es6-draft.html Esittelyjä V/whats-new-in-ecmascript-60 news/ecmascript-6-today/ ward-modern-web-apps-withecmascript-6/

106 > Introducing jquery

107 Tiedon tallennus

108 Tiedon tallennustavat verkossa Vanhat tavat HTTP cookie Flash cookie (Google) Gears Uudet (HTML5) tavat Web Storage, Web SQL Database, Indexed Database API (IndexedDB), Kolmannen osapuolen palvelut Firebase, Reaaliaikainen tiedonsiirto Hyödyllinen esimerkiksi moninpeleissä

109 Tiedon tallennustavat verkossa Kattava vertailu ja esimerkkikoodit

110 Verkkosivujen optimointi

111

112 O Reilly Media 2007 (1st Ed.) # of pages 170 ISBN

113 Steve Soudersin 14 optimointisääntöä 1. Make Fewer HTTP Requests 2. Use a Content Delivery Network 3. Add an Expires Header 4. Gzip Components 5. Put Stylesheets at the Top 6. Put Scripts at the Bottom 7. Avoid CSS Expressions 8. Make JavaScript and CSS External 9. Reduce DNS Lookups 10. Minify JavaScript 11. Avoid Redirects 12. Remove Duplicate Scripts 13. Configure ETags 14. Make Ajax Cacheable

114 Kirjoja ja linkkejä Even Faster Web Sites Steve Souders, 2009 High Performance Browser Networking Ilya Grigorik, 2013 Steve Souders Ilya Grigorik Web Page Test YSlow low/ PageSpeed speed/pagespeed/

115 Kuvien optimointi Myös kuvat kannattaa optimoida käyttötarkoitukseen sopivaksi Pienennä kuvat tarvittavan kokoisiksi Käytä optimaalisinta kuvaformaattia Poista ylimääräinen tieto kuvista Työkaluja

116 Yhteenveto ja tehtävänanto

117 Yhteenveto JavaScriptistä on kehittynyt vuosien varrella johtava asiakaspään ohjelmointikieli HTML5:n ja siihen liittyvien JavaScript API:ien myötä JavaScriptin suosio kasvaa entisestään JavaScript tarjoaa ohjelmointirajapinnat niin tapahtumien kuunteluun kuin DOM-puun käsittelyyn JSON tarjoaa yksinkertaisen ja toimivan tiedonkuvausja tiedonsiirtoformaatin JavaScript-kirjastot (esim. jquery) helpottavat ja nopeuttavat asiakaspään ohjelmointia Verkkosivujen optimointi nopeuttaa sivulatauksia sekä parantaa käyttökokemusta

118 Tehtävänanto Jatkakaa aiemmissa harjoitustöissä toteuttamaanne verkkosivustoa. Lisätkää verkkosivustolle toiminnallisuutta JavaScript:n avulla. Tehtävien pitää liittyä valitun teeman ympärille. Harjoitustyö tehdään itsenäisesti. Harjoitustyön vaatimukset sekä tarkempi tehtävänanto löytyvät kurssin MyCourses-sivuilta Harjoitustyöt-osiosta. Palauttakaa harjoitustyö kurssin Dime-verkkopalvelimelle viimeistään maanantaina klo mennessä.

119 O Reilly Media 2008 (1st Ed.) # of pages 176 ISBN

120 O Reilly Media 2011 (2nd Ed.) # of pages 538 ISBN

121 KIITOS!