Este documento apresenta uma aula sobre HTML DOM e JQuery. A aula discute conceitos como nós, propriedades e métodos do HTML DOM para manipular documentos. Também apresenta o framework JQuery, como selecionar elementos, utilizar funções ready e modificar exemplos anteriores para a sintaxe JQuery.
2. Agenda
HTML DOM
JQuery
Vantagens e Desvantagens
Baixando a Biblioteca
Conhecendo a Sintaxe
Wagner Silva # Web 2.0 com Ajax Aula 02
3. HTML DOM
HTML Document Object Model
Objetivo: Simplificação e Padronização
Permite acesso dinâmico a conteúdo e estilo
Pode manipular mais de um elemento
Wagner Silva # Web 2.0 com Ajax Aula 02
4. HTML DOM
Tudo numa página é considerado um nó:
A página inteira é um nó;
Todas as tags HTML são nós;
Todos os atributos de tags tornam-se atributos
dos nós;
Textos são nós.
Wagner Silva # Web 2.0 com Ajax Aula 02
5. HTML DOM
<html>
<head>
<title>HTML DOM</title>
</head>
<body>
<p>Hello world!</p>
</body>
</html>
Wagner Silva # Web 2.0 com Ajax Aula 02
6. HTML DOM
Html
Head Body
Title P
“HTML DOM” “Hello world!”
7. HTML DOM
Hierarquia entre nós:
O nó do topo é o nó raiz;
Todos os nós, exceto o raiz, possuem um nó pai;
Um nó pode possuir inúmeros filhos;
Folhas são nós sem filhos;
Nós também podem acessar seus irmãos.
Wagner Silva # Web 2.0 com Ajax Aula 02
8. HTML DOM childNodes
Html
Head Body
Title P
“HTML DOM” “Hello world!”
9. HTML DOM firstChild
Html
Head Body
Title P
“HTML DOM” “Hello world!”
10. HTML DOM lastChild
Html
Head Body
Title P
“HTML DOM” “Hello world!”
11. HTML DOM nextSibling
Html
Head Body
Title P
“HTML DOM” “Hello world!”
12. HTML DOM previousSibling
Html
Head Body
Title P
“HTML DOM” “Hello world!”
13. HTML DOM
Nós possuem propriedades, exemplos:
nó.innerHTML : o “nó texto” do elemento;
nó.nodeName : seu nome;
nó.nodeValue : retorna o valor do nó; --xml
nó.attributes : retorna um array contendo os atributos do
nó.
Wagner Silva # Web 2.0 com Ajax Aula 02
14. HTML DOM
Nós possuem métodos, exemplos:
nó.getElementById(id) : retorna o elemento com o id
especificado;
nó.getElementsByTagName(tagName) : retorna um
array com os elementos que possuem a tag;
nó.appendChild(nó) : adiciona um nó como filho de
determinado elemento;
nó.removeChild(nó) : remove um nó de um nó pai;
Wagner Silva # Web 2.0 com Ajax Aula 02
15. HTML DOM
Exemplo: Utilizando o formulário de exemplo do
curso, vamos avisar ao usuário que os dados foram
enviados com sucesso sem utilizar o elemento
alert.
1º Passo: Retirar o alerta.
2º Passo: Modificar o “nó texto” do formulário.
Wagner Silva # Web 2.0 com Ajax Aula 02
16. HTML DOM
Exercício: Ainda utilizando o formulário de exemplo do
curso:
Cidade só poderá ser escolhida quando um estado for
selecionado.
Os campos nome, cpf e sexo devem ser obrigatórios.
1º Passo: Adicionar uma função para modificar o atributo
disabled de cidade quando selecionar um estado.
2º Passo: Veriricar se os campos obrigatórios foram preenchidos.
Wagner Silva # Web 2.0 com Ajax Aula 02
17. HTML DOM
Pode-se mudar o estilo dos objetos
Folha de Estilos = Conjunto de estilos
Atributo style
Wagner Silva # Web 2.0 com Ajax Aula 02
18. HTML DOM
Características das propriedades:
Hífens não são utilizados
Escritas em letras minúsculas
Exceto as palavras separadas por hífens que suas iniciais
serão com letras maiúsculas
Wagner Silva # Web 2.0 com Ajax Aula 02
19. HTML DOM
Exemplos:
nó.style.magin
nó.style.maginTop
nó.style.backgroundColor
nó.style.display
nó.style.fontStyle
Wagner Silva # Web 2.0 com Ajax Aula 02
20. HTML DOM
Exemplo: Disponibilizar 4 cores ao usuário, o qual poderá
escolher entre uma delas para a cor de fundo da página.
1º Passo: Criar uma div com 4 elementos do tipo radio com
as cores possíveis
2º Passo: Ao clicar num desses elementos, modificar a cor
de fundo da página
Wagner Silva # Web 2.0 com Ajax Aula 02
21. HTML DOM
Exemplo: Construir uma página com 3 divs 100 x 100, as
quais o usuário terá a opção de selecionar a div e uma cor
para ela.
1º Passo: Criar uma página com três divs e uma folha de
estilos para elas
2º Passo: Criar uma div com as possíveis escolhas e um
botão para efetuar as ações
3º Passo: Quando o usuário clicar no botão, efetuar as
mudanças a partir de uma função em javaScript utilizando
HTML DOM
Wagner Silva # Web 2.0 com Ajax Aula 02
22. HTML DOM
Exercício: Modificar a página com 3 divs 100 x 100. A div
“opções” deve possuir 3 pequenas divs preenchidas com
cores distintas. O usuário clicará numa dessas divs e, ao
clicar em uma das 3 divs 100 x 100, esta fica com a mesma
cor.
1º Passo: Modificar a div opções
2º Passo: Adicionar uma função para selecionar a cor
3º Passo: Adicionar uma função para colorir a div
Wagner Silva # Web 2.0 com Ajax Aula 02
23. JQuery
Conceitos implementados para atender HTML e CSS
Utiliza estrutura semelhante à do HTML DOM
Não é necessária a inclusão de eventos no HTML
Oferece ferramentas para criar animações
Inibe hacks ao programador
Wagner Silva # Web 2.0 com Ajax Aula 02
24. JQuery
Atende às atividades de programadores e designers
Permite a criação de plug-ins
Iteração implícita
Encadeamento
Licenças Públicas e Proprietárias
Wagner Silva # Web 2.0 com Ajax Aula 02
25. JQuery
Não é necessária nenhuma instalação
www.jquery.com
Importada via HTML <script>
Versões:
Production (Minified)
Development (Uncompressed)
Wagner Silva # Web 2.0 com Ajax Aula 02
34. JQuery
Função: $(document).ready(); = <body onload=“”>
$(document).ready(function(){
...
});
Aguarda a página carregar por inteiro
Wagner Silva # Web 2.0 com Ajax Aula 02
35. JQuery
Exemplo: Modificar a função do formulário. Quando o
usuário clicar em enviar, se os campos obrigatórios
estiverem preenchidos, a parece a mensagem de sucesso.
1º Passo: Incluir a biblioteca JQuery
2º Passo: Na função javaScript, adicionar
$(document).ready(function(){...});
3º Passo: Modificar a função que modifica o html para o
padrão JQuery.
Wagner Silva # Web 2.0 com Ajax Aula 02
36. JQuery
Exemplo: Modificar o Exemplo 02.04 para JQuery.
1º Passo: Incluir a biblioteca JQuery
2º Passo: Na função javaScript, adicionar
$(document).ready(function(){...});
3º Passo: Modificar a função que modifica o html para o
padrão JQuery.
Wagner Silva # Web 2.0 com Ajax Aula 02
37. Web 2.0 com Ajax # Aula 02
Próxima Aula:
Seletores e Filtros
Seleção através de Tags
E-mail: web2softeam@gmail.com
Twitter: twitter.com/web2softeam
Wagner Silva # Web 2.0 com Ajax Aula 02