Workshop jQuery – Gabriel Zigolis 

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. 

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. 

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. 

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 

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. 

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

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 

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. 

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