html css js ajax exercícios de programação

Sumário
Introduçã
o
HTM
L
CSS
JavaScri
2

Front-
end
Back-
end
HTML, CSS,
JavaScript
PHP, ASP, Java,
Ruby, Python
3

Desenvolvimento por
Camadas Informaçã
o
Significado à
Informação HTML
Formatação
Estil
o
CSS
Comportamento
Controlar
elementos
JavaScript
4

HTML, CSS,
JavaScript
Linguagens básicas para criar websites
HTML - Informação
CSS - Deixar a informação formatada
JavaScript - Informação com comportamento (Por exemplo,
exibição de submenu)
5

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
7

HTML - Tag
Marca informações com
tags
Criar Elementos
<p> Isto é um parágrafo </p>
Menor
que
Maior
que Caractere
Barr
a
8

HTML - Atributos
<a href="http://www.google.com.br">
Link
</a>
Atributo
9

HTML - Estrutura da
página
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
10

Para aprender HTML,
será
necessário saber quais
as tags disponíveis, o
que elas fazem e onde
podem ser usadas

Títulos
<h1
>
<h2
>
<h3
>
<h4
>
<h1> Título principal </h1>
<h2> Título nível 2 </h2>
12

Parágrafos
<p
>
<p>
Este é um parágrafo
</p>
<p>
Este é outro parágrafo
</p>
13

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

Quebra de Linha e
linhas
horizontais
<br
/>
<hr
/>
<p>
Em cima <br />Embaixo
</p>
<p>
Em cima <hr />Embaixo
</p>
15

Lista Numérica
<ol
>
<li
>
<ol>
<li>Café</li>
<li>Chá</li>
<li>Leite</li>
</ol>
16

Lista de marcadores
<ul
>
<li
>
<ul>
<li>Café</li>
<li>Chá</li>
<li>Leite</li>
</ul>
17

Links
<a
>
<a href="http://google.com.br">Google</a>
18

Imagens
<img/
> <img src="img/borboleta.png"
alt="Uma borboleta" title="As
borboletas são insetos da
ordem Lepidoptera" />
19

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

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
22

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

Entrada de Texto
<input/
>
<form action="http://exemplo.com/
cadastrar.php"
method="post">
<label>
Username
<input name="username"
type='text'>
</label>
</form>
24

Entrada de Senha
<input/
>
cadastrar.php"
method="post">
<label>
Username
<input name="username"
type='text'>
</label>
<label>
Senha
<input name="senha" type='password'>
</label>
</form>
25

Caixa de Texto
<textare
a>
cadastrar.php"
method="post">
<label>
Comentário
<textarea name="comentario">
Insira seu comentário
</textarea>
</label>
</form>
26

Radio Button
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>
27

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

Botão de Submit
method="post">
<p>
Qual o seu e-mail?
</p>
<input name="email"/>
<input type="submit" name="cadastrar"
value="Cadastrar"/>
</form>
29

CSS
Cascading Style Sheets (Folhas de Estilo em
Cascat
a)
Apresentação (aparência)
"Adota" linguagens de marcação (XML e
HTML)
31

Sintaxe
.pagina {
background-color: blue;
}
Selet
or
Proprieda
de
Valo
r
32

Por Exemplo ...
<html>
<head>
<style>
.pagina {
background-color: blue;
}
</style>
</head>
<body class="pagina">
</body>
</html>
exemplo.ht
ml
33

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

Exemplos de
Propriedades
CAIXA
S
widt
h
heig
ht
bord
er
background-
color
positio
n
box-
shadow
TEXT
OS
colo
r
font
font-
family
font-st
yle
font-
size
font-
shadow
Específi
cos
Propriedad
es
específicas
de
determinad
os
elementos
list-style-
type

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);
}
exemplo.
css
36

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;
}
//Seletor adjascente: O primeiro p depois de qualquer h1
h1+p {
font-family: arial;
}
exemplo.
css
37

Carregamento externo
de CSS
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
38

JavaScript
JavaScript ≠ Java
ECMAScript
Comportamento
Manipulação das demais camadas
40

JavaScript - Exemplo
<html>
<head></head>
<body>
<script type="text/javascript">
alert('Hello World!');
</script>
</body>
</html>
41

JavaScript - Outro
Exemplo
var entrada = prompt("Qual o seu nome?");
alert('Olá ' + entrada);
</script>
42

