Este documento fornece uma introdução sobre HTML, CSS, JavaScript e Ajax. Resume as seguintes informações essenciais:
1. HTML é usado para estruturar e dar significado à informação em páginas web. CSS é usado para estilizar a apresentação dessa informação. JavaScript permite adicionar comportamento interativo. Ajax permite atualizar partes de páginas web sem recarregá-las completamente.
5. 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
11. 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
12. HTML - Tag
Marca informações com tags
Criar Elementos
<p> Isto é um parágrafo </p>
Menor que
Maior que
Caractere
Barra
12
26. Como funcionam formulários
O 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
27. 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
38. 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
40. 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
41. 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
51. Escopo
var a = 0;
var b = 1;
!
function soma() {
var a = 5;
var b = 3;
console.log(a + b);
}
!
soma();
51
52. If
var valor = prompt("Informe um número");
!
if (valor > 10) {
alert("O valor é maior que 10");
}
52
53. 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
54. for
var frutas = ['maça', 'banana', 'laranja'];
!
for ( var i = 0; i < frutas.length; i++ ) {
alert(frutas[i]);
}
54
55. for..in
var frutas = ['maça', 'banana', 'laranja'];
!
for ( var i in frutas ) {
alert(frutas[i]);
}
55
56. While
var i = 0;
!
while (i < 5) {
alert(i);
i++;
}
56
59. Exemplo...
var paragrafo = document.getElementById("meu-paragrafo");
!
paragrafo.style.color = "red";
<p id="meu-paragrafo">Isto é um parágrafo </p>
JS
HTML
59
75. Imagine o Google Maps. Você acha
que o conteúdo do Google Maps é
carregado de uma vez e enviado
ao navegador?
75
76. Lembre agora das páginas do
Facebook e do Twitter, elas são
recarregadas ao mudar o
conteúdo?
76
77. Páginas clássicas (sem Ajax)
precisam recarregar a página
inteira se o conteúdo mudar
77
78. 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
79. !
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
80. 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
81. 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
93. Bower
bowerbird - família de
pássaros - objetos
coloridos
Gerenciador de
dependências
http://bower.io/
93
94. Referências
FRANKLIN, 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