Javascript e Prototype JS
Overview
Javascript essencial
Prototype JS - Overview
Javascript

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
Prototype JS - Overview
Javascript
Tipos de dados
Prototype JS - Overview
Javascript
Tipos de dados
Tipos primitivos (primitive types)
var nEx; nEx = 3.8;
nEx = 048;

Numérico
String
var sEx; sEx = “palavra”;
sEx = 'palavra';

Booleano
var bEx; bEx = true;
bEx = false;

nEx = 0xFF3;
Tipos de referência (reference types)


Objeto
var oEx; oEx = new Object();
new Date();

Array
var aEx; aEx = [1, 0, 1];
aEx = [“alfa”, “beta”];

Função
function obterUsuarios() { }
Variáveis não inicializadas têm o valor undefined
Prototype JS - Overview
Javascript
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
Prototype JS - Overview
Javascript
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
Prototype JS - Overview
Javascript
Valor X referência
Prototype JS - Overview
Javascript
Manipulação de dados por valor
var iNumA, iNumB;
7
7
iNumA = 7;
iNumA
iNumB
iNumB = iNumA;
----------------------------------------------------------------------------------------------iNumA = 9;
9
7
iNumA
iNumB
Manipulação de dados por referência
Memória
var aMAluno1, aMAluno2;
0x01CF
aMAluno1 = [2, 3.2, 8];
aMAluno2 = aMAluno1;
2
0x01CF
0x01CF
aMAluno1
aMAluno2
3.2
8
------------------------------------------------------------------------------------------------------aMAluno1[0] = 5;
0x01CF
5
0x01CF
0x01CF
aMAluno1
aMAluno2
3.2
8
Prototype JS - Overview
Javascript
Operadores
Prototype JS - Overview
Javascript
Principais operadores
Aritméticos
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
Relacionais e lógicos
“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) ...
Prototype JS - Overview
Javascript
Controle de fluxo
Prototype JS - Overview
Javascript
Controle de fluxo do programa
Laços (loops)
Decisão
IF/ELSE
FOR / FOR..IN
if (expressão)
sentença;
else [(expressão)]
sentença;
for (inicialização; teste; incremento)
sentença;
SWITCH
WHILE / DO WHILE
switch (expressão)
{
case valor:
sentença;
...
break;
...
[default:
sentença;
...
break;]
}
while (expressão)
sentença;
for (variável in objeto)
sentença;
do
sentença;
while (expressão);
Orientação a objetos,
JSON e
Client-side JS
Prototype JS - Overview
Javascript
Orientação a objetos e JSON
Prototype JS - Overview
Javascript
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 - { , : [
Prototype JS - Overview
Javascript
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);
Prototype JS - Overview
Javascript
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?');
Prototype JS - Overview
Javascript
Protótipo
Construtor Advogado
(function Advogado(...))
Método 'reclamarDeUmTelefone'
(function reclamarTel())
Protótipo
oAdv
oAdv2
oAdv3
oAdv.reclamarDeUmTelefone();
oAdv2.reclamarDeUmTelefone();
oAdv3.reclamarDeUmTelefone();
Prototype JS - Overview
Javascript
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
Prototype JS - Overview
Javascript
Outros pontos importantes
Prototype JS - Overview
Javascript
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.’);
};
}
Prototype JS - Overview
Javascript
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'
Prototype JS - Overview
Javascript
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 nascimento
var oREAlfa; //expressão regular para manipulação de caracteres alfabéticos
oDtN = new Date(2006, 1, 20);
alert(new Date().getMonth());
//data de 20/01/2006
//mês atual
oREAlfa = new RegExp('[a-zA-Z]*');
oREAlfa = /[a-zA-Z]*/;
//expressão regular definida pelo construtor
//expressão regular definida com um literal
alert(Math.round(2.3));
alert(Math.sqrt(4));
//arredondamento de 2.3 para número inteiro
//raiz quadrada de 4
Prototype JS - Overview
Javascript
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
Prototype JS - Overview
Javascript
Coleta de lixo
var sNm;
var sNmMin;
//nome do usuário
//nome do usuário em minúsculas
sNm = 'Khaled Mahmoud';
sNmMin = sNm.toLowerCase();
//memória alocada para uma string
//uma nova string é alocada: 'khaled mahmoud'
sNm = sNmMin;
//a referência para 'Khaled Mahmoud' não existe mais
Memória
0x03AD
Khaled Mahmoud
sNm
Memória
Memória
0x03AD
Khaled Mahmoud
0x03B5
khaled mahmoud
0x03AD
Khaled Mahmoud
0x03B5
khaled mahmoud
sNm
sNmMin
sNm
sNmMin
Prototype JS - Overview
Javascript
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;
}
Prototype JS - Overview
Javascript
Client-side Javascript
O objeto window, o DOM e a programação orientada a eventos
Prototype JS - Overview
Javascript
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'
Prototype JS - Overview
Javascript
O DOM e a hierarquia client-side
navigator
frames[ ]
location
window
(global object)
DOM - Document Object Model
history
forms[ ]
document
elements[ ]
images[ ]
screen
self, window,
parent, top
(inputs, selects,
textareas, ...)
Prototype JS - Overview
Javascript
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.
Prototype JS - Overview
Javascript
O DOM e a hierarquia client-side
<div id="exemplo">
Esse é um <h3>exemplo de HTML</h3> <br /> sobre DOM
</div>
DIV
attributes
childNodes
id = “exemplo”
“Esse é um”
H3
childNodes
“exemplo de HTML”
BR
“sobre DOM”
Prototype JS - Overview
Javascript
A programação orientada a eventos





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.
Prototype JS - Overview
Javascript
A programação orientada a eventos
<input type="chkMsg" name=“chkMsg" value=“msg“ onclick=“exibirMsg();"></input>
<body onload=“exibirMsg();”></body>



