Anselmo Luiz Édem Battisti, Alexandre Magno Semmer

Prototype

Biblioteca JavaScript Características Web 2.0 Versão 1.5.1.1 Tamanho 97 Kb

Função $

document.getElementById(); Recebe como parâmetro o ID de um

elemento Alguns métodos:

hide(); show(); addClassName();Mais:

http://www.prototypejs.org/api/element

Função $$

Retorna os elementos de uma classe CSS

function funcao$$(){var f = $$('div#myDiv .estilo');for(x=0; x<f.length; x++){

$("retorno").innerHTML += f[x].value + "<br>";

alert("Escreveu : " + f[x].value);

}}

Função $A

Cria um objeto Enumerable Estrutura muito simples que permite iterações

sem a necessidades de laços FOR

var vetor = new Array("laranja", "banana", "abacate", "bicicleta");

var n = $A(vetor);n.each(function(no){

alert(no)});

Função $F

Devolve o valor de um campo em um formulário, recebendo como parâmetro o ID do elemento

Equivalente ao .value

HTML e DOM

HyperText Markup Language(Linguagem de Marcação de Hipertexto)

Document Object Model (Modelode Objetode Documentos)

DOM representa os documentos HTML como uma hierarquia de nós

Easy DOM Creator

Necessidade de criar objetos HTML em tempo de execução.

Estrutura principal da criação de HTML com Easy DOM Creator :

$.TAGPAI ( { atributo1 , atributo2} ,$.TAGFILHO1({ atributo1 , atributo2} ,nome),$.TAGFILHO2({ atributo1 , atributo2} ));

Easy DOM Creator

Elementos CSS e JavaScript

var texto = $.INPUT({type:”text”, name:”texto”,

value=“”});texto.setAttribute(“onclick”,”alert(this.value)”); texto.setAttribute(“style”,”color:red”); form.appendChild(texto);

Eventos

$(id).setAttribute(“evento”,”funcao”);$(“botao”).setAttribute(“onClick”,”alert(‘ola mundo’)”);

Event.observe(“ID”, “evento”,”funcao”);Event.observe(“botao”,”onClick”,”alert(‘ola mundo’);

Event.observe(window,'load',function(){ Event.observe('ID','ACAO',FUNCAO); });

Orientação a Objeto Prototype oferece o

Class.create() var Animal = Class.create();Animal.prototype={

initialize : function(name,sound){this.name = name;this.sound = sound;

},speak : function(){

alert (this.name + "says:" + this.sound);}

};var cobra=new Animal("Silvo" , "Sheeeeeshee“);cobra.speak();var gato=new Animal("Miado" ,"Miauouo");gato.speak();

AJAX

Asyncronous Javascript And XML Solicitações assíncronas de

informações Aplicações WEB mais dinâmicas e

criativas AJAX não é uma tecnologia, são

varias

AJAX incorpora em seu modelo: Apresentação baseada em padrões,

usando XHTML e CSS; Exposição e interação dinâmica usando

o DOM; Intercâmbio e manipulação de dados

usando XML e XSLT e JSON; Recuperação assíncrona de dados

usando o objeto XMLHttpRequest; Javascript unindo todas elas em

conjunto.

Política de Origem

Segurança dos usuários. 3 parâmetros:

Protocolo URL Porta

Caso algum desses parâmetros diferir da pagina atualmente exibida, ocorrera uma exceção e a chamada ao AJAX será abortada.

A Classe Assíncrona XMLHttpRequestFunction ajaxInit(){

Var xmlhttp;try{

xmlhttp = new XMLHttpRequest();}catch(ee){

try{ xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");}catch(e){ try{ xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }catch(E){ xmlhttp = false; }

}}

Return xmlhttp;}

Objeto AJAX do Prototype

O Prototype oferece três objetos para a manipulação de conexões assíncronas, todos os 3 possuem métodos comuns o que facilita o seu aprendizado.

asynchronous contentType encoding method parameters

Ciclo de vida da chamada em AJAX

Created; Initialized; Requestsent; Response being received ( Pode

ocorrer várias vezes, a cada novo pacote HTTP chegar.)

Response received, request complete

Funções de acesso para cada fase

onCreate onComplete onFailute

Ajax.Updater

Utilizado quando os dados recebidos do servidor estão em formato HTML.

Var myAjax = new Ajax.Updater(“ id do elemento“ ,‘pagina.php' ,{method: 'get' ,parameters:$(calculadora).serialize()

});

Ajax.Request

É o mais utilizado e ele possui uma série de funções que o tornam ideal em diversas situações.

New Ajax.Request(“pagina.php” ,{onSuccess:function(retorno){

alert(retorno);}

}) ;

JSON

Javascript Object Notation, é um formato leve para intercâmbio de dados computacionais.

Alternativa para XML em AJAX. Função eval() para analisar uma

string JSON.

JSON

{'cidades':[{'cdg':'1','nm':'Tupãssi'},{'cdg':'2','nm':'Toledo'},{'cdg':'3','nm':'Cascavel'},{'cdg':'4','nm':'PatoBranco'}]}

Ajax.PeriodicalUpdater

Funciona da mesma forma como o Ajax.Updater, a diferença é que este método permite que sejam feitas chamadas AJAX sem a intervenção do usuário.

New Ajax.PeriodicalUpdater('data' , 'data.php'

{method: 'get' ,frequency:3

});