View
276
Download
0
Category
Preview:
Citation preview
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
JavascriptPrototype JS - Overview
Tipos de dados
JavascriptPrototype JS - Overview
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
JavascriptPrototype JS - Overview
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
JavascriptPrototype JS - Overview
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
JavascriptPrototype JS - Overview
Valor X referência
JavascriptPrototype JS - Overview
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
JavascriptPrototype JS - Overview
Operadores
JavascriptPrototype JS - Overview
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
JavascriptPrototype JS - Overview
Controle de fluxo
JavascriptPrototype JS - Overview
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
JavascriptPrototype JS - Overview
Orientação a objetos e JSON
JavascriptPrototype JS - Overview
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 - { , : [
JavascriptPrototype JS - Overview
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);
JavascriptPrototype JS - Overview
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)
function Advogado(psNome, psEnd, pbVozF){
...}Advogado.prototype.reclamarDeUmTelefone = reclamarTel;
var oAdv = new Advogado('Luiz Pareto', 'Assembleia, 10', true);
if (oAdv.vozFina == true) alert('Você é meio viado?');
JavascriptPrototype JS - Overview
Protótipo
Construtor Advogado(function Advogado(...))
Protótipo Método 'reclamarDeUmTelefone'(function reclamarTel())
oAdv oAdv2 oAdv3
oAdv.reclamarDeUmTelefone();
oAdv2.reclamarDeUmTelefone();
oAdv3.reclamarDeUmTelefone();
JavascriptPrototype JS - Overview
Simulando classes - encapsulamento
function Advogado(psNome, psEnd, pbVozF){
this.nome = psNome; //propriedade pública}Advogado.prototype.reclamarDeUmTelefone = reclamarTel; //método público
function Advogado(psNome, psEnd, pbVozF){
var nome = psNome; //propriedade privada
function reclamarDeUmTelefone() //método privado{}
}
function Advogado(psNome, psEnd, pbVozF){
this.reclamarDeUmTelefone = reclamarTel; //método privilegiado}
JavascriptPrototype JS - Overview
Outros pontos importantes
JavascriptPrototype JS - Overview
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
function Advogado(psNome, psEnd, pbVozF){
this.reclamarDeUmTelefone = function () { alert(‘Não fala nem recebe chamada.’); };}
function Advogado(psNome, psEnd, pbVozF){
this.reclamarDeUmTelefone = function () {
alert(‘Não fala nem recebe chamada.’); };
}
JavascriptPrototype JS - Overview
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'
JavascriptPrototype JS - Overview
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
JavascriptPrototype JS - Overview
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
JavascriptPrototype JS - Overview
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
JavascriptPrototype JS - Overview
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;}
JavascriptPrototype JS - Overview
Client-side JavascriptO objeto window, o DOM e a programação orientada a eventos
JavascriptPrototype JS - Overview
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'
JavascriptPrototype JS - Overview
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
JavascriptPrototype JS - Overview
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.
O DOM e a hierarquia client-side
JavascriptPrototype JS - Overview
O DOM e a hierarquia client-side
<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”
JavascriptPrototype JS - Overview
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
JavascriptPrototype JS - Overview
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>
A programação orientada a eventos
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
JavascriptPrototype JS - Overview
A programação orientada a eventos
var oChkM; //checkbox chkMsg
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
var oChkM; //checkbox chkMsg
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
JavascriptPrototype JS - Overview
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.
A programação orientada a eventos
function exibirMsg(){
alert(this.availHeight);}
window.addEventListener(‘load’, exibirMsg, false); //definir handler p/ evento onload
DOM e Ajax
JavascriptPrototype JS - Overview
Document Object Model
JavascriptPrototype JS - Overview
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
Document Object Model
JavascriptPrototype JS - Overview
<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”
Document Object Model
JavascriptPrototype JS - Overview
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]
Document Object Model
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
JavascriptPrototype JS - Overview
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
Document Object Model
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
JavascriptPrototype JS - Overview
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.
Document Object Model
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
JavascriptPrototype JS - Overview
AJAXAsynchronous Javascript and XML
JavascriptPrototype JS - Overview
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
JavascriptPrototype JS - Overview
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).
JavascriptPrototype JS - Overview
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
JavascriptPrototype JS - Overview
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
JavascriptPrototype JS - Overview
Outros pontos importantes
JavascriptPrototype JS - Overview
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);
JavascriptPrototype JS - Overview
“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
JavascriptPrototype JS - Overview
Extensões do DOM A parte principal do framework Prototype JS são as extensões feitas ao
Document Object Model
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
var oC; //div container
oC = document.getElementById(‘container’);oC.style.display = ‘none’;
var oC; //div container
oC = document.getElementById(‘container’);Element.extend(oC);
oC.hide();
JavascriptPrototype JS - Overview
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
var oC; //div container
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
JavascriptPrototype JS - Overview
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
…
JavascriptPrototype JS - Overview
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();
JavascriptPrototype JS - Overview
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!’
JavascriptPrototype JS - Overview
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 }
});
JavascriptPrototype JS - Overview
Ajax utilizando Prototype JS
new Ajax.Request(
‘paginaTeste.asp’, {
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’);}
JavascriptPrototype JS - Overview
Ajax utilizando Prototype JS
new Ajax.Request(
‘paginaTeste.asp’, {
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’);}
JavascriptPrototype JS - Overview
Ajax utilizando Prototype JS
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’ },…
JavascriptPrototype JS - Overview
Ajax utilizando Prototype JS
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
Prototype JS - Overview
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
Prototype JS - Overview
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.
Prototype JS - Overview
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.
Prototype JS - Overview
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ãesdaniel.guimaraes@hcti.com.br
Recommended