Kurs: Prototype JS w pigułce. Cz. 3 – podsumowanie.

Framework - JavaScript - development

Poziom średnio-zaawansowany

Pora na część 3. kursu podstawowego Prototype JS. W części podsumowującej zajmiemy się obsługą formularzy, tablicy asocjacyjnych czy ciągów znaków, ale tym razem na zasadach Prototype JS.

Dalsze zagłębianie się we framework Prototype JS

Zacznijmy od formularzy.

Form
Prototype JS obudowuje i/lub rozszerza dla nas wiele aspektów programowania, w tym także obsługę formularzy.

Dostępne metody:

– disable() – deaktywuj element, na przykład:

form[form.disabled ? 'enable' : 'disable']();
form.disabled = !form.disabled;

– enable() – aktywuj element

– findFirstElement(formElement) – znajdź pierwszy element

– focusFirstElement() – przejdź do pierwszego elementu

– getElements() – pobierz elementy

– getInputs() – pobierz pola typu input formularza, na rzykład:

var form = $('myform');
form.getInputs();        // -> wszystkie elementy INPUT
form.getInputs('text'); // -> tylko inputy tekstowe

// tylko radio buttons z nazwą "education"
var buttons = form.getInputs('radio', 'education');

// ustaw tym przyciskom disable = true
buttons.invoke('disable');

– request() – automatycznie tworzy Ajax.Request, gdzie parametry budowane są na podstawie pól formularza, np.:

<form id="person-example" method="POST" action="file.php">
...

$('person-example').request(); // wysłanie

// dodaj callback:
$('person-example').request({
    onComplete: function(){ alert('Form data saved!') }
})

// get
$('person-example').request({
    method: 'get',
    parameters: { interests: 'JavaScript', 'hobbies[]' :
        ['programming', 'music'] },
    onComplete: function(){ alert('Form data saved!') }
})

– reset() – reset pól formularza

– serialize() – serializuje pola formularza – jako klucze (nazwy) i wartości pól, na przykład:

// Test 1
// 'username=tester&age=22&hobbies=coding'
$('person-example').serialize();

// Test 2
// {username: 'tester', age: '22', hobbies: ['coding', 'JS']}
$('person-example').serialize(true);

– serializeElements() – serializuje elementy, na przykład:

new Ajax.Request('/some_url', {
    parameters: $('id_of_form_element').serialize(true)
});

Form.element

Zajmijmy się teraz operacjami na samych elementach formularzy, w tym pobieraniem z nich wartości.

Najważniejsze metody:

– argumentNames() – zwróć nazwy argumentów, np.:

var fn = function(foo, bar) {
    return foo + bar;
};
fn.argumentNames(); // -> ['foo', 'bar']

– bind() – powiąż z funkcją, np.:

var obj = {
    name: 'A nice demo',
    fx: function() {
        alert(this.name + '\n' + $A(arguments).join(', '));
    }
};

var fx2 = obj.fx.bind(obj, 1, 2, 3);
fx2(4, 5); // alert: the proper name, then "1, 2, 3, 4, 5"

– bindAsEventListener() – powiąż z Event Listenerem – nasłuchiwanie i obsługa zdarzeń,
przykład:

var obj = { name: 'A nice demo' };

function handler(e) {
    var tag = Event.element(e).tagName.toLowerCase();
    var data = $A(arguments);
    data.shift();
    alert(this.name + '\nClick on a ' + tag + '\nOther args: ' 
        + data.join(', '));
}

Event.observe(document.body, 'click', handler.
    bindAsEventListener(obj, 1, 2, 3));

Przykład 2 – monitorowanie elementów określonego typu (checkbox watcher):

var CheckboxWatcher = Class.create();

CheckboxWatcher.prototype = {
    initialize: function(chkBox, message) {
        this.chkBox = $(chkBox);
        this.message = message;
        this.chkBox.onclick =
            this.showMessage.bindAsEventListener(this, 
                ' from checkbox');
     },
     showMessage: function(evt, extraInfo) {
         alert(this.message + ' (' + evt.type + ')' 
             + extraInfo);
     }
};

var watcher = new CheckboxWatcher('myChk', 'Changed');

Przejdźmy teraz do kolejnych zagadnień.


Hash czyli obsługa tablic asocjacyjnych

Kolejnym tematem, w którym Prototype JS dodaje programiście mocy jest obsługa tablic asocjacyjnych (czasami nazywa się je właśnie hash).

Pokażemy jak to wygląda w nowszych wersjach API.

