Vous êtes sur la page 1sur 63

HTML, CSS e Javascript

Carlos Bazilio
Depto de Cincia e Tecnologia
Plo Universitrio de Rio das Ostras
Universidade Federal Fluminense

Arquitetura

Vantagens
Portabilidade da soluo no lado do
cliente
Facilidade de deployment
Facilidade de manuteno, restaurao e
atualizao da aplicao

Desvantagens
Nmero expressivo e crescente de dispositivos
diferentes com acesso a web (computao
ubqua)
Compatibilidade entre browsers
Novos desafios para a Engenharia de Software:
Adequao ao internet time
Metodologias voltadas para o desenvolvimento web
Computao Concorrente

Execuo no Cliente
(Browser)

HTML
CSS
Tableless
JavaScript
XML
XSLT

HTML
Hyper Text Markup Language
Especificao definida pelo consrcio W3C:
http://www.w3.org/
Um arquivo html contm marcadores (tags)
Estes marcadores indicam para o navegador
(browser) como a pgina deve ser apresentada
Marcadores usualmente vem em pares:
<tag>...</tag>
Tambm podem aparecer de forma abreviada:
<tag atributo=valor ... />

HTML

<html>
<head>
<title>Ttulo da Pgina</title>
</head>
<body>
Esta minha primeira pgina.
</body>
</html>

HTML
Tags Bsicas
Tag

Descrio

<html>

Define um documento HTML

<body>

Define o corpo de um
documento

<h1> to <h6>

Define cabealhos 1 a 6

<p>

Define um pargrafo

<br>

Insere uma quebra de linha

<hr>

Define uma linha horizontal

<!-- -->

Define um comentrio

HTML
Tags de Formatao
Tag

Descrio

<b>

Formata um texto em negrito

<big>

Formata um texto com fonte maior

<em>

Formata um texto com nfase

<i>

Formata um texto em itlico

<small>

Formata um texto com fonte pequena

<strong>

Formata um texto em destaque

<sub>

Formata um texto subscrito

<sup>

Formata um texto sobrescrito

<ins>

Formata um texto sublinhado

<del>

Formata um texto anulado

HTML
Entidades
Utilizadas para apresentao de caracteres
especiais em html. Ex.: <
Sada

Descrio

Nome da Entidade

Nmero

Espao sem quebra

&nbsp;

&#160;

<

Menor que

&lt;

&#60;

>

Maior que

&gt;

&#62;

&

E comercial

&amp;

&#38;

"

Aspas

&quot;

&#34;

'

Apstrofo

&apos; (does not work in IE)

&#39;

HTML
Links e Imagens
<a href=www.sirius.com.br>Pgina da Sirius!
</a>
Pgina da Sirius

<a name=Endereco>Como Chegar</a>


Trecho da pgina que informa detalhes sobre
localizao

<a href=www.sirius.com.br#Endereco>
Localizao</a>
Localizao

<img src=logo.gif alt=Logo da Sirius/>

HTML
Tabelas
<table border="1">
<tr>
<th>Coluna 1</th>
<th>Coluna 2</th>
</tr>
<tr>
<td>linha 1, valor 1</td>
<td>linha 1, valor 2</td>
</tr>
<tr>
<td>linha 2, valor 1</td>
<td>linha 2, valor 2</td>
</tr>
</table>

HTML
Background e Fontes
Formas de se definir um background preto para
o corpo da pgina
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

Definindo uma imagem de fundo


<body background="logo.gif">
<body
background="http://www.sirius.com.br/clouds.gif">

Configurando uma fonte


<font size="2" face="Verdana">Texto com fonte
especfica.</font>

HTML
Formulrios
HTML possibilita a criao de formulrios online
utilizando tags
A tag <form> a mais comum e permite a
criao de um formulrio de entrada de dados
<body><form>
Nome: <input type="text" name="firstname"><br />
Sobrenome: <input type="text" name="lastname"><br />
Senha: <input type="password" name="senha">
</form></body>

