javascript e prototype js overview. javascript essencial

Javascript e Prototype JSOverview

Javascript essencial

JavascriptPrototype JS - Overview

Não é um subconjunto de Java: ECMAScript (ECMA-262)

Interpretada

Sintaxe da família C/C++/Java, case-sensitive

Tipagem fraca

Recursos para orientação a objetos prototipada

Mais comumente utilizada em navegadores web


Tipos de dados


Numérico String Booleano

Objeto Array Função

Tipos primitivos (primitive types)var nEx; nEx = 3.8; nEx = 048; nEx = 0xFF3;

var sEx; sEx = “palavra”; sEx = 'palavra';

var bEx; bEx = true; bEx = false;

var oEx; oEx = new Object(); new Date();

function obterUsuarios() { }

var aEx; aEx = [1, 0, 1]; aEx = [“alfa”, “beta”];

Tipos de referência (reference types)

Tipos de dados

Variáveis não inicializadas têm o valor undefined


Array

var aEx = [];

var aEx = new Array();

Coleção ordenada de valores que podem ser acessados por seu índice

Cada valor contido no array é chamado de elemento

Um elemento pode ser de qualquer tipo: string, numérico, objeto, etc. Pode ser até mesmo outro array


Função

function nome([arg1 [,arg2 [..., argn]]]) { //código}

Pode ter 0 ou mais parâmetros

Os parâmetros são opcionais

Pode ser manipulada como dado


Valor X referência


Manipulação de dados por valorvar iNumA, iNumB;

iNumA = 7;iNumB = iNumA;-----------------------------------------------------------------------------------------------

iNumA = 9;

77

iNumA iNumB

var aMAluno1, aMAluno2;

aMAluno1 = [2, 3.2, 8];aMAluno2 = aMAluno1;

-------------------------------------------------------------------------------------------------------

aMAluno1[0] = 5;

79

iNumA iNumB

2

3.2

8

Memória

0x01CF 0x01CF

aMAluno1

0x01CF

aMAluno2

Manipulação de dados por referência

5

3.2

8

0x01CF 0x01CF

aMAluno1

0x01CF

aMAluno2


Operadores


Principais operadores

Binários - Adição, subtração, multiplicação e divisão: + - * /

Unários - Mais, menos, módulo, incremento, decremento e atribuição: + - % ++ -- =-------------------------------------------------------------------------------------------------------------------------

iMedia = (iNota1 + iNota2) / 2;iSemestre++;if (bVozFina == true) iNota1 -= 5; //Perde cinco pontos caso tenha a voz fina

Aritméticos

“E” lógico, “OU” lógico, “NÃO” lógico: && || !

Maior, menor, igual e diferente: > < == !=-------------------------------------------------------------------------------------------------------------------------

if (iNota > 7) ...if (iNota > 7 && iMedia > 4) ...if (iSemestre != 2 || bMateriaOpcional == true) ...

Relacionais e lógicos


Controle de fluxo


Controle de fluxo do programa

IF/ELSE

if (expressão) sentença;

else [(expressão)]sentença;

Decisão Laços (loops)

SWITCH

switch (expressão) {

case valor:sentença;...break;

...[default:

sentença;...break;]

}

FOR / FOR..IN

for (inicialização; teste; incremento)sentença;

for (variável in objeto)sentença;

WHILE / DO WHILE

while (expressão) sentença;

dosentença;

while (expressão);

Orientação a objetos, JSON e

Client-side JS


Orientação a objetos e JSON


Objeto

var oAdv; //Advogado

oAdv = {

nome: 'Luiz Pareto',endereco: 'Assembleia, 10',vozFina: true,reclamarDeUmTelefone: reclamarTel; //ver função reclamarTel

};

oAdv.reclamarDeUmTelefone();if (oAdv.vozFina == true) alert('Você é meio viado?');

Coleção de propriedades e métodos que pode ser manipulada individualmente como um dado qualquer

Métodos são funções invocadas a partir de propriedades

JSON: Javascript Object Notation - { , : [


Construtores

function Advogado(psNome, psEnd, pbVozF){

//psNome //Nome do advogado//psEnd //Endereço do advogado//pbVozF //Booleano que indica se ele tem voz fina

this.nome = psNome;this.endereco = psEnd;this.vozFina = pbVozF;this.reclamarDeUmTelefone = reclamarTel;

}

var oAdv = new Advogado('Luiz Pareto', 'Assembleia, 10', true);

if (oAdv.vozFina == true) alert('Você é meio viado?');

Mesmo objetos de tipos 'pré-definidos' podem ser definidos por seus construtores

var aMAluno1 = new Array(8, 7.2, 3);


Protótipo Em Javascript, todo objeto possui a propriedade

prototype, que é uma referência para um outro objeto, de caráter especial

Todas as propriedades do protótipo aparecem como propriedades do objeto que o contém (simulação de herança)


...}Advogado.prototype.reclamarDeUmTelefone = reclamarTel;

var oAdv = new Advogado('Luiz Pareto', 'Assembleia, 10', true);

if (oAdv.vozFina == true) alert('Você é meio viado?');


Protótipo

Construtor Advogado(function Advogado(...))

Protótipo Método 'reclamarDeUmTelefone'(function reclamarTel())

oAdv oAdv2 oAdv3

oAdv.reclamarDeUmTelefone();

oAdv2.reclamarDeUmTelefone();

oAdv3.reclamarDeUmTelefone();


Simulando classes - encapsulamento


this.nome = psNome; //propriedade pública}Advogado.prototype.reclamarDeUmTelefone = reclamarTel; //método público


var nome = psNome; //propriedade privada

function reclamarDeUmTelefone() //método privado{}

}


this.reclamarDeUmTelefone = reclamarTel; //método privilegiado}


Outros pontos importantes


Funções anônimas Javascript, assim como algumas outras linguagens, permite o uso de

funções anônimas, ou lambda functions

As funções anônimas são trechos de código que podem receber parâmetros e retornar resultados, exatamente como funções comuns, mas não têm um nome pelo qual podem ser referenciadas. Por isso, devem ser imediatamente atribuídas a alguma variável de referência para poderem ser utilizadas


this.reclamarDeUmTelefone = function () { alert(‘Não fala nem recebe chamada.’); };}


