Web 2.0 com Ajax: JQuery/PHP

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

world!” childNodes

world!” firstChild

world!” lastChild

world!” nextSibling

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

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

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: [email protected]  Twitter: twitter.com/web2softeam Wagner Silva # Web 2.0 com Ajax Aula 02

Web 2.0 com Ajax: JQuery/PHP

Web 2.0 com Ajax: JQuery/PHP

More Decks by Wagner Silva

Other Decks in Programming

Featured

Transcript