• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Prototype Framework Javascript
 

Prototype Framework Javascript

on

  • 2,292 views

Prototype Framework Javascript

Prototype Framework Javascript

Statistics

Views

Total Views
2,292
Views on SlideShare
2,007
Embed Views
285

Actions

Likes
1
Downloads
36
Comments
0

3 Embeds 285

http://alexandrequintal.wordpress.com 277
http://www.slideshare.net 7
http://www.slashdocs.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Prototype Framework Javascript Prototype Framework Javascript Presentation Transcript

    • http://www.prototypejs.org/
    • Prototype
      • É colecção de funções, bem escritas e bem pensadas que aliviam o trabalho na hora de fazer as páginas altamente interactivas.
      • O objectivo destas funções é evitar uma imensidão de digitação repetitiva e propensa a erros. Também agiliza o trabalho.
    • API Docs
      • Utility Methods
      • Ajax
      • Array
      • Class
      • Date
      • Element
      • Element.Methods
      • Element.Methods.Simulated
      • Enumerable
      • Event
      • Form
      • Form.Element
      • Function
      • Hash
      • Insertion
      • Number
      • Object
      • ObjectRange
      • PeriodicalExecuter
      • Position
      • Prototype
      • String
      • Template
      • TimedObserver
      • document
      • document.viewport
    • Instalação do Prototype
      • Baixar o prototype.js de http://www.prototypejs.org/download e renomear com a versão baixada. Actualmente: 1.6.0
      • <script src=&quot;prototype_v1.6.0.js&quot; type=&quot;text/javascript&quot;></script>
    • Utility Methods: $()
      • A função $() substitui a função document.getElementById()
      • Retorna o elemento da página identificado pelo valor id
        • Ex.:
          • <div id=‘nomeDiv'></div>
            • Antes :
              • document.getElementById(‘nomeDiv'). innerHTML = 'conteúdo';
            • Agora :
              • $(‘nomeDiv'). innerHTML = 'conteúdo';
          • <form id=‘nomeForm' method=‘post'>
            • Antes :
              • document.getElementById('nomeForm').submit();
            • Agora :
              • $(‘nomeForm').submit();
          • <input type='text' id='nomeCampo‘ name='nomeCampo‘ >
            • Antes :
              • document.nomeForm.nomeCampo.value
              • document.getElementById('nomeCampo').value
            • Agora :
              • $(‘nomeCampo').value
    • Utility Methods: $F() e getValue()
      • A função getValue() retorna o valor do elemento do formulário. O atalho é $F()
        • <form id='nomeForm' name='nomeForm'>
        • <input type='text' id='nomeCampo' name='nomeCampo'>
        • </form>
        • Antes :
        • document.nomeForm.nomeCampo.value
        • Agora :
        • $('nomeCampo').getValue();
        • ou
        • $F('nomeCampo')
    • Element.Methods: hide(), show() e visible()
      • A função hide() é usada para esconder o elemento da página.
        • Antes :
        • document.getElementById('nomeTabela').style.display = 'none';
        • Agora :
        • $('nomeTabela').hide();
      • A função show() é usada para mostrar o elemento da página.
        • Antes :
        • document.getElementById(‘nomeTabela').style.display = 'inline';
        • Agora :
        • $('nomeTabela').show();
      • A função visible() indica se o elemento da página está visível.
        • <div id= ' div1 ' >conteúdo div 1</div>
        • <div id= ' div2 ' style= ' display: none; ' >conteúdo div 2</div>
        • $( ' div1').visible(); // -> true
        • $( ' div2').visible(); // -> false
    • Form.Element: clear(), present() e serialize()
      • A função clear() : limpa o conteúdo do elemento do formulário.
        • Antes : document.nomeForm.nomeCampo.value = '';
        • Agora : $('nomeCampo').clear();
      • A função present() verifica se o text input tem conteúdo.
        • Antes :
        • if (document.nomeForm.nomeCampo == '')
        • Agora :
        • if (!$('nomeCampo').present())
      • A função serialize() cria um representação URL-encoded do controle do formulário no formato name=value.
        • Antes :
        • window.open( ' enviaServlet?nomeCampo= ' + document.nomeForm.nomeCampo.value)
        • Agora :
        • window.open('enviaServlet?' + $('nomeCampo').serialize())
    • Hash: get() e set()
      • O Hash é como um array associativo (lista de pares chave/valor).
      • var messagesJs = new Hash() ;
      • messagesJs. set ('montante_preencher‘, ‘Favor informar o montante.');
      • messagesJs. set ('montante_invalido', ‘O montante informado é inválido.');
      • alert(messagesJs. get ('montante_preencher'))
      • alert(messagesJs. get ('montante_invalido'))
    • Ajax: Asynchronous JavaScript + XML
      • AJAX ou Asynchronous JavaScript and XML é um inovado caminho de usar existentes tecnologias para tornar as páginas mais interativas com o usuário.
      • Ajax permite actualizar partes de uma página sem ter que fazer reload da página inteira.
      • Jesse James Garret do site “Adaptive Path” definiu AJAX como o seguinte:
      • “ O AJAX não é uma tecnologia. São na realidade várias tecnologias, cada uma progredindo de forma independente, e que se juntaram de forma a poder explorar formas de melhorar a interacção com os utilizadores em aplicações Web.”
      • O AJAX utiliza as seguintes tecnologias:
        • Apresentação baseada em standards utilizando XHTML e CSS
        • Interação e apresentação dinâmica utilizando o Documento Object Model (DOM)
        • Formato standard para troca e manipulação de dados - XML
        • Comunicação assincrona com o servidor utilizando XMLHttpRequest
        • Javascript como agregador de todas estas tecnologias
    • Modelo clássico vs modelo AJAX
    • Modelo clássico vs modelo AJAX
    • Ajax: Vantagens
      • Maior interactividade nas aplicações
      • Redução de largura de banda
      • Redução de carga de processamento do servidor
      • Ajax não é proprietário (AJAX não é um nome de nenhuma marca ou produto, apenas uma designação de um método de desenho para aplicações Web, utilizando um conjunto de tecnologias existentes standard.)
      • Portabilidade (as tecnologias são utilizadas pela maioria dos browsers existentes no mercado, nem a uma plataforma. Não requer a instalação de qualquer plugin no browser ou software no cliente.)
    • Ajax: Desvantagens
      • Capacidades limitadas (O Ajax ao se basear nas tecnologias existentes, herda as suas limitações. Exemplos de limitações são: armazenamento local no cliente, interacção com hardware (impressoras, webcams)
      • Performance do cliente (Ajax transfere-se muito do processamento do servidor para o cliente. Podermos sobrecarregar o cliente caso não se tomem as devidas precauções durante a fase de desenvolvimento.)
      • Requer conectividade permanente
    • Ajax.Request
      • <input type=‘text‘ id=‘nome‘ name=‘nome'>
      • <div id='conteudo'>Isto é a mensagem inicial!</div>
      • <div id='loading' style= ' display: none; ' >A fazer loading...</div>
      • <input type='button' value='Ir buscar novo conteudo 1' onclick='novoConteudo(1)'>
      • <input type='button' value='Ir buscar novo conteudo 2' onclick='novoConteudo(2)'>
      • <script type='text/javascript'>
      • function novoConteudo(tipo) {
      • new Ajax.Request(‘/novoConteudoServlet', {
      • method: ‘post',
      • parameters: { p_tipo: tipo, p_nome: $F(nome) }
      • onCreate: { function() {
      • $('conteudo').hide();
      • $('loading').show();
      • },
      • onComplete: mostrarResposta
      • });
      • }
      • </script>
    • Ajax.Request
      • function mostrarResposta(originalRequest) {
      • $('loading').hide();
      • $('conteudo').show();
      • $('conteudo').innerHTML = originalRequest;
      • }
      • Outros callbacks:
        • onSuccess
        • onFailure
        • onUninitialized
        • onLoading
        • onLoaded
        • onInteractive
        • onException
    • Ajax.Updater
      • <body>
      • <input type='text' id='nomeItem' name='nomeItem'>
      • <div id='items'></div>
      • <input type='button' value='Novo Item' onclick='novoItem()'>
      • </body>
      • <script type='text/javascript'>
      • function novoItem() {
      • new Ajax.Updater('items', '/novoItemServlet', {
      • parameters: { nomeItem: $F('nomeItem') },
      • insertion: Insertion.Bottom
      • });
      • </script>
    • Referências
      • http://www.prototypejs.org/
      • http:// www.sergiopereira.com / articles /prototype140.js.ptBR.html
      • http:// pwp.net.ipl.pt / alunos.isel /24138/AJAX/ IntroducaoAJAX.pdf