JavaScript - variáveis
Tipagem
dinâmica
var - escopo
local escopo
global
43

Exemplos ...
var
gbl
var
str = "Algum
= "global";
num = 123;
texto";
var frutas = ["maça", "laranja", "manga"];
var fruta = {
nome: "maça",
cor: "vermelho",
peso: "100g"
}
44

Tipos
var num = 22,
num2 = "22";
//number
//string
//string
var num3 = num + num2;
alert(num3); //2222
45

Funções
function hello(nome) {
alert("Olá " + nome + "!");
}
hello(prompt("Qual o seu nome?"));
46

Escopo
var a = 0;
var b = 1;
function soma() {
var a = 5;
var b = 3;
console.log(a + b);
}
soma();
47

If
var valor = prompt("Informe um número");
if (valor > 10) {
alert("O valor é maior que 10");
}
48

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");
}
49

for
var frutas = ['maça', 'banana', 'laranja'];
for ( var i = 0; i < frutas.length; i++ ) {
alert(frutas[i]);
}
50

for..in
var frutas = ['maça', 'banana', 'laranja'];
for ( var i in frutas ) {
alert(frutas[i]);
}
51

While
var i = 0;
while (i < 5) {
alert(i);
i++;
}
52

DOM
Document Object Model
Representa como as marcações em HTML,
XHTML e XML são organizadas e lidas pelo
navegador
53

Docume
nt
Quando um HTML é carregado pelo navegador,
ele torna- se um objeto document
54

Exemplo...
var paragrafo = document.getElementById("meu-paragrafo");
paragrafo.style.color = "red";
<p id="meu-paragrafo">Isto é um parágrafo </p>
J
S
HTM
L
55

Aprimorando um
pouco
(...)
<p id="meu-paragrafo">Isto é um parágrafo</p>
<button id="btn-mudarCor">Mudar cor</button>
var btn = document.getElementById("btn-mudarCor");
btn.onclick = function() {
paragrafo.innerHTML += " vermelho";
};
</script>
(...)
57

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>
window.onload = function() {
var btn = document.getElementById("btn-mudarCor");
paragrafo.innerHTML += " vermelho";
};
}
</script>
(...)
60

Localização dos
elementos (nós)
document.getElementById("meuId"); <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>
61

Event
os
var 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
62

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
63

Manipulação de
HTML
var elemento = document.getElementsByTagName("a")[0];
elemento.innerHTML = "Novo texto";
<a> </a>
64

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";
65

JQuery
Biblioteca/framework
de JS
John Resig
Write less, do more
66

JQuery - recursos
Seleção e manipulação de
elementos HTML
Manipulação de
CSS Efeitos e
animações
Navegação pelo
DOM Ajax
67

JQuery -
Carregamento
<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>
68

Imagine o Google Maps.
Você acha que o conteúdo
do Google Maps é
carregado de uma vez e
enviado
ao navegador?
70

Lembre agora das
páginas do Facebook e
do Twitter, elas são
recarregadas ao mudar o
conteúdo?
71

Páginas clássicas (sem
Ajax) precisam
recarregar a página
inteira se o conteúdo
mudar
72

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

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
O AJAX é baseado nos
padrões da
internet
74

Um evento
ocorre...
Cria um objeto
XMLHttpReque
st Envia
HttpRequest
Navegad
or
Processa os
dados
retornados
utilizand
o
JavaScri
Navegad
or
Processa
o
HTTPReq
uest
Cria a
response e
envia dados
de
volta ao
navegador
Servid
or
Interne
t
Interne
t
75

$.ajax({
method: "GET",
url: "nada.json",
dataType: "json"
}).success(function(response) {
var frutas = response;
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.js
on
Success /
Error
79

$.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);
});
};
POST
80

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:/
/ww
w.w3schools.com/ajax/ajax_intro.asp
http:/
/api.jquery.com/
MIRANDA, Luiz Otávio. Eventos em Javascript. 2014. Disponível em: <http:/
/ww
w.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:/
/ww
w.tutsup.com/2014/05/02/dom-e- javascript/> Acessado em 04/05/2015 às 12h15min
DUCKETT, Jon. HTML & CSS Design and buid websites. 2011
81

Referências
http:/
/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
82

html css js ajax exercícios de programação

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a html css js ajax exercícios de programação

Semelhante a html css js ajax exercícios de programação (20)

Último

Último (20)

html css js ajax exercícios de programação