Rosnące w siłę aplikacje internetowe sprawiły, że przekreślony niegdyś JavaScript powrócił i stał się na nowo jednym z najpopularniejszych języków programowania. Zajął tym samym zasłużone miejsce w korowodzie technologii, które zmieniły sposób naszego korzystania z sieci. Chociaż jeszcze nie tak dawno temu webmasterzy omijali JavaScript szerokim łukiem, obecnie trudno o aplikację internetową, która z niego nie korzysta. Pokażmy, na co stać JavaScript!
JavaScript narodził się w trakcie słynnej wojny
dwóch przeglądarek, Navigatora firmy Netscape
oraz Internet Explorera Microsoftu. Programiści obu
firm prześcigali się w implementacji funkcji, które
przyciągnęłyby nowych użytkowników.
Netscape w 1995 roku jako pierwszy wprowadził
do swojego programu JavaScript – technologię,
dzięki której twórcy ubogich wówczas stron
WWW mogli tchnąć w nie trochę życia.
Internet Explorer nie pozostawał długo w tyle i wprowadził
własną implementację tego języka o nazwie
JScript. Jak można się domyślić, obie specyfikacje
nie były ze sobą zgodne, toteż webmasterzy przez
długie lata zmuszeni byli do programistycznych
akrobacji, aby uzyskać jednakowe rezultaty w tych
przeglądarkach, a potem ich kolejnych wersjach.
Problem ten miała rozwiązać jednolita wersja
JavaScript – ECMAScript. Inną sprawą natomiast
była niepełna obsługa tego języka w ówczesnych
przeglądarkach – dla Microsoftu nadal liczył się
JScript.
Grunt to modne imię
Początkowo JavaScript znany był pod nazwą LiveScript, jednak na fali popularności języka Java nadano
mu taką nazwę, jaką ma obecnie. Czyli chodziło wyłącznie o względy marketingowe. Także składnia
tego języka jest podobna do składni Javy. Czy zatem gdyby JavaScript miał powstać dziś, zostałby
nazwany… RubyScript?
Zachłyśnięcie technologią
Starsi stażem webmasterzy doskonale pamiętają
strony WWW sprzed pięciu czy dziesięciu lat
i skrypty, które je \”wzbogacały\”: animowane kursory
z czasomierzami, ruchome dodatki na pasku
statusu, javascriptowe rollovery i elementy menu,
a także animacje tekstu i inne (imponujące wtedy)
efekty, które działały często tylko w jednej określonej
przeglądarce. Te wywołujące dziś rozbawienie
dodatki były wynikiem niedostosowania możliwości
nowej technologii do małego doświadczenia
webmasterów, którzy nad kwestie użyteczności
i dostępności swoich stron przedkładali wątpliwe
dziś wrażenia wizualne.
W cenie były skrypty prezentujące bogate
możliwości JavaScriptu. Powodowało to nadmierne
przeładowanie stron oraz irytację użytkowników,
którzy nie byli przyzwyczajeni do nieprzewidywalnych
zachowań swoich przeglądarek.
Techniki służące wywoływaniu dynamicznych
efektów na stronie, takich jak zmiana jej treści,
wyglądu i zachowania, przyjęły umowną nazwę
DHTML (dynamiczny HTML). We wczesnych latach
DHTML-a twórcy stron, chcąc skorzystać z jego
możliwości, często musieli się natrudzić, pisząc kod
dostosowany do różnych ich silników i wersji, co
nie zawsze się im udawało.
Polskie początki
Jedną z pierwszych bibliotek ułatwiających
proste tworzenie zaawansowanych efektów
DHTML-owych, wyświetlających się poprawie
w różnych przeglądarkach, był polski projekt
o nazwie \”Alladyn\”, który ukazał się na początku
2001 roku.
http://alladyn.art.pl
Podane powyżej powody po części zniechęciły
wielu autorów stron WWW do stosowania na szerszą
skalę JavaScriptu. Webmasterzy odstąpili od
eksperymentowania i podążyli w kierunku dbałości
o przestrzeganie standardów sieciowych i ogólnie
znanych \”dobrych technik\”.
JavaScript wraca do łask
Wiele zmieniło się w roku 2005, kiedy to po
raz pierwszy mogliśmy usłyszeć o rewolucyjnej
technice znanej pod nazwą AJAX, której głównym
i spajającym elementem jest JavaScript (AJAX to
skrót od Asynchroniczny JavaScript i XML). W rzeczywistości
samo to rozwiązanie nie było czymś
nowym, jednak atrakcyjna nazwa i nowe podejście
do znanych technik wydały na świat \”nową\” technologię,
której możliwości zostały bardzo szybko
docenione.
Był to też okres początku wielkiej popularności
usługi Google Maps, na którą powołano
się w artykule wprowadzającym AJAX jako
efektowny przykład wykorzystywania możliwości
asynchronicznego przesyłu danych. Nastąpił
rozkwit – jak grzyby po deszczu zaczęły powstawać
aplikacje webowe, w których interakcja
odbywała się w nowy sposób, bez konieczności
przeładowania strony.
Trudno dziś obyć się bez JavaScriptu. Oto lista
najczęstszych zastosowań tego języka.
Formularze – Wprowadzane przez użytkowników
dane trzeba weryfikować pod kątem
poprawności ich typów i wartości. Można (i trzeba)
to robić po stronie serwera, ale warto również stosować
wstępne sprawdzanie danych na bieżąco,
jeszcze przed wysłaniem formularza – oszczędzi
to użytkownikom pracy.
Ta funkcjonalność jest
domeną JavaScriptu, tak jak możliwość generowania
dynamicznie zmieniających się formularzy,
dzięki czemu na podstawie wybranych opcji mogą
pojawić się np. dodatkowe pola. JavaScript jest niezbędny również wtedy, gdy trzeba wprowadzone
dane na bieżąco przeliczać (arytmetyka).
Interakcja z użytkownikiem – JavaScript
zawiera wbudowane mechanizmy do obsługi akcji
wywołanych przez użytkownika (np. kliknięcie
danego elementu), dzięki temu może wywołać
powiązane z tymi zdarzeniami funkcje. Na tym
właśnie opierają się bogate aplikacje działające
w oknie przeglądarki, które coraz śmielej konkurują
z ich desktopowymi odpowiednikami.
Dynamiczne zmiany w dokumencie – Jedną z najbardziej efektownych możliwości JavaScriptu
jest pełna kontrola nad drzewem elementów
dokumentu (DOM – Obiektowy Model Dokumentu),
przez co można je dowolnie modyfikować,
przemieszczać, tworzyć i usuwać.
Daje to w efekcie możliwość pełnej zmiany wyglądu i treści strony
po jej załadowaniu. Tu również wpisuje się AJAX,
czyli funkcjonalność \”odpytywania\” serwera o dane
i umieszczanie ich na stronie bez jej przeładowania.
Częściowa kontrola nad przeglądarką
– Mowa tu m.in. o funkcjach umożliwiających
otwieranie nowych okien (w tym np. okien dialogowych),
dostępie do historii przeglądanych stron
oraz informacji o samej przeglądarce i systemie
operacyjnym, a także operacjach na ciasteczkach.
JavaScript daje bogate możliwości wykorzystania
tych elementów.
Ponadto JavaScript jest pełnoprawnym
obiektowym językiem programowania. I tak jak
pozostałe, zawiera w swej składni podstawowe
elementy, takie jak instrukcje sterujące, obiekty
i charakterystyczne funkcje oraz metody (w tym
obsługa wyrażeń regularnych).
Jest to także język dość prosty do nauki.
Chociaż to zdanie można by przekornie rozwinąć:
\”…dopóki nie na trafisz na różnice w interpretacji
kodu pod różnymi przeglądarkami\”. To właśnie ten
problem stwarza trudność w budowaniu złożonych
rozwiązań javascriptowych ze względu na niejednakową
obsługę języka ECMAScript w dostępnych
przeglądarkach internetowych. Mamy jednak dla
ciebie dobrą wiadomość: nie jesteś skazany na
samodzielne zmagania z różnicami w przeglądarkach.
Dzięki gotowym frameworkom możesz skupić
się na rozwijaniu swojego projektu.
Frameworki – lepiej, szybciej, więcej
W ostatnim czasie duże uznanie zdobyły biblioteki
napisane w JavaScripcie, których zadaniem
jest uproszczenie tworzonego przez programistę
kodu. Ich podstawowym atutem jest gwarancja kompatybilności z różnymi przeglądarkami, dzięki
czemu (przynajmniej w założeniu) napisane przez
nas skrypty dadzą podobne rezultaty w różnych
środowiskach.
Nie jest to jednak największa zaleta frameworków
– to, co w nich najcenniejsze to fakt, że
w przyjazny i szybki sposób pomagają tworzyć
zaawansowane rozwiązania, które w czystym Java-
Scripcie wymagałyby napisania dodatkowych partii
kodu. Na przykład, jeśli chcesz, aby po kliknięciu
przez użytkownika na jakikolwiek występujący
w dokumencie przycisk oznaczony klasą \”wysun\”,
wysunął się ukryty akapit, korzystając z frameworka
jQuery, możesz napisać:
$(\'input.wysun\').click(function() {
$(\'p#ukryty\').slideDown(\'slow\');
});
I to wszystko – całą resztą zajmie się framework,
a ty nie musisz się martwić o interpretatory
JavaScriptu w przeglądarkach. A to tylko prosty
przykład. Możliwości frameworków są o wiele
większe: od banalnego poruszania się po drzewie
dokumentu, przechwytywania zdarzeń, dodawania
efektownych animacji i AJAX-wych interakcji do
budowania zaawansowanych aplikacji webowych
z gotowych komponentów interfejsu użytkownika.
Aby skorzystać z tych funkcji, wystarczy dołączyć
do plików strony wymaganą bibliotekę oraz własny
kod. Najpopularniejsze frameworki prezentujemy
w ramce.
Zapewne zadajesz sobie teraz pytanie: który
framework wybrać? Odpowiedź na nie zależy od
twoich potrzeb oraz tego, jak bardzo zależy ci na
takich rzeczach jak przyjazna dokumentacja, popularność
frameworka, prostota składni, częstotliwość
ukazywania się kolejnych wersji i aktywna społeczność
skupiona wokół projektu. Jeśli chcesz szybko
wdrożyć w swoim projekcie efektowne rozwiązania
javascriptowe, polecamy jQuery.
Jeśli twoim celem
jest zbudowanie złożonej aplikacji internetowej
z zaawansowanym interfejsem użytkownika,
może cię również zainteresować Ext JS.
Gry w JavaScript
JavaScript ma potężne możliwości. Niewielu
jednak wie, że może posłużyć do tworzenia gier
takich jak Super Mario. I to za pomocą jedynie
14 KB kodu!
http://blog.nihilogic.dk/2008/04/super-mario-in-14kb-javascript.html
Twórcy przedstawionych frameworków
przekonują, że tworzenie efektownych rozwiązań
w JavaScripcie może być łatwe i przyjemne. Jest to
prawda, jednak nie należy zapominać o umiejętnym
ich stosowaniu. Dołączanie obszernych plików
bibliotek i produkowanie niezoptymalizowanego
kodu może prowadzić do powolnego działania
strony. Nie jest również dobrą praktyką dołączanie
więcej niż jednego frameworka – często może to
prowadzić do powstania błędów.
Stara technologia w nowym wydaniu
Tworzenie interaktywnych elementów za
pomocą JavaScriptu nigdy nie było tak proste, jak
obecnie. JavaScript ma się dobrze i niewątpliwie
ma przed sobą przyszłość. Możemy ufać, że coraz
lepsza obsługa ECMAScriptu przez przeglądarki
sprawi, że z czasem programowanie w tym języku
nie będzie obarczone tyloma obawami o poprawną
interpretację kodu, jak jeszcze kilka lat temu.
Pamiętajmy jednak, że stosowanie JavaScriptu
powinno służyć jedynie dodaniu użytkownikom
dodatkowej użyteczności – niech nasze serwisy
działają również bez włączonej obsługi tego języka
na tyle, na ile jest to możliwe.
Frameworki
Programiści JavaScript mogą wręcz przebierać we frameworkach. Oto najciekawsze z nich. Wszystkie przedstawione projekty są darmowe, Ext JS oferuje
dodatkowo opcję zakupu licencji komercyjnej.
{ikona-nc01}
Prototype
http://prototypejs.org/
http://script.aculo.us/
Protoplasta wszystkich pozostałych. Zdobył dużą
popularność dzięki integracji z będącym na fali
frameworkiem Ruby on Rails. Razem z biblioteką
Scriptaculous, odpowiedzialną za efekty graficzne,
oferuje bogate środowisko do łatwego tworzenia
interaktywnych aplikacji webowych z wykorzystaniem
AJAX-a. Jeśli jednak zależy ci na małym
rozmiarze dołączanych plików, Prototype nie
będzie najlepszym rozwiązaniem.
{ikona-nc02}
jQuery
http://jquery.com/
http://jquery.com/plugins/
Charakteryzujący się prostą i łatwą do zapamiętania
składnią, jQuery ma opinię jednego
z najbardziej przyjemnych w użyciu frameworków.
Oferuje bogatą funkcjonalność (szybkie odnajdywanie
i manipulacja elementami DOM dzięki
zaawansowanym selektorom, AJAX, efekty specjalne)
przy małym rozmiarze pliku, wynoszącym
poniżej 30 KB. Wokół projektu skupiona jest duża
społeczność developerów, a aktualizacje ukazują
się często. Niewątpliwą zaletą jQuery jest także
zasługująca na pochwałę bogata dokumentacja
oraz imponujące repozytorium plug-inów, które
rozszerzają standardowe możliwości biblioteki.
{ikona-nc03}
MooTools
MooTools jest sprawdzonym i kompletnym
frameworkiem znajdującym zastosowanie
w większości projektów wymagających
wykorzystania zaawansowanego manipulowania
obiektami, efektów specjalnych i AJAX-a.
Wspiera programowanie obiektowe. Użycie
MooTools zaczyna się od ściągnięcie odpowiedniej
wersji biblioteki, która zawierać będzie
tylko te funkcje, z których będziemy korzystać
– daje to w efekcie mniejszy rozmiar pliku
wynikowego.
{ikona-nc04}
Dojo
Kolejny rozbudowany zestaw bibliotek
przeznaczony do tworzenia zaawansowanych
aplikacji webowych, wspierany m.in. przez IBM,
AOL i SUN. Dojo oferuje standardową funkcjonalność
i wbudowane komponenty. Wadą
projektu jest jednak niekompletna dokumentacja,
utrudniająca pełne zapoznanie się z jego
możliwościami.
{ikona-nc05}
MochiKit
Solidnie napisany i doskonale opisany
framework, dający programiście narzędzia do
łatwego tworzenia rozwiązań w JavaScripcie (oryginalny
slogan projektu to „MochiKit sprawia, że
JavaScript nie jest tak bardzo do bani”). Oferuje
podstawową funkcjonalność do poręcznego poruszania
się po drzewie dokumentu, przechwytywania
zdarzeń i AJAX-a, jednak bez dodatkowych
komponentów interfejsu użytkownika.
{ikona-nc06}
Ext JS
Rozbudowany framework przeznaczony do
budowy nowoczesnych interfejsów użytkownika
w aplikacjach webowych. Posiada standardową
funkcjonalność podobną do innych bibliotek, imponuje
jednak bogactwem gotowych komponentów
do wykorzystania, takich jak własne okna, interaktywne
tabele czy przeglądarki zasobów. Za pomocą
Ext JS możesz nawet zbudować namiastkę systemu
operacyjnego wbudowanego w przeglądarkę.
Zobacz w sieci
{ikona-nc01}
Ajaxian
Często aktualizowane źródło informacji
z zakresu JavaScriptu, AJAX-a i pokrewnych
tematów.
{ikona-nc02}
Ajax Rain
Imponująca lista nowoczesnych zastosowań
JavaScriptu i AJAX-a, gotowych do implementacji
na twojej stronie.
{ikona-nc03}
JavaScript w A List Apart
http://alistapart.com/topics/code/scripting/
Artykuły z zakresu tworzenia javascriptowych
rozwiązań w zgodzie ze standardami.
{ikona-nc04}
JavaScript w Perfection or Vanity
http://perfectionorvanity.com/kategoria/javascript-dom/
Artykuły Piotra Petrusa z zakresu JavaScript i DOM.
{ikona-nc05}
Dziudek’s blog
Blog Tomasza Dziudy poświęcony w dużej
części frameworkowi MooTools.
{ikona-nc06}
QuirksMode
http://www.quirksmode.org/js/contents.html
Kurs języka autorstwa Petera-Paula Kocha.
{ikona-nc07}
Eloquent JavaScript
http://eloquentjavascript.net/contents.html
Obszerny kurs języka JavaScript autorstwa
Marijna Haverbeke.
{ikona-nc08}
John Resig
Blog pracownika Mozilli i twórcy jQuery,
poświęcony m.in. nowoczesnym rozwiązaniom
javascriptowym.
