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

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

Internet-pohjaisen oppimisympäristön laadinta. Luento 3

Lisätehtävät. Frantic 2015 sivu 1

Alkuun HTML5 peliohjelmoinnissa

HTML & CSS. HTML (HyperText Markup Language) Antti Koivisto. ! HTML on sivujen kuvauskieli.

Harjoitustyö 3: Verkkosivujen toiminnallisuus (JavaScript)

Digitaalisen median tekniikat. Luento 4: JavaScript

Järjestelmäarkkitehtuuri (TK081702)

XHTML - harjoitus. Tehtävä1: Tee xhtml tiedosto käyttäen notepad (muistio) ohjelmaa. Tiedoston tallennus notepad (muistio) ohjelmassa:

Ohjelmoinnin jatkokurssi, kurssikoe

Javascript 2: Ohjelmointikielen ominaisuudet. Jaana Holvikivi Metropolia

Ohjelmistotekniikan opinnäytetyö, 43 sivua

Oliosuunnitteluesimerkki: Yrityksen palkanlaskentajärjestelmä

SEPA REFAKTOROINTI Antti Ahvenlampi, 57408L Erik Hakala, 57509T

HTML5 video, audio, canvas. Mirja Jaakkola

Ohjelmoinnin perusteet Y Python

Harjoitustyö: virtuaalikone

Rasterikarttojen ja liiteaineistojen päivitysohje SpatialWeb5 Karttapaikka

HTML5 & CSS3 perusteet


Tekninen suunnitelma - StatbeatMOBILE

Harjoitustyö 3 - Millosemeni

AJAX-konsepti AJAX. Asynkronisuus. Nykyisten web-ohjelmien ongelmia. Asynchronous JavaScript And XML

Laiteriippumaton UI Ajaxilla ja Javalla

Hieman linkkejä: lyhyt ohje komentoriviohjelmointiin.

Tech Conference Visual Studio 2015, C#6,.NET4.6. Heikki Raatikainen. #TechConfFI

Ohjelmointikielet ja -paradigmat 5op. Markus Norrena

Vertailulauseet. Ehtolausekkeet. Vertailulauseet. Vertailulauseet. if-lauseke. if-lauseke. Javan perusteet 2004

JS-kehitys - yleiskuvaus. TIEA255 - Juho Vepsäläinen

Ohjelmoinnin perusteet Y Python

KADA (Drupal 7) migraatio uuteen (versioon) webiin

Copyright Observis Oy All rights reserved. Observis Oy Ville Kanerva, CTO Heikki Isotalus, COO Datasta tietoa

Settings-sivun kautta on mahdollista muokata Kirjastokarttapalveluun liittyviä kirjastokohtaisia asetuksia.

Digitaalisen median tekniikat Luento 1: Intro

Tehtävän V.1 ratkaisuehdotus Tietorakenteet, syksy 2003

Sukupuu -ohjelma. Ossi Väre ( ) Joni Virtanen ( )

Projektinhallintaa paikkatiedon avulla

JavaScript alkeet Esimerkkikoodeja moniste 3 (Metropolia 11/2011)

ELM GROUP 04. Teemu Laakso Henrik Talarmo

Bootstrap / HTDP2 / Realm of Racket. Vertailu

Ohjelmoinnin perusteet Y Python

ArcGIS.com. uusia tapoja jakaa paikkatietoa

API:Hack Tournee 2014

Kuva xhtml-sivulla. Mirja Jaakkola

opiskelun suunnittelujärjestelmä, kurki ja ilmo käyttävät kaikki samaa tietokantaa, ja uusi järjestelmä tulee osaksi tätä.

Harjoitustyö 3: Verkkosivujen toiminnallisuus (JavaScript)

Google Mapsin käyttö karttapalvelun toteutuksessa

Peltotuki Pron Lohkotietopankkimoduli tärkkelysperunalle

Harjoitustyö 5: 2D-animointi verkkosivuilla (HTML5 Canvas)

13/20: Kierrätys kannattaa koodaamisessakin

Skosmos 0.6 esittely. Osma Suominen ONKI-projektin laajennetun projektiryhmän kokous

Käyttöliittymien uusi sukupolvi Logicalla Rondo-tuotteessa

Rajapinta (interface)

Ohjelmoinnin peruskurssi Y1

