Web 2.0 com Ajax: JQuery/PHP (Aula 02)

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


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.


HTML DOM
<html>
<head>
<title>HTML DOM</title>
</head>
<body>
<p>Hello world!</p>
</body>
</html>


HTML DOM
Html

Head Body

Title P

“HTML DOM” “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.


HTML DOM childNodes

Html

Head Body

Title P


HTML DOM firstChild

Html

Head Body

Title P


HTML DOM lastChild

Html

Head Body

Title P


HTML DOM nextSibling

Html

Head Body

Title P


HTML DOM previousSibling

Html

Head Body

Title P


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


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;


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.


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.


HTML DOM
 Pode-se mudar o estilo dos objetos

 Folha de Estilos = Conjunto de estilos

 Atributo style


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


HTML DOM
 Exemplos:

 nó.style.magin

 nó.style.maginTop

 nó.style.backgroundColor

 nó.style.display

 nó.style.fontStyle


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


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

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


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


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


JQuery
 Não é necessária nenhuma instalação

 www.jquery.com

 Importada via HTML <script>

 Versões:

 Production (Minified)

 Development (Uncompressed)


JQuery
<!DOCTYPE HTML>
<html>
<head>
...
<script language="JavaScript" type="text/javascript"
src="../js/jquery.js">
</script>
</head>
<body>
...
</body>
</html>

JQuery
 Operação fundamental: Selecionar objetos facilmente

 Operador: $(<seletor>)

 <seletor>:

 String

 Tags, Idenfificadores e/ou Classes

 Atributos de Tags


JQuery
 Exemplo: $(“p a”)
<html>
<head>...</head>
<body>
...
<p> ... <a>...</a> ... </p>
...
</body>
</html>

JQuery
 Exemplo: $(“div:gt(0)”)
<html>
<head>...</head>
<body>
<div>...</div>
<div>...</div
<div>...</div>
</body>
</html>

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>

JQuery
 Função: $(document).ready(); = <body onload=“”>

$(document).ready(function(){
...
});

 Aguarda a página carregar por inteiro


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.


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.


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


Web 2.0 com Ajax: JQuery/PHP (Aula 02)

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a Web 2.0 com Ajax: JQuery/PHP (Aula 02)

Mais de Wagner Silva

Web 2.0 com Ajax: JQuery/PHP (Aula 02)