NEXT 3/2008 - Lepszy JavaScript

Do uzyskania w pełni multimedialnej strony internetowej nie wystarczy sam XHTML. Potrzebne jest użycie języka umożliwiającego modyfikację elementów tworzących witrynę, takiego jak JavaScript. Co można za jego pomocą osiągnąć?

JavaScript to jeden z dynamiczniej rozwijających się języków programowania. Choć używany jest od 1996 roku, jego kolejne wersje oferują nowe konstrukcje językowe, umożliwiające łatwiejsze odwoływanie się np. do obiektów drzewa DOM czy po prostu upraszczające często używane wyrażenia. W niniejszym artykule przedstawimy kilka przydatnych, mniej znanych narzędzi języka, głównie dostępnych w jego najnowszej wersji 1.7.

Namiastki obiektowości

JavaScript, wbrew opinii początkujących webmasterów, jest językiem strukturalnym i obiektowym, bazującym na prototypach. Przekonanie o jego jedynie proceduralnym charakterze bierze się stąd, że zadaniem pierwszych jego wersji było dostarczenie możliwości wykonania ciągu określonych czynności jako reakcji na konkretne zdarzenie na stronie, np. kliknięcie przycisku. Bazowanie na prototypach oznacza, że w języku formalnie nie ma takiej konstrukcji jak klasa – brak np. słowa kluczowego do jej stworzenia. Jak więc definiować oraz instancjonować obiekty? Za pomocą funkcji, które w JavaScripcie pełnią rolę zarówno konstruktorów, jak i metod, a ich użycie zależne jest od kontekstu wywołania. Oto przykład:

function samochod (marka) {
this.marka = marka;
this.dziala = 0;
}
samochod.prototype.uruchom = function(){
this.dziala = 1;
return (this.marka + " uruchomiony!");
}

Funkcja samochod jest w tym kontekście zarówno deklaracją klasy o tożsamej nazwie, jak i definicją jej konstruktora, przyjmującego jeden parametr. Klasa ma dwa pola: marka oraz dziala, a także jedną, bezparametrową metodę uruchom(). Uwagę zwraca szczególnie sposób deklarowania metod – poza „klasą”, przy użyciu prototype – specjalnego obiektu, którego właściwości interpretowane są jako pola i metody oryginalnych zmiennych. Tak zadeklarowaną klasę można już w znany z innych języków sposób zainstancjonować i używać:

var sam = new samochod("Ford");
alert(sam.uruchom());

Jeśli taki kod będzie umieszczony np. w procedurze obsługującej kliknięcie przycisku, wynikiem jego działania będzie komunikat:


Jedną z wad przedstawionej metody instancjonowania klas jest brak możliwości przeciążania konstruktorów. Problem ten można jednak częściowo obejść, badając operatorem ||, czy poszczególne zmienne są ustawione:

function samochod (marka) {
this.marka = marka || "nieznana";
}

Dziedziczenie i polimorfizm

JavaScript przewiduje także możliwość dziedziczenia, którą wykorzystuje się podobnie jak w Javie czy C++. Samochody mają zwykle właścicieli, można więc utworzyć kolejną klasę:

sam_zarejestr.prototype = new samochod;
function sam_zarejestr (marka, wlasciciel){
this.wlasciciel = wlasciciel;
this.constructor.apply(this,[marka]);
}

Aby mechanizm dziedziczenia zadziałał, konieczne jest wykonanie dwóch czynności: przypisanie prototypowi klasy pochodnej obiektu klasy, po której dziedziczy (pierwsza linia kodu powyżej), oraz uruchomienie wyrażeniem constructor.apply konstruktora klasy bazowej. Drugi parametr wywołania, tutaj – [marka], musi być tablicą reprezentującą wszystkie zmienne przekazywane konstruktorowi, uwzględniającą kolejność ich deklaracji. Dodać należy, że tak realizowane dziedziczenie jest typu publicznego, czyli dostęp do zmiennych i metod klas możliwy jest z dowolnej funkcji w kodzie.

Jeśli w naszym przykładzie procedura uruchamiania tak utworzonego samochodu ma być inna niż dla auta bez właściciela, można wykorzystać polimorfizm. Wystarczy utworzyć w klasie pochodnej metodę o tej samej nazwie co w bazowej:

sam_zarejestr.prototype.uruchom =
= function() {
this.dziala = 1;
return (this.wlasciciel+", twój "+
+this.marka+" jest uruchomiony!");
}

JavaScript wywoła zawsze wersję metody przypisanej do danej klasy. W powyższym przypadku utworzenie obiektu typu sam_zarejestr(„Ford”, „Janek”) i wywołanie na nim metody uruchom() poskutkuje więc zgodnym z oczekiwaniami komunikatem:

Ocena:    (aby ocenić, musisz się zalogować w serwisie)

 del.icio.us |  Wykop mnie |  Digg this story |  dodajdo.com

• Szybka strona z Ajaksem »
  tips & tricks
• Wyłapać błędy na stronie »
  FIREBUG 1.05
• Zbudować dobry DOM »
  manipulacja treścią stron XHTML za pomocą JavaScriptu
• XAML – (r)ewolucja w świecie .NET »
  tworzenie interfejsu użytkownika za pomocą języka XAML
• Od XML-a do XHTML-a »
  przetwarzanie dokumentów XML