var oChkM;
//checkbox chkMsg
oChkM = document.getElementById(‘chkMsg’);
oChkM.onclick = exibirMsg;
//obter checkbox
//definir handler p/ evento onclick
window.onload = exibirMsg;
//definir handler p/ evento onload
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.
Prototype JS - Overview
Javascript
A programação orientada a eventos


var oChkM;
//checkbox chkMsg
oChkM = document.getElementById(‘chkMsg’);
oChkM.addEventListener(‘click’, exibirMsg, false);
//obter checkbox
//definir handler p/ evento onclick
window.addEventListener(‘load’, exibirMsg, false);
//definir handler p/ evento onload
var oChkM;
//checkbox chkMsg
oChkM = document.getElementById(‘chkMsg’);
oChkM.attachEvent(‘onclick’, exibirMsg, false);
//obter checkbox
//definir handler p/ evento onclick IE
window.attachEvent(‘onload’, exibirMsg, false);
//definir handler p/ evento onload IE
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
Prototype JS - Overview
Javascript
A programação orientada a eventos
function exibirMsg()
{
alert(this.availHeight);
}
window.addEventListener(‘load’, exibirMsg, false);


//definir handler p/ evento onload
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.
DOM e Ajax
Prototype JS - Overview
Javascript
Document Object Model
Prototype JS - Overview
Javascript
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
Prototype JS - Overview
Javascript
Document Object Model
<div id="exemplo">
Esse é um <h3>exemplo de HTML</h3> <br /> sobre DOM
</div>
DIV
attributes
childNodes
id = “exemplo”
“Esse é um”
H3
childNodes
“exemplo de HTML”
BR
“sobre DOM”
Prototype JS - Overview
Javascript
Document Object Model
var oC;
var aP;
var aOp;
//div container
//array contendo tags P
//array com os radio buttons rdoOp
oC = document.getElementById(‘container’);
//obter DIV container
aP = 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


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]
Prototype JS - Overview
Javascript
Document Object Model
var oC;
//div container
oC = null;


