Zajęcia 6

Materiały do warsztatów technologii webowych prowadzonych na Wydziale Matematyki i Informatyki Uniwersytetu im. Adama Mickiewicza w Poznaniu.
Wróć do spisu materiałów Tu będziemy testować kod źródłowy

6. API HTML5

Interfejs użytkownika pozwala na interakcję człowieka z programem. Natomiast interfejs programowania aplikacji (ang. Application Programming Interface - API) umożliwia wzajemną komunikację programom, na przykład skryptom.

W tej lekcji poznamy pewne API JavaScript w HTML5 zapewniające dostęp do innych funkcji przeglądarki.

6.1. Wykrywanie funkcji

Kiedy tworzymy kod wykorzystujący API HTML5, może wystąpić konieczność sprawdzenia, czy przeglądarka użytkownika obsługuje daną funkcję, zanim kod będzie próbował jej użyć.

Istnieje biblioteka o nazwie Modernizr, która zajmuje się niwelowaniem różnic między przeglądarkami i pozwala na  sprawdzenie, czy przeglądarka obsługuje daną funkcję.

Do pobrania na stronie modernizr.com.

Pobierz archiwum API.

Przykład 6.1.1.

if (Modernizr.geolocation) {
	// geolokalizacja jest obsługiwana
} else {
	// geolokalizacja nie jest obsługiwana
}

6.2. Geolokalizacja

Obsługa geolokalizacji na stronie internetowej wymaga użycia trzech obiektów. W poniższych tabelach widzimy, jak dokumentacja API zwykle opisuje dostępne obiekty, metody i właściwości.

Obiekt geolocation:

Obiekt ten jest wykorzystywany w celu żądania danych dotyczących położenia użytkownika. Jest to obiekt potomny obiektu navigator.

Metoda getCurrentPosition(success, fail) żąda informacji o położeniu geograficznym użytkownika. Jeżeli użytkownik zgodzi się na ich udostępnienie, to wartością zwrotną będą współrzędne geograficzne oraz inne informacje. Parametr success to nazwa funkcji wywoływanej po otrzymaniu współrzędnych geograficznych, natomiast fail to nazwa funkcji wywoływanej, jeśli współrzędne geograficzne nie zostaną otrzymane.

Obiekt Position:

Jeżeli użytkownik zgodzi się na udostępnienie informacji o swoim położeniu geograficznym, obiekt ten będzie przekazany funkcji wywołania zwrotnego. Zawiera on też obiekt potomny coords, którego właściwości przechowują o położeniu użytkownika:

  • Position.coords.latitude - szerokość geograficzna wyrażona w stopniach;
  • Position.coords.longitude - długość geograficzna wyrażona w stopniach;
  • Position.coords.accuracy - wyrażona w metrach dokładność współrzędnych geograficznych;
  • Position.coords.altitude - metry nad poziomem morza;
  • Position.coords.altitudeAccuracy - wyrażona w metrach dokładność podczas podawania wysokości;
  • Position.coords.heading - liczba stopni odchylenia od kierunku północnego;
  • Position.coords.speed - wyrażona w metrach na sekundę szybkość poruszania się;
  • Position.coords.timestamp - czas, który upłynął od chwili utworzenia obiektu (sformatowany jako obiekt Date).

Obiekt PositionError:

Jeżeli nie uda się uzyskać informacji o położeniu geograficznym użytkownika, funkcja wywołania zwrotnego otrzyma ten obiekt. Przyjmuje on właściwości:

  • PositionError.code - numer błędu (1 - brak uprawnień; 2 - dane niedostępne; 3 - przekroczenie czasu oczekiwania);
  • PositionError.message - komunikat (nieprzeznaczony dla użytkownika końcowego).

Przykład 6.2.1.

var elMap = document.getElementById('loc');                 // Element HTML.
var msg = 'Przepraszamy, nie udało się ustalić Twojego położenia.';    // Komunikat o braku danych dotyczących położenia.

if (Modernizr.geolocation) {                                // Czy geolokalizacja jest obsługiwana?
  navigator.geolocation.getCurrentPosition(success, fail);  // Pytanie o zgodę na użycie informacji.
  elMap.textContent = 'Sprawdzanie położenia...';           // Komunikat informujący o sprawdzeniu położenia....
} else {                                                    // Brak obsługi geolokalizacji.
  elMap.textContent = msg;                                  // Wyświetlenie komunikatu.
}

function success(location) {                                // Otrzymano dane o położeniu użytkownika.
  msg = '<h3>Długość geograficzna:<br>';                    // Utworzenie komunikatu.
  msg += location.coords.longitude + '</h3>';               // Dodanie długości geograficznej.
  msg += '<h3>Szerokość geograficzna:<br>';                 // Utworzenie komunikatu.
  msg += location.coords.latitude + '</h3>';                // Dodanie szerokości geograficznej.
  elMap.innerHTML = msg;                                    // Wyświetlenie współrzędnych geograficznych.
}

function fail(msg) {                                        // Nie otrzymano danych o położeniu.
  elMap.textContent = msg;                                  // Wyświetlenie komunikatu.
  console.log(msg.code);                                    // Wyświetlenie kodu komunikatu.
}

6.3. Magazyn lokalny przeglądarki

Mechanizm Web Storage pozwala na przechowywanie danych w przeglądarce internetowej. Istnieją dwa rodzaje tego mechanizmu: lokalny i sesji.