this.reclamarDeUmTelefone = function () {

alert(‘Não fala nem recebe chamada.’); };

}


Wrappers para tipos primitivos Em Javascript, todos os tipos primitivos possuem classes

correspondentes: Number, String e Boolean

Como o Javascript converte facilmente dados de um tipo para outro, é possível utilizar dados de tipos primitivos como objetos. Nesse caso, o interpretador automaticamente cria um Wrapper da classe correspondente

var sNm; //nome do usuário

sNm = 'Roberval'; //tipo primitivo string

alert(sNm.toLowerCase()); //método toLowerCase, do objeto String (wrapper)

alert(typeof sNm); //exibirá 'string' e não 'object'


As classes Date, Math e RegExp Javascript possui algumas classes auxiliares pré-definidas

Date, como o nome indica, fornece recursos para a manipulação de datas e hora

Math, como o nome indica, fornece recursos para a manipulação de números e cálculos matemáticos em geral

A classe RegExp fornece recursos para o uso de expressões regulares, padrões de pesquisa textual extremamente poderosos

var oDtN; //data de nascimentovar oREAlfa; //expressão regular para manipulação de caracteres alfabéticos

oDtN = new Date(2006, 1, 20); //data de 20/01/2006alert(new Date().getMonth()); //mês atual

oREAlfa = new RegExp('[a-zA-Z]*'); //expressão regular definida pelo construtoroREAlfa = /[a-zA-Z]*/; //expressão regular definida com um literal

alert(Math.round(2.3)); //arredondamento de 2.3 para número inteiroalert(Math.sqrt(4)); //raiz quadrada de 4


Coleta de lixo Em qualquer linguagem, variáveis de tipos cujo tamanho é desconhecido

a princípio são alocadas na memória em tempo de execução (variáveis de alocação dinâmica), quando o compilador/interpretador conhece o tamanho necessário

Em Javascript, tipos de referência, como arrays, objetos e funções, e outros dados sem tamanho pré-definido, como strings, são alocados na memória dinamicamente, à medida que são manipulados

Para evitar os estouros de memória, é preciso liberar a memória alocada quando ela já não é necessária. Linguagens como C e C++ exigem que o próprio programador libere a memória. Javascript, assim como Java ou C#, utiliza coleta de lixo (garbage collection)

O interpretador Javascript, ao detectar que uma variável não pode mais ser referenciada, libera imediatamente a memória ocupada, destruindo assim a referência inútil e permitindo que outros trechos de código executável ocupem aquela memória