Przykładowy kod:

var myhash = new Hash();
myhash.set('name', 'Bob');
myhash.get('name');
myhash.unset('name');
// ...

Metody dostępne dla obiektów typu Hash:

– clone() – klonowanie, tak samo jak w przypadku zwykłych tablic

– each() – iteracja po elementach, np.:

var h = $H({ version: 1.5, author: 'Sam Stephenson' });
h.each(function(pair) {
    alert(pair.key + ' = "' + pair.value + '"');
});

– get() – pobiera wartość spod danego klucza, np.:

var h = new Hash({ a: 'apple', b: 'banana', c: 'coconut' });
h.get('a');

– inspect() – inspekcja; przydatne m.in. do debugowania

– keys() – zwróć klucze, np.:

$H({ name: 'Prototype', version: 1.5 }).keys().sort(); 
// ['name', 'version']

– merge() – scalanie

– remove() – usuwanie elementów, np.:

var h = new Hash({ a: 'apple', b: 'banana', c: 'coconut' })
h.remove('a', 'c'); // ['apple', 'coconut']

– set() – ustawianie elementów

// jesli jest juz index d zostanie nadpisany!
h.set('d', 'orange');

– toJSON() – konwersja hash’a (tablicy asocjacyjnej) na format JSON

– toObject() – konwersja na obiekt, np.:

var h = new Hash({ a: 'apple', b: 'banana', c: 'coconut' });
var obj = h.toObject();

– toQueryString() – konwersja na łańcuch żądania HTTP, np.:

$H({
   action: 'ship', order_id: 123, 
   fees: ['f1', 'f2'], 'label': 'a demo'
}).toQueryString();

// -> 'action=ship&order_id=123&fees=f1&fees=f2&label=a%20demo'

– unset() – usuwanie elementu, np.:

h.unset('a');

– update() – aktualizacja elementu, np.:

var h = $H({ name: 'Prototype', version: 1.5 });
h.update({ version: 1.6, author: 'Sam' }).inspect(); 

– values() – wartości; patrz: keys, na przykład:

$H({ name: 'Prototype', version: 1.5 }).
    values().sort(); // [1.5, 'Prototype']

Jeśli przyjdzie nam pracować z tablicami asocjacyjnymi w JS, z pewnością docenimy skrzynkę narzędziową, którą daje nam framework Prototype JS.

Spójrzmy teraz jak wygląda praca z DOM.

Insertion – wstawianie elementów do dokumentu

Czyli próba ulepszenia obsługi DOM. Otrzymujemy następujące metody:

After() – wstaw za podanym elementem

Before() – wstaw przed podanym elementem

Bottom() – wstaw na końcu kolekcji

Top() – wstaw na początku kolekcji

Przykład:

<div><p id="foobar">Some text...</p></div>
new Insertion.After('foobar', "<span>Coś nowego...</span>");

Często używane razem z operacjami AJAX, do programowania dynamicznych aktualizacji dokumentu.

String – ciągi znaków

Czyli Prototype JS i rozległe możliwości obsługi łańcuchów.

Metody:

– blank() – czy ciąg jest pusty, np.:

'  '.blank(); // true

– camelize() – zwróć łańcuch „Camel Case”, przykładowo:

'background-color'.camelize(); // 'backgroundColor'
'-moz-binding'.camelize(); // 'MozBinding'

– capitalize() – pierwsza litera duża, kolejne małe

– dasherize() – zamienia _ na -, np.:

'border_bottom'.dasherize(); // 'border-bottom'

– empty() – sprawdza, czy ciąg jest pusty, np.:

- '  '.empty(); // false

– endsWith() – sprawdza, czy string kończy się podciągiem, np.:

'biglol'.endsWith('lol'); // true

– escapeHTML() – bezpieczny HTML – zamień znaczniki na encje, np.:

'<div>This is an article</div>'.escapeHTML();
// -> "&amp;lt;div&amp;gt;This is an article&amp;lt;/div&amp;gt;"

– evalJSON([sanitize = false]) – wykonanie kodu JSON object, powinno się używać sanitize true

– evalScripts() – wykonaj kod JS podany w łańcuchu, np.:

'lorem... <script>2 + 2</script>'.evalScripts(); // [4]

– extractScripts() – wyciąg kod ze znaczników script:

'<script>2+2</script><script>var i = 5</script>'.extractScripts(); 
// ['2+2', 'var i = 5']

– gsub() – zwraca string, gdzie każde wystąpienie danego wzorca zostało zastąpione

