Selainohjelmointi Verkkosivujen toiminnallisuus (JavaScript) (JavaScript) T-111.1100 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
Luennon jälkeen osaan toteuttaa verkkosivuille toiminnallisuutta JavaScript:llä.
Luennon sisältö Kertausta JavaScript JSON DOM API jquery ja ECMAScript 6 Tiedon tallennus Verkkosivujen optimointi Yhteenveto ja tehtävänanto
Kertausta
http://joshduck.com/periodic-table.html
http://www.w3.org/tr/dom-level-3-core/introduction.html
https://developers.google.com/chrome- developer- tools/
http://www.codecademy.com/glossary/css#selectors
https://developers.google.com/chrome- developer- tools/
http://www.w3.org/style/css/current-work
JavaScript
Tulkattava skriptikieli Pääasiallinen käyttö selaimessa Verkkosivun toiminnallisuus API:en kautta pääsy selaimeen/laitteeseen Prototyyppipohjainen, dynaamisesti tyypitetty,...
T-111.1100 Digitaalisen median työvälineet (3 op) 16. lokakuuta 2012 Kalvo 14 http://ejohn.org/blog/the-world-of-ecmascript/
http://janne.aukia.com/zoomooz/examples/imagestack/index.html
Historia
1995-1996 Kehittäjä Brendan Eich. Ensiesiintyminen Netscape Navigator 2.0:ssa. 1996-1998 Standardoitavaksi Ecma International:iin. Standardoitu nimellä ECMAScript.
1998-2004 HTML-sivujen manipuloiminen DOM Level 1, 2 ja 3 API:ien avulla. 2001-2002 JSON-tiedonsiirtoformaatti. Kehittäjä Douglas Crockford. 2005 Asynkroninen kommunikointi palvelimen kanssa, AJAX. Termin kehittäjä Jesse James Garrett.
2006 Asiakaspään JavaScript-kirjastot, kuten jquery (kehittäjä John Resig) ja Prototype. 2008-20?? HTML5 ja siihen liittyvät JavaScript API:t. 2009 Standardoitu palvelinpään JavaScript-kirjasto, CommonJS. Kehittäjä Kevin Dangoor.
Syntaksi
JavaScript
Käyttö *.js / <script>
KÄYTTÖTAVAT 1) Ulkoinen skriptimäärittely (*.js tiedosto) 2) Sisäinen skriptimäärittely (<script> elementti)
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
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
HTML JavaScript HTML
HTML JavaScript HTML
Debuggaus ja testaus
Debuggaus Firebug Liitännäinen Firefoxiin sekä JavaScript-pohjainen Lite versio kaikkiin selaimiin http://getfirebug.com/ 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
https://developers.google.com/chrome-developer-tools/
Testaus BrowserStack Maksullinen testauspalvelu web-sovellusten alustariippumattomuuteen, vuorovaikutteinen http://www.browserstack.com/ Browsershots Ilmainen testauspalvelu web-sovellusten alustariippumattomuuteen, vain kuvakaappauksia http://browsershots.org/
Testaus QUnit Sovelluskehys JavaScriptin yksikkötestaukseen http://qunitjs.com/ Selenium, CasperJS Sovelluskehyksiä Web-sovellusten automatisoituun testaukseen http://seleniumhq.org/ http://casperjs.org/
Validointi
http://jshint.com/
http://jsonlint.com/
Selaintuki
Selaimet tulkitsevat JavaScript:ä selainmoottoreiden (engl. JavaScript engine) avulla. Eri selaimissa on yleensä eri selainmoottorit, mistä johtuen JavaScript:n tulkinta vaihtelee hitusen selaimesta toiseen.
Syntaksin perusteet
Kommentit Yksirivinen kommentti Monirivinen kommentti
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
Primitiivityypit undefined Ei määritelty null Ei viittausta mihinkään Totuusarvo (boolean) true tai false Määritellään tarvittaessa: new Boolean( totuusarvo ) http://www.quirksmode.org/js/boolean.html
Primitiivityypit Numero Kokonais- tai desimaaliluku Laskuoperaattorit: +, -, *, /, jne. Huom. JavaScriptin liukuluvut aiheuttavat tietyissä tilanteissa yllättäviä ongelmia: https://stackoverflow.com/questions/1458633/elegant-workaroundfor-javascript-floating-point-number-problem Ole tarkkana yhdistäessäsi numeroita merkkijonojen kanssa isnan( muuttuja ) testaa onko luvaton numero (Not-a-Number) Merkkijonosta numeroksi
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 http://www.quirksmode.org/js/strings.html
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
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
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
Oliotyypit Olion (object) käyttö Ominaisuuksia voi lukea, lisätä ja poistaa Joustava Kaksi eri notaatiota: piste- ja sulkumerkkinotaatio Esimerkki
Muita oliotyyppejä Date Päivämäärään ja aikaan liittyvät metodit http://www.w3schools.com/jsref/jsref_obj_date.asp Math Matemaattisiin operaatioihin liittyvät ominaisuudet ja metodit http://www.w3schools.com/jsref/jsref_obj_math.asp RegExp Säännöllisiin lausekkeisiin liittyvät toiminnot http://www.w3schools.com/jsref/jsref_obj_regexp.asp
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
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
Laskuoperaattorit + lisäys - vähennys * kerto / jako % jakojäännös ++ yhden lisäys -- yhden vähennys
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
Logiikkaoperaattorit && ja tai! vastakohta
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
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)
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
Toistolauseet for lause Suorita lohko nolla tai useampi kertaa, niin kauan kuin toistolauseen ehto toteutuu Toistojen määrä yleensä etukäteen tiedossa
Hyppylauseet return lause Poistu metodista tai silmukasta Voi palauttaa arvon break lause Poistu toistolauseesta tai silmukasta continue lause Poistu toistolauseen lohkosta
Virhetilanteiden käsittely try...catch...finally lause Suorita catch lohko, mikäli try lohkon suorituksessa tapahtuu poikkeus Suorita lopuksi vielä valinnainen finally lohko Esimerkki
Virhetilanteiden käsittely throw lause Virheviestit voidaan räätälöidä throw lauseen avulla Esimerkki
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
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
http://www.codecademy.com/tracks/javascript > Introduction to JavaScript
Olio-ohjelmointi
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 http://www.phpied.com/3-ways-to-define-a-javascript-class/ Tarjolla myös erillisiä kirjastoja
Olio-ohjelmointi JavaScriptillä
Olio-ohjelmointi JavaScriptillä
Olio-ohjelmointi JavaScriptillä
JSON
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 http://tools.ietf.org/html/rfc4627 XML:ään verrattuna teknisesti hieman rajoittuneempi
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
Esimerkki JSON
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
DOM API
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 http://www.w3.org/tr/dom-level-3-core/
Document Object Model (DOM) http://www.w3.org/tr/dom-level-3-core/introduction.html
https://developer.mozilla.org/en-us/docs/dom/dom_reference
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 ) http://www.w3.org/tr/dom-level-3-core/
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 ) http://www.w3.org/tr/selectors-api/
Elementtien valinta
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(... ) http://www.w3.org/tr/dom-level-3-core/
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 http://www.w3.org/tr/dom-parsing/
Elementtien manipulointi
JavaScript ja DOM -referenssit https://developer.mozilla.org/en- US/docs/DOM/DOM_Reference DOM-oliot DOM-tapahtumat http://www.w3schools.com/jsref/default.asp JavaScript-oliot Selainoliot DOM-oliot HTML DOM -oliot
Tapahtumat
https://developer.mozilla.org/en-us/docs/web/reference/events
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 http://www.quirksmode.org/js/events_properties.html
Tapahtumat DOM Level 3 Events W3C:n työluonnos, syyskuu 2012 Määrittelee tapahtumat, niiden kuuntelun ja etenemisen, jne. http://www.w3.org/tr/dom-level-3-events/ 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ä http://www.w3.org/tr/dom-level-3-events/#event-types-list
Tapahtumarajapinnat ja niiden perintä
Tapahtumien kulku http://www.w3.org/tr/dom-level-3-events/#dom-event-architecture
Tapahtumien käyttö Tapahtumakuuntelijoiden lisääminen addeventlistener( tyyppi, kuuntelija ) https://developer.mozilla.org/en/dom/element.addeventlistener Tapahtumakuuntelijoiden poistaminen removeeventlistener( tyyppi, kuuntelija ) https://developer.mozilla.org/en- US/docs/DOM/element.removeEventListener Tapahtumien lähettäminen dispatchevent( tapahtuma ) https://developer.mozilla.org/en- US/docs/DOM/element.dispatchEvent http://www.w3.org/tr/dom-level-3-events/#events-eventtarget
Tapahtumien käyttö
jquery ja ECMAScript 6
jquery http://jquery.com/
JavaScript-kirjastot http://w3techs.com/technologies/overview/javascript_library/all
http://jquery.com/
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
Syntaksi
Toiminnot Elementtien valitseminen DOM-puusta (Selectors) DOM-puun manipuloiminen Tapahtumat Efektit ja animaatiot Ajax Liitännäiset
Linkkejä jquery http://jquery.com/ jquery API http://api.jquery.com/ jquery UI http://jqueryui.com/ jquery UI API http://api.jqueryui.com/ http://jqfundamentals.com/ http://www.carbonsmart.co.uk/ wpcontent/uploads/2011/03/jquery -fundamentals-book.pdf jquery-harjoituksia http://www.codecademy.com/tr acks/jquery Microjs http://microjs.com/ jquery-kirja
ECMAScript 6 http://www.ecmascript.org/
http://www.ecmascript.org/
Yleiskuvaus ECMAScript 6 (ES6 Harmony) on ECMA-262 - standardin uusin, työn alla oleva versio https://people.mozilla.org/~jorendorff/es6-draft.html Helpottaa monimutkaisten web-sovellusten kehitystä
Toiminnot Luokat Moduulit Kokoelmat jne.
Linkkejä ECMAScript http://www.ecmascript.org/ ECMAScript 6 -luonnos https://people.mozilla.org/~jore ndorff/es6-draft.html Esittelyjä http://www.slideshare.net/eyal V/whats-new-in-ecmascript-60 http://net.tutsplus.com/articles/ news/ecmascript-6-today/ http://www.sencha.com/blog/to ward-modern-web-apps-withecmascript-6/
http://www.codecademy.com/tracks/jquery > Introducing jquery
Tiedon tallennus
Tiedon tallennustavat verkossa Vanhat tavat HTTP cookie Flash cookie (Google) Gears Uudet (HTML5) tavat Web Storage, http://www.w3.org/tr/webstorage/ Web SQL Database, http://www.w3.org/tr/webdatabase/ Indexed Database API (IndexedDB), http://www.w3.org/tr/indexeddb/ Kolmannen osapuolen palvelut Firebase, https://www.firebase.com/ Reaaliaikainen tiedonsiirto Hyödyllinen esimerkiksi moninpeleissä
Tiedon tallennustavat verkossa Kattava vertailu ja esimerkkikoodit http://media.tkk.fi/webservices/personnel/markku_laine/clientside_storage_in_web_applications.pdf
Verkkosivujen optimointi
http://www.aalto.fi/fi/
O Reilly Media 2007 (1st Ed.) # of pages 170 ISBN 978-0596529307
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
Kirjoja ja linkkejä Even Faster Web Sites Steve Souders, 2009 High Performance Browser Networking Ilya Grigorik, 2013 Steve Souders http://www.stevesouders.com/ Ilya Grigorik https://www.igvita.com/ Web Page Test YSlow http://www.webpagetest.org/ https://developer.yahoo.com/ys low/ PageSpeed https://developers.google.com/ speed/pagespeed/
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 http://addyosmani.com/blog/image-optimization-tools/ http://www.picresize.com/
Yhteenveto ja tehtävänanto
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
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 19.10.2015 klo 18.00 mennessä.
O Reilly Media 2008 (1st Ed.) # of pages 176 ISBN 978-0596517748
O Reilly Media 2011 (2nd Ed.) # of pages 538 ISBN 978-1449399023
KIITOS! juuso.lappalainen@aalto.fi