Coleta de lixo

var sNm; //nome do usuáriovar sNmMin; //nome do usuário em minúsculas

sNm = 'Khaled Mahmoud'; //memória alocada para uma stringsNmMin = sNm.toLowerCase(); //uma nova string é alocada: 'khaled mahmoud'

sNm = sNmMin; //a referência para 'Khaled Mahmoud' não existe mais

Khaled Mahmoud

Memória

0x03AD

sNm

sNmMin

Khaled Mahmoud

khaled mahmoud

Memória

0x03AD

0x03B5

sNm

sNm

sNmMin

Khaled Mahmoud

khaled mahmoud

Memória

0x03AD

0x03B5


Tratamento de exceções Exceções são ocorrências especiais que inesperadamente desviam o fluxo normal de

execução de um programa

Em geral, são erros que impedem a continuidade da lógica do programa ou eventos especiais de hardware que interrompem a execução do programa, mas também podem ser lançados pelo próprio programador para indicar uma condição específica

Em Javascript, assim como em Java e C#, o mecanismo de tratamento de exceções é o bloco try/catch/finally

Bloco try/catch/finally

TRY / CATCH / FINALLY

try {

sentença;}catch (oE){

sentença;}finally{

sentença;}


Client-side JavascriptO objeto window, o DOM e a programação orientada a eventos


O objeto window A função primária de um browser é exibir documentos HTML

Quando um documento é carregado com código Javascript, o interpretador Javascript cria uma infra-estrutura para manipulação da janela (ou frame) e do documento carregado: os objetos window e document

O objeto window tem a função especial de ser o objeto global da implementação javascript. Ele suporta toda a estrutura do código criado, enquanto o script permanecer em execução.

Variáveis globais são, na verdade, propriedades do objeto global window. Funções são, na verdade, métodos do objeto global window. As variáveis globais window e self são propriedades auto-referenciais do objeto global.

Cada janela é um contexto de execução independente, mas o código Javascript que roda em uma janela pode acessar o código de outras, respeitando restrições de segurança

var giValor; //variável global para armazenar o valor de uma mercadoria

giValor = 10; //inicialização da variável

alert(window.giValor); //exibirá '10'


window(global object)

navigator

frames[ ]

location

history

document

screen

self, window, parent, top

DOM - Document Object Model

forms[ ]elements[ ]

(inputs, selects, textareas, ...)

images[ ]

O DOM e a hierarquia client-side


O objeto window é o principal objeto no client-side Javascript. Todos os outros objetos são acessados através dele

Quando o documento HTML possui frames, por exemplo, o interpretador Javascript cria, dentro do objeto window, um array chamado frames, através do qual se podem manipular todos os frames contidos na janela principal

Da mesma forma, o objeto document (que representa o documento HTML carregado) possui a propriedade forms, que é um array de referências para todos os formulários existentes no documento

Essa estrutura de objetos pertencentes ao objeto document ficou conhecida como DOM (Document Object Model, ou Modelo do Objeto Documento).

O DOM permite manipular todo o documento HTML, representando a estrutura do documento como uma árvore. Foi criado na primeira implementação da linguagem Javascript, em 1996, no Netscape Navigator. Aos poucos, diferenças foram surgindo nos outros browsers, como o Internet Explorer, o que levou aos atuais esforços de padronização por parte do W3C, que resultaram no W3C DOM.




<div id="exemplo">Esse é um <h3>exemplo de HTML</h3> <br /> sobre DOM

</div>

DIV

childNodesattributes

“Esse é um” H3 BR

childNodes

“exemplo de HTML”

“sobre DOM”

id = “exemplo”


Programas de computador, por muito tempo, eram executados apenas em modo batch. Liam um conjunto de dados, executavam instruções sobre eles e retornavam resultados.

Com as interfaces gráficas e dispositivos apontadores, surge a orientação a eventos: o software responde aos movimentos do mouse ou aos pressionamentos de tecla, ao carregamento de outros trechos de código, etc.

Num browser, o documento HTML utiliza uma interface gráfica embutida. O interpretador Javascript recebe do browser os eventos capturados pelo sistema operacional e notifica os scripts em execução.

