Verkkosivujen toiminnallisuus (JavaScript)

Transkriptio

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

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

3 Luennon sisältö JavaScript CodeAcademy: JavaScript peruskurssi JSON-tiedonsiirtoformaatti DOM API jquery Tiedon tallennus Verkkosivujen optimointi CodeAcademy: jquery peruskurssi Yhteenveto

4 JavaScript

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

6

7 Historia

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

9 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.

10 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.

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

12 JavaScript

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

14 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 * (Suositeltu tapa HTML-tiedoston head-tagin sisällä) <script type= text/javascript src= scripts.js ></script> * Perinteisesti <head> osion sisään

15 Ulkoinen skriptimäärittely HTML JavaScript

16 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

17 Sisäinen skriptimäärittely HTML JavaScript HTML

18 HTML JavaScript HTML

19 Syntaksin perusteet

20 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

21 Primitiivityypit undefined Ei määritelty null Ei viittausta mihinkään Totuusarvo (boolean) true tai false

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

23 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

24 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

25 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

26 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

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

28 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

29 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

30 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

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

32 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

33 Kommentit Yksirivinen kommentti Monirivinen kommentti

34 Logiikkaoperaattorit && ja tai!vastakohta

35 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

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

37 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

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

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

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

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

42 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

43 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

44 JavaScript com/courses/javascript-beginneren-x9dnd/0/1 > Introduction to JavaScript

45 Olio-ohjelmointi

46 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

47 Olio-ohjelmointi JavaScriptillä

50 JSON

51 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 Alkaa olla standardi syötteissä, esimerkiksi Twitter- ja Facebook ovat siirtyneet xml:stä json:iin

52 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

53 Esimerkki JSON

54 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

55 DOM API

56 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

57 Document Object Model (DOM)

58 Elementtien valinta 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 )

59 Elementtien valinta

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

61 Elementtien manipulointi

62 Tapahtumat

63 Tapahtumat Suuri osa selainpään 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

64 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ä

65 Tapahtumien käyttö Tapahtumakuuntelijoiden lisääminen addeventlistener( tyyppi, kuuntelija ) Tapahtumakuuntelijoiden poistaminen removeeventlistener( tyyppi, kuuntelija ) removeeventlistener Tapahtumien lähettäminen dispatchevent( tapahtuma ) dispatchevent

66 Tapahtumien käyttö

67 jquery

68 jquery

69 JavaScript-kirjastot

70

71 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

72 Syntaksi

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

74 Linkkejä jquery jquery API jquery UI jquery UI API jquery-kirja

75 Tiedon tallennus

76 Tiedon tallennustavat verkossa (selainpäässä) Web Storage Web Storage, Tallentaa käyttäjän selaimen muistiin tietoa joko kyseisen session ajaksi (kunnes selainikkuna suljetaan, sessionstorage) tai pysyvästi (kunnes muisti tyhjennetään, localstorage) Kolmannen osapuolen palvelut Firebase, Reaaliaikainen tiedonsiirto Hyödyllinen esimerkiksi moninpeleissä

77 Web Storage:n käyttö Varmista aluksi että käyttäjän selain tukee web storagea Tiedon tallentaminen avain-arvo pareilla Tiedon hakeminen avaimen avulla Tarkempi dokumentaatio

78 Verkkosivujen optimointi

79 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

80 Muu optimointi (good to know, mutta ei tämän kurssin kannalta oleellista) Olennaista käytettävyyden ja saavutettavuuden kannalta Nopeasti latautuva ja optimoitu sivusto sijoittuu korkeammalle hakutuloksissa Jopa muutaman sekunnin latausajat karkottaa suuren osan käyttäjistä Hakukoneoptimiointi Semanttinen html-koodi (meta-tiedot, oikeanlaiset elementit oikeissa tarkoituksissa) Responsiivisuus (pienelle näytölle optimoitu sivusto sijoittuu korkealle mobiililaitteilla haettaessa)

81 Yhteenveto

82 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

83 Linkkejä

84 jquery com/courses/web-beginner-enbay3d/0/1 > Introducing jquery

85 KIITOS!