DevProTalk - Prototype, dobar tutorijal

DevProTalk (http://www.devprotalk.com/index.php)

- (X)HTML, JavaScript, DHTML, XML, CSS (http://www.devprotalk.com/forumdisplay.php?f=8)

- - Prototype, dobar tutorijal (http://www.devprotalk.com/showthread.php?t=933)

Prototype, dobar tutorijal

Jako dobar prototype tutorijal: http://www.sitepoint.com/article/pai...ript-prototype

Kako ovo nisam video ranije... Čovek se dotiče svih važnijih stvari koje prototype pruža. Stvarno odlično napisan tekst.

da zaista, kako to da nisi video ovo ranije ? Staris...:D
Ovo je bio zvanicno prvi dobar tutorijal o prototype-u, ustedeo mi je gomilu vremena i zivaca i gledanja u nerazumnjivo formatiran javascript...

Citat:

Originalno napisao ivanhoe

da zaista, kako to da nisi video ovo ranije ?

Promašio... :(

Inače, link sam postovao da preporučim tekst gde se Prototypeu pristupa ne iz perspektive JS biblioteke koja omogućava AJAX a la "sipaš i ne misliš" već kao biblioteke koja ozbiljno olakšava rad sa JSom i čini neke ekstra napredne tehnike užasno jednostavnim za rad.

Za ozbiljno savladavanje milion fora koje prototype nudi obavezno pogledajte i ovo:

http://www.sergiopereira.com/articles/prototype.js.html

Ovo je suvoparna referenca, znaci nije za pocetak rada, ali ima prilicno detaljan opis svih klasa/funkcija, i po neki primer tu i tamo... vrlo korisno..

jedino sto me nervira kod prototype-a je sto pokusavaju da javascript pretvore da lici na ruby...inace je stvarno dobra biblioteka...

Pošto je JavaScript uglavnom "prateća" tehnologija uvek će biti ljudi koji tako prave frameworke koje će JSu omogućavati da liče na jezike koje inače koriste. Video si MochiKit? Ista priča samo što je glavni i odgovorni Python developer pa ima mnogo trikova preuzetih iz Pythona.

Inače, što se Sergiove reference tiče za nju znam. Dobra stvar skroz... Samo se pitam da li će i kad biti updateovana...

Sad sam prvi put pogledao ovaj prototype duže od 10 sekundi (gledao sam 40 sekundi), meni se čini da ovo nije baš kompatibilno sa većinom browsera, što znači da je skoro neupotrebljivo za veće projekte gde je veliki diverzitet posetilaca. Ili grešim? Zar ovo nije malo previše glomazno? Zar nije bolje pisati "custom" javascript za svaki projekat nego učitavati ogroman lib zbog nekih sitnica? Samo pitam... :)

Prototype je kompatibilan sa modernim browserima. Sve radi bez greške u FF, IE i Safariju. Ostale nisam gledao (sad će korisnici Opere da me skalpiraju, ali Opera nije bila u igri za to što sam pravio)...

Da li se isplati uključivati 50kb biblioteku zavisi od toga za šta ti treba. Ako ti trebaju samo sitnice kao što ti kažeš koje sam možeš brzo da realizuješ sa minimumom koda onda ti prototype definitivno ne treba. Ako ćeš praviti bogatu web aplikaciju gde ti treba napredna, standardizovana obrada događaja, gde radiš složene "upite" nad dokumentom (daj mi sve file inpute unutar #forma i za onclick im setuj ovu funkciju), drag and drop, animacije i slično onda se 50kb JSa isplati višestruko.

Ja sam još relativno nov u celoj priči, ali me stvarno oduševljava šta sve može da se radi i koliko je to u stvari lako kad imaš dobru osnovu (prototype npr). A i klijenti se oduševljavaju kad vide par zanimljivih sitnice ;)

Pa daj da vidimo i mi tih par sitnica, da se odusevimo :)

Ne ... ozbiljno, aj daj da vidim.

Jedan primer iz skipte koju sam završio pre neki dan.

Ovaj mali editor služi da se delovi stranice (kataloga) označe i povežu sa stranicom gde ima više informacija. Originalna ideja je bila da se editor radi u Flashu zbog ograničenja browsera. Pošto je čovek koji radi Flash bio prilično zauzet, ja sam uzeo i to odradio pomoću JS.

Onclick selekcija, drag and drop, resize, kreiranje novih regiona, uništavanje postojećih + JS piše i submituje formu o regionima. Ovde se uglavnom koristi Event klasa, a prototype se pokazao kao odlično rešenje zato što event sam po sebi ima problema u različitim browserima (tj. nije cross browser kompatibilan).

Ništa preterano revolucionarno, ali radi posao i klijent je bio jako zadovoljan (sve radi kako treba i sve je završeno pre roka jer nismo čekali da čovek koji radi Flash bude slobodan).

Citat:

Originalno napisao bluesman

mana je sto ne podrzava IE5, i vecina ovih stvari moze da se uradi custom (verovatno i bolje), ali prednost biblioteke je sto ima brdo stvari vec odradjeno, pa ti stedi vreme.. Sto da pravis html_escape/ unescape funkciju kad vec ima, sto da pravis funciju za dohvatanje elemanat forme kad mozes da otkucas $F('ime_elementa') i dobijes value bez obzira da li je select ili input u pitanju...

A funkcionalan ajax primer izgleda ovako:

HTML kôd:

<html>

<head>

<script type="text/javascript" src="prototype.js"></script>

<script type="text/javascript">

function init(){

     $('greeting-submit').style.display = 'none';

     Event.observe('greeting-name', 'keyup', greet, false);

}



function greet(){

     var url = 'ajax_proba.php';

     var pars = 'greeting-name='+escape($F('greeting-name'));

     var target = 'greeting';

     var myAjax = new Ajax.Updater(target, url, {method: 'get', parameters: pars});

}



Event.observe(window, 'load', init, false);

</script>

</head> 

<body>

    <form method="get" action="ajax_proba.php" id="greeting-form">

        <div>

            <label for="greeting-name">Enter your name:</label>

            <input id="greeting-name" type="text" />

            <input id="greeting-submit" type="submit" value="Greet me!" />

        </div>

        <div id="greeting"></div>

    </form>

</body>

</html>

A php je npr. ovakav:

PHP kôd:


		
			
<?php
     echo '<p>Season\'s Greetings, '. htmlspecialchars($_GET['greeting-name']) ."</p>\n";
?>

ovo je samo primer iz jednog tutorijala, fale mu provere na greske i detalji, ali cisto je ilustracija koliko vremena moze da se ustedi... Sad naravno, sve je stvar samog projekta, da li je velicina biblioteke problem i da li je prihvatljivo vreme utroseno na custom resenja... ja najvise volim da mesam stvari, koristim biblioteke za ono sto me mrzi da pisem sam, a onda pobrisem visak funkcija koje nisam koristio....moze tako da se prepolovi velicina koda..