Embed Size (px)
Citation preview
Föreläsning 8ME152A
Document Object Model
Föreläsning 8
• setTimeout(function, delay) - anropar en funktion en
gång efter en bestämd tid (i millisekunder) • setInterval(function, delay) - anropar en funktion flera
gånger med en fördröjning mellan varje anrop (i millisekunder) • clearInterval(interval) - avbryter ett interval
1000 millisekunder = 1 sekund
Föreläsning 8
// <button type="button" id="start">Start</button>
var startButton = document.getElementById("start");
// Lägg till ett klick-event startButton.addEventListener("click", function() { // Kör vår funktion efter 1 sekund (1000ms) setTimeout(function() { // Ändra bakgrundsfärgen på vår <body> document.body.style.background = "red"; }, 1000); });
Föreläsning 8
// Alternativ
var startButton = document.getElementById("start");
function setBodyBackground() { document.body.style.background = "red"; }
function startButtonClick() { setTimeout(setBodyBackground, 1000); }
startButton.addEventListener("click", startButtonClick);
Föreläsning 8
Att skicka med anonyma funktioner är väldigt vanligt
// Skapa en funktion först function startButtonClick() { // ... }
startButton.addEventListener("click", startButtonClick);
// Eller skicka med en anonym funktion startButton.addEventListener("click", function() { // ... });
Föreläsning 8
// <button type="button" id="start">Start</button> // <button type="button" id="stop">Start</button>
var startButton = document.getElementById("start"); var stopButton = document.getElementById("stop");
// Vi gör vårt intervall globalt för att kunna // komma åt detta i en annan funktion också var interval;
startButton.addEventListener("click", function() { // Skapa vårt intervall interval = setInterval(function() { console.log("Hello!"); }, 1000); });
stopButton.addEventListener("click", function() { // Radera vårt intervall // Om vi inte gör detta tar det aldrig slut clearInterval(interval); });
Webbtjänster
Föreläsning 8
• En tjänst som tillhandahålls via webben • Ett API är det protokoll (regler) som måste följas för att
kunna kommunicera med en webbtjänst • Tanken är att webbtjänster ska kunna fungera enskilt
och därmed kan vi användare kombinera dessa för att
skapa en ny tjänst (dvs. en mashup)
Föreläsning 8
Termen API (Application Programming Interface) är väldigt
bred och har många tillämpningsområden
function Event(city, date) { // ... }
Event.prototype.getCity = function() { // ... };
Event.prototype.getTime = function() { // ... };
// Skapa ett event var event = new Event("Malmö", new Date());
event.getCity();
Kod
Webbtjänster - API
Föreläsning 8
• Utbyte av information sker i form av ett dataformat,
exempelvis JSON (JavaScript Object Notation) • Vi använder en/flera URL för att hämta/skicka information • Det finns ingen standard gällande för hur en webbtjänst
ska designas (dvs. hur kommunikationen ska ske) och
därför skiljer sig detta väldigt mycket. Det är därför viktigt
att läsa igenom respektive webbtjänsts dokumentation
JavaScript Object Notation (JSON)
Föreläsning 8
• Populärt dataformat för webben • Grundat på JavaScript och är därför perfekt i kombination
med JavaScript • Ser ut och fungerar exakt som ett vanligt objekt i JavaScript
JSON (exempel)
Föreläsning 8
Föreläsning 8
URL som API
Föreläsning 8
• En URL består av två delar, adressen och de parametrar vi skickar med • Dessa delar separeras med ett “?” och parametrar separeras med “&”
T.ex genom spotifys API
https://api.spotify.com/v1/search?type=album&query=rihanna
• Adress: https://api.spotify.com/v1/search • Parametrar
• type=album • query=rihanna
Exempel
Föreläsning 8
https://api.spotify.com/v1/search?type=album&query=rihanna
http://www.omdbapi.com/?t=fury&y=&plot=short&r=json
http://www.omdbapi.com/
https://developer.spotify.com/web-api/
Webbtjänst -> URL -> JavaScriptFöreläsning 8
// Det objekt som hanterar kommunikationen var req = new XMLHttpRequest();
// Vad ska vi göra när vi fått ett svar? req.addEventListener("load", function() { // "this" innehåller svaret på vår förfrågan // Eftersom dataformat kommer som en sträng // konverterar vi den till ett objekt med en // inbyggd funktion var response = JSON.parse(this.responseText); console.log(response); });
// Ange om vi ska hämta/skicka och till vilken URL req.open("get", "http://www.omdbapi.com/?t=batman&plot=short&r=json", true); req.send();
Föreläsning 8
// <button id="start" type="button">Start</button> var startButton = document.getElementById("start");
var req = new XMLHttpRequest();
// Vad ska vi göra när vi fått ett svar? req.addEventListener("load", function() { var response = JSON.parse(this.responseText); console.log(response); });
// Skicka förfrågan när vi klickar på vår knapp startButton.addEventListener("click", function() { req.open("get", "...", true); req.send(); });
Föreläsning 8
Hämta värden från ett formulär
// <button id="start" type="button">Start</button> var startButton = document.getElementById("start");
// <input type="text" id="title"> var titleField = document.getElementById("title");
startButton.addEventListener("click", function() { // Attributet "value" innehåller värdet för fältet var title = titleField.value; console.log(title); });
