Wybrane działy Informatyki Stosowanej Aplikacje WWW. Statyczne oraz dynamiczne strony WWW. Skrypty po stronie klienta. dr hab. inż. Andrzej Czerepicki a.czerepicki@wt.pw.edu.pl http://www2.wt.pw.edu.pl/~a.czerepicki
Aplikacje WWW Format HTML oferuje możliwości tworzenia statycznych stron WWW Statyczna strona WWW nie zmienia swojego wyglądu niezależnie od liczby wywołań Dynamiczna strona WWW jest każdorazowo generowana w odpowiedzi na żądanie użytkownika na podstawie szablonu Dynamiczne strony są generowane przez aplikacje WWW 2
Charakterystyki współczesnych aplikacji WWW Szybkie działanie Urozmaicony interfejs użytkownika Efektywne wykorzystanie baz danych Komunikacja w trybie online Asynchroniczna aktualizacja danych na stronie Minimalizacja obciążenia serwera Łatwy w obsłudze, stabilny oraz czytelny kod aplikacji Etc. 3
Koncepcja aplikacji WWW Aplikacja WWW - zbiór dynamicznych stron WWW stanowiący logiczną całość http://wazniak.mimuw.edu.pl/index.php?title=zaawansowane_aplikacje_internetowe 4
Metody dynamicznego generowania treści dokumentu HTML Plik szablonu <wstawki kodu> Aplikacja w postaci modułu wykonywalnego Dane obliczone w momencie obsługi żądania HTTP Generowanie HTML w locie Plik HTML Plik HTML Kod wykonywalny jest osadzony w pliku HTML Instrukcje tworzenia pliku HTML są osadzone 5 w kodzie programu
Klasyfikacja aplikacji WWW HTML HTML Web Services JavaScript HTTP CGI SSI Aplety i wtyczki JSP Servlets Przeglądarka WWW Serwer WWW Client-side scripts 6 Server-side scripts
Strona wykonania kodu programowego (skryptu) Kod wykonywany po stronie klienta (ang. Client-side script) Przeglądarka => kod => przeglądarka Kod wykonywany po stronie serwera (ang. Server-side script) Przeglądarka => serwer => kod => serwer => przeglądarka 7
Kod wykonywany po stronie klienta Pozwala na łatwą interakcję z użytkownikiem Nie obciąża serwera zbędną robotą (np. sprawdzenie czy dane zostały wprowadzone, proste animacje, nawigacja etc.) Zwiększa możliwości przeglądarki WWW (m. innymi w zakresie grafiki) Ma otwarty kod źródłowy więc nie może być stosowany do wykonania funkcji związanych z przetwarzaniem poufnych danych Może mieć problem odmiennej interpretacji na różnych przeglądarkach Może wymagać instalacji u klienta dodatkowych bibliotek 8
Kod wykonywany po stronie serwera Zalety: uniwersalność Można generować dowolną treść HTML Ukrycie szczegółów realizacji aplikacji przez klientem Wysoki poziom bezpieczeństwa Możliwość obsługi bazy danych Nie zależy od platformy użytkownika Wady: złożoność Wymagana umiejętność programowania Obciążenie serwera przy wielu równoległych połączeniach Złożona architektura 9
Technologie tworzenia aplikacji WWW Kod wykonywany po stronie klienta (w przeglądarce) Kod wykonywany po stronie serwera (na serwerze WWW) HTML Strony dynamiczne (Java Server Pages) Aplety (wtyczki) Serwlety (aplikacje) WebServices (usługi) Skrypty (JavaScript) CGI SSI 10
Aplety (client-side) Aplet program uruchamiany w przeglądarce WWW Może posiadać GUI, obsługiwać mysz oraz klawiaturę Jet dystrybuowany w postaci skompilowanej (kod źródłowy nie jest dostępny dla użytkownika) Szybkie wykonanie, zaawansowane możliwości w porównaniu z HTML Kwestie bezpieczeństwa oraz kompatybilności Przykłady: Aplety Java, Adobe Flash, Microsoft Silverlight, C++/ActiveX, etc. 11
Architektura apletów Java Aplet Wirtualny dysk Wirtualna pamięć JRE Wirtualny procesor Przeglądarka WWW Komputer klienta Środowisko uruchomieniowe
Kompilacja Kompilacja apletu Java Aplet kompiluje się do postaci kodu binarnego Kod binarny jest umieszczany na serwerze WWW Przeglądarka WWW pobiera plik apletu przy pierwszym wyświetleniu strony Aplet.java Aplet.class Strona WWW
Osadzanie apletu w kodzie HTML Znacznik <applet> lub <object> code codebase width height name align vspace hspace Nazwa klasy apletu (rozszerzenie *.class) Lokalizacja sieciowa (URL) plików *.class Szerokość okna apletu Wysokość okna apletu Nazwa apletu Wyrównanie apletu Odstęp w pionie od innych elementów na stronie Odstęp w poziomie od innych elementów na stronie
Przekazanie parametrów Do apletu można przekazać dowolne parametry, wartości których mogą być zapisane w postaci tekstowej <APPLET codebase= > <param name= nazwa1 value= wartość1 /> <param name= nazwa2 value= wartość2 /> </APPLET>
Odczyt parametrów przez aplet Odczyt parametru odbywa się za pomocą funkcji getparameter( nazwa parametru ) która zwraca wartość typu String String imie = getparameter("imie") W razie konieczności przechowania danych innego typu, należy zadbać o konwersję typów
Adobe Flash Technologia tworzenia animacji w postaci grafiki wektorowej z elementami programowania Przegląd Animacja.swf Przeglądarka WWW Programowanie interakcji Instalacja na komputerze klienta Action Script Flash Player Wtyczka 17
Microsoft SilverLight Odpowiedź Microsoft na technologię Flash Koncepcja RIA (ang. Rich Internet Application) Wsparcie OS Windows XP / Vista / Windows 8 / 10 Platforma Windows Phone Wsparcie sprzętowej akceleracji komputerowej grafiki oraz multimediów Na rok 2021 zapowiedziany jest koniec wsparcia technologii ;( 18
Charakterystyka technologii apletów ( wtyczek ) Wprowadzenie do aplikacji WWW cech interfejsu GUI na wzór aplikacji desktopowych Zaawansowane możliwości graficzne Zabezpieczony kod źródłowy (kompilacja) Dostęp do zasobów na komputerze użytkownika Niebezpieczeństwo nadużycia uprawnień Konieczność instalacji środowiska uruchomieniowego Problemy kompatybilności przeglądarek 19
JavaScript JS język skryptowy wykorzystujący składnię języka Java (poza tym ma niewiele wspólnego z Javą) Przeznaczenie: głównie kod wykonywany po stronie klienta (w przeglądarce WWW): Walidacja wartości wprowadzonych przez użytkownika Komunikaty, podpowiedzi Interaktywne menu Etc. Język interpretowany Dynamiczne typy danych Istnieje możliwość uruchomienia na serwerze WWW w celu napisania aplikacji dynamicznych 20
Zastosowanie JavaScript Strony WWW Walidacja wprowadzanych danych po stronie użytkownika Realizacja efektów wizualnych Office JavaScript Aplikacje samodzielne Aplikacje serwerowe Rhino (Google) SpiderMonkey (Mozilla) node.js Aplikacje graficzne Widgety 21
Osadzenie JS w kodzie HTML W dowolnym miejscu pliku HTML <script> function X() { }; </script> Jako zewnętrzny załącznik (możliwe jest wykorzystanie w wielu plikach HTML) <script src="przyklad.js"></script> 22
Oddziaływanie na elementy HTML id="akapit" Element HTML Kod JavaScript <script> var x = document.getelementbyid("akapit"); x.innerhtml = "Witam!"; x.style = "color: red"; x.style.fontsize = "24px"; </script> 23
Metody wyprowadzania danych Komunikat w przeglądarce window.alert("pozdrawiam!") Podmiana treści elementu HTML element.innerhtml = "nowa wartość" Generowanie treści dokumentu HTML document.write("<h1>przykład JS</h1>") 24
Funkcje JS Funkcja JS jest fragmentem kodu o określonej nazwie function X() {. } Funkcje mogą posiadać argumenty oraz zwracać wartość function Y(a, b) { } return a * b; Funkcje mogą być wywoływane przez zdarzenia 25
Zdarzenia w HTML Zdarzenie (event) zmiana stanu dokumentu HTML lub jego elementu spowodowana: Interakcją z użytkownikiem (np. kliknięcie przycisku, zmiana wartości pola tekstowego, etc.) Ukończeniem wykonania operacji (np. ładowanie dokumentu) W odpowiedzi na zdarzenie, JS może: Wykonać określoną czynność bezpośrednio w miejscu obsługi zdarzenia Wywołać funkcję obsługi (najczęściej) 26
Przykład obsługi zdarzenia Przycisk zdarzenie onclick Kod JavaScript function Test() { } <input type="button" value="naciśnij tu" onclick="test()"/> <script> function Test() { window.alert("2x2=" + 2*2); } </script> 27
Typowe zdarzenia elementów HTML Element button select radio text Zdarzenie onclick onchange onchange onkeydown 28
Walidacja zawartości pola tekstowego za pomocą JS <input type="text" id="student"> <input type="submit" onclick="return walidacja()"> Jan Kowalski Wyślij function walidacja() { var stud = document.getelementbyid('student').value; if( stud.length == 0 ) { document.getelementbyid('blad').innerhtml = 'Pole jest wymagane!'; return false; } return true; } 29
Popularne biblioteki JavaScript Angular ReactJS Vue.js 30