Prototype JavaScript Framework

Prototype JavaScript Framework – biblioteka programistyczna napisana w języku JavaScript przez Sama Stephensona. Jest zaimplementowana w jednym pliku najczęściej nazywanym prototype.js. Prototype jest dystrybuowany samodzielnie, jak i z takimi projektami jak Ruby on Rails czy script.aculo.us.

Przykładowe funkcje

$()

Funkcja dolara jest używana jako skrót do metody getElementById. By odwołać się do obiektu DOM w stronie HTML, zwykle używa się konstrukcji:

document.getElementById("id_elementu").style.color = "#ffffff";

Funkcja $() skraca kod do niniejszej postaci:

$("id_elementu").setStyle({color: '#ffffff'});

Funkcja $() także zwraca rozszerzony obiekt Prototype.

var element_js = document.getElementById("id_elementu"); // zwykłe odwołanie do obiektu
var element_pt = $(element_js); // referencja rozszerzonego obiektu biblioteki Prototype

$F()

Zwraca wartość pola formularza. Na przykład dla elementu text zwróci wartość pola.

$F("id_elementu_formularza")

$$()

Funkcja podwójnego dolara jest silnikiem selektorów CSS. Można używać takich samych selektorów, jakich się używa w arkuszu stylów. Na przykład, jeśli chcemy się odwołać do znacznika <a> o klasie pulsate, można użyć polecenia:

$$("a.pulsate")

Funkcja zwróci kolekcję elementów.

Obiekt AJAX

Prototype oferuje obiekt AJAX stworzony dla różnych przeglądarek. Posiada dwie główne metody: Ajax.Request() i Ajax.Updater(). Są dwie formy obiektu AJAXa. Procedura Ajax.Request() zwraca surowy obiekt XML, kiedy Ajax.Updater() zwraca dane w specyficznym obiekcie DOM. Przykład:

var url = "http://www.example.com/path/server_script";
 
var myAjax = new Ajax.Request(url, {
   parameters: {
      value1: $F("id_1"),
      value2: $F("id_2")
   },
   onSuccess: showResponse,
   onFailure: showError
});

Programowanie zorientowane obiektowo

Prototype także wspiera bardziej tradycyjne programowanie obiektowe. Metoda Class.Create() jest używana do stworzenia klasy.

var FirstClass = Class.create( {
   // Metoda initialize oznacza konstruktor
   initialize: function () {
       this.data = "Hello World";
   }
});

Rozszerzanie innej klasy:

Ajax.Request= Class.create( Ajax.Base, { 
  // Nadpisz metodę initialize
  initialize: function(url, options) { 
    this.transport = Ajax.getTransport(); 
    this.setOptions(options); 
    this.request(url); 
  }, 
  // ...inne metody...
});

Funkcja Object.extend() pobiera dwa obiekty i dziedziczy parametry do drugiego obiektu. Jak w przykładzie wyżej, pierwszy parametr przyjmuje klasę bazową, a drugi dodaje nowe metody.

Zobacz też

Linki zewnętrzne