Prototype – O básico
Jan 10, 2009 Tutoriais
Muitos dos tutoriais que escrevemos aqui no PT Ajax usamos o prototype como uma das nossas frameworks, e por vezes temos que repetir o que já disse-mos algumas quantas vezes em outros artigos.
Este artigo vai servir de base sobre o prototype, desta maneira quando estamos a escrever outros tutoriais e falamos do prototype podemos sempre referenciar este artigo como base.
Então aqui vai, vamos começar pelo o básico.
O que é o prototype?
O prototype é uma framework que permite simplificar o processo de criar projectos para a web quando queremos usar Javascript.
Em outras palavras esta framework ajuda-nos a escrever Javascript mais fácil, mais rápido e melhor ainda, sem termos (muito) que preocupar com os diferentes browsers e como lidam com Javascript.
Como se usa?
Para usares o prototype nos teus projectos basta fazeres o download dos ficheiros e incluires no teu projecto, para tal dirigite ao site prototype e faz o download.
Já tenho os ficheiros e agora?
Agora basta na directoria do teu projecto criares uma outra directoria (se quiseres) e adicionares os ficheiros do prototype.
Por uma questão de habito e de organização normalmente dá jeito criarmos uma directoria do tipo “JS” ou “Scripts” ou “Javascript”, onde estarão todos os ficheiros em javascript.
Quando quiseres usar basta incluíres os ficheiros no teu ficheiro HTML entre as headers:
<html> <head> <title>Prototype o Basico</title> <script type="text/javascript" src="js/prototype.js"></script> </head>
E agora?
Agora já tens tudo preparado para poderes usar o prototype. Vamos começar por alguns comandos básicos para poderes ver a vantagem de usares uma framework quando escreves / usas Javascript.
Usando a função $()
Este comando é um dos comandos que se calhar mais vais usar. Em vez de usares:
document.getElementById('IDDoElemento')
Passas a usar o $:
$('IDDoElemento')
Bastante mais fácil, vamos a um exemplo, o HTML:
<div id="div1">O que diz o meu div!</div> <a href="#" onclick="OQueDizODiv()">O que diz o div?</a>
O Javascript:
function OQueDizODiv(){
var omeudiv = $('div1')
alert(omeudiv.innerHTML)
}
Mas o melhor ainda é que permite-te usar uns métodos extras que simplificam bastante o desenvolvimento da tua aplicação como esconder ou mostrar o elemento, por exemplo:
<div id="div1">O que diz o meu div!</div> <a href="#" onclick="EscondeODiv()">Esconde o div</a><br> <a href="#" onclick="MostraODiv()">Mostra o div</a><br>
O Javascript:
function EscondeODiv(){
var omeudiv = $('div1')
omeudiv.hide()
}
function MostraODiv(){
var omeudiv = $('div1')
omeudiv.show()
}
Usando a função $$()
Para quem usa CSS para separar o estilo/desenho do site do código esta função ajuda bastante.
Esta função ajuda-te a referiste a elementos através das classes do CSS. Por exemplo:
<div class="classedodiv">Div 1</div> <div class="classedodiv">Div 2</div> <div class="classedodiv">Div 3</div> <a href="#" onclick="DizMeOsDivs()">Diz me os divs</a>
Como podemos ver temos 3 divs todos com a mesma classe “classedodiv“, o que pretendemos agora é quando clicarmos no link “Diz me os divs“, uma caixa de alerta abre com os conteúdos dos divs que tem como classe “classedodiv“.
function DizMeOsDivs(){
var osmeusdivs = $$('div.classedodiv');
var textodosdivs = '';
for(var i=0; i<osmeusdivs.length; i++){
textodosdivs += osmeusdivs[i].innerHTML + '/';
}
alert(textodosdivs);
}
Usando a função $F()
Sem duvida nenhuma que esta função também dá bastante jeito. Muitas vezes usamos Javascript para validar valores nas nossas formas. A função $F simplifica bastante este trabalho. Começando com o HTML:
<input type="text" id="Nome" value="Manel"><br> <input type="button" value="Diz Me O Nome" onclick="DizMeONome();">
O Javascript:
function DizMeONome(){
var Nome = $F('Nome')
alert(Nome)
}
Simples!
Conclusão
Como podemos ver o prototype traz bastantes vantagens no nosso desenvolvimento em Javascript. Neste pequeno tutorial mostramos apenas 3 das muitas funções que o prototype oferece.
Se tiverem interessados em usar o prototype para desenvolvimento em Ajax podem ver este tutorial.
Este tutorial serviu apenas como introdução e esperamos escrever mais tutoriais em que usamos o prototype. Mas como foi avisado no inicio este tutorial serve apenas como referencia a outros tutoriais que iremos apresentar aqui no PT Ajax.
Webtutoriais:26C046CA
March 28th, 2009 as 3:49 pm
[...] quiseres usar basta incluíres os ficheiros no teu ficheiro HTML entre as headers: view plaincopy to [...]