WebDesign JavaScript e jQuery. HTML e W3C - O HTML segue padrão XML - linguagem somente de marcação - somente de visualização de conteúdo sem formatação.

Apresentação em tema: "WebDesign JavaScript e jQuery. HTML e W3C - O HTML segue padrão XML - linguagem somente de marcação - somente de visualização de conteúdo sem formatação."— Transcrição da apresentação:

1 WebDesign JavaScript e jQuery

2 HTML e W3C - O HTML segue padrão XML - linguagem somente de marcação - somente de visualização de conteúdo sem formatação - Desenvolveram a integração (migração) do HTML para o XHTML - Possui formatação, cor de fonte, fundo… - Design deve seguir os padrões W3C - World Wide Web Consortium – consórcio internacional para levar a Web o seu potencia máximo por meio de desenvolvimento de protocolos comuns e fóruns abertos que promovam e assegurem a sua interoperabilidade. - um padrão W3C é o código limpo, com arquivos externos sendo chamados pelo HTML

3 JavaScript Surgiu em 1995 por Brendan Eich Criada para atender as seguintes necessidades - Validação de formulários no lado cliente - Interação com a página - Código Case Sensitive (Sensível a letra maiúscula) Vantagem Atual - Integrado ao CSS

4 JavaScript Exemplos de Aplicação do JavaScript - SCRIPT INLINE - código JAVASCRIPT inserido no totalmente no BODY - prática ultrapassada, porém ainda muito utilizada por desenvolvedores inexperientes - SCRIPT HEAD – ACTION BODY - código JAVASCRIPT inserido no HEAD com a ação no BODY - pode-se retirar o código e colocá-lo em um arquivo JS e chamar com SRC no HTML - SCRIPT ACTION HEAD - código e ação JAVASCRIPT inserido no HEAD - solução mais aceitável para a separação do SCRIPT - pode-se retirar o código e colocá-lo em um arquivo JS e chamar com SRC no HTML

