introdução a html, css, js, ajax
TRANSCRIPT
![Page 1: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/1.jpg)
HTML, CSS, JavaScript e Ajax
Gabriel Kamimura Yano
@gabrielyano
/gabrielkamimura
gabrielk [email protected]
![Page 2: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/2.jpg)
Sumário1. Introdução
2. IDEs
3. HTML
4. CSS
5. JavaScript
6. Ajax
7. Dicas
2
![Page 3: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/3.jpg)
Front-end Back-end
HTML, CSS, JavaScript PHP, ASP, Java, Ruby, Python
3
![Page 4: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/4.jpg)
Desenvolvimento por Camadas Informação
!
Significado à Informação HTML
Formatação !
Estilo CSS
Comportamento !
Controlar elementos JavaScript
4
![Page 5: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/5.jpg)
HTML, CSS, JavaScript
Linguagens básicas para criar websites
HTML - Informação
CSS - Deixar a informação "bonita"
JavaScript - Informação com comportamento (Por exemplo, exibição de submenu)
5
![Page 6: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/6.jpg)
IDEs, Editores de código
![Page 7: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/7.jpg)
HTML, CSS e JavaScript são interpretados por navegadores web
!
!
!
!
Usados nesse contexto, dispensa-se o uso de compiladores
7
![Page 10: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/10.jpg)
HTML
![Page 11: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/11.jpg)
HTML
HyperText Marckup Language (Linguagem de Marcação de Hipertexto)
HTML serve para dar significado e organizar a informação dos websites
Derivado de Marcações XML
11
![Page 12: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/12.jpg)
HTML - TagMarca informações com tags
Criar Elementos
<p> Isto é um parágrafo </p>
Menor que Maior queCaractere
Barra12
![Page 14: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/14.jpg)
HTML - Estrutura da página
<!DOCTYPE html> <html> <head> <title></title> </head> <body> </body> </html>
14
![Page 15: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/15.jpg)
Para aprender HTML, será necessário saber quais as tags disponíveis, o que elas fazem e
onde podem ser usadas
![Page 16: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/16.jpg)
Títulos<h1> <h2> <h3> <h4> <h5> <h6>
<h1> Título principal </h1> <h2> Título nível 2 </h2> <h3> Título nível 3 </h3> <h4> Título nível 4 </h4> <h5> Título nível 5 </h5> <h6> Título nível 6 </h6>
16
![Page 17: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/17.jpg)
Parágrafos
<p><p> Este é um parágrafo </p> <p> Este é outro parágrafo </p>
17
![Page 18: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/18.jpg)
Negrito e itálico
<b> !
<i>
<p> Este é um texto em <b>negrito</b> </p> <p> Este é um texto em <i>itálico</i> </p>
18
![Page 19: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/19.jpg)
Quebra de Linha e linhas horizontais
<br /> !
<hr />
<p> Em cima <br />Embaixo </p> <p> Em cima <hr />Embaixo </p>
19
![Page 20: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/20.jpg)
Lista Numérica
<ol> !
<li>
<ol> <li>Café</li> <li>Chá</li> <li>Leite</li> </ol>
20
![Page 21: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/21.jpg)
Lista de marcadores
<ul> !
<li>
<ul> <li>Café</li> <li>Chá</li> <li>Leite</li> </ul>
21
![Page 22: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/22.jpg)
Links
<a> ! <a href="http://google.com.br">Google</a>
22
![Page 23: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/23.jpg)
Imagens
<img/> <img src="img/borboleta.png" alt="Uma borboleta" title="As borboletas são insetos da ordem Lepidoptera" />
23
![Page 24: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/24.jpg)
Tabelas<table > <tr> <td>
<table> <tr> <td></td> <td>09:00</td> <td>10:00</td> <td>11:00</td> </tr> <tr> <td>Segunda-feira</td> <td>Geografia</td> <td>Matemática</td> <td>Filosofia</td> </tr> <tr> <td>Terça-feira</td> <td>Biologia</td> <td>Física</td> <td>Química</td> </tr> </table>
24
![Page 25: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/25.jpg)
Formulários
![Page 26: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/26.jpg)
Como funcionam formuláriosO name de cada item do formulário é enviado ao
servidor com seus valores
O Servidor processa a informação e faz algo com ela com a ajuda de
linguagens de programação (PHP, C#)
Obrigado!! Seu cadastro foi realizado com sucesso!!
O servidor cria uma nova página e envia de
volta
26
![Page 27: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/27.jpg)
Estrutura de Formulário
<form > <form action="http://exemplo.com/cadastrar.php" method="post"> <p>Aqui ficarão os elementos do formulário</p> </form>
27
![Page 28: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/28.jpg)
Entrada de Texto
<input/> <form action="http://exemplo.com/cadastrar.php" method="post"> <label> Username <input name="username" type='text'> </label> </form>
28
![Page 29: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/29.jpg)
Entrada de Senha
<input/><form action="http://exemplo.com/cadastrar.php" method="post"> <label> Username <input name="username" type='text'> </label> <label> Senha <input name="senha" type='password'> </label> </form>
29
![Page 30: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/30.jpg)
Caixa de Texto
<textarea> <form action="http://exemplo.com/cadastrar.php" method="post"> <label> Comentário <textarea name="comentario"> Insira seu comentário </textarea> </label> </form>
30
![Page 31: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/31.jpg)
Radio Button
<form action="http://exemplo.com/cadastrar.php" method="post"> <p> Estilo musical favorito: </p> <input type="radio" name='genero' value='pop' checked="checked"/> Pop <input type="radio" name='genero' value='rock'/> Rock <input type="radio" name='genero' value='jazz'/> Jazz </form>
31
![Page 32: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/32.jpg)
Checkbox
<form action="http://exemplo.com/cadastrar.php" method="post"> <p> Estilos musicais favoritos: </p> <input type="checkbox" name='genero' value='pop' checked="checked"/> Pop <input type="checkbox" name='genero' value='rock'/> Rock <input type="checkbox" name='genero' value='jazz'/> Jazz </form>
32
![Page 33: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/33.jpg)
Botão de Submit
<form action="http://exemplo.com/cadastrar.php" method="post"> <p> Qual o seu e-mail? </p> <input name="email"/> <input type="submit" name="cadastrar" value="Cadastrar"/> </form>
33
![Page 34: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/34.jpg)
CSS
![Page 35: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/35.jpg)
CSS
Cascading Style Sheets (Folhas de Estilo em Cascata)
Apresentação (aparência)
"Adota" linguagens de marcação (XML e HTML)
35
![Page 36: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/36.jpg)
Sintaxe.pagina { background-color: blue; }
Seletor Propriedade Valor
36
![Page 37: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/37.jpg)
Por Exemplo ...<html> <head> <style> .pagina { background-color: blue; } </style> </head> <body class="pagina"> ! </body> </html> !!
37
exemplo.html
![Page 38: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/38.jpg)
Caixas imaginárias ao redor dos elementos HTML
Isto é um Título
Este é um parágrafo. Aqui, temos elementos em negrito e itálico.
Este é um outro parágrafo. Aqui, temos mais conteúdos.
38
![Page 39: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/39.jpg)
Exemplos de PropriedadesCAIXAS
width
height
border
background-color
position
box-shadow
TEXTOS
color
font
font-family
font-style
font-size
font-shadow
Específicos
Propriedades específicas de determinados elementos
list-style-type
39
![Page 40: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/40.jpg)
Alguns seletores// Aplica-se a todos os elementos * { color: #444; } !// Nomes de elementos h1 { font-size: 150%; color: cyan; } !//ID de elementos #conteudo { background-color: green; } !//Classes de elementos .btn { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
40
exemplo.css
![Page 41: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/41.jpg)
Mais Alguns seletores// Seletor de descendentes p a { color: pink; } !// Seletor de múltiplos elementos h1, h2, h3, h4, h5, h6 { font-size: 150%; color: cyan; } !// Elementos de determinada classe h1.titulo { font-size: 150%; color: cyan; }
41
exemplo.css
![Page 42: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/42.jpg)
Carregamento externo de CSS
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
42
![Page 43: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/43.jpg)
JavaScript
![Page 44: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/44.jpg)
JavaScript
JavaScript ≠ Java
ECMAScript
Comportamento
Manipulação das demais camadas
44
![Page 45: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/45.jpg)
JavaScript - Exemplo
<html> <head></head> <body> <script type="text/javascript"> alert('Hello World!'); </script> ! </body> </html>
45
![Page 46: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/46.jpg)
JavaScript - Outro Exemplo <script type="text/javascript"> var entrada = prompt("Qual o seu nome?"); alert('Olá ' + entrada); </script>
46
![Page 47: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/47.jpg)
JavaScript - variáveis
Tipagem dinâmica
var - escopo local
escopo global
47
![Page 48: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/48.jpg)
Exemplos ...var str = "Algum texto"; !gbl = "global"; !var num = 123; !var frutas = ["maça", "laranja", "manga"]; !var fruta = { nome: "maça", cor: "vermelho", peso: "100g" }
48
![Page 49: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/49.jpg)
Tipos
var num = 22, //number num2 = "22"; //string !var num3 = num + num2; //string alert(num3); //2222
49
![Page 50: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/50.jpg)
Funções
function hello(nome) { alert("Olá " + nome + "!"); } !!hello(prompt("Qual o seu nome?"));
50
![Page 51: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/51.jpg)
Escopovar a = 0; var b = 1; !function soma() { var a = 5; var b = 3; console.log(a + b); } !soma();
51
![Page 52: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/52.jpg)
If
var valor = prompt("Informe um número"); !if (valor > 10) { alert("O valor é maior que 10"); }
52
![Page 53: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/53.jpg)
If .. else
var valor = prompt("Informe um número"); !if (valor > 10) { alert("O valor é maior que 10"); } else { alert("O valor é menor ou igual a 10"); }
53
![Page 54: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/54.jpg)
for
var frutas = ['maça', 'banana', 'laranja']; !for ( var i = 0; i < frutas.length; i++ ) { alert(frutas[i]); }
54
![Page 55: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/55.jpg)
for..in
var frutas = ['maça', 'banana', 'laranja']; !for ( var i in frutas ) { alert(frutas[i]); }
55
![Page 56: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/56.jpg)
While
var i = 0; !while (i < 5) { alert(i); i++; }
56
![Page 57: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/57.jpg)
DOM
Document Object Model
Representa como as marcações em HTML, XHTML e XML são organizadas e lidas pelo navegador
57
![Page 58: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/58.jpg)
Document
Quando um HTML é carregado pelo navegador, ele torna-se um objeto document
58
![Page 59: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/59.jpg)
Exemplo...
var paragrafo = document.getElementById("meu-paragrafo"); !paragrafo.style.color = "red";
<p id="meu-paragrafo">Isto é um parágrafo </p>
JS
HTML
59
![Page 60: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/60.jpg)
E o resultado disso é ...
60
![Page 61: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/61.jpg)
Aprimorando um pouco(...) !<p id="meu-paragrafo">Isto é um parágrafo</p> <button id="btn-mudarCor">Mudar cor</button> !<script type="text/javascript"> var btn = document.getElementById("btn-mudarCor"); ! btn.onclick = function() { var paragrafo = document.getElementById("meu-paragrafo"); paragrafo.style.color = "red"; paragrafo.innerHTML += " vermelho"; }; !</script> !(...)
61
![Page 62: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/62.jpg)
Agora, ficou assim...
62
![Page 63: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/63.jpg)
Agora, ficou assim...
63
![Page 64: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/64.jpg)
Só poderemos trabalhar com elementos após o carregamento da página
(...) !<p id="meu-paragrafo">Isto é um parágrafo</p> <button id="btn-mudarCor">Mudar cor</button> !<script type="text/javascript"> window.onload = function() { ! var btn = document.getElementById("btn-mudarCor"); ! btn.onclick = function() { var paragrafo = document.getElementById("meu-paragrafo"); paragrafo.style.color = "red"; paragrafo.innerHTML += " vermelho"; }; } !</script> !(...)
64
![Page 65: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/65.jpg)
Localização dos elementos (nós)document.getElementById("meuId");
65
<p id="meuId">Parágrafo</p>
document.getElementsByTagName("a");<a>Link 1</a> (...) <a>Link 2</a>
document.getElementsByClassName("titulos");<h1 class="titulos">Título 1</h1> (...) <h2 class="titulos">Título 2</h1>
![Page 66: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/66.jpg)
Eventosvar elemento = document.getElementById("meuElem"); !elemento.onclick = function() {}; //Ao clicar com o mouse !elemento.onchange = function() {}; //Ao alterar valor (value) !element.onload = function() {}; // Ao carregar !elemento.onfocus = function() {}; //Ao ganhar foco !elemento.onblur = function() {}; //Ao perder foco !elemento.onerror = function() {}; //Ao ocorrer erro !elemento.onsubmit = function() {}; //Ao submeter um formulário
66
![Page 67: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/67.jpg)
Eventos (2)
var elemento = document.getElementById("meuElem"); !elemento.onmouseover = function() {}; //Ao passar o mouse por cima !elemento.onmouseout = function() {}; //Ao retirar o mouse de cima
67
![Page 68: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/68.jpg)
Manipulação de HTML
var elemento = document.getElementsByTagName("a")[0]; !elemento.innerHTML = "Novo texto";
68
<a> </a>
![Page 69: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/69.jpg)
Alterações no estilo
var elemento = document.getElementsByTagName("a")[0]; !elemento.style.backgroundColor = "green"; !elemento.style.width = "10px"; !elemento.style.height = "2em"; !elemento.className = "btn btn-default";
69
![Page 70: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/70.jpg)
Mais informações sobre manipulação do DOM
Eduardo Mendes - slides de JQuery - http://pt.slideshare.net/edumendes/jquery-34235136
![Page 71: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/71.jpg)
JQuery
Biblioteca/framework de JS
John Resig
Write less, do more
71
![Page 72: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/72.jpg)
JQuery - recursosSeleção e manipulação de elementos HTML
Manipulação de CSS
Efeitos e animações
Navegação pelo DOM
Ajax
Eventos
72
![Page 73: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/73.jpg)
JQuery - Carregamento
73
<html> <head> <title>Carregando o JQuery</title> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script> // (...) </script> </body> </html>
![Page 74: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/74.jpg)
Ajax
![Page 75: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/75.jpg)
Imagine o Google Maps. Você acha que o conteúdo do Google Maps é carregado de uma vez e enviado
ao navegador?
75
![Page 76: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/76.jpg)
Lembre agora das páginas do Facebook e do Twitter, elas são
recarregadas ao mudar o conteúdo?
76
![Page 77: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/77.jpg)
Páginas clássicas (sem Ajax) precisam recarregar a página inteira se o conteúdo mudar
77
![Page 78: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/78.jpg)
Ajax
Asynchronous JavaScript and XML
NÃO é uma linguagem de programação
Arte de trocar dados com o servidor sem recarregar a página toda.
78
![Page 79: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/79.jpg)
!
XMLHttpRequest - Troca de dados assíncronamente com o servidor;
JavaScript/DOM - Para apresentar a informação;
CSS - Para estilizar a apresentação dos dados;
JSON ou XML - Usados como formato de transferência de dados;
79
O AJAX é baseado nos padrões da internet
![Page 80: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/80.jpg)
Um evento ocorre... !
Cria um objeto XMLHttpRequest Envia HttpRequest
Navegador
Processa os dados retornados utilizando JavaScript Atualiza o conteúdo da página
Navegador
Processa o HTTPRequest Cria a response e envia dados de volta ao navegador
Servidor
Internet
Internet
80
![Page 81: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/81.jpg)
var btn = document.getElementById("btn-carregar"); ! btn.onclick = function() { ! $.ajax({ method: "GET", url: "dados.json", dataType: "json" }).then(function(response) { var frutas = response; ! for ( var i in frutas ) { alert(frutas[i].nome + " é " + frutas[i].cor); }; }); ! };
[ { "nome": "Maça", "cor": "Vermelha" }, { "nome": "Banana", "cor": "Amarela" } ]
demoAjax.js dados.json
81
![Page 82: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/82.jpg)
O resultado é
82
![Page 83: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/83.jpg)
O resultado é
83
![Page 84: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/84.jpg)
var btn = document.getElementById("btn-carregar"); ! btn.onclick = function() { ! $.ajax({ method: "GET", url: "nada.json", dataType: "json" }).success(function(response) { var frutas = response; ! for ( var i in frutas ) { alert(frutas[i].nome + " é " + frutas[i].cor); }; }).error(function() { alert ("Não foi possível achar o arquivo"); }); ! };
[ { "nome": "Maça", "cor": "Vermelha" }, { "nome": "Banana", "cor": "Amarela" } ]
demoAjax.js dados.jsonSuccess / Error
84
![Page 85: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/85.jpg)
var btn = document.getElementById("btn-carregar"); ! btn.onclick = function() { ! $.ajax({ method: "POST", url: "http://istoeumademonstracao.com", data: { nome : "maça", cor: "vermelha" }, dataType: "json" }).success(function(response) { alert("fruta " + response.nome + " registrada." ); }).error(function(msg) { alert (msg.responseText); }); ! };
85
POST
![Page 86: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/86.jpg)
var btn = document.getElementById("btn-enviar"); !btn.onclick = function(event) { ! event.preventDefault(); ! var dados = {}; dados.nome = document.getElementById("fnome").value; dados.cor = document.getElementById("fcor").value; !! $.ajax({ method: "POST", url: "http://istoeumademonstracao.com", data: dados, dataType: "json" }).success(function(response) { alert("fruta " + response.nome + " registrada." ); ! }).error(function(msg) { alert (msg.responseText); ! }); !};
86
Aprimorando o exemplo anterior
<form id="meuform"> <label> Nome da fruta: <input name="nome" id="fnome"/> </label> ! <label> Cor: <input name="cor" id="fcor"/> </label> <input id="btn-enviar" type="submit" value="Cadastrar" /> </form>
![Page 87: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/87.jpg)
Dicas
![Page 88: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/88.jpg)
Console no Google Chrome+ mais ferramentas + console JavaScript ou F12
88
![Page 89: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/89.jpg)
BootstrapTwitter
HTML, CSS, JS
Mobile first
Diversos recursos
Multi-dispositivos
Grids Responsivos
http://getbootstrap.com/
89
![Page 90: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/90.jpg)
Font AwesomeColeção de ícones transformado em fontes
Não requer JS
Personalizável via CSS
http://fortawesome.github.io/Font-Awesome/
90
![Page 91: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/91.jpg)
Angular JSSingle-Page Application
Data Binding ;
Controllers
Directives
Roteamento
https://angularjs.org/
91
![Page 92: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/92.jpg)
Angular Material Designhttps://material.angularjs.org/#/
Implementação do Material design no ANgular JS
Diretrizes do Material Design: http://www.google.com/design/spec/material-design/introduction.html
92
![Page 93: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/93.jpg)
Bowerbowerbird - família de pássaros - objetos coloridos
Gerenciador de dependências
http://bower.io/
93
![Page 94: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/94.jpg)
ReferênciasFRANKLIN, Alysson . Tenha o dom. Disponível em :<http://tableless.com.br/tenha-o-dom/> Acessado em 30/04/2015 às 12h33min
Tableless. Guia para iniciantes na área de web.<http://tableless.github.io/iniciantes/> Acessado em 29/04/2015 às 15h45min
W3Schools <http://www.w3schools.com/>
http://www.w3schools.com/ajax/ajax_intro.asp
http://api.jquery.com/
MIRANDA, Luiz Otávio. Eventos em Javascript. 2014. Disponível em: <http://www.tutsup.com/2014/04/25/eventos-em-javascript/> Acessado em 04/05/2015 às 12h30min
MIRANDA, Luiz Otávio. O DOM e o JavaScript. 2014 Disponível em: <http://www.tutsup.com/2014/05/02/dom-e-javascript/> Acessado em 04/05/2015 às 12h15min
DUCKETT, Jon. HTML & CSS Design and buid websites. 2011
94
![Page 95: Introdução a HTML, CSS, JS, Ajax](https://reader038.vdocuments.com.br/reader038/viewer/2022102608/55c95dd4bb61eb20748b4573/html5/thumbnails/95.jpg)
Referênciashttp://www.codecademy.com/pt-BR/skills/make-a-website/topics/html-elements/html-heading-try
http://www.codecademy.com/pt/courses/web-beginner-en-HZA3b/0/1?curriculum_id=50579fb998b470000202dc8b
http://www.codecademy.com/pt/tracks/javascript
MORRRISON, Michael. Use a Cabeça! JavaScript. 2008. Rio de Janeiro
95