Dane są przechowywane w postaci właściwości obiektów pamięci masowej (par klucz-wartość). Wartość w parze jest zawsze ciągiem tekstowym. Aby chronić informacje przechowywane przez witryny we wspomnianych obiektach przeglądarki stosują politykę tego samego źródła. Oznacza to, że dostęp do danych mają jedynie strony znajdujące się w tej samej domenie.

Weźmy następującą stronę: http://www.google.pl:80:

  • http:// - protokół - WebStorage dostępne tylko w obrębie danego protokołu;
  • www - subdomena - też musi być dopasowana;
  • google.pl - domena;
  • :80 - port - jego numer najczęściej nie jest podawany w adresie URL, a witryna internetowa używa portu 80 dla stron (numer portu może się zmieniać).

Magazyn lokalny pozwala na przechowywanie informacji nawet po zamknięciu karty czy okna.

Dla obu rodzajów magazynów mamy te same metody i właściwości:

  • setItem(klucz, wartość) - utworzenie nowej pary klucz-wartość;
  • getItem(klucz) - pobranie wartości wskazanego klucza;
  • removeItem(klucz) - usunięcie pary klucz-wartość dla wskazanego klucza;
  • clear() - usunięcie wszystkich informacji z magazynu;
  • length - liczba kluczy.

Przykład 6.3.1.

if (Modernizr.localstorage) {

  var txtUsername = document.getElementById('username'); // Pobranie elementów formularza.
  var txtAnswer = document.getElementById('answer');

  txtUsername.value = localStorage.getItem('username');  // Wartości elementów są
  txtAnswer.value = localStorage.getItem('answer');      // pobrane z obiektu localStorage.

  txtUsername.addEventListener('input', function () {    // Dane zostały zapisane.
    localStorage.setItem('username', txtUsername.value);
  }, false);

  txtAnswer.addEventListener('input', function () {      // Dane zostały zapisane.
    localStorage.setItem('answer', txtAnswer.value);
  }, false);
}

6.4. Magazyn sesji przeglądarki

Dane przechowywane w tym magazynie są dostępne w danej sesji strony.

Przykład 6.3.2.

if (Modernizr.sessionstorage) {

  var txtUsername = document.getElementById('username'),  // Pobranie elementów formularza.
      txtAnswer = document.getElementById('answer');

  txtUsername.value = sessionStorage.getItem('username'); // Wartości elementów są
  txtAnswer.value = sessionStorage.getItem('answer');     // pobrane z obiektu sessionStorage.

  txtUsername.addEventListener('input', function () {     // Dane zostały zapisane.
    sessionStorage.setItem('username', txtUsername.value);
  }, false);

  txtAnswer.addEventListener('input', function () {       // Dane zostały zapisane.
    sessionStorage.setItem('answer', txtAnswer.value);
  }, false);
}

Ćwiczenie 6.

Przygotuj stronę internetową, która będzie:

  • pobierać informację o położeniu geograficznym użytkownika;
  • wyświetlać informację o współrzędnych geograficznych położenia użytkownika oraz dokładność tych pomiarów;
  • pobraną informację o długości geograficznej zapisywać w  localStorage;
  • pobraną informację o szerokości geograficznej zapisywać w sessionStorage;
  • miała przycisk “Usuń dane z WebStorage”;
  • na kliknięcie powyżej wspomnianego przycisku usunie dane z localStorage i sessionStorage;
  • odporna na sytuację, kiedy użytkownik nie wyrazi zgody na pobranie informacji o położeniu geograficznym.

Rozwiązanie wyślij na repozytorium Githuba do katalogu Lesson_06. Skrypt z rozwiązaniem nazwij exercise_6.js, kod strony exercise_6.html.

Zadania domowe

Zadanie 1.

Przygotuj stronę, która pobierze od użytkownika jego położenie geograficzne. Na stronie powinna zostać wyświetlona informacja o strefie czasowej (dla Poznania powinniśmy mieć - UTC +01:00 - nie rozróżniamy czasu letniego i zimowego - pomocna może się okazać mapa).

Następnie informacja o strefie czasowej powinna być zapisana w localStorage.

Na podstawie wyznaczonej strefy czasowej należy też podać godzinę, która jest w strefie czasowej UTC 00:00 w momencie wyznaczenia strefy.

Na stronie powinien znaleźć się też formularz pobierający informacje o użytkowniku takie jak: imię, nazwisko, płeć, rok urodzenia, miasto zamieszkania i na wciśnięciu przycisku do zapisania informacji, informacje te powinny być zapisane w sessionStorage.

Użytkownik może zmodyfikować dane w formularzu, więc dane te powinny być też uaktualniane w sessionStorage.

Strona powinna być odporna na sytuację, kiedy użytkownik nie wyrazi zgody na pobranie informacji o położeniu geograficznym.

Rozwiązanie wyślij na repozytorium Githuba do katalogu Lesson_06. Skrypt z rozwiązaniem nazwij homework_task_01.js, kod strony homework_task_01.html.

Zadanie 2.

Rozwiąż quiz dostepny na classmarker.com o nazwie Zajęcia 6 - API HTML5.

Źródła

  • Duckett Jon, JavaScript and JQuery: Interactive Front-End Web Development, przeł. Robert Górczyński, Helion, 2015, ISBN 978-83-283-0126-9.