Um script pode definir trechos de código a serem executados quando um determinado evento ocorrer: são os tratadores de eventos (event handlers). Em javascript, basta atribuir um bloco de código ao evento desejado para que ele seja executado pelo navegador a cada vez que o evento ocorrer.

Como todos os eventos ocorrem para um elemento ou objeto qualquer, todo evento é manipulado como propriedade um elemento ou objeto.

A programação orientada a eventos


No meio do markup HTML, é possível definir o código Javascript a ser acionado quando o evento ‘onclick’ for disparado: esse código é o tratador (handler) do evento onclick

Mas a forma ideal de se definir o handler é diretamente através do código Javascript, utilizando a propriedade ‘onclick’ do objeto ‘chkMsg’, obtido utilizando-se os métodos do DOM.

Para a definição de um handler, podem ser usadas funções anônimas, assim como em qualquer outra situação em que um bloco de código precise ser passado como dado.

<input type="chkMsg" name=“chkMsg" value=“msg“ onclick=“exibirMsg();"></input>


var oChkM; //checkbox chkMsg

oChkM = document.getElementById(‘chkMsg’); //obter checkboxoChkM.onclick = exibirMsg; //definir handler p/ evento onclick

<body onload=“exibirMsg();”></body>

window.onload = exibirMsg; //definir handler p/ evento onload




oChkM = document.getElementById(‘chkMsg’); //obter checkboxoChkM.addEventListener(‘click’, exibirMsg, false); //definir handler p/ evento onclick

window.addEventListener(‘load’, exibirMsg, false); //definir handler p/ evento onload

O método ideal, no entanto, é utilizar o modelo de registro de eventos do W3C, baseado nos métodos addEventListener e removeEventListener

É importante atentar para as diferenças entre os browsers. No caso do Internet Explorer, por exemplo, os métodos são adicionados e removidos pelos métodos attachEvent e detachEvent, respectivamente


oChkM = document.getElementById(‘chkMsg’); //obter checkboxoChkM.attachEvent(‘onclick’, exibirMsg, false); //definir handler p/ evento onclick IE

window.attachEvent(‘onload’, exibirMsg, false); //definir handler p/ evento onload IE


Uma função chamada como tratador de um evento pode utilizar a palavra-chave this, exatamente como ocorre com uma função chamada como método de um objeto.

No caso do evento, a palavra-chave this se refere ao elemento para o qual o evento foi disparado.


function exibirMsg(){

alert(this.availHeight);}

window.addEventListener(‘load’, exibirMsg, false); //definir handler p/ evento onload

DOM e Ajax


Document Object Model


O padrão W3C DOM foi criado para representar documentos XML e HTML, especifica várias interfaces a serem implementadas pelos navegadores, como Node, Element, Attr, Document, etc. Essas interfaces, uma vez implementadas pelos browsers, dão ao script condições de acessar e modificar o documento HTML carregado

O DOM representa o documento HTML carregado pelo browser numa estrutura de árvore composta de nós (Nodes)

Cada nó da árvore representa um elemento existente no documento HTML, e pode ser de vários tipos: ELEMENT_NODE (1), ATTRIBUTE_NODE (2), TEXT_NODE (3), COMMENT_NODE (8), DOCUMENT_NODE (9), e DOCUMENT_FRAGMENT_NODE (11)

A interface Node especifica vários métodos e propriedades que permitem atravessar e manipular a árvore de nós, como: firstChild, lastChild, nextSibling, previousSibling, parentNode, childNodes, appendChild, removeChild, replaceChild, insertBefore, etc.

Os atributos de um elemento do documento HTML, como o atributo src de uma imagem, podem ser acessados pelos métodos getAttribute, setAttribute e removeAttribute. A propriedade attributes (um array de propriedades) é implementada de modo incompatível pelo Internet Explorer



<div id="exemplo">Esse é um <h3>exemplo de HTML</h3> <br /> sobre DOM

</div>

DIV

childNodesattributes

“Esse é um” H3 BR

childNodes

“exemplo de HTML”

“sobre DOM”

id = “exemplo”



Para acessar os elementos existentes num documento HTML, o objeto document fornece dois métodos principais: getElementById, getElementsByName e getElementsByTagName.

O objeto document não representa a raiz da árvore DOM. Essa raiz, ou seja, o elemento <html>, é acessada pela propriedade document.documentElement. O mesmo ocorre com o elemento <body>, que pode ser acessado como document.body. No entanto, pode-se acessar o elemento <body>, por exemplo, com document.getElementsByTagName(‘body’)[0]