– include() – sprawdza, czy ciąg zawiera podciąg

– inspect() – inspekcja; tworzy debug oriented string

– interpolate() – interpolacja wartości; zobacz także: Template

– isJSON() – sprawdza, czy mamy do czynienia z JSON, np.:

"{ \"foo\": 42 }".isJSON() // true

– parseQuery() – alias toQueryParams

– scan(pattern, iterator) – skanuj w poszukiwaniu wzorca, np.:

'apple, pear & orange'.scan(/\w+/, alert);
// 'apple pear orange'

– startsWith() – czy zaczyna się podciągiem, np.:

'PrototypeJS'.startsWith('Pro'); // true

– strip() – usuwa przerwy / białe znaki

– stripScripts() – usuwa wszystko co wygląda na skrypt

– stripTags() – usuwa tagi HTML

– sub(pattern, replacement[, count = 1]) – uproszczenie substring

– succ() – zmienia znak na następny (według Unicode), np.:

'a'.succ(); // 'b'
'aaaa'.succ(); // 'aaab'

– times(N) – powtarza string N razy

– toArray() – konwersja łańcucha na tablicę

– toJSON() – konwersja na JSON

– toQueryParams() – tworzy obiekt na podstawie URI, np.:

'http://www.test.com?section=blog&id=48#comments'.toQueryParams();
// {section: 'blog', id: '48'}

'tag=ruby%20on%20rails'.toQueryParams();
// {tag: 'ruby on rails'}

– truncate([length = 30[, suffix = ‚…’]]) – obetnij łańcuch według parametrów, np.:

'Some random text'.truncate(10); // 'Some ra...'
'Some random text'.truncate(10, ' [...]'); // 'Some [...]'

– underscore() – w podanym stringu „Camel Case” rozdziela podkreśleniem poszczególne słowa, przykładowo:

'borderBottomWidth'.underscore();
// 'border_bottom_width'

'borderBottomWidth'.underscore().dasherize();
// 'border-bottom-width'

– unescapeHTML() – zamień encje na tagi; zobacz także: escapeHTML(),
przykład:

'x > 10'.unescapeHTML(); // 'x > 10'

– unfilterJSON() – usuwa ograniczniki komentarza z Ajax’owych odpowiedzi JSON / JS

Przejdźmy do obsługi obiektu Document.

Document

Prototype JS rozszerza również obiekt document.

Przykład podstawowy:

document.observe("dom:loaded", function() {
    $$('div.tabcontent').invoke('hide');
});

Do dyspozycji otrzymujemy także Document.viewport – w skrócie dane dotyczące ekranu.

Przykłady:

document.viewport.getDimensions(); 
// e.g { width: 776, height: 580 }

document.viewport.getHeight();

document.viewport.getWidth();

document.viewport.getScrollOffsets(); 
// e.g { left: 0, top: 0 }

document.viewport.getScrollOffsets();
// e.g { left: 0, top: 120 }

Tym samym zbliżamy się do końca kursu podstawowego.

Przykład kodu na zakończenie – OOP, DOM oraz Ajax z Prototype JS:

// publikowanie wyników
var ScoreBroadcaster = {
    setup: function() {
        this.executer = new PeriodicalExecuter(
            this.update.bind(this), 30);
        this.update();
    },
    update: function() {
        this.request = new Ajax.Request("scores.php", {
            onSuccess: this.success.bind(this)
        });
    },
    success: function(request) {
        document.fire("score:updated", request.responseJSON);
    }
};

document.observe("dom:loaded", function() {
    ScoreBroadcaster.setup();
});

// nasłuchiwanie wyników
document.observe("dom:loaded", function() {
    document.observe("score:updated", function(event) {
        alert(event.memo);
        // lub
        // console.log("received data: ", event.memo);
    });
});

Podsumowanie

To już wszystko w serii Prototype JS w pigułce, ale w przyszłości nie powinno zabraknąć przykładów, czy też prezentacji ciekawych, gotowych skryptów bazujących na tej bibliotece.

Programista WWW i aplikacji mobilnych z wieloletnim doświadczeniem, początkujący bloger. Pasjonat programowania, nowych technologii, e-commerce, a także sportu i motoryzacji.

Twitter LinkedIn Google+ Skype Xing 

Podaj dalej: Share on Facebook1Tweet about this on TwitterShare on Google+2Share on LinkedIn0Share on Tumblr0Digg thisEmail this to someonePin on Pinterest1
Możesz skomentować leave a response, lub podać trackback z własnej strony.