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

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


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

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.


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


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

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


JQuery Exemplo: $(“p a”)

<html>

<head>...</head>

<body>

...

<p> ... <a>...</a> ... </p>

...

</body>


JQuery Exemplo: $(“div:gt(0)”)

<html>

<head>...</head>

<body>

<div>...</div>

<div>...</div

<div>...</div>

</body>


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: [email protected]

Twitter: twitter.com/web2softeam


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

Documents