Workshop jQuery por Gabriel Zigolis

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

1. Workshop jQuery – Gabriel Zigolis
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.
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.
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.
5. 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
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.
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).
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). ... <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
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 <p> da página, ou seja, os parágrafos.
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