Radej Daniel - wymiana wiedzy

Radej Daniel, Pańczyk Beata
Rola JavaScript w tworzeniu warstw
aplikacji internetowych
1.
Wstęp
Twórcy witryn internetowych wykorzystują do prezentowania przekazywanych
treści wszystkie dostępne dla współczesnego sprzętu elektronicznego media – tekst,
dźwięk, grafikę i animowany obraz. Do przekazywania każdej formy prezentacji
informacji wykorzystywane są różne technologie o różnych możliwościach, a często
łączy się dwie lub więcej aby uatrakcyjnić wygląd i ułatwić odbiór treści
użytkownikowi witryny.
Do opisu struktury poszczególnych elementów i informacji zawartych na stronie
internetowej wykorzystywany jest język znaczników hipertekstu HTML (ang.
HyperText Markup Language). Język ten jest rozpoznawany przez wszystkie
współczesne
przeglądarki
internetowe
niezależnie
od
sprzętu,
czy
systemu
operacyjnego końcowego użytkownika.
Do opisu widoczności, położenia i wyglądu poszczególnych elementów zawartych
w dokumencie HTML wykorzystuje się kaskadowe arkusze stylów (ang. Cascading
Style Sheet, CSS). Współcześnie praktycznie każda strona internetowa składa się z co
najmniej tych dwóch technologii (HTML i CSS), umożliwiają one określenie wyglądu
i zawartości statycznej strony internetowej.
Duże witryny internetowe mogą składać się często z setek czy tysięcy podstron,
a treść na każdej z nich może ulegać znaczącym zmianom wielokrotnie w ciągu jednego
dnia; na potrzeby między innymi takich serwisów powstał język PHP (ang. Personal
- 1 / 11 -
Home Page) umożliwiający generowanie treści strony internetowej po stronie serwera
na bieżąco na podstawie akcji użytkownika aplikacji, bazy danych i reguł
zaprogramowanych przez twórcę aplikacji. Alternatywą dla PHP są komercyjne
rozwiązania takie jak JavaServer Pages (JSP), czy Active Server Pages (ASP).
W statycznej stronie internetowej aby zmienić strukturę, zawartość, bądź wygląd
dokumentu pobranego przez przeglądarkę konieczne jest ponowne pobranie go
z serwera (w niewielkim zakresie do zmiany widocznych treści można stosować
odpowiednio przygotowane arkusze stylów). Dlatego powstały tak zwane języki
skryptowe umożliwiające manipulowanie strukturą, treścią i wyglądem pobranego już
dokumentu, a nawet można pobierać nowe elementy i wstawiać je bezpośrednio we
właściwe miejsce w strukturze dokumentu bez konieczności ponownego pobrania
całego
dokumentu.
Najpopularniejszym
takim
językiem
wykorzystywanym
w dokumentach HTML jest JavaScript (z jego odmianą JScript – zaimplementowaną
w przeglądarce Internet Explorer od wersji 5.5 do 8 - według zapowiedzi Microsoftu
Internet Explorer 9 jest zgodny ze standardem JavaScript, jednakże w praktyce nadal
występują znaczące różnice zarówno w dostępnych funkcjach języka, zwracanych przez
nie wartościach, jak również w wydajności wykonywanych skryptów).
Niemal każda współczesna strona internetowa zawiera elementy graficzne
w postaci wyświetlanych obrazków, czy animacji. Przeglądarki internetowe obsługują
wiele formatów zapisu obrazu (m.in. jpg, png, gif) i wyświetlają je jako integralne
elementy dokumentu. Współcześnie niemal nieodzownym rozszerzeniem oferowanych
przez przeglądarki internetowe funkcjonalności stała się obsługa multimedialnych
animacji Flash, która umożliwia na stronach internetowych odtwarzanie bogatych
wizualnie animacji, filmów, czy gier umieszczanych w dokumencie HTML za pomocą
elementu (<object> </object>). Funkcjonalność ta jest zwykle realizowana za pomocą
specjalnej wtyczki (dodatku do oprogramowania rozszerzającego jego możliwości)
instalowanej dodatkowo przez użytkownika.
Podobny do animacji Flash efekt można uzyskać korzystając z apletów napisanych
w języku Java, które do prawidłowego działania wymagają zainstalowanego w systemie
użytkownika oprogramowania Java Runtime Enviroment (JRE) wykorzystywanego
przez przeglądarkę do wyświetlania pożądanych treści.
Aby uzyskać określony efekt na stronie internetowej można wykorzystać różne
technologie (bądź ich połączenie). Na przykład do wyświetlenia mapy miasta można
wykorzystać: aplet Java, aplikację Flash lub skrypty języka JavaScript (w formie
obrazka czy obrazków przesuwanych w granicach ramki obiektu HTML). Ponadto
nawet w ramach jednej technologii, pożądany efekt można uzyskać na wiele różnych
sposobów. Każde z wymienionych rozwiązań wiąże się z różnymi możliwościami
i komplikacjami jakie napotka twórca oraz użytkownik takiej witryny.
2.
Technologie i narzędzia
2.1.
HTML – warstwa prezentacji
Każda strona internetowa w swojej konstrukcji wykorzystuje jedną z wersji tego
języka do opisu struktury, rozmieszczenia i wyglądu prezentowanych informacji
(przynajmniej do pewnego stopnia, gdyż współcześnie zaleca się definiowanie wyglądu
dokumentu HTML za pomocą arkuszy stylów CSS). Swoją popularność zawdzięcza
przede wszystkim wieloplatformowości (praktycznie na każdy system operacyjny
powstały przeglądarki internetowe obsługujące ten język, a zazwyczaj wiele jego wersji
– współczesne przeglądarki zazwyczaj obsługują jednocześnie standardy: HTML 4.01,
XHTML 1.0, XHTML 1.1 oraz w coraz większym stopniu pozostający aktualnie
w fazie tworzenia HTML 5) i łatwości użycia (nie jest to typowy język programowania
i do posługiwania się nim nie są wymagane specjalistyczne umiejętności z zakresu
programowania). Język HTML jest szeroko wykorzystywany nie tylko w internecie,
niejednokrotnie dokumentacja programów (pliki pomocy) znajdująca się lokalnie na
komputerze użytkownika, jest dostarczana w formie plików HTML, wygląd niektórych
programów jest projektowany formie dokumentu HTML i wiele innych.
HTML jest językiem hipertekstowym, to znaczy składa się z powiązanych ze sobą
fragmentów w sposób pozwalający na przeglądanie ich w dowolnej kolejności. Witryna
internetowa składa się zwykle z wielu powiązanych ze sobą linkami pojedynczych stron
tworzących logicznie pogrupowaną całość. Każda pojedyncza strona jest plikiem
tekstowym o określonej strukturze, na którą składają się tak zwane znaczniki (wraz
z ich atrybutami i wartościami tych atrybutów) określające strukturę treści oraz
zawartość dokumentu.
Współcześnie trwają prace nad standardem HTML 5 (aktualnie opublikowanym
w formie szkicu) i wspieranym przez coraz więcej popularnych przeglądarek. Standard
ten wprowadza wiele nowości (jak obsługa strumieni audio i video bezpośrednio przez
przeglądarkę, a nie jak dotychczas za pomocą zewnętrznych dodatków i rozszerzeń do
przeglądarek jak flash czy aplety Java, możliwość rysowania obiekcie canvas – za
pomocą skryptów JavaScript) oraz doprecyzowuje wiele nieścisłości w specyfikacji
HTML 4.01
(przede
wszystkim
dotyczących
ujednolicenia
obsługi
błędów
w dokumentach przez przeglądarki).
2.2.
CSS – warstwa prezentacji
Kaskadowe Arkusze stylów (CSS, ang. Cascading Style Sheet) są uzupełnieniem
języka HTML – stosuje się je do określenia wyglądu i rozmieszczenia każdego
z elementów dokumentu. Na przykład: język HTML pozwala na poinformowanie, że
obrazek jest elementem akapitu, a style stosuje się do określenia wielkości, koloru
i kroju czcionki akapitu, odstępów między wierszami, marginesów obrazka czy
opływania go tekstem.
Dzięki swojej prostocie i znacznym możliwościom arkusze stylów stały się
niezwykle popularnym narzędziem w tworzeniu dokumentów HTML (i XML, bo style
często są wykorzystywane również w dokumentach tego typu).
Standard CSS 2.1 (wersja 2.0 nie doczekała się stabilnej publikacji) rozbudował
poprzednią
wersję
o nowe
selektory
i własności
zwiększające
możliwości
manipulowania elementami dokumentu oraz tak zwane arkusze medialne (pozwalające
określać odrębnie wygląd dokumentu w zależności od wyświetlanego medium, jak
ekran, drukarka czy urządzenia Braille'a).
Arkusze stylów składają się z selektorów (określających docelową grupę
elementów, której ma dotyczyć dany fragment kodu) i deklaracji (informacji, w jaki
sposób te elementy mają być wyświetlane); każda deklaracja składa się z własności
i wartości. Rysunek 1.1 przedstawia prosty przykład składni i możliwości arkuszy
stylów wraz z prezentacją jego wyglądu na rysunku 1.2.
Rys. 1. Przykład połączenia języków HTML i CSS
Rys. 2. Przykład połączenia języków HTML i CSS – wygląd dokumentu
Style nazywane są kaskadowymi ze względu na hierarchię ich ważności
i możliwość nadpisywania własności zdefiniowanymi w arkuszach stylów o niższym
priorytecie własnościami zawartymi w selektorach arkuszy o wyższym priorytecie
(stara wartość jest wówczas po prostu zastępowana przez nową).
2.3.
PHP – warstwa funkcjonalna
PHP jest skryptowym językiem programowania zaprojektowanym z myślą
o generowaniu stron internetowych na bieżąco, na żądanie klienta przez serwer WWW.
Istnieją również implementacje języka działające w formie wiersza poleceń oraz
w środowisku graficznym. Dzięki zintegrowanej obsłudze baz danych, plików
tekstowych, dokumentów XML oraz innych serwisów WWW, PHP jest wygodnym
i funkcjonalnym narzędziem do tworzenia aplikacji internetowych. Dodatkową jego
zaletą jest cena – jest to w pełni darmowe narzędzie rozwijane przede wszystkim przez
fanów, w związku z czym jest to szczególnie popularny wśród prywatnych
użytkowników i małych firm język do projektowania witryn internetowych (tam gdzie
statyczna strona internetowa nie jest wystarczającym rozwiązaniem).
Aktualna wersja to PHP 5.3, w której poprawiono szereg błędów i wprowadzono
drobne nowości ułatwiające programowanie witryn internetowych.
Do niedawna prowadzone były zaawansowane prace nad kolejną wersją języka
PHP 6, w której ma zostać wprowadzone pełne wsparcie Unicode, system cache'owania
kodu i ogólnie ujednolicić język, jednakże w związku z problemami w implementacji
oraz sporami pomiędzy twórcami, prace zostały zawieszone.
Współcześnie szacuje się, że PHP jest wykorzystywany przez około 75%
wszystkich witryn internetowych, co czyni to rozwiązanie zdecydowanym liderem
wśród rozwiązań generujących strony internetowe i oferującym podobne możliwości
jak komercyjne projekty JavaServer Pages, czy Active Server Pages.
3.
JavaScript – warstwa prezentacji i funkcjonalna
JavaScript jest skryptowym językiem programowania zaprojektowanym przez
firmę Netscape w drugiej połowie lat 90 z myślą o wykorzystaniu na stronach
internetowych.
JavaScript
umożliwia
interakcję
na
stronie
internetowej
z użytkownikiem i między innymi sprawdzanie poprawności danych wprowadzonych
w formularzach, manipulowanie zawartością i własnościami elementów dokumentu
HTML; pracuje w środowisku przeglądarki w ramach danego dokumentu, tym samym
nie dając możliwości na przykład na dostęp witryny internetowej do plików na
komputerze użytkownika, czy ingerowanie w pracę innych uruchomionych programów
bądź stron internetowych. Nieco zmodyfikowana wersja języka JavaScript jest
wykorzystywana w aplikacji Adobe Flash pod nazwą ActionScript.
Podstawą implementacji języka JavaScript jest standard ECMAScript (rozwijany
przez organizację ECMA), jednak poszczególne jego realizacje różnią się między sobą
(szczególnie JScript zaimplementowany w przeglądarce Internet Explorer Microsoftu).
Pierwszym opublikowanym standardem ECMAScript była wersja 1 z czerwca
1997 roku; zawierała ona opis języka JavaScript stworzonego i opublikowanego przez
Netscape w marcu 1996 roku razem z przeglądarką Netscape Navigator 2.0 (ta wersja
doczekała się implementacji również w przeglądarce Internet Explorer 3.0 wydanej pół
roku po premierze Netscape, jednak ze względu na to, że Microsoft nie wykupił praw
do nazwy JavaScript implementacja praktycznie niczym się nie różniąca od
JavaScript 1.0 została nazwana JScript).
Kolejna wersja standardu pochodzi z 1998 roku i zawiera przede wszystkim drobne
poprawki wymuszone przez dostosowanie specyfikacji języka do wymogów standardów
ISO (ECMAScript 2 został zatwierdzony jako standard ISO 16262). Wersję tą
zaimplementowano w przeglądarkach Netscape Navigator 4.06, Internet Explorer 4.0
(jako JScript 3.0), Internet Explorer 5.0 (jako JScript 5.0) oraz Internet Explorer 5.01
(jako JScript 5.1).
ECMAScript 3 został opublikowany w grudniu 1999 roku, wprowadzono w tej
wersji wiele nowości do języka, między innymi obsługę wyrażeń regularnych,
mechanizmy wyjątków, nowe typy pętli, literały tablic i obiektów oraz pełne wsparcie
dla standardu DOM (ang. Document Object Model, pol. Obiektowy Model Dokumentu).
Standard ten został wprowadzony w przeglądarkach Netscape Navigator 6.0, Mozilla
Firefox 1.0, Internet Explorer 5.5 (jako JScript 5.5), Internet Explorer 6 (jako
JScript 5.6), Internet Explorer 7 (jako JScript 5.7), Internet Explorer 8 (jako JScript 5.8),
Opera 6.0 (i późniejszych), Safari 3.0 (i późniejszych wersjach) oraz Google Chrome.
Na podstawie tej wersji standardu
powstały implementacje JavaScript 1.5
(wprowadzona we wszystkich wyżej wymienionych przeglądarkach) z późniejszymi
zmianami wprowadzającymi do języka niewielkie nowości i poprawki w składni:
JavaScript 1.6, JavaScript 1.7, JavaScript 1.8, JavaScript 1.8.1 oraz JavaScript 1.8.2.
Prace nad standardem ECMAScript 4 zostały przerwane ze względu na znaczące
różnice w wizji języka wśród jego czołowych twórców oraz nadmierne jego
skomplikowanie.
Opublikowany w grudniu 2009 roku standard ECMAScript 5 wprowadza tryb
ścisły (ang. Strict Mode) – podzbiór języka, który ma zapewnić lepsze sprawdzanie
błędów, zapewnia lepsze wsparcie dla rzeczywistych potrzeb twórców witryn
internetowych, a także wprowadza wiele nowych funkcjonalności takich jak metody
dostępowe (często potocznie nazywane Set i Get, wykorzystywane w programowaniu
obiektowym), wsparcie dla biblioteki JSON oraz pełniejsze wsparcie dla właściwości
obiektów. Opublikowana w połowie 2011 roku poprawka ECMAScript 5.1 zapewnia
pełną kompatybilność wsteczną z poprzednim standardem (ECMAScript 3).
W kolejnych wersjach języka najprawdopodobniej zostanie wprowadzone wsparcie
dla klas (co pozwoli na pełniejsze wdrożenie do języka paradygmatu programowania
obiektowego), system modułów, możliwość deklarowania typu zmiennych (aktualnie
typ zmiennej jest uzależniony od wartości przechowywanej w danym momencie),
generatory i iteratory.
Każdy użytkownik strony internetowej może korzystać z innej przeglądarki
i twórca witryny praktycznie nie ma na to wpływu, co przy takiej mnogości standardów
(10 wersji JavaScript i 9 wersji JScript) często prowadzi do problemów związanych
z kompatybilnością skryptów uruchamianych w różnych przeglądarkach (skrypt
prawidłowo działający w jednej może być niekompatybilny ze wszystkimi bądź częścią
pozostałych przeglądarek). Doprowadziło to do sytuacji, w której twórcy stron
internetowych często są zmuszeni do sprawdzania z jakiej przeglądarki korzysta
użytkownik i pisania fragmentów kodu specjalnie pod każdą z nich. Przykładem takiej
konieczności może być korzystanie z technologii AJAX (Rys. 1.3). Taki stan rzeczy
sprawił, że wielu twórców stron internetowych unika korzystania z języka JavaScript
bądź wykorzystuje tak zwane frameworki zapewniające kompatybilność ze wszystkimi
przeglądarkami i w znacznym stopniu ukrywające różnice w implementacji języka
w poszczególnych przeglądarkach. Odbywa się to jednak kosztem wydajności
wykonywanych skryptów oraz koniecznością pobierania przez klienta dodatkowych,
często obszernych bibliotek, co może się przełożyć na trudności bądź wręcz niemożność
implementacji pewnych typów aplikacji za pomocą języka JavaScript).
Rys. 3. Przykład funkcji JavaScript tworzącej obiekt realizujący połączenia
w technologii AJAX
Podobne problemy związane z różnymi realizacjami przy pracy z językiem
JavaScript są dosyć częste (zwłaszcza w przeglądarkach Microsoftu), ale zgodnie
z zapowiedziami twórców poszczególnych przeglądarek w najbliższym czasie ma się to
zmienić. Microsoft w przeglądarce Internet Explorer 9 w znacznym stopniu poprawił
kompatybilność JScript ze standardem ECMAScript (dotyczy to również pełnej obsługi
technologii HTML i CSS), jednakże wielu użytkowników w dalszym ciągu korzysta ze
starszych
wersji
przeglądarki
zmuszając
tym
samym
twórców
witryn
do
dostosowywania tworzonego kodu do różnych przeglądarek. Coraz częściej mówi się
o konieczności ujednolicenia różnych implementacji standardu aby ułatwić jego
wykorzystanie (takie głosy często pochodzą od samych twórców poszczególnych
przeglądarek). Można mieć nadzieję, że w niedalekiej przyszłości możliwości i sposób
działania poszczególnych implementacji standardu w przeglądarkach internetowych
zostanie w pełni dostosowany do powszechnie obowiązującego standardu, a jedyne
różnice między nimi będą dotyczyły wsparcia dla wersji języka ciągle pozostających
w fazie projektowania oraz wydajności.
4.
Wzorce projektowe
Wzorzec projektowy jest to ogólny, sprawdzony, uniwersalny i powszechnie
uznawany za najlepszy sposób rozwiązania często pojawiającego się problemu
(zagadnienia) przy projektowaniu oprogramowania. Nie jest to gotowe rozwiązanie,
a jedynie ogólny opis i zbiór zaleceń ogólnie opisujących jak należy projektować
poszczególne fragmenty kodu aplikacji aby problem, którego dotyczy dany wzorzec,
rozwiązać w sposób możliwie wydajny, przejrzysty i łatwo modyfikowalny (również
przez innych programistów). Stosowanie wzorców projektowych ułatwia i przyspiesza
pracę całego zespołu. Wzorce projektowe w programowaniu obiektowym (przeważająca
większość wzorców projektowych jest dedykowana dla paradygmatu programowania
obiektowego) zazwyczaj obrazują sposób powiązania ze sobą poszczególnych klas
i obiektów, bez nazywania, czy definiowania ich konkretnych instancji.
Można wyróżnić wiele grup wzorców projektowych, z których każda będzie
dotyczyła różnych zagadnień oraz obejmowała inny zakres aplikacji (od całej aplikacji
aż do funkcjonalności, a nawet pojedynczych klas i obiektów).
Najczęściej wyróżniane grupy to:
•
wzorce konstrukcyjne – opisują proces tworzenia nowych klas i obiektów, ich
zadaniem jest tworzenie, inicjalizacja, konfiguracja i usuwanie obiektów;
•
wzorce strukturalne – opisują strukturę współpracujących ze sobą klas
i obiektów;
•
wzorce czynności – opisują sposób zachowania i funkcje każdego spośród
współpracujących ze sobą obiektów.
Innym sposobem podziału wzorców projektowych jest kategoryzacja ich
w zależności od tego czy dotyczą one klas (wzorce klasowe), czy obiektów (wzorce
obiektowe). Jednoznaczne zakwalifikowanie konkretnego wzorca do pojedynczej grupy
(w przyjętej metodzie klasyfikacji) może okazać się trudne lub wręcz niemożliwe (np.
jeden wzorzec może dotyczyć wykorzystania zarówno klas jak i obiektów), dlatego też
powyższa klasyfikacja jest to tylko umowny sposób grupowania wzorców ułatwiający
rozeznanie się wśród dostępnych możliwości.
Wzorce projektowe znacząco ułatwiają wielokrotne wykorzystanie kodu oraz
współpracę programistów i projektantów, zwłaszcza w dużych projektach, poprzez
wprowadzenie pewnych standardów rozwiązań oraz sposobów tworzenia i grupowania
kodu aplikacji, a tym samym znacząco ułatwiają późniejszą analizę kodu i poprawę
zawartych w nim błędów.
O wzorcach projektowymi w informatyce jako pierwsi mówili Kent Beck oraz
Ward Cunningham, którzy zaczęli eksperymentować nad możliwościami wprowadzenia
gotowych wzorców do programowania a wyniki swojej pracy zaprezentowali na
konferencji OOPSLA (ang. Object-Oriented Programming, Systems, Languages &
Applications) w 1987 roku. Wzorce projektowe zdobyły popularność w połowie lat
90-tych XX wieku po opublikowaniu książki „Inżynieria oprogramowania: Wzorce
projektowe” (ang. „Design Patterns: Elements of reusable Object-Oriented Software”)
przez tzw. Bandę Czterech: Ericha Gamma, Richarda Helma, Ralpha Jonsona i Johna
Vlissidesa.
5.
Podsumowanie
Niniejszy artykuł stanowi krótkie wprowadzenie do problematyki wykorzystania
języka JavaScript w tworzeniu warstwy prezentacji i warstwy funkcjonalnej aplikacji
internetowej, co jest tematem realizowanej pracy magisterskiej. W pracy zostanie
zasadniczo dokonany przegląd i wybór odpowiednich wzorców projektowych oraz ich
implementacja w języku JavaScript.
Literatura
1. Lecky-Thompson E., Elde-Goodman H., Nowicki S. D., Cove A., "PHP
zaawansowane programowanie", Gliwice 2005.
2. Hogan B. P., "HTML5 & CSS3", Dallas United States of America 2010.
3. Goodman D., Morrison M., "JavaScript Bible", Indianapolis United States of
America, 2007
4. Welling L., Thomson L. "PHP i MySQL: Tworzenie stron WWW", Vademecum
Profesjonalisty, wyd. IV Gliwice 2009.
5. Lecky - Thompson E., Eide Goodman H, Nowicki S. D., Cove A. PHP5.
Zaawansowane programowanie, Gliwice 2005.
6. http://en.wikipedia.org/wiki/Software_design_pattern.