Ajax Noticias Novidades tudo sobre Ajax » Tutoriais

Prototype – O básico

Jota — Sat, 10 Jan 2009 16:38:18 +0000

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:



Prototype o Basico

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:

O que diz o meu div!
O que diz o div?

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:

O que diz o meu div!
Esconde o div

Mostra o div

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 1
Div 2
Div 3

Diz me os divs

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
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:




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

Jota — Sun, 14 Dec 2008 16:16:37 +0000

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:



Scriptaculous Efeito Aparecer e Desaparecer

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.

O elemento div.


Mensagem!

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.

Aparece
Desaparece

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.

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.

Aparece
Desaparece

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:

Caixa

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

Jota — Sat, 15 Dec 2007 20:31:14 +0000

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.

Uff.. Como usar Prototype para pedidos em Ajax.

Jota — Thu, 13 Dec 2007 00:08:49 +0000

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.

Prototype para fazer pedidos em Ajax