Javascript e Prototype JS

Javascript e Prototype JS
Overview

Javascript essencial

Não é um subconjunto de Java: ECMAScript (ECMA-262)‏ Interpretada
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

Variáveis não inicializadas têm o valor undefined
Prototype JS - Overview Javascript Tipos de dados Tipos primitivos (primitive types) Numérico String Booleano Objeto Array Função var nEx; nEx = 3.8; nEx = 048; nEx = 0xFF3; var sEx; sEx = “palavra”; sEx = 'palavra'; var bEx; bEx = true; bEx = false; Tipos de referência (reference types) var oEx; oEx = new Object(); new Date(); var aEx; aEx = [1, 0, 1]; aEx = [“alfa”, “beta”]; function obterUsuarios() { } Variáveis não inicializadas têm o valor undefined

var aEx = []; var aEx = new Array();
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

function nome([arg1 [,arg2 [..., argn]]]) { //código }
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

Javascript Valor X referência

Manipulação de dados por valor Manipulação de dados por referência
Prototype JS - Overview Javascript Manipulação de dados por valor var iNumA, iNumB; iNumA = 7; iNumB = iNumA; iNumA = 9; 7 7 iNumA iNumB 9 7 iNumA iNumB Manipulação de dados por referência Memória var aMAluno1, aMAluno2; aMAluno1 = [2, 3.2, 8]; aMAluno2 = aMAluno1; aMAluno1[0] = 5; 0x01CF 2 3.2 8 0x01CF 0x01CF aMAluno1 aMAluno2 0x01CF 5 3.2 8 0x01CF 0x01CF aMAluno1 aMAluno2

Javascript Operadores

Principais 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) ...

Javascript Controle de fluxo

Controle de fluxo do programa
Prototype JS - Overview Javascript Controle de fluxo do programa Decisão Laços (loops)‏ IF/ELSE if (expressão) sentença; else [(expressão)] FOR / FOR..IN for (inicialização; teste; incremento)‏ sentença; for (variável in objeto)‏ SWITCH switch (expressão) { case valor: sentença; ... break; [default: break;] } WHILE / DO WHILE while (expressão) sentença; do while (expressão);

Orientação a objetos, JSON e Client-side JS

Orientação a objetos e JSON
Prototype JS - Overview Javascript Orientação a objetos e JSON

Métodos são funções invocadas a partir de propriedades
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 - { , : [

Construtores function Advogado(psNome, psEnd, pbVozF)‏ {
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);

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?');

Protótipo oAdv.reclamarDeUmTelefone(); oAdv2.reclamarDeUmTelefone();
Prototype JS - Overview Javascript 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
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 }

Outros pontos importantes
Prototype JS - Overview Javascript Outros pontos importantes

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.’); }; }

Wrappers para tipos primitivos
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'

As classes Date, Math e RegExp
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); //data de 20/01/2006 alert(new Date().getMonth()); //mês atual oREAlfa = new RegExp('[a-zA-Z]*'); //expressão regular definida pelo construtor oREAlfa = /[a-zA-Z]*/; //expressão regular definida com um literal alert(Math.round(2.3)); //arredondamento de 2.3 para número inteiro alert(Math.sqrt(4)); //raiz quadrada de 4

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

Coleta de lixo var sNm; //nome do usuário
Prototype JS - Overview Javascript Coleta de lixo var sNm; //nome do usuário var sNmMin; //nome do usuário em minúsculas sNm = 'Khaled Mahmoud'; //memória alocada para uma string sNmMin = sNm.toLowerCase(); //uma nova string é alocada: 'khaled mahmoud' sNm = sNmMin; //a referência para 'Khaled Mahmoud' não existe mais Memória sNm 0x03AD Khaled Mahmoud Memória sNm 0x03AD Khaled Mahmoud khaled mahmoud 0x03B5 Memória sNmMin sNm 0x03AD Khaled Mahmoud khaled mahmoud 0x03B5 sNmMin

Tratamento de exceções
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) finally

Client-side Javascript
Prototype JS - Overview Javascript Client-side Javascript O objeto window, o DOM e a programação orientada a eventos

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'

O DOM e a hierarquia client-side DOM - Document Object Model
Prototype JS - Overview Javascript O DOM e a hierarquia client-side navigator frames[ ] location window (global object)‏ DOM - Document Object Model history forms[ ] elements[ ] (inputs, selects, textareas, ...)‏ document images[ ] screen self, window, parent, top

O DOM e a hierarquia client-side
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.

O DOM e a hierarquia client-side
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 BR “sobre DOM” childNodes “exemplo de HTML”

A programação orientada a eventos
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’); //obter checkbox oChkM.onclick = exibirMsg; //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’); //obter checkbox oChkM.addEventListener(‘click’, exibirMsg, false); //definir handler p/ evento onclick window.addEventListener(‘load’, exibirMsg, false); //definir handler p/ evento onload var oChkM; //checkbox chkMsg oChkM = document.getElementById(‘chkMsg’); //obter checkbox oChkM.attachEvent(‘onclick’, exibirMsg, false); //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

Javascript Document Object Model

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

Document Object Model <div id="exemplo">
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 BR “sobre DOM” childNodes “exemplo de HTML”

Javascript Document Object Model var oC; //div container var aP; //array contendo tags P var aOp; //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]

Javascript Document Object Model var oC; //div container oC = null; oC = document.getElementById(‘container’); //obter DIV container alert(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 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

Javascript Document Object Model var oC; //DIV container var oLnk; //elemento A dentro de container var oTx; //texto do elmento A oC = document.getElementById(‘container’); //obter DIV container oLnk = document.createElement(‘a’); //criar elemento A oTx = document.createTextNode(‘Índice’); //criar TextNode para inserir em A oLnk.appendChild(oTx); //inserir TextNode no elemento A oLnk.setAttribute(‘href’, ‘ //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.

Asynchronous Javascript and XML
Prototype JS - Overview Javascript AJAX Asynchronous Javascript and XML

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

Javascript AJAX var 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).

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

AJAX Estados possíveis da solicitação HTTP (propriedade readyState)
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)

Outros pontos importantes
Prototype JS - Overview Javascript Outros pontos importantes

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);

Jesse James Garrett – criador do termo Ajax
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

Extensões do DOM

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();

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’); //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

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 …

Orientação a objetos utilizando Prototype JS
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();

Orientação a objetos utilizando Prototype JS
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!’

Ajax utilizando Prototype JS
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) //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’);

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) //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’);

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 } );

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 – Prototype JS - Ajaxian - A List Apart - Wikipedia – Daniel Guimarães

Javascript e Prototype JS

Apresentações semelhantes

Apresentação em tema: "Javascript e Prototype JS"— Transcrição da apresentação:

Apresentações semelhantes

Sobre projeto

Feedback

Login

Autorizar-se através da rede social:

Javascript e Prototype JS

Apresentações semelhantes

Apresentação em tema: "Javascript e Prototype JS"— Transcrição da apresentação:

Apresentações semelhantes

Sobre projeto

Feedback