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
Scriptaculous – Efeitos Aparecer e Desaparecer
Dec 14, 2008 Tutoriais
Durante esta semana o PT Ajax vai apresentar uma serie de artigos sobre os efeitos que podem ser criados usando duas frameworks bastante conhecidas prototype e o script.aculo.us.
Para começar, hoje apresentamos o efeito de aparecer e desaparecer. Basicamente este efeito consiste em fazer um elemento html aparecer ou desaparecer da nossa pagina.
Antes de mais para esta serie de artigos vamos precisar de duas frameworks em que já falamos várias vezes aqui no PT Ajax o prototype e o scriptaculous.
Depois de terem feito o download de ambas as frameworks gravem os ficheiros numa nova directoria onde se encontra o vosso projecto por exemplo “javascript” ou “js” mas podem usar qualquer nome.
Inicio
Vamos começar, criem um novo ficheiro HTML e logo no inicio vamos começar por incluir ambas as frameworks:
<html> <head> <title>Scriptaculous Efeito Aparecer e Desaparecer</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js"></script> </head> </html>
Agora vamos a parte de criar o efeito, primeiro temos que criar o elemento que queremos fazer aparecer e desaparecer, para este exemplo criamos uma simples caixa usando um div e css.
O estilo para o elemento.
<style type="text/css">
#caixa {width:200px; height:200px; background-color:green;}
</style>
O elemento div.
<div id="caixa" style="display:none;"> Mensagem! </div>
Ok esta tudo preparado, agora criamos dois links em que usamos a tag onClick para gerar o evento no qual chamamos a nossa função em javascript que vai lidar com o evento.
<a href="#" onClick="aparecer()">Aparece</a> <a href="#" onClick="desaparecer()">Desaparece</a>
O primeiro link Aparece usa a função aparecer() para criar o efeito aparecer, o segundo link Desaparece usa a função desaparecer() para criar o efeito desaparecer.
Por fim criamos o javascript necessário para lidar com os eventos.
<script type="text/javascript">
function aparecer(){
$('caixa').appear()
}
function desaparecer(){
$('caixa').fade()
}
</script>
Vamos ao detalhe, primeiro declaramos uma função para isso usamos:
function NomeQueQuisermosDar(){
}
No nosso caso foi aparecer e desaparecer. De seguida vamos usar prototype para dizermos que elemento queremos modificar:
$('OIdDoElementoQueQueremosModificar')
Para quem esta habituado a usar javascript, prototype permite usarmos $() em vez do típico document.GetElementById, tornando-se mais simples, e melhor ainda resolve os problemas de usar javascript em browsers diferentes.
Por fim usamos script.aculo.us para os efeitos:
.appear() .fade()
Estes efeitos já estão criados pela a framework e se tiveres curiosidade em saber mais abre o ficheiro effects.js.
Com opção do tempo
Scrip.aculo.us permite também modificarmos o tempo do efeito, para tal só precissamos de fazer uma pequena modificação.
Começamos por criar mais dois links em que vamos usar outras duas funções em javascript.
<a href="#" onClick="aparecertempo()">Aparece</a> <a href="#" onClick="desaparecertempo()">Desaparece</a>
Como podemos ver pelo o evento onClick têmos que criar duas novas funções:
function aparecertempo(){
$('caixa').appear({ duration: 5.0 })
}
function desaparecertempo(){
$('caixa').fade({ duration: 5.0 })
}
Basicamente estas novas funções são exactamente iguais as anteriores mas passamos o argumento duration no qual especificamos em segundos o tempo que queremos que o efeito dure. Sendo assim podemos controlar ainda mais o efeito.
Mais avançado
Até agora temos explicado como usar o efeito de uma maneira simples, mas e se quisermos complicar um pouco mais? Como por exemplo usar só uma função e só um link para controlarmos o efeito.
Primeiro um novo link:
<a href="#" onClick="controlarcaixa('caixa', 2.0)">Caixa</a>
Neste exemplo usamos controlarcaixa em que passamos dois argumentos. O primeiro argumento (caixa) é o ID do elemento que queremos modificar e o segundo argumento (2.0) é o tempo do efeito.
function controlarcaixa(CaixaID, Tempo){
if ($(CaixaID).style.display == 'none') {
$(CaixaID).appear({duration: Tempo})
} else {
$(CaixaID).fade({duration: Tempo})
}
}
Esta nova função controla tanto o aparecer e desaparecer do nosso elemento. Primeiro analisamos se o nosso elemento esta visível, senão estiver aplicamos o efeito de aparecer. Se estiver visível então aplicamos o efeito de desaparecer.
Conclusão
Como podemos ver com a ajuda do scrip.aculo.us e o prototype em poucas linhas de código podemos criar o efeito de aparecer e desaparecer.
Espero que este tutorial tenha dado uma ajuda para a vossa descoberta de ambas as frameworks. No proximo artigo continuamos a analisar os efeitos possiveis.
Drag e Drop com Scriptaculous
Dec 15, 2007 Ajax, Prototype, Tutoriais, scriptaculous
Mais um exemplo/tutorial do PT Ajax.
Neste tutorial explicamos como podemos criar o efeito de drag e drop de uma maneira simples utilizando o prototype e o script.aculo.us.
Começamos com um exemplo bastante fácil mas depois analisamos as varias opções que o script.aculo.us fornece para criar o efeito ainda mais avançado e eficaz.
Espero que gostem do tutorial e por favor votem e deixem o vosso comentário.
Sem mais demoras visitem o tutorial como usar Drag e Drop com Scriptaculous.
Tags: Ajax, Prototype, scriptaculous
Uff.. Como usar Prototype para pedidos em Ajax.
Dec 13, 2007 Tutoriais
Um aparte antes demais. Hoje o PT Ajax não deu tantas noticias como espera dar no futuro. Mas a razão é por querer lançar uma nova área no site.
Uma área onde todos os que gostam de usar Ajax ou estejam interessados a começar, possam aprender um pouco mais sobre Ajax.
Antes de mais o PT Ajax pede desculpa se alguma coisa estiver incorrecta de momento, mas queremos lançar esta área ainda hoje e como o tempo esta a apertar tem de ser agora pois já esta atrasado 9 minutos.
Por isso sem mais demoras o primeiro tutorial de como usar o prototype para fazer pedidos em Ajax, este tutorial tenta ajudar a quem ainda nunca usou Ajax ou o Prototype.
Espero que gostem, e comentem a vontade, este sera talvez o primeiro de muitos.
Já agora peço desculpa se tiver erros, pois ainda não houve uma revisão ao artigo, a qual vai ser feita amanha.