HTML
Formulrios
Tipos que podem ser utilizados com a tag <input>:
button: Insere um boto
checkbox: Insere um checkbox; para vrios itens, basta
inserirmos vrios inputs deste tipo
file: Insere boto seleo de arquivo atravs de uma caixa de
dilogo
hidden: Campo pertencente ao formulrio, mas que no ser
exibido na pgina
image: Insere uma imagem como um boto submit
password: Insere um campo password (caracteres digitados no
aparecem)
radio: Insere um radiobox (anlogo ao checkbox)
reset: Restaura os valores iniciais do formulrio
submit: Encaminha os dados inseridos para algum arquivo
text: Insere um campo de edio de texto

HTML
Formulrios
Quando algum elemento do tipo submit
inserido num formulrio e acionado, seus
dados so enviados para um arquivo
O arquivo mencionado indicado pelo
atributo action do elemento <form>
Este arquivo dever estar armazenado
num servidor web (Apache, Tomcat,
IIS, ...), e estar escrito em alguma
linguagem de programao de servidores:
jsp, php, asp, sevlets, ...

HTML
Formulrios
<body>
<form action=processaForm.jsp" >
Nome: <input type="text" name="firstname"><br />
Sobrenome: <input type="text" name="lastname"><br />
Senha: <input type="password" name="senha">
<input type="submit" value="Enviar">
</form>
</body>

URL aps clicar no boto: .../sirius/processaForm.jsp?


firstname=Carlos&lastname=Bazilio&senha=abcdefg

HTML
Outras tags de Formulrios
Tag

Descrio

<form>

Define um formulrio para entrada do usurio

<input>

Define um campo de entrada

<textarea>
<label>

Define um campo texto com mltiplas linhas


Define um label para algum controle

<fieldset>

Desenha uma caixa em torno de um conjunto de


elementos

<legend>

Define um ttulo para um <fieldset>

<select>

Cria uma lista drop-down

<optgroup>

Criar uma hierarquia nas opes de uma lista drop-down

<option>

Uma opo na lista drop-down

<button>

Insere um boto. Difere de <input> por poder conter


algum contedo, como uma imagem

HTML
Outras tags de Formulrios

CSS
Cascading Style Sheets
Estilos definem como elementos html devem ser
apresentados
Permite a separao entre definio de
contedo e formatao em HTML
Style sheets externos so definidos atravs de
arquivos CSS
Atualmente o padro para insero de estilo
na construo de pginas html
http://www.csszengarden.com/

CSS
Formato geral:
seletor { propriedade: valor }
Uma definio de estilo em CSS ser composta
por uma sequncia de definies como esta
acima
Exemplos:
body { color: black }
p { font-family: Verdana; text-align: center; color: red
}
h1,h2,h3,h4,h5,h6 { color: green }
p {margin-left: 20px}

CSS
Classes em CSS permitem que um mesmo
elemento seja exibido de diferentes formas
Formato usando classes:
seletor.classe { propriedade: valor }
Exemplos:
p.direita {text-align: right} // Alinha direita
p.centro {text-align: center} // Centraliza
.esquerda {text-align: left} // Aplicado a qualquer
elemento html que contenha classe esquerda
<p class=direita>Este pargrafo ser alinhado direita</p>
<p class=centro>Este pargrafo ser centralizado</p>
<p class=esquerda>Este ser esquerda</p>