var oC; //div containervar aP; //array contendo tags Pvar aOp; //array com os radio buttons rdoOp

oC = document.getElementById(‘container’); //obter DIV containeraP = document.getElementsByTagName(‘p’); //obter todas as tags P

aP = oC.getElementsByTagName(‘p’); //tags P dentro da DIV container

aOp = document.getElementsByName(‘rdoOp’); //radio buttons com name = rdoOp


Além de interfaces como Node, Element e Document, que são comuns a HTML e XML, o padrão especifica interfaces, propriedades e métodos exclusivos para documentos HTML, como HTMLDocument, HTMLElement, HTMLBodyElement e HTMLTitleElement

A interface HTMLElement define as propriedades id, style, title, dir, lang e className, que existem, portanto, para todos os elementos do documento HTML acessados via DOM


var oC; //div container

oC = null;

oC = document.getElementById(‘container’); //obter DIV containeralert(oC.id); //exibirá ‘container’

oC.className = ‘painel’; //alterar classe css para ‘painel’oC.style.width = ‘100%’; //alterar css width para 100%oC.style.backgroundColor = ‘#F00’; //alterar cor de fundo para vermelho


Para modificar o documento HTML, é preciso utilizar métodos que criam novos nós, acessam e identificam nós dentro do documento, obtêm e modificam atributos dos elementos.


var oC; //DIV containervar oLnk; //elemento A dentro de containervar oTx; //texto do elmento A

oC = document.getElementById(‘container’); //obter DIV container

oLnk = document.createElement(‘a’); //criar elemento AoTx = document.createTextNode(‘Índice’); //criar TextNode para inserir em A

oLnk.appendChild(oTx); //inserir TextNode no elemento AoLnk.setAttribute(‘href’, ‘http://www.alistapart.com’); //definir href do elemento A

oC.appendChild(oLnk); //adicionar elemento A ao container


AJAXAsynchronous Javascript and XML


O protocolo HTTP especifica como os browsers solicitam documentos e como submetem formulários de dados de formulários a um servidor web; e como o servidor web deve responder a tais solicitações e formulários de dados

Originalmente, scripts não tinham absolutamente nenhum controle sobre solicitações e respostas HTTP. A única forma de se fazer uma solicitação HTTP era clicar num link ou submeter um formulário de dados

Posteriormente, formas limitadas começaram a surgir. A princípio, improvisações como as propriedades src de tags img e script; mais tarde, com o uso do objeto location e iframes

O objeto XMLHttpRequest, fundamental para a técnica Ajax, foi criado pela Microsoft para utilização pelo Outlook Web Access, e estava disponível no Internet Explorer desde a versão 5.0, lançada em 1999

A primeira versão do objeto XMLHttpRequest, no entanto, era acessada via ActiveX. Não existia, na época, um construtor Javascript para instanciar o objeto. Foi só com a adoção do objeto por outros browsers e a padronização por parte do W3C que a forma atual de se utilizar o objeto se tornou comum e oficial

AJAX


AJAXvar oRq; //Requisição HTTP via XMLHttpRequest

try{

oRq = new XMLHttpRequest(); //Instanciando objeto (Gecko)

oRq.open(“GET”, “testeClientes.asp”, false); //Preparar requisição GET síncrona

oRq.send(null); //Fazer requisição}catch (poE){

alert(“Não foi possível realizar a solicitação HTTP.”);}

if (oRq.status == 200) //Resposta HTTP = 200 (OK)?{

alert(oRq.responseText); //Exibir dados enviados pelo servidor}

Requisição síncrona: se o servidor parar de responder, o método send bloqueia a execução do script por muito tempo, e o browser também “trava” (dependendo da plataforma).


AJAX…

oRq.open(“GET”, “testeClientes.asp”, true); //Preparar requisição GET assíncronaoRq.send(null); //Fazer requisição

…

oRq.onreadystatechange = function () {

if (oRq.readyState == 4 && oRq.status == 200){

alert(oRq.responseText);}

};

Requisição assíncrona: a execução do script continua, mesmo após a chamada ao método send

O objeto XMLHttpRequest recebeu um tratador (handler) para o evento onreadystatechange. Quando o evento ocorrer, esse tratador será executado

