J A V A S C R I P T ROZSZERZENIA I BIBLIOTEKI Waldemar Korłub Aplikacje i Usługi Internetowe KASK ETI Politechnika Gdańska
Dynamiczne strony Dynamika po stronie klienta przeglądarki Modyfikowanie treści, struktury, wyglądu dokumentu HTML już po jego załadowaniu w przeglądarce n Bez komunikacji z serwerem JavaScript Dynamika po stronie serwera Generowanie dokumentu HTML przez aplikację działającą po stronie serwera n Zamiast serwowania statycznego pliku HTML Serwowanie różnych treści, np. w zależności od: n Użytkownika: Masz 2 nowe zaproszenia n Dnia: Pogoda na dziś: PHP, Ruby on Rails, Python, ASP.NET MVC, Java ServerFaces
Dynamiczne strony Asynchroniczna komunikacja z serwerem Wykorzystanie dynamiki w przeglądarce do pobrania nowych treści z serwera, który może generować je dynamicznie Bez przeładowywania całej strony AJAX
AJAX Asynchronous JavaScript and XML Asynchroniczne pobieranie danych z serwera już po załadowaniu strony do przeglądarki Zamiast przeładowywać całą stronę, pobierany jest jedynie jej fragment, który zostaje wyświetlony w przeglądarce przy użyciu API DOM Powszechnie wykorzystywany na stronach internetowych (np. Moja PG, enauczanie) Różnice w API pomiędzy przeglądarkami Przykład przy okazji biblioteki jquery
Żądania synchroniczne bez AJAXa Przeglądarka Kompletny dokument HTML Kompletny dokument HTML aktywność użytkownika żądanie HTTP oczekiwanie na załadowanie strony aktywność użytkownika żądanie HTTP oczekiwanie na załadowanie strony aktywność użytkownika odpowiedź HTTP odpowiedź HTTP Serwer przetwarzanie żądania przetwarzanie żądania
Żądania asynchroniczne: AJAX Przeglądarka aktywność użytkownika żądanie HTTP aktualizacja fragmentu strony z użyciem API DOM odpowiedź HTTP żądanie HTTP aktualizacja fragmentu strony odpowiedź HTTP Serwer przetwarzanie żądania przetwarzanie żądania
7 DOM: Document Object Model
DOM: Document Object Model DOM Obiektowy model dokumentu W postaci drzewa elementów API DOM zestaw interfejsów do operowania na drzewie dokumentu Pozwala na wyszukiwanie elementów dokumentu, ich modyfikację, usuwanie i dodawanie nowych
Wyszukiwanie elementów var divs = document.getelementsbytagname('div'); var age_inputs = document.getelementsbyname('age'); var posts = document.getelementsbyclassname('post'); //pojedynczy element: var header = document.getelementbyid('header'); //pojedynczy element: var post_title = document.queryselector('div#body div.post h1'); //zbiór elementów: var titles = document.queryselectorall('div#body div.post h1');
Usuwanie elementów //wyszukanie elementu do usunięcia: var header = document.getelementbyid('header'); //usunięcie elementu: header.parentnode.removechild(header);
Dodawanie elementów //nowy element <div>: var div = document.createelement('div'); //nowy element tekstowy: var text = document.createtextnode('abc'); //dodanie elementu tekstowego do elementu <div> div.appendchild(text); //dodanie elementu <div> do dokumentu document.body.appendchild(div);
Demo DOM Przykład 03-dom Narzędzia deweloperskie Drzewo dokumentu Debugger języka JavaScript
13 Web Storage API (HTML5)
Web Storage API (HTML5) Pozwala na zapisywanie danych po stronie przeglądarki Dane postaci: klucz (string) à wartość (string) Konieczność serializacji wszystkich przechowywanych wartości do postaci tekstowej Local Storage Dane utrzymywane pomiędzy kolejnymi uruchomieniami przeglądarki Session Storage Dane niszczone w chwili zamknięcia okna przeglądarki
Local storage function count_clicks() { if (localstorage.clickcount) { localstorage.click_count = Number(localStorage.click_count) + 1; } else { localstorage.click_count = 1; } var div = document.getelementbyid("result"); } div.innerhtml = "Licznik kliknięć: " + localstorage.click_count;
Local storage //w pliku HTML: <div id="result" onclick="count_clicks();"> Licznik kliknięć </div> Przykład 04-web-storage
Obiekty w Web Storage var student = { 'imie': 'Imiesław', 'nazwisko': 'Nazwiskowy', 'nr_albumu': 99999, }; //zapisanie reprezentacji tekstowej localstorage.student = JSON.stringify(student); //odczytanie danych i konwersja na obiekt var object = JSON.parse(localStorage.student); console.log(object.imie);
Usuwanie elementów //Local storage localstorage.removeitem("click_count"); //Session storage sessionstorage.removeitem("lastname");
19 Rozszerzenia i biblioteki
JavaScript 20 JavaScript nie jest idealnym językiem programowania Żaden język nie jest ale JavaScript wybitnie nie jest JavaScript był konstruowany z myślą o prostych zastosowaniach Brendan Eich miał opracować prototyp języka w ciągu 10 dni w maju 1995 roku JavaScript zaistniał na rynku, bo był jedynym językiem obsługiwanym przez przeglądarki JavaScript jest znany wielu deweloperom, bo nie mieli oni innego wyjścia
JavaScript 21 JavaScript nie posiada wielu mechanizmów przydatnych w dużych projektach Przestrzenie nazw/moduły na poziomie języka n Mogą być symulowane przy użyciu domknięć i anonimowych funkcji Klasy, interfejsy i związane z nimi mechanizmy obiektowe n Obiektowość oparta na koncepcji prototypów, dziedziczenie po obiektach nie po klasach Poziomy dostępu do składowych prywatne, publiczne, chronione Silne typowanie Rosnąca złożoność aplikacji internetowych prowadzi do dużych systemów działających w środowisku przeglądarki internetowej
Jak naprawić JavaScript? 22 Sam język rozwija się powoli Kolejne wersje w różnym tempie są implementowane przez przeglądarki Sytuacja znacząco poprawiła się w ostatnich latach à kolejny slajd Chcąc zapewnić kompatybilność należy wybierać najmniejszy wspólny mianownik
Rynek przeglądarek 23 W przeszłości nowe wersje przeglądarek wydawane były raz na rok lub raz na kilka lat Internet Explorer: 8 2009; 9 2011; 10 2012; 11 2013 Długi cykl wydawniczy opóźnia wprowadzanie nowych specyfikacji Google zapoczątkowało trend wydawania nowych wersji tak często, że nikogo to już nie obchodzi Google Chrome: 1.0 2008; 55 2016 (6,9 wydania/rok) Inkrementalne zmiany, szybkie wprowadzanie nowych funkcji Automatyczne instalowanie aktualizacji (przezroczyste dla użytkownika) Inne przeglądarki podążają za tym trendem: Firefox 50, Opera 42, Edge 14
Jak naprawić JavaScript? 24 Biblioteki 3rd party Biblioteki zewnętrznych deweloperów, nie stanowią części samego języka Rozwiązują typowe problemy występujące w codziennej pracy Oferują gotowe komponenty do zastosowania na stronie n Podobnie jak biblioteki CSS takie, jak Bootstrap Bibliotek 3rd party dla języka JavaScript nie brakuje
25 Biblioteki i rozszerzenia
Jak naprawić JavaScript? 26 JavaScript można naprawiać na wiele sposobów bo jest popsuty na wielu poziomach
Biblioteki narzędziowe 27 Dostarczają przydatne funkcje do realizacji typowych niewielkich zadań programistycznych np. Underscore.js, Lodash Operacja na kolekcjach _.each iterowanie _.map mapowanie wartości n _.map([1, 2, 3], function(num){ return num * 3; }); => [3, 6, 9] _.reduce redukcja kolekcji do wartości skalarnej n var sum = _.reduce([1, 2, 3], function(memo, num){ return memo + num; }, 0); _.contains([1, 2, 3], 3); - wyszukiwanie
Biblioteki narzędziowe 28 Operacja na tablicach _.flatten([1, [2], [3, [[4]]]]); => [1, 2, 3, 4]; _.intersection([1, 2, 3], [101, 2, 1, 10], [2, 1]); => [1, 2] _.difference([1, 2, 3, 4, 5], [5, 2, 10]); => [1, 3, 4] _.uniq([1, 2, 1, 4, 1, 3]); => [1, 2, 4, 3]
Biblioteki bazowe/ 29 Operacje na modelu DOM Ukrywają różnice pomiędzy przeglądarkami Dostarczają spójne API do realizacji typowych operacji na drzewie dokumentu Przydatne do modyfikacji stylów CSS, obsługi zdarzeń, animacji, obsługi AJAXa Nie oferują mechanizmów do organizacji struktury kodu aplikacji np. jquery, mootools, prototype
Biblioteki widgetów 30 Dostarczają gotowe komponenty (wraz z zachowaniami) do wykorzystania w interfejsie aplikacji np. jquery UI, dojo toolkit, PrimeNG http://jqueryui.com/demos/ https://dojotoolkit.org/documentation/#widgets http://www.primefaces.org/primeng/#/
Biblioteki MV* 31 Dostarczają mechanizmy do organizacji struktury aplikacji i zarządzania przepływem sterowania Umożliwiają modularyzację, wydzielenie komponentów np. Angular, Backbone.js, ember
MVC: Model View Controller Wzorzec architektoniczny modelujący przepływ sterowania w interfejsie użytkownika Oryginalnie zaproponowany przez Trygve Reenskaug w latach 70. dla graficznych interfejsów użytkownika Dzieli kod aplikacji na trzy części w celu oddzielenia wewnętrznych reprezentacji danych od sposobu, w jaki są one przedstawiane użytkownikowi
MVC wykorzystuje Controller manipuluje Użytkownik Model jest prezentowany View aktualizuje
MVC Kontroler aktualizuje model danych w odpowiedzi na akcje użytkownika podejmowane w interfejsie Model danych reprezentuje dane, na których operuje aplikacja Widok generuje reprezentację danych widoczną dla użytkownika
MVC co z logiką biznesową? Wzorzec MVC modeluje interakcje z użytkownikiem nie logikę biznesową aplikacji Kontroler manipuluje modelem (widoku) Logika biznesowa często wymaga czegoś więcej Modyfikacja bazy danych Wywołanie zewnętrznej usługi (np. płatności) Modyfikacja innych obiektów w modelu danych (np. stany magazynowe)
Narzędzia do zarządzania 36 zależnościami Zewnętrzne biblioteki mogą posiadać zależności Wymagają innych bibliotek do prawidłowego działania Te inne biblioteki mogą mieć własne zależności itd. Ręczne zarządzanie zależnościami i ich aktualizowanie jest trudne i podatne na błędy Zaniechanie aktualizowania zależności może otworzyć luki bezpieczeństwa w aplikacji Narzędzia takie jak bower i npm zarządzają zależnościami w sposób automatyczny
Frameworki full stack 37 Framework łączy wiele bibliotek i narzędzi tworząc pojedynczą spójną platformę do budowania aplikacji np. Ext JS
Biblioteki polyfill 38 Emulują nowe API języka JavaScript w starszych przeglądarkach, które tych API nie obsługują Niektóre biblioteki tego typu nadpisują wadliwe implementacje API w przeglądarkach Modernizr Biblioteka wykrywające funkcjonalności oferowane przez przeglądarkę Ładuje biblioteki typu polyfill, jeśli nie wykryje obsługi wymaganych API
Biblioteki do testowania jednostkowego 39 Testy jednostkowe Zautomatyzowane testy badające poprawność działania poszczególnych komponentów w separacji od pozostałych elementów aplikacji Nie wymagają klikania w przeglądarce przez człowieka-testera Umożliwiają wykrywanie regresji w oprogramowaniu np. Mocha, Jasmine
40 jquery
https://w3techs.com/technologies/overview/javascript_library/all 41
jquery 42 Ujednolicone API dla wszystkich przeglądarek Ukrywa różnice pomiędzy rozwiązaniami różnych producentów Ułatwia pracę z modelem DOM dokumentu Ułatwia wykorzystywanie animacji Ułatwia obsługę zdarzeń Ułatwia obsługę technologii AJAX
Selektory 43 Pozwalają wybierać grupy elementów z drzewa DOM Opierają się na selektorach z CSS 1-3
Selektory 44 <div id="maindiv"> <div> Wewnętrzny div </div> <div class="poem-line"> Stylowy div </div> <div> <p title="tytuł">pierwszy akapit</p> <p>drugi akapit</p> <p>trzeci akapit</p> </div> </div>
45 Selektory
46 Selektory
47 Selektory
48 Selektory
Łańcuchy komend 49 <div id="maindiv"> <p> Litwo! Ojczyzno moja! ty jesteś jak zdrowie. <span style="display: none">komentarz 1</span></p> <p> Ile cię trzeba cenić, ten tylko się dowie, <span style="display: none">komentarz 2</span> </p> </div> $("#maindiv").addclass("poem-text").children("p").addclass("poem-line").children("span").addclass("poem-comment").toggle("fast");
Operacje na atrybutach i stylach 50.addClass(),.removeClass() oraz.toggleclass() dodawanie, usuwanie, przełączanie klas.css() dostęp do styli elementu.attr() dostęp do atrybutów.val() dostęp do wartości elementu (np. input).html() dostęp do treści elementu Umożliwia również zmianę zawartości
Trawersowanie drzewa DOM 51.add() dodaje zbiór elementów do zbioru bieżącego.children() wybiera dzieci każdego z elementów aktualnego zbioru.find(selektor) wybiera pasujących potomków każdego z elementów aktualnego zbioru.each() pozwala wywołać funkcje na każdym z elementów aktualnego zbioru
Obsługa zdarzeń 52 Zdarzenia na elementach dokumentu.focus().blur().change().click().keydown() /.keyup().mousemove()
Obsługa zdarzeń 53 Zdarzenia związane z załadowaniem drzewa DOM lub jego fragmentów: $(document).ready() n Po załadowaniu drzewa przed załadowaniem obrazków n Możliwość dodania wielu funkcji obsługi zdarzeń z różnych miejsc w aplikacji $(selektor).load() n Po załadowaniu elementu n Dopuszczalne elementy: Image, Script, Frame, Iframe, Window
Obsługa AJAXa 54 $.ajax() Wysyła asynchroniczne żądanie; umożliwia ustawienie wszystkich parametrów i typu żądania $.get() Wysyła żądanie metodą GET $.post() Wysyła żądanie metodą POST $(selektor).load(uri) Pobiera zawartość uri i umieszcza ją w elemencie wskazanym przez selektor
Plug-iny dla jquery 55 jquery.extend( { center: function($element) { $element.css("position", "relative"); var top = ($element.parent().height() - $element.height())/ 2-1; $element.css("top", top + "px"); var left = ($element.parent().width() - $element.width()) / 2; $element.css("left", left + "px"); } }); //$.center($(selektor)); jquery.fn.center = function () { jquery.center(this); return this; } //$(selektor).center() $("selektor1").load("uri").find("selektor2").center();
56 Poza językiem JavaScript
Inne języki w przeglądarce? 57 JavaScript jest jedynym językiem obsługiwanym powszechnie przez przeglądarki Istnieją rozwiązania umożliwiające implementację aplikacji w innych językach programowania Przed publikacją w Internecie są one tłumaczone na zrozumiały dla przeglądarek JavaScript n Transpilacja (w odróżnieniu od kompilacji) Przykładowe rozwiązania: GWT: Java à JavaScript (Google) CoffeScript à JavaScript Dart à JavaScript (Google) Kotlin à JavaScript (JetBrains) TypeScript à JavaScript (Microsoft)
58 Pytania?