CSS
Como definir (1/3)
Existem 3 maneiras se definir um CSS
para um documento HTML
Criando um link externo
<html>
<head><link rel="stylesheet"
type="text/css" href="mystyle.css" /></head>
<body>
Esta minha primeira
pgina. do arquivo mystyle.css */
/* Contedo
</body>
hr {color: sienna}
</html>
p {margin-left: 20px}
body {background-image:
url("images/back40.gif")}

CSS
Como definir (2/3)
Internamente (dentro da prpria pgina HTML
a ser exibida)
<html>
<head>
<style type="text/css>
hr {color: sienna}
p {margin-left: 20px}
body {background-image:
url("images/back40.gif")}
</style>
</head>
<body>
Esta minha primeira pgina.
</body>
</html>

CSS
Como definir (3/3)
Definindo de forma inline
<html>
<head</head>
<body style=color: sienna;
text-align: center>
Esta minha primeira pgina.
</body>
</html>
Caso existam vrias definies para um
mesmo elemento, a prioridade : inline,
interna e externa

Aplicaes
Com CSS podemos formatar:

Background
Textos
Fontes
Margens
Bordas
Listas
Tabelas

http://www.w3schools.com/css/css_examples.asp

Tableless
Padro que vem sendo adotado na web para
uso massivo de html+css
Objetiva, principalmente, melhor acessibilidade
de pginas web
Prope a no utilizao tabelas html para a
construo do layout da pgina (origem do
nome)
Naturalmente, este uso no deveria ser evitado
se o que se deseja construir uma tabela de
fato

JavaScript
a linguagem de script utilizada por milhes de
pginas web
Foi projetada para aumentar interatividade das
pginas web:
Validao de formulrios, interao com o usurio
(p.ex., tratamento de cliques de botes), deteco de
navegadores, etc

reconhecida pela maioria dos navegadores


Seu processamento feito na mquina cliente
(browser)
No h relao com Java

JavaScript - Exemplo

<html>
<head>
<title>Ttulo da Pgina</title>
</head>
<body>
<script type="text/javascript">
document.write(Esta minha
primeira pgina.");
</script>
</body>
</html>

JavaScript Onde ocorrem


Uma tag <script/> pode ser definida numa
seo head, numa seo body e tambm
pode ser definida externamente:
Na seo head, os scripts so executados
quando so chamados ou quando algum
evento ocorre;
Na seo body, os scripts so executados na
carga da pgina web
Para definio externa, um arquivo .js
precisa ser fornecido com as funes
necessrias

JavaScript Exemplo
<html>
<head>
<title>Ttulo da Pgina</title>
<script src="hello.js"></script>
</head>
<body onload="message()">
<script type="text/javascript">
document.write(<h1>Esta minha primeira
pgina.</h1>");
</script>
</body>
</html>

JavaScript - Sintaxe
Possui construes existentes na maioria
das linguagens de programao (sintaxe
similar a C):
Declarao de variveis (var x;)
Comandos condicionais, repeties, definio
de funes de usurio
Operadores de atribuio, comparao, ...

JavaScript
Janelas Popup
Funes para criao de janelas popup:
Alerta ( alert(Texto a ser exibido); )
Confirmao ( confirm(Texto a ser exibido
em janela<body>
OK/Cancel); )
Entrada de <script
dado ( type="text/javascript">
prompt(Label do campo
var nome = prompt("Seu nome");
de entrada, valor padro); )

if (nome != null && nome != "")


document.write("Oi
" + nome);
Janelas que possuem
o boto Cancel,
else
quando acionado retorna valor null
document.write("Oi annimo!");
</script>
</body>

JavaScript Eventos
Eventos so aes que podem ser
detectadas por um script
Exemplos de eventos:
Clique do mouse, abertura de uma pgina
web ou imagem, envio de um formulrio html,
uma tecla pressionada, etc

O tratamento destes eventos pode ser a


chamada de funes do script

JavaScript Eventos
<html>
<head><script src="event.js"></script>
</head>
/* Contedo do arquivo event.js */
<body>
function mouseOver()
<img border="0"
{
src="quadrado1.gif"
document.imagem.src ="quadrado2.gif";
name="imagem"
}
onmouseover="mouseOver()"
function mouseOut()
onmouseout="mouseOut()"
/>
{
</body>
document.imagem.src ="quadrado1.gif";
</html>
}
Lista de eventos:
http://www.w3schools.com/jsref/jsref_events.asp

JavaScript Objetos
JavaScript uma linguagem OO
Com isto, algumas classes utilitrias padres
esto disponveis, as quais possuem mtodos e
propriedades:
String: manipulao de strings no script

/* Exemplo de funo de script que calcula


o tamanho de uma string */
function tamanho(msg)
{
return msg.length;
}
http://www.w3schools.com/jsref/jsref_obj_string.asp

JavaScript Objetos
Date: manipulao de datas no script
/* Exemplo de funo de script que manipula
datas */
function bug(data)
{
var x = new Date();
x.setFullYear(2000,0,0);
if (data > x)
alert(Bug do milnio!);
}
http://www.w3schools.com/jsref/jsref_obj_date.asp

