JWT 2016 luento 11 to 21.4.2016 klo 14-15 Aulikki Hyrskykari PinniB 1097 1
Viime luennolla o AJAX ja JSON, harjoitustyön tehtävänanto, vierailuluento avoimesta datasta Tänään o APIt rajapinnoista yleisesti o Google Maps JavaScript API API key peruskartan tuominen sivulle markkereiden lisääminen laaja kokoelma muita toimintoja jquerysta alustavasti miten se otetaan käyttöön ensimmäinen esimerkki 2
API A Programming Interface o UI vs. API user interface rajapinta käyttäjän ja ohjelman välissä a programming interface rajapinta ohjelmien kesken o Selaimet, skriptikirjastot, palvelut, jne. avaavat toiminnollisuuttaan muiden käytettäväksi rajapintojen kautta, esim. selaimissa DOM on rajapinta jonka kautta skriptit pääsevät muokkaamaan sivun elementtejä HTML5:ssä joukko JavaScript API -rajapintoja, joiden kautta pääsee käsiksi muihinkin selaimen ominaisuuksiin, esim. Drag and Drop, Web Storage, Canvas, Geolocation, ja paljon muita jquery on JavaScript-ohjelma, jolla on API tarjoaa tehokkaampia tapoja sivun elementtien käsittelyyn Facebook, Google, Twitter, jne tarjoavat rajapintoja joiden kautta voi käyttää niihin tallennettua tietoa 3
Google Maps JavaScript API https://developers.google.com/maps/documentation/javascript/ o API Key rajapinnan käyttäminen saattaa edellyttää API key:n luomisen palvelun keino tunnistaa kutsuvaa ohjelmaa Google Maps sallii kevyehkön käytön ilman avaintakin ilman avainta max 25000 kutsua päivässä, kaikki toiminnot eivät saatavilla avain kannattaa hankkia, koska sen avulla saat tietää kuinka paljon sivustoltasi lähetetään API-kutsuja Google ilmoittaa sinulle jos käyttämiisi rajapintoihin tulee muutoksia avaimeen liittyviä ominaisuuksia hallitaan Google Cloud Platformin kautta https://console.cloud.google.com/ tätä harjoitustyötä varten et välttämättä tarvitse avainta 4
Rajapinnan kuvaus o Reference-välilehti https://developers.google.com/maps/documentation/javascript/reference#release-version o Kartan lisääminen sivulle luodaan kartta-olio käyttäen rajapinnan Map-konstruktoria kaksi parametria elementtisolmu sivulla, johon kartta tuodaan tyypillisesti div-elementti karttamääreet, joiden avulla määritetään miten kartta piirretään koordinaatit (longitude-latitude), zoomaustaso, karttatyyppi annetaan käyttäen olion literaalinotaatiota 5
Peruskartta o Sivulla esiteltynä elementti, johon kartta tuodaan elementillä tulee olla leveys ja korkeus o Karttamääreet konstruktorin toinen parametri MapOptions-olio olio parametrina konstruktorille, annettava seuraavat ominaisuudet (pakolliset) center: koordinaatti (lat, long), johon kartta keskitetään, esim: center: {lat: 61.4929, lng: 23.778} zoomauskerroin, kerroin 0 antaa koko maapallon, kerroin 20 tarkimman zoomauksen (tällä hetkellä), esim. zoom: 10 muita parametrin ominaisuuksia esimerkiksi maptypeid (ROADMAP, SATELLITE, HYBRID, TERRAIN) löydät ne API-kuvauksesta https://developers.google.com/maps/documentation/javascript/3.exp/reference#mapoptions 6
Tarvittava koodi <body> <! tähän elementiin tuodaan kartta, sen koko määritellään css:n kautta --> <div id = "kartta"></div> <!-- tuodaan Google maps rajapinta javascript-ohjelmien käyttöön --> <script src= "http://maps.google.com/maps/api/js"></script> <script src = "js/google-map.js"></script> </body> function initmap() { var map = new google.maps.map(document.getelementbyid('kartta'), { center: {lat: 61.5, lng: 23.8}, zoom: 8 }); }... jostain initmap() funktiota tulee kustua - - vaikka näin: (function init(){ initmap() }()) 7
Markkereiden lisääminen https://developers.google.com/maps/documentation/javascript/3.exp/reference#marker o Marker()-konstruktori luo markkerin, ominaisuudet määrää parametrina annettu MarkerOptions -olio function initmap() { var map = new google.maps.map(document.getelementbyid('kartta'), { center: { lat: 61.4929, lng: 23.778}, zoom: 20 }); var nastanpaikka = {lat: 61.4933213, lng: 23.7773083}; } var omamarker = new google.maps.marker({ // parametrina annetaan olio, jossa määritellään position: nastanpaikka, // mihin kohtaan map: mymap, // mihin karttaan title: "JWT luento torstaina 21.4.2016" // mitä markkerissa lukee kun hiiri viedään sen }); // päälle 8
Laaja joukko toimintoja o Google Maps APIn dokumentaatio: Samples iso joukko esimerkkejä erilaisista rajapinnan kautta saatavissa olevista toiminnoista, esim. osoitteen saa muutettua koordinaateiksi ja päinvastoin (Geocoder) oman sijainnin näyttäminen (Geolocation) katunäkymän esittäminen (StreetViewPanorama) matkareittien etsintä ja näyttäminen kartalla (DirectionService, DirectioRenderer) erilaisia tapoja piirtää kartalle (esim. InfoWindows) jne. 9
jquery s motto: Write less, do more The idea is to allow you to achieve the same goals but in fewer lines of code than you would need to write with plain JavaScript. Simple selectors Common tasks with less code Cross browser compatibility 10
jquery o JavaScript-kirjastot yksinkertaistavat monia yleisiä, joskus paljonkin koodausta vaativia tehtäviä o jquery yksi käytetyimmistä JavaScript-kirjastoista elementtien haku yksinkertaisempaa erilaiset elementtien käsittelytoimenpiteet (esim. animointi, elementtikokoelmien läpikäynti) yksinkertaisempaa huolehtii selainten välisten eroavaisuuksien käsittelemisestä hyvä apuväline käytettynä tavanomaiseen JavaScript-ohjelmoinnin rinnalla tehokas hyödyntäminen edellyttää JavaScriptin hallitsemista 11
Miten otetaan käyttöön? o Käyttöön ottaminen tuodaan jquery.js tiedosto omalle sivulle käyttäen script-elementtiä o Mikä versio? toistaiseksi ylläpidetään kahta eri versiohaaraa 1.x, jos vanhojen selaimien tukeminen tärkeää, muuten 2.x käyttöön otetaan uusin versio nyt siis 2.2.3 (jos ei tarpeen tukea IE 8 ja sitä vanhempia selaimia) min-versio sama kuin varsinainen versio välilyöntimerkit poistettu ei luettavassa muodossa 12
Miten ja mistä jquery tuodaan sivulle o CDN (Content Delivery Network) joukko palvelimia, jotka on optimoitu palauttamaan staattisia tiedostoja läheltä ja nopeasti sivuasi käyttävällä selaimella on kirjasto ehkä jo välimuistissa eikä sitä jouduta lainkaan lataamaan Lähimmästä CDN:stä haku: jätetään osoitteesta "http: " pois varmistuksena se tulee löytyä myös paikallisesti oman sivusi resursseista nouda omaan js-kansioosi täältä: http://jquery.com/download/ <body>... <! - CDN:stä noutaminen --> <script src= //code.jquery.com/jquery-2.2.3.min.js"></script> <! - paikallinen varmistus --> <script>window.jquery document.write('<script src="js/jquery-2.2.3.js"><\/script>') </body> 13
Ensimmäinen jquery esimerkki o Tuttu kauppalista 1. valitaan kolme ensimmäistä listan riviä 2. piilotetaan ne näkyvistä 3. tuodaan ne näkyviin 3.5 sekunnin kuluessa 4. valitaan kaikki rivit 5. liitetään niille click-tapahtuman kuuntelijat 6. rivin napsautus poistaa rivin o jqueryä hyödyntävä toteutus: 4. $('li:lt(3)').hide().fadein(3500); $('li').on('click', function() { }) 1. 2. 3. $(this).remove(); 6. 5. 14