Post on 24-May-2015
description
Aula 02
Wagner Silva
Agenda HTML DOM
JQuery
Vantagens e Desvantagens
Baixando a Biblioteca
Conhecendo a Sintaxe
Wagner Silva # Web 2.0 com Ajax Aula 02
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
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
HTML DOM
Wagner Silva # Web 2.0 com Ajax Aula 02
<html>
<head>
<title>HTML DOM</title>
</head>
<body>
<p>Hello world!</p>
</body>
</html>
HTML DOM
Html
Head
Title
“HTML DOM”
Body
P
“Hello world!”
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
HTML DOM
Html
Head
Title
“HTML DOM”
Body
P
“Hello world!”
childNodes
HTML DOM
Html
Head
Title
“HTML DOM”
Body
P
“Hello world!”
firstChild
HTML DOM
Html
Head
Title
“HTML DOM”
Body
P
“Hello world!”
lastChild
HTML DOM
Html
Head
Title
“HTML DOM”
Body
P
“Hello world!”
nextSibling
HTML DOM
Html
Head
Title
“HTML DOM”
Body
P
“Hello world!”
previousSibling
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
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
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 elementoalert.
1º Passo: Retirar o alerta.
2º Passo: Modificar o “nó texto” do formulário.
Wagner Silva # Web 2.0 com Ajax Aula 02
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
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
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
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
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
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
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
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
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
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
Wagner Silva # Web 2.0 com Ajax Aula 02
Wagner Silva # Web 2.0 com Ajax Aula 02
Wagner Silva # Web 2.0 com Ajax Aula 02
JQuery<!DOCTYPE HTML>
<html>
<head>
...
<script language="JavaScript" type="text/javascript" src="../js/jquery.js">
</script>
</head>
<body>
...
</body>
</html>Wagner Silva # Web 2.0 com Ajax Aula 02
JQuery Operação fundamental: Selecionar objetos facilmente
Operador: $(<seletor>)
<seletor>:
String
Tags, Idenfificadores e/ou Classes
Atributos de Tags
Wagner Silva # Web 2.0 com Ajax Aula 02
JQuery Exemplo: $(“p a”)
<html>
<head>...</head>
<body>
...
<p> ... <a>...</a> ... </p>
...
</body>
</html>Wagner Silva # Web 2.0 com Ajax Aula 02
JQuery Exemplo: $(“div:gt(0)”)
<html>
<head>...</head>
<body>
<div>...</div>
<div>...</div
<div>...</div>
</body>
</html>Wagner Silva # Web 2.0 com Ajax Aula 02
JQuery Exemplo: $(“#tabela tr td :hidden[name=link]”)
<html>
<head>...</head>
<body>
<table id=“tabela”>
...<tr><td>
...<input type=“hidden” name=“link”>...
</td></tr>...
</table>
</body>
</html>
Wagner Silva # Web 2.0 com Ajax Aula 02
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
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
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
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