O evento onreadystatechange ocorre a cada mudança de estado da solicitação HTTP. Quando o estado é 4, a resposta do servidor está completa. Se for bem-sucedida (código 200), é possível obtê-la pela propriedade responseText


Estados possíveis da solicitação HTTP (propriedade readyState)

0 – Requisição não iniciada (método open ainda não foi chamado)

1 – Requisição configurada (método open chamado, método send não)

2 – Requisição enviada (método send chamado; servidor não respondeu)

3 – Requisição em processamento (dados sendo recebidos pelo servidor)

4 – Requisição completa (resposta do servidor concluída)

AJAX


Outros pontos importantes


Execução dinâmica Em algumas linguagens, sobretudo linguagens interpretadas, é possível

avaliar e executar uma string como se ela fosse um trecho de código

O interpretador executa o código contido na string e/ou retorna o resultado da expressão contida nela, para uso do programador

Em Javascript, isso é obtido através da função eval

var sC; //código javascript

sC = “var iN = 7; alert(iN);”;

eval(sC);


“Os maiores desafios à criação de aplicações Ajax não são de ordem técnica. Hoje, as tecnologias Ajax essenciais são maduras, estáveis e bem

compreendidas. Os desafios existem, na verdade, para os que projetam aplicações Ajax: esquecer aquilo que pensamos saber sobre as limitações da

web e começar a imaginar uma gama de possibilidades mais rica e mais ampla. Será algo divertido.”

Jesse James Garrett – criador do termo Ajax

AJAX

Prototype JS

PrototypePrototype JS - Overview

Extensões do DOM


Extensões do DOM A parte principal do framework Prototype JS são as extensões feitas ao


A classe Element, contida no framework, possui o método extend, que adiciona a um elemento qualquer do DOM uma série de propriedades e métodos especiais


oC = document.getElementById(‘container’);oC.style.display = ‘none’;


oC = document.getElementById(‘container’);Element.extend(oC);

oC.hide();


Métodos utilitários O Prototype JS possui vários métodos especiais, chamados de métodos

utilitários

Esses métodos adicionam outras facilidades à manipulação do documento ou servem como apelidos para métodos de classes específicas


oC = $(‘container’); //método utilitário $ (wrapper p/ getElementById e chama extend)oC.hide();

var oTxN; //textbox nome

oTxN = $(‘txtNome’);

alert($F(oTxN)); //método $F - exibirá o valor do campo txtNome


Métodos utilitários $ - Recebe uma string ou um elemento. No primeiro caso, procura no

documento o objeto cujo id seja igual à string passada como parâmetro. No segundo, aplica Element.extend ao elemento passado como parâmetro

$$ - Recebe uma string contendo um seletor CSS e retorna um array contendo todos os elementos do documento que podem ser obtidos através daquele seletor

$F – Recebe um elemento da página como parâmetro e retorna o valor do elemento. Utilitário para o método Form.Element.getValue

$A – Recebe qualquer dado que possa ser acessado através de índices, isto é, que se comporte como um array, e o estende através da classe Array do framework, adicionando recursos extra

…


Orientação a objetos utilizando Prototype JS O Prototype JS possui recursos especiais para facilitar a aplicação da

orientação a objetos em Javascript

var Pessoa = Class.create(

{initialize: function(psNm) { this.nome = psNm; }

});

var Bebado = Class.create(

Pessoa,{

zoar: function() { return ‘Se eu pudesse, eu matarra mil!’); }}

);

var oJ;

oJ = new Bebado(‘Jeremias’);oJ.zoar();


Orientação a objetos utilizando Prototype JS…

var Bebado = Class.create(

Pessoa,{

zoar: function() { return ‘Se eu pudesse, eu matarra mil!’; }}

);

var TiradorDeOnda = Class.create(

Bebado,{

zoar: function($super) { return $super() + ‘Mas gosto de dar uma zoadinha!’ }}

);

var oL;

oL = new TiradorDeOnda(‘Lonaldo’);oL.zoar(); //exibirá ‘Se eu pudesse, eu matarra mil! Mas gosto de dar uma zoadinha!’


Ajax utilizando Prototype JS O Prototype JS possui a classe especial Ajax, que provê, junto com o

restante do framework, muitas facilidades para o uso da técnica

Uma das vantagens mais importantes é que todos os recursos são cross-browser

new Ajax.Request(‘paginaTeste.asp’, { method: ‘get’ });