oC = document.getElementById(‘container’);
alert(oC.id);
//obter DIV container
//exibirá ‘container’
oC.className = ‘painel’;
oC.style.width = ‘100%’;
oC.style.backgroundColor = ‘#F00’;
//alterar classe css para ‘painel’
//alterar css width para 100%
//alterar cor de fundo para vermelho
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
Prototype JS - Overview
Javascript
Document Object Model

var oC;
var oLnk;
var oTx;
//DIV container
//elemento A dentro de container
//texto do elmento A
oC = document.getElementById(‘container’);
//obter DIV container
oLnk = document.createElement(‘a’);
oTx = document.createTextNode(‘Índice’);
//criar elemento A
//criar TextNode para inserir em A
oLnk.appendChild(oTx);
oLnk.setAttribute(‘href’, ‘http://www.alistapart.com’);
//inserir TextNode no elemento A
//definir href do elemento A
oC.appendChild(oLnk);
//adicionar elemento A ao container
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.
Prototype JS - Overview
Javascript
AJAX
Asynchronous Javascript and XML
Prototype JS - Overview
Javascript
AJAX





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
Prototype JS - Overview
Javascript
AJAX
var oRq;
try
{
oRq = new XMLHttpRequest();
//Requisição HTTP via 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)
{
alert(oRq.responseText);
}

//Resposta HTTP = 200 (OK)?
//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).
Prototype JS - Overview
Javascript
AJAX
…
oRq.open(“GET”, “testeClientes.asp”, true); //Preparar requisição GET assíncrona
oRq.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
Prototype JS - Overview
Javascript
AJAX

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)
Prototype JS - Overview
Javascript
Outros pontos importantes
Prototype JS - Overview
Javascript
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);
Prototype JS - Overview
Javascript
AJAX
“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
Prototype JS
Prototype JS - Overview
Prototype
Extensões do DOM
Prototype JS - Overview
Javascript
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();
Prototype JS - Overview
Javascript
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’);
oC.hide();
//método utilitário $ (wrapper p/ getElementById e chama extend)
var oTxN;
//textbox nome
oTxN = $(‘txtNome’);
alert($F(oTxN));
//método $F - exibirá o valor do campo txtNome
Prototype JS - Overview
Javascript
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
…
Prototype JS - Overview
Javascript
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();
}
Prototype JS - Overview
Javascript
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!’
Prototype JS - Overview
Javascript
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 }
}
);
Prototype JS - Overview
Javascript
Ajax utilizando Prototype JS
new Ajax.Request
(
‘paginaTeste.asp’,
{
method:
‘get’,
parameters: { nome: ‘Leonaldo’, pingas: 8 },
onSuccess: tratarResp,
onFailure:
tratarErro
}
);
function tratarResp(poR)
{
alert(poR.responseText);
}
//handler p/ tratar a resposta do servidor
function tratarErro()
{
alert(‘Houve um erro na solicitação HTTP’);
}
//handler para erro na solicitação
Prototype JS - Overview
Javascript
Ajax utilizando Prototype JS
new Ajax.Request
(
‘paginaTeste.asp’,
{
method:
‘get’,
parameters: $(‘frmDados’).serialize(),
onSuccess: tratarResp,
onFailure:
tratarErro
}
);
function tratarResp(poR)
{
alert(poR.responseText);
}
//handler p/ tratar a resposta do servidor
function tratarErro()
{
alert(‘Houve um erro na solicitação HTTP’);
}
//handler para erro na solicitação
Prototype JS - Overview
Javascript
Ajax utilizando Prototype JS


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
(
‘menu’,
‘menuLoader.asp’,
{
method: ‘get’
}
);
new Ajax.Updater
(
{ success: ‘menu’, failure: ‘erro’ },
…
Prototype JS - Overview
Javascript
Ajax utilizando Prototype JS


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>
new Ajax.PeriodicalUpdater
(
‘chat’,
‘atualizacaoChat.asp’,
{
method: ‘get’,
insertion: Insertion.Bottom,
frequency: 2
}
);
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 superpoderosos 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ães
[email protected]