Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Workshop jQuery por Gabriel Zigolis

Workshop jQuery por Gabriel Zigolis

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

Avatar for Gabriel Zigolis

Gabriel Zigolis

April 19, 2012
Tweet

More Decks by Gabriel Zigolis

Other Decks in Technology

Transcript

  1. 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.
  2. 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.
  3. 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.
  4. Javascript • Os arquivos ou funções JS podem ser incluídas

    de 3 formas: – Inline - > diretamente no elemento html (incorreto) <p onclick=“modificaCor();”>Colorir</p> – Interno - > dentro da página html (incorreto) <script type=“text/javascript”>window.onload(alert(“Oi”);)</script> – Externo -> incluído externamente como um script(correto) <script type="text/javascript" src=“/js/jquery.js"></script> Exemplo: 01 - Javascript
  5. 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.
  6. 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).
  7. 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). ... <head> ... <script type=”text/javascript” src=”/js/jquery.js”></script> </head> ... • Sintaxe simples, elegante e amigável. $(document).ready(function(){ $("h1").css("color", "#fff"); }); Exemplo: 02 - Sintaxe
  8. 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 <p> da página, ou seja, os parágrafos.
  9. 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