JWT 2016 luento 11. to klo Aulikki Hyrskykari. PinniB Aulikki Hyrskykari

HTML
DOWNLOAD

Koko: px

Aloita esitys sivulta:

Download "JWT 2016 luento 11. to 21.4.2016 klo 14-15. Aulikki Hyrskykari. PinniB 1097. Aulikki Hyrskykari"

Risto Manninen
9 vuotta sitten
Katselukertoja:

1 JWT 2016 luento 11 to klo Aulikki Hyrskykari PinniB

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

2 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

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

4 Google Maps JavaScript API 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 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 tätä harjoitustyötä varten et välttämättä tarvitse avainta 4

Rajapinnan kuvaus o Reference-välilehti https://developers.google.

5 Rajapinnan kuvaus o Reference-välilehti 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

6 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: , lng: } 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 6

7 Tarvittava koodi <body> <! tähän elementiin tuodaan kartta, sen koko määritellään css:n kautta --> <div id = "kartta"></div>  <script src= " <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

8 Markkereiden lisääminen 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: , lng: }, zoom: 20 }); var nastanpaikka = {lat: , lng: }; } 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 " // mitä markkerissa lukee kun hiiri viedään sen }); // päälle 8

9 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

10 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

11 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

12 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 (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

13 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ä: <body>... <! - CDN:stä noutaminen --> <script src= //code.jquery.com/jquery min.js"></script> <! - paikallinen varmistus --> <script>window.jquery document.write('<script src="js/jquery 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.

14 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() { }) $(this).remove();

Samankaltaiset tiedostot

JWT 2017 luento 10. to klo Aulikki Hyrskykari. PinniB Aulikki Hyrskykari

JWT 2017 luento 10. to klo Aulikki Hyrskykari. PinniB Aulikki Hyrskykari JWT 2017 luento 10 to 20.4.2016 klo 12-14 Aulikki Hyrskykari PinniB 1096 1 Viime luennolla o Funktiot JavaScriptissä, callback, IIFE, sulkeumat ja Module pattern Tänään o AJAX (Asynchronous JavaScript