JavaScript Objetos
Outras classes disponveis na linguagem
JavaScript:
Array: armazenamento de conjuntos de
valores
http://www.w3schools.com/js/js_obj_array.asp

Boolean: manipulao de valores booleanos


http://www.w3schools.com/js/js_obj_boolean.asp

Math: manipulao de valores com operaes


matemticas
http://www.w3schools.com/jsref/jsref_obj_math.as
p

JavaScript Objetos
Exemplo
/* Exemplo de funo de script que manipula objetos
de JavaScript */
function exemplo_objetos()
{
var d=new Date();
var dias=new Array(7);
dias[0]="Domingo"; dias[1]="Segunda";
dias[2]="Tera"; dias[3]="Quarta"; dias[4]="Quinta";
dias[5]="Sexta"; dias[6]="Sbado";
document.write("Hoje " + dias[d.getDay()]);
document.write("Dia qualquer: " +
dias[Math.round(Math.random()*6)]);
document.write(navigator.appCodeName);
}

JavaScript Objetos
Alm destas, todos os objetos HTML DOM
podem ser acessados atravs de scripts
Window: objeto no topo da hierarquia do JavaScript;
representa a janela do browser
Navigator: contm informao sobre o browser do
cliente
Screen: contm informao sobre a tela
History: contm as URLs visitadas
Location: contm informao sobre a URL corrente
http://www.w3schools.com/js/js_obj_htmldom.asp

JavaScript Objetos
Exemplo com Window
<html>
<head>
<script type="text/javascript">
function currLocation() {
alert(window.location);
}
function newLocation() {
window.location="http://www.w3schools.com";
}
</script>
</head>
<body>
<input type="button" onclick="currLocation()" value="Show current
URL">
<input type="button" onclick="newLocation()" value="Change URL">
</body>
</html>

HTML DOM
Define um padro para acesso a elementos
HTML
O DOM apresenta um documento HTML como
uma estrutura em rvore
<html>
<head>
<title>My title</title>
</head>
<body>
<a href=>My link</a>
<h1>My header</h1>
</body>
</html>

HTML DOM
Relacionamento entre ns numa rvore
DOM

HTML DOM - API


definida por um conjunto de propriedades e
mtodos
Algumas propriedades DOM

x.innerHTML: o valor text de x


x.nodeName: o nome do elemento x
x.nodeValue: o valor de x
x.nodeType: o tipo de x (1 elemento; 2 atributo; 3
texto; ...)
x.parentNode: o n pai de x
x.childNodes: os ns filhos de x
x.attributes: os ns atributos de x

HTML DOM - API


Alguns mtodos DOM
x.getElementById(id): obtm o elemento com
o id fornecido
x.getElementsByTagName(name): obtm
todos os elementos com a tag name
x.appendChild(node): insere um n filho node
em x
x.removeChild(node): remove o n filho node
de x

HTML DOM API


Exemplo
<html>
<body>
<p id="intro">Hello World!</p>
<script type="text/javascript">
txt=document.getElementById("intro").innerHTML;
document.write(<p>Texto do pargrafo intro: + txt +
"</p>");
</script>
</body>
</html>

HTML DOM API


Exemplo
<html>
<body>
<p id="intro">Hello World!</p>
<script type="text/javascript">
txt=document.getElementById("intro").childNodes[0].nodeValue;
document.write(<p>Texto do pargrafo intro: + txt +
"</p>");
</script>
</body>
</html>

JavaScript Mais Usos

Criao de cookies
Validao de entrada
Disparo de funes com retardo (tempo)
Criao de objetos prprios

HTML Como funciona o


envio desta mensagem?
<body>
<form action=processaForm.jsp" >
Nome: <input type="text" name="firstname"><br />
Sobrenome: <input type="text" name="lastname"><br />
Senha: <input type="password" name="senha">
<input type="submit" value="Enviar">
</form>
</body>

URL aps clicar no boto: .../sirius/processaForm.jsp?


firstname=Carlos&lastname=Bazilio&senha=abcdefg

Tipos de requisies HTTP