new Ajax.Request(

‘paginaTeste.asp’, {

method: ‘get’,parameters: { nome: ‘Leonaldo’, pingas: 8 }

});


Ajax utilizando Prototype JS

new Ajax.Request(


method: ‘get’,parameters: { nome: ‘Leonaldo’, pingas: 8 },onSuccess: tratarResp,onFailure: tratarErro

});

function tratarResp(poR) //handler p/ tratar a resposta do servidor{

alert(poR.responseText);}

function tratarErro() //handler para erro na solicitação{

alert(‘Houve um erro na solicitação HTTP’);}



new Ajax.Request(


method: ‘get’,parameters: $(‘frmDados’).serialize(),onSuccess: tratarResp,onFailure: tratarErro

});

function tratarResp(poR) //handler p/ tratar a resposta do servidor{

alert(poR.responseText);}

function tratarErro() //handler para erro na solicitação{

alert(‘Houve um erro na solicitação HTTP’);}



new Ajax.Updater(

‘menu’,‘menuLoader.asp’, {

method: ‘get’}

);

A junção dos recursos Ajax com os demais recursos do framework dá resultados extremamente interessantes e altamente produtivos

Exemplos disso são as classes Ajax.Updater e Ajax.PeriodicalUpdater

<div id=“menu”>Carregando…</div>

new Ajax.Updater(

{ success: ‘menu’, failure: ‘erro’ },…



new Ajax.PeriodicalUpdater(

‘chat’,‘atualizacaoChat.asp’, {

method: ‘get’,insertion: Insertion.Bottom,frequency: 2

});

A junção dos recursos Ajax com os demais recursos do framework dá resultados extremamente interessantes e altamente produtivos

Exemplos disso são as classes Ajax.Updater e Ajax.PeriodicalUpdater

<div id=“chat”>Carregando…</div>

Prototype JS - Overview

Considerações finais


Considerações finais A linguagem Javascript deverá, em breve, chegar a sua versão 2,

oferecendo suporte nativo a classes, herança e outros paradigmas da orientação a objetos tradicional

Os webstandards e a adoção de padrões de acessibilidade e usabilidade estão transformando o ambiente de desenvolvimento para web numa plataforma séria e confortável para o usuário

Tecnologias como JIT (just-in-time), atualmente utilizada pelo Google Chrome, serão implementadas nas próximas versões do Mozilla Firefox e demais browsers de peso, acelerando dramaticamente a execução de scripts no navegador e permitindo aplicações muito mais pesadas e robustas

O amadurecimento de tecnologias padronizadas pelo W3C, como SVG, CSS3, MathML e outras, permitirá que todas sejam utilizadas simultaneamente num mesmo documento, transformando completamente os recursos visuais, de animação e interação com o usuário


Considerações finais Estamos vivendo os primeiros anos da Web 2.0. Num futuro próximo, a

integração com dispositivos móveis, como celulares e PDAs, e a difusão de redes Wireless abertas fará com que a programação para internet modifique o modo de vida de milhões de pessoas

A computação em nuvem (cloud computing), utilizando browsers super-poderosos e redes wireless, permitirá que a utilização de editores de texto e planilhas eletrônicas, a visualização de filmes e a manutenção de todas essas informações online, acessíveis pelo celular ou por notebooks

Sistemas de GPS ganharão força com as redes wireless abertas, e provavelmente serão incluídos em muitos automóveis. Em breve, teremos pequenos dispositivos para acesso a web dentro dos veículos, em postos de conveniência, etc.


Considerações finais

Nós somos participantes ativos dessa transformação. Podemos contribuir com a evolução de várias dessas tecnologias e garantir que permaneçam abertas, não-proprietárias, de acordo com as

recomendações dos órgãos reguladores da internet.


Referências

Flanagan, D. – O’Reilly - Javascript: The Definitive Guide, 5th Edition

World Wide Web Consortium – www.w3.org

Prototype JS - http://www.prototypejs.org/

Ajaxian - http://ajaxian.com/

A List Apart - http://www.alistapart.com/

Wikipedia – http://en.wikipedia.org/

Daniel Guimarã[email protected]

http://www.w3.org/

http://www.prototypejs.org/

http://ajaxian.com/

http://www.alistapart.com/

http://en.wikipedia.org/

javascript e prototype js overview. javascript essencial

Documents