5 JavaScript SCRIPT INLINE - Exemplo Untitled Document h1 { color:#090; } Teste de Mudança de Cor com JavaScript - Método INLINE Vermelho Case Sensitive Explicação – botão identifica uma ID com nome cor e quando clicado altera o estilo de cor do texto

6 JavaScript SCRIPT HEAD / ACTION BODY - Exemplo Untitled Document h1 { color:#090; } function mudaCor() { document.getElementById('cor').style.color='#ff0000'; }; Teste de Mudança de Cor com JavaScript - Método HEAD/BODY Vermelho Explicação – script no HEAD com função mudaCor que identifica uma ID com nome cor e o botão no BODY tem a ação de que quando clicado chama a função mudaCor e altera o estilo

7 JavaScript SCRIPT/ACTION HEAD - Exemplo Untitled Document h1 { color:#090; } window.onload = function ( ) { document.getElementById(‘bt-vermelho’).onclick = mudaCor; }; function mudaCor() { document.getElementById('cor').style.color='#ff0000'; }; Teste de Mudança de Cor com JavaScript - Método HEAD Vermelho Explicação – depois da página carregada executa a função na ID bt-vermelho que executa a função seguinte na ID cor modificando seu estilo

8 JavaScript SCRIPT/ACTION HEAD - Exemplo Untitled Document h1 { color:#090; } Teste de Mudança de Cor com JavaScript - Método HEAD Vermelho Explicação – depois da página carregada executa a função na ID bt-vermelho que executa a função seguinte na ID cor modificando seu estilo window.onload = function ( ) { document.getElementById(‘bt-vermelho’).onclick = mudaCor; }; function mudaCor() { document.getElementById('cor').style.color='#ff0000'; }; Script externo salvo em uma pasta chamada JS

9 jQuery É uma biblioteca JavaScript disponibilizada como software livre e aberto Foi desenvolvido por John Resig que diz: “O foco principal da biblioteca jQuery é a simplicidade. Porque submeter os desenvolvedores ao martírio de escrever longos e complexos códigos para criar simples efeitos?”

10 jQuery - Adicionar efeitos visuais, animações e interatividade - Busca informações no servidor, não precisando de novo carregamento da página - Alterar e manipular objetos - Modificar apresentação e estilização - Simplificar o JavaScript Características

11 jQuery - Acessar a página do jQuery no endereço http://jquery.comhttp://jquery.com - Clicar em DOWNLOAD Instalação – parte 1 Diversas versões de jQuery Minifield – versão compacta (difícil leitura) Uncompressed – versão documentada

12 jQuery - Baixar a versão UNCOMPRESSED em uma pasta de SCRIPT ou JS Instalação – parte 2 - Referenciar o arquivo jQuery dentro do arquivo HTML na tag HEAD através do código pasta arquivo

13 jQuery - Construtor e Conflitos - Estrutura Básica - Encadeamento no jQuery Considerações Importantes

14 jQuery - O $ é o identificador que referencia ao arquivo da biblioteca jQuery. - Alguns códigos JavaScript utilizam o identificador $ em seu script e isso pode gerar um conflito com a biblioteca, para evitar esse conflito podemos utilizar o construtor abaixo: Construtor e Conflitos jQuery $ ( ) - Com esse construtor evitamos o conflito de código JavaScript com a biblioteca jQuery. - Lembrando que o jQuery é uma biblioteca JavaScript então também é Case Sensitive. jQuery ( )

15 jQuery $ (document).ready (function ( ) { …………………………................. }); Estrutura Básica jQuery $ ( ).ready (function ( ) { } ) ; $ ( function ( ) { } ) ; $ ( function ($) { } ) ; - callback Abreviações do jQuery

16 jQuery - Estará presente em todos os scripts de jQuery - Exemplo do construtor encontrando diversas tags HTML no documento (seletores) Construtor e Seletor $ ( ) $ (‘p’) $ (‘div’) $ (‘h1’) $ (‘#fontTitulo’) - # é um seletor que a busca de uma ID do código HTML

17 jQuery Exemplo de Encadeamento $ (‘div’).children(‘p’).fadeOut().addClass(‘fontTitulo’); Funções Básicas seletorjQuery,css (‘propriedade’,’valor’) $ (expressão,[contexto]) -Veja a seguir um exemplo

18 jQuery Exemplo de Aplicação em ID e DIV div { width:200px; height:100px; border:1px solid #000; margin:20px; } $(document).ready (function() { $('#diferente').css('background','red'); $('p', $('#container')).css('background','green'); }); Exemplo de Função Básica Este é um parágrafo dentro da DIV Este é um parágrafo fora da DIV

19 jQuery Escrever com jQuery $ (document).ready (function() { $(' Este é um parágrafo escrito com jQuery ').prependTo('body'); $('div,p').css('background','blue'); }); DIV Parágrafo DIV É lido por linhas e vigora a última linha do código jQuery

20 jQuery Árvore do documento body divhrp h1 ul li em b

21 jQuery Seletores jQuery $ (‘p,.texto, #cor’) $ (‘div span’) $ (‘p > span’) acessa o elemento descendente do ancestral especificado acessa o elemento filho do pai especificado $ (‘div + p’) acessa o elemento próximo imediatamente após o especificado acessa o elemento irmão que segue o especificado $ (‘h2 ~ p’) $ (‘li:first’) acessa o primeiro li da lista $ (‘li:last’) acessa o último li da lista $ (‘li:not (li:first)’) acessa o todos os li da lista exceto o primeiro $ (‘tr:even’) acessa as linhas pares da table $ (‘tr:odd’) acessa as linhas ímpares da table $ (‘tr:eq(4)’) acessa a 5a. linha da table $ (‘tr:gt(4)’) acessa as linhas da table de valor maior que o índice $ (‘tr:lt(4)’) acessa as linhas da table de valor menor que o índice

22 jQuery Seletores jQuery $ (‘:header’) $ (‘p:contains(Web)’) acessa todos os elemento de cabeçalho em qualquer nível acessa todo o conteúdo que contenha a palavra especificada $ (‘td:empty’) acessa todas as células vazias de uma table

23 jQuery

24

25

26

27

28

29

30

31