(JavaScript) Aleksi O Connor DI Informaatioverkostot. Markku Laine Mediatekniikan laitos

HTML5 -elementit jatkuu

Ohjeita. Datan lukeminen

Suuli api dokumentaatio

XML prosessori. XML prosessointi. XML:n kirjoittaminen. Validoiva jäsennin. Tapahtumaohjattu käsittely. Tapahtumaohjattu käsittely.

Näin järjestän ohjelmointikurssin, vaikka en ole koskaan ohjelmoinut

Ylläpitodokumentti. Boa Open Access. Helsinki Ohjelmistotuotantoprojekti HELSINGIN YLIOPISTO Tietojenkäsittelytieteen laitos

Laskennallisen fysiikan esimerkkejä avoimesta tutkimuksesta Esa Räsänen Fysiikan laitos, Tampereen teknillinen yliopisto

Ohjelmoinnin perusteet Y Python

Laajuus 5 op Luennot: 12 x 2t Harjoitukset: 7 viikkoharjoitusta harjoitusten tekemiseen saatavissa apua 2 ryhmää / harjoitus

Ohjelmoinnin peruskurssien laaja oppimäärä

Ilmonet ja rajapinnat Pääkaupunkiseudun kansalais- ja työväenopistojen kurssit

Kirjaudu sisään palveluun klikkaamalla Omat kartat -painiketta.

7.4 Variability management

Contact Form 7 -lomakkeen yhdistäminen Timeline Manageriin

Digitaalisen median tekniikat. Luento 3: CSS

Projektityö ja pelikehitys

T Digitaalisen median työvälineet (3 op) ME-C2300 Verkkojulkaisemisen perusteet (5 op) Mediatekniikan laitos / Informaatioverkostot

Pong-peli, vaihe Aliohjelman tekeminen. Muilla kielillä: English Suomi. Tämä on Pong-pelin tutoriaalin osa 3/7. Tämän vaiheen aikana

Uudet ominaisuudet. Realise Your Vision

Valppaan asennus- ja käyttöohje

Solidity älysopimus ohjelmointi. Sopimus suuntautunut ohjelmointi

11. oppitunti III. Viittaukset. Osa. Mikä on viittaus?

7/20: Paketti kasassa ensimmäistä kertaa

Kylänetti projektin sivustojen käyttöohjeita Dokumentin versio 2.10 Historia : 1.0, 1.2, 1.6 Tero Liljamo / Deserthouse, päivitetty 25.8.

Käytettävyys verkko-opetuksessa Jussi Mantere

Kotisivuohjeet. Eteläpohjalaiset Kylät ry. Sivupohjien rakenne

Varmennepalvelu - testipenkki. Kansallisen tulorekisterin perustamishanke

17. Javan omat luokat 17.1

T Hypermediadokumentin laatiminen. Sisältö. Tavoitteet. Mitä on www-ohjelmointi? Arkkitehtuuri (yleisesti) Interaktiivisuuden keinot

Rich Web Applications in Server-side Java without Plug-ins or JavaScript

WWW-sivut HTML-kielellä esitettyä hypertekstiaineistoa

EMVHost Online SUBJECT: EMVHOST ONLINE CLIENT - AUTOMAATTISIIRROT COMPANY: EMVHost Online Client sovelluksen käyttöohje AUTHOR: DATE:

AUTODESK ACCOUNT -OHJE

Ohjeistus hankkeen sivujen tekemiseen julkaisujärjestelmällä

Tekninen suunnitelma - StatbeatMOBILE

Verkkosivut perinteisesti. Tanja Välisalo

TIEA341 Funktio-ohjelmointi 1, kevät 2008

IDL - proseduurit. ATK tähtitieteessä. IDL - proseduurit

Javan asennus ja ohjeita ongelmatilanteisiin

Luento 5. Timo Savola. 28. huhtikuuta 2006

HTML5 Tutkielma Centria ammattikorkeakoulu Paavo Räisänen

ATK tähtitieteessä. Osa 3 - IDL proseduurit ja rakenteet. 18. syyskuuta 2014

Visma Fivaldi. Ohjeet Java web startin ja HTML5-työkalun aktivointiin

TYPO3 - Open Source Enterprise CMS

edocker 3.3 Mitä uutta? edocker Tools InDesign -plugin edocker PUBLISH! edocker READ! edocker CREATE! edocker automaatio

Transkriptio:

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