GET
Parmetros so enviados na url da solicitao
http://localhost:8080/sirius/processaForm.jsp?
firstname=Carlos&lastname=Bazilio&senha=abcdefg
Envio de parmetros firstname e lastname e senha
para um recurso no servidor (neste caso, uma pgina
jsp processaForm.jsp)
Estas urls podem ser armazenadas como favoritos
Tipo padro (default)
No recomendado para o envio de informaes
sigilosas

AJAX
Termo surgiu em 2005
AJAX (Asynchronous JavaScript and XML) no uma
nova tecnologia, mas sim uma combinao de
tecnologias padro
Tem como objetivo principal enriquecer a interao de
aplicaes web
Combina as seguintes tecnologias:

HTML/XHTML e CSS
DOM
XML e XSLT
JavaScript
XMLHttpRequest

XMLHttpRequest
o sonho dos desenvolvedores web, pois
permite:
Atualizar uma pgina web sem recarreg-la
Enviar requisio de dados a um servidor aps a
pgina ter sido carregada
Receber resposta de requisies aps a pgina ter
sido carregada
Enviar dados para um servidor em background

suportado pela maioria dos navegadores


modernos

Navegao sem AJAX

Navegao com AJAX

AJAX

XMLHttp
Tudo comeou quando o IE (verso 5) ofereceu
suporte ao XML atravs de uma biblioteca
ActiveX (MSXML)
Isto permitia ao desenvolver fazer solicitaes
HTTP via JavaScript; a inteno era que estas
requisies fossem respondidas como XML
A popularidade deste recurso forou os outros
navegadores a oferecerem recurso similar

AJAX - Exemplo
Em seguida veremos um exemplo de uso
do Ajax
Neste exemplo so criadas 3 funes
Javascript:
getXMLObject(): obtm o objeto
XMLHttpRequest
ajaxFuction(): realiza a chamada ao servidor e
configura a funo de callback para tratamento
da resposta
handleServerRespose(): funo de callback

AJAX - Exemplo
<html>
<head> <title>JSP and Servlet using AJAX</title>
<script type="text/javascript">
function getXMLObject() //XML OBJECT {
var xmlHttp = false;
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP") // For Old
Microsoft Browsers
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") // For
Microsoft IE 6.0+
} catch (e2) {
xmlHttp = false // No Browser accepts the XMLHTTP Object
then false
}
}
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
xmlHttp = new XMLHttpRequest(); //For Mozilla, Opera Browsers }
return xmlHttp; // Mandatory Statement returning the ajax object created
} ...

AJAX - Exemplo
var xmlhttp = new getXMLObject(); //objeto xmlhttp
function ajaxFunction() {
var getdate = new Date();
if(xmlhttp) {
xmlhttp.open("GET","gettime?" + getdate.getTime(),true); //gettime a
url do servlet
xmlhttp.onreadystatechange = handleServerResponse;
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-formurlencoded');
xmlhttp.send(null);
}
}
function handleServerResponse() {
if (xmlhttp.readyState == 4) {
if(xmlhttp.status == 200)
{ document.myForm.time.value=xmlhttp.responseText; //Atualiza o form }
else {
alert("Error during AJAX call. Please try again"); } } }
</script> ...

AJAX - Exemplo
A propriedade onreadystatechange
configura a funo de callback
O mtodo send envia a requisio
A propriedade readyState defina o estado
da requisio
A propriedade status informa o cdigo
HTTP de status da resposta
A propriedade responseText contm o
texto da resposta

AJAX - Exemplo
<body>
<form name="myForm">
Server Time:<input type="text" name="time" /><br />
<input type="button"
onclick="javascript:ajaxFunction();" value="Click to display Server
Time on Textbox"/><br />
</form>
</body>
</head>
</html>

AJAX - Exemplo
<body>
<form name="myForm">
Usurio: <input type=text"
onkeyup="javascript:ajaxFunction(); size=20 name=nome/><br
/>
<input type=button value=Envie /><br />
Server Time:<input type="text" name="time" /><br />
</form>
</body>
</head>
</html>

Referncias
http://www.w3schools.com/
Site com tutoriais on-line rpidos e com muita
qualidade

http://www.csszengarden.com/
Site que demonstra as potencialidades de CSS

http://del.icio.us/carlosbazilio/{css+html}
Meus favoritos sobre o assunto

http://www.w3.org/
Site do consrcio W3C