Workshop jQuery por Gabriel Zigolis

Workshop sobre jQuery para a equipe de devs da Embratec GoodCard por Gabriel Zigolis

Transcript

1. Workshop jQuery – Gabriel Zigolis
   

   View Slide

2. Javascript
   • É uma linguagem de script client-side, a mais popular da web.
   • É responsável por todo o comportamento da página, incluindo:
   – Interações com o usuário, animações, alertas, modais, validações de
   formulários, drag and drop de elementos, dentre outros.
   • É uma linguagem fracamente tipada, ou seja:
   – O compilador capturas erros durante o tempo de execução.
   – É mais rápida, porem menos segura.
   • Funciona percorrendo e buscando seus alvos (elementos da
   marcação) na árvore do documento ou DOM.
   

   View Slide

3. Javascript
   • DOM - Document Object Model
   – É uma multi-plataforma que representa como as marcações em HTML, XHTML e
   XML são organizadas e lidas pelo navegador que você usa.
   – Uma vez indexadas, estas marcações se transformam em elementos de uma
   árvore que você pode manipular via API.
   

   View Slide

4. Javascript
   • Document Object Model
   – Após finalizar o parse do DOM e a criação de seus nós, os navegadores chamam
   um método chamado attach para começar a renderização.
   – O attach adiciona primeiramente as folhas de estilo a árvore DOM e começa a
   estilização da página.
   – Em seguida adiciona os arquivos ou funções js e começa a incluir o
   comportamento e a interação na página.
   – Ou seja, o DOM deve necessariamente ser todo lido e renderizado pelo browser
   para executar uma função js.
   

   View Slide

5. Javascript
   • Os arquivos ou funções JS podem ser incluídas de 3 formas:
   – Inline - > diretamente no elemento html (incorreto)
   Colorir
   – Interno - > dentro da página html (incorreto)
   window.onload(alert(“Oi”);)
   – Externo -> incluído externamente como um script(correto)
   
   Exemplo: 01 - Javascript
   

   View Slide

6. jQuery
   • É uma biblioteca JavaScript cross-browser desenvolvida para
   simplificar os scripts client side, com o conceito:
   – "The Write Less, Do More"
   • Foi lançada em janeiro de 2006 no BarCamp de NY por John Resig.
   • É uma biblioteca de código aberto e possui licença dual, fazendo
   uso da Licença MIT ou da GNU General Public License versão 2.
   • Microsoft, Nokia e Adobe incluiram o jQuery em suas plataformas,
   Microsoft adotando-a inicialmente no Visual Studio para uso no
   ASP.NET, e a Nokia na sua plataforma Web Run-Time de widgets.
   

   View Slide

7. jQuery
   • 100% Cross Browser, resolução da incompatibilidade entre os
   principais navegadores do mercado.
   • Redução de código.
   • Reutilização do código através de plugins.
   • Utilização de uma vasta quantidade de plugins criados por outros
   desenvolvedores.
   • Trabalha com AJAX e DOM.
   • Implementação segura de recursos do CSS1, CSS2 e CSS3.
   • Totalmente OE (Orientado a Eventos).
   

   View Slide

8. jQuery
   • Como “instalar” jQuery?
   – A biblioteca jQuery nada mais é do que um arquivo JavaScript que deverá ser
   referenciado na página web onde serão aplicados os efeitos.
   – Basta fazer o download gratuito do arquivo e chamá-lo na(s) página(s).
   ...
   
   ...
   
   
   ...
   • Sintaxe simples, elegante e amigável.
   $(document).ready(function(){
   $("h1").css("color", "#fff");
   });
   Exemplo: 02 - Sintaxe
   

   View Slide

9. Seletores
   • Como a própria palavra indica, os seletores são um mecanismo,
   disponível em jQuery, para selecionar determinados elementos da
   página.
   • O seletor não é mais que uma cadeia de caracteres, com a qual
   podemos nos referir a qualquer ou quaisquer dos elementos que
   haja em uma página.
   $("p");
   • Nesse exemplo, estamos passando por parâmetro uma cadeia "p".
   Neste caso, "p" é um seletor que serve para selecionar todas as
   etiquetas da página, ou seja, os parágrafos.
   

   View Slide

10. Manipulação de atributos
    • Através de jQuery podemos com facilidade inspecionar e definir
    atributos assim como seus respectivos valores para qualquer
    elemento da página.
    – disabled, title, src, alt, href, class...
    Exemplo: 04 - Atributos
    

    View Slide