HTML5 Com Javascript

HTML5 com Javascript
Programador WEB
Prof. Reinaldo Freitas
HTML5
Introduo
Estrutura da pgina
Textos
Multimdia
Tabelas
CSS
Outros assuntos
Javascript
Introduo
Conceitos bsicos
Botes
Objetos nativos
Formulrios
Outros assuntos
Agenda
HTML5
Introduo
Introduo
HTML:
Significa HyperText Markup Language (Linguagem
de marcao de hipertexto). Hipertexto um texto
ao qual se agregam outras informaes na forma de
blocos de textos, imagens ou sons.
a Linguagem utilizada para a criao de pginas
Web (arquivos com extenso htm ou html);
Um aplicativo conhecido como navegador
(Browser) responsvel por interpretar uma pgina
HTML e exibir o seu contedo. Alguns exemplos de
navegadores so: Microsoft Internet Explorer, Google
Chrome, Mozilla Firefox, Apple Safari e Opera.
Introduo
HTTP:
Significa HyperText Transfer Protocol (Protocolo
de Transferncia de Hipertexto);
Protocolo que permite a navegao na Web.
Introduo
HTTPS:
Significa HyperText Transfer Protocol Secure
(Protocolo de Transferncia de Hipertexto Seguro);
uma verso criptografada via SSL do HTTP.
Introduo
Servidor Web:
Servidor que processa as requisies http enviadas
pelos clientes por meio dos navegadores e retorna o
resultado do processamento. Seguem alguns
exemplos:
Apache;
Tomcat;
Internet Information Services (IIS) da Microsoft;
IBM HTTP Server.
Introduo
Arquitetura Web:
Primeira camada
(Apresentao)
Segunda camada
(Lgica de negcio)
Terceira camada
(Persistencia)
Internet
Conexo nativa
ou ODBC
http
http
Navegador
HTML
Javascript
Applet
VBScript
Plug-in (Flash, adobe, etc.)
ActiveX
Servidor Web
PHP
JSP (Java Server Pages)
ASP (Active Server Pages)
Servidor
de
Banco de dados
SQL
Introduo
Histrico da HTML:
Verso
Data
Principais caractersticas
HTML
1992
Sofreu vrias revises.
HTML 2.0
1994
Primeira verso padronizada.
HTML 3.0
1995
No se tornou realidade.
HTML 3.2
1997
Implementao de tabelas e applets. Primeira

verso padronizada pela W3C.
HTML 3.5
1997
Desenvolvimento do XHTML.
HTML 4.0
1997
Criadas as verses Strict, Transitional e

Frameset.
HTML 4.01
1999
Implementao de frames e folhas de estilo.
HTML 5
2008
Funes voltadas para smartphones.

Considerada um padro de fato.
Introduo
W3C:
Significa World Wide Web Consortium. um
consrcio internacional que tem como objetivo criar
padres para a web.
Introduo
TAGs (rtulos):
So os comandos utilizados na elaborao de uma
pgina HTML;
identificada por uma palavra ou letra entre os
smbolos < e >. Geralmente precisa ser encerrada
por uma TAG de mesmo nome precedida pelo
smbolo /. Seguem alguns exemplos:
<h1> Exemplo de TAG com fechamento </h1>
<br> Exemplo de TAG sem fechamento
Devem ser escritas em letras minsculas por uma
questo de padronizao e podem possuir atributos.
Introduo
Exerccios:
1) O que o HTML?
2) O que o HTTP?
3)O que um servidor web?
4)Qual o objetivo da W3C?
5)O que uma TAG? Cite uma caracterstica
dela.
HTML5
Estrutura da Pgina
Estrutura da pgina
Estrutura bsica de uma pgina HTML 5:
<!DOCTYPE html>
Verso do HTML
<html>
Inicio do documento
<head>
Incio do cabealho
</head>
Final do cabealho
<body>
Incio do corpo da pgina
</body>
Final do corpo da pgina
</html>
Final do documento
Estrutura da pgina
<!DOCTYPE html>:
Instruo que ser utilizada pelo navegador para
identificar a verso do HTML em que a pgina est
escrita;
Este o formato para o HTML 5. Outros formatos
podem ser vistos em:
http://www.w3schools.com/tags/tag_doctype.asp
Estrutura da pgina
<html [atributos]>:
Tag utilizada para delimitar o inicio de uma pgina
HTML;
Deve ser fechada com </html>;
Os atributos podem ser:
lang: define o idioma da pgina para fins de pesquisa
atravs de ferramentas de busca. Ex: pt-br.
xmlns: define o padro de xml que ser utilizado no
documento.
Estrutura da pgina
<head>:
Tag utilizada para delimitar o cabealho de uma
pagina HTML;
O cabealho utilizado para indicar parmetros de
configurao do documento;
Deve ser fechada com </head>.
Estrutura da pgina
<title>:
Tag utilizada no cabealho de uma pgina para
definir o ttulo dela;
Deve ser fechada com </title>.
Estrutura da pgina
<meta [atributos]>:
Tag utilizada no cabealho da pgina com o objetivo
de passar informaes sobre o site para os sites de
busca. No precisa ser fechada com </meta>;
charset: padro de caracteres no qual a pgina foi
gravada no editor de texto. Ex: utf-8 ou iso-8859-1;
name: determina o tipo de informao que ser
informada no atributo content. Pode ser:
author: nome do autor da pgina;
description: descrio da pgina;
keywords: palavras-chave da pgina (separadas por vrgula)..
content: apresenta o contedo do atributo name.
Estrutura da pgina
<body [atributos]>:
Tag utilizada para delimitar o inicio do corpo de
uma pgina HTML;
O corpo da pgina onde so includas as
informaes que aparecero na pgina;
O contedo de cada atributo deve ser colocado
entre aspas e separados por espaos;
Deve ser fechada com </body>.
Estrutura da pgina
[atributos]:
bgcolor: determina a cor de fundo da pgina. Ex:
bgcolor=green. As cores podem ser:
Cor
Hexa
RGB
Significado
Cor
Hexa
RGB
Significado
white
#FFFFFF
rgb(255,255,255)
Branco
(padro)
red
#FF0000
rgb(255,0,0)
Vermelho
pink
#FFC0CB
rgb(255,192,203)
Rosa
gray
#808080
rgb(128,128,128)
Cinza
gold
#FFD700 rgb(255,215,0)
Ouro
silver
#C0C0C0 rgb(192,192,192)
Prata
black
#000000 rgb(0,0,0)
Preto
blue
#0000FF
rgb(0,0,255)
Azul
yellow
#FFFF00
rgb(255,255,0)
Amarelo
green
#00FF00
rgb(0,255,0)
Verde
orange
#FFA500
rgb(255,165,0)
Laranja
Estrutura da pgina
[atributos]:
background: determina uma imagem como fundo
da pgina. Ex: background="foto.jpg"
Estrutura da pgina
Comentrios:
Deve ser utilizado o smbolo  no final do comentrio.
Estrutura da pgina
Exerccios:
1)Qual a estrutura bsica de uma pgina HTML?
2)Qual a tag que define o ttulo da pgina e em
que local ela utilizada?
3)Para que serve a tag <meta>?
4)Elabore uma pgina contendo um ttulo e
definindo a cor de fundo como azul. Utilize
comentrios na pgina.
5)Altere a pgina criada para que tenha uma
imagem de fundo.
HTML5
Textos
Textos
Cabealhos:
<h1> texto </h1>: coloca
fonte/tamanho do cabealho 1;
fonte/tamanho do cabealho 6.
o texto
informado na
o texto
informado na
o texto
informado na
o texto
informado na
o texto
informado na
o texto
informado na
Textos
<center> texto </center>: centraliza o texto na
pgina;
<b> texto </b>: coloca o texto em negrito;
<i> texto </i>: coloca o texto em itlico;
<u> texto </u>: coloca o texto sublinhado;
<sup> texto </sup>: coloca o texto sobrescrito;
<sub> texto </sub>: coloca o texto subscrito;
<pre> texto </pre>: coloca o texto como foi
digitado (pr-formatao).
Textos
<br>: pula uma linha na pgina;
<p [atributos]> texto </p>: coloca o texto no
alinhamento especificado, pulando uma linha
antes. Os atributos da tag podem ser:
align: define o tipo de alinhamento:
left: esquerda (padro);

center: centralizado;
right: direita.
Textos
<ol [atributos]>
<li> item 1
<li> item 2
<li> item 3
</ol>: coloca os itens informados em formato de lista ordenada.
Os atributos da tag podem ser:
type: define o formato da numerao:
1: lista numrica (padro);
A: lista alfabtica iniciando com letras maisculas;
a: lista alfabtica iniciando com letras minsculas;
I: lista numrica com nmeros romanos maisculos;
i: lista numrica com nmeros romanos minsculos.
start: define o valor inicial de uma lista (padro=1).
Textos
<ul [atributos]>
<li> item 1
<li> item 2
<li> item 3
</ul>: coloca os itens informados em formato de lista no
ordenada. Os atributos da tag podem ser:
type: define o formato do marcador. Pode ser:
disc: ponto (padro);
square: quadrado;
circle: crculo.
Textos
Hiperlink:
Objeto que ao ser cliclado direciona para uma
outra pgina;
Deve ser utilizada a tag <a> para criar um
hiperlink. Segue a sintaxe:
<a href=endereo da pgina>
Objeto a conter o hiperlink
</a>
Textos
Exerccios:
1) Elabore a pgina abaixo.
Multimidia
Multimidia
<img [atributos]>:
Tag utilizada para exibir uma imagem em uma
pagina HTML. No precisa fechar com </img>;
src: nome do arquivo contendo a imagem;
alt: texto que ser apresentado se no for possvel
exibir a imagem;
title: texto que ser apresentado ao passar o mouse
sobre a imagem;
width: largura da imagem em pixels;
height: altura da imagem em pixels.
Multimidia
<embed [atributos]>:
Tag utilizada para executar um vdeo ou udio em
uma pgina HTML. No precisa fechar com
</embed>;
Depende de um plug-in instalado (ex: Flash);
src: nome do arquivo contendo o vdeo ou udio;
width: largura do vdeo ou udio em pixels;
height: altura do vdeo ou udio em pixels;
autostart: executar ou no automaticamente. Pode ser
true ou false;
loop: define a quantidade de repeties.
Multimidia
<video [atributos]>
<source [atributos]>
Mensagem de erro
</video>: Tag utilizada para exibir um vdeo em uma
pagina HTML 5. Os atributos podem ser:
controls: Exibe ou no os controles;

width: largura do vdeo em pixels;
height: altura do vdeo em pixels.
autoplay: executa automaticamente o vdeo.
S funciona a partir da verso 9 do Internet Explorer;

Os atributos da tag <source> podem ser:
src: nome do arquivo contendo o vdeo;

type: tipo de mdia. Ex: video/mp4;
Multimidia
<audio [atributos]>
<source [atributos]>
Mensagem de erro
</audio>: Tag utilizada para executar um udio em
uma pgina HTML 5. Apresenta a mensagem de erro se
no for possvel. Os atributos podem ser:
controls: exibe ou no os controles;

autoplay: executa automaticamente o udio.
S funciona a partir da verso 9 do Internet Explorer;

Os atributos da tag <source> podem ser:
src: nome do arquivo contendo o arquivo de som;

type: informa o tipo de mdia. Ex: audio/mpeg.
Multimidia
Exerccios:
1) Qual a tag para inserir uma imagem em uma
pgina?
2)Quais so as tags para inserir um video ou som
em uma pgina?
3) Elabore uma pgina contendo um arquivo de
video.
4)Elabore uma pgina contendo um arquivo de
udio.
HTML5
Tabelas
Tabelas
<table [atributos]>
<caption>Ttulo da tabela</caption>
<thead>
<tr><th [atributos]>ColunaN</th></tr>
</thead>
<tbody>
<tr><td [atributos]>ColunaN</td></tr>
</tbody>
<tfoot>
<tr><td [atributos]>ColunaN</td><tr>
</tfoot>
</table>: tag utilizada para exibir uma tabela em uma pgina.
Tabelas
Os atributos da tabela podem ser:
border: define a largura da borda;
width: largura da tabela em pixels ou percentual;
cellpadding: espao entre a clula e a borda em pixel;
cellspacing: espao entre as linhas em pixel (padro 2).
tag <caption> define o ttulo da tabela. Aparece como padro sem borda
e centralizado;
tag <thead> inicia o cabealho;
tag <th> iniciar uma coluna de cabealho. J aparece como padro em
negrito;
tag <tbody> inicia o corpo da tabela;
tag <tr> inicia uma linha;
tag <td> inicia uma coluna de dados;
tag <tfoot> inicia o rodap..
Tabelas
Os atributos das tags <th> e <td> podem ser:
align: alinhamento na clula. Pode ser: center,
right e left;
bgcolor: cor de fundo da clula;
width: largura da clula em pixels ou percentual;
colspan: mescla a quantidade de colunas
informada;
rowspan: mescla a quantidade de linhas
informadas.
Tabelas
Exerccios:
1) Criar uma pgina com a tabela abaixo:
Empresa XPTO Ltda
Relao de empregados
Nome
Cargo
Carlos
Programador
5.000,00
Renata
Analista
8.000,00
Ricardo
Digitador
2.000,00
Total
Salrio
15.0000,00
HTML5
CSS
CSS
Significa Cascading Style Sheets, ou seja,
folhas de estilo em cascata;
um documento que conter todos os
detalhes, declaraes e cdigos que definiro o
estilo (style) do site;
processada pelo navegador (lado cliente client side).
CSS
<style [atributos]>:
tag utilizada no cabealho de uma pgina com o
objetivo de definir o estilo da pgina (estilo
incorporado);
A sintaxe a seguinte:
<style type="text/css">
[elemento][.classe] {propriedade: valor ; propriedade: valor; ... ;}
#identificador {propriedade: valor; propriedade: valor; ...}
</style>
As propriedades podem ser consultadas em:
http://www.w3schools.com/cssref/default.asp
CSS
Principais propriedades de posicionamento:
position: define o tipo de posicionamento de um objeto na
pgina. Pode ser:
static: posicionado com base na ordem que o objeto
aparece na pgina. Este o padro.
fixed: posicionado com base na janela aberta.
top: define a distancia do objeto em relao ao topo da
janela;
left: define a margem esquerda do objeto;
bottom: define a distancia do objeto em relao ao fundo da
janela;
right: define a margem direita do objeto.
CSS
Principais propriedades de formatao:
color: cor do texto;
background-color: cor de fundo de um objeto;
width: largura de um objeto. Ex: 100px;
height: altura de um objeto. Ex: 50px;
font-family: tipo da fonte. Ex: arial, courier, etc.
font-style: estilo da fonte. Ex: normal ou italic;
font-weight: ativa ou no o negrito. Ex: normal ou
bold;
font-size: tamanho da fonte. Ex: 12px, 14px, etc.
CSS
<span [atributos]>
Texto a ser formatado
</span>: tag utilizada para formatar texto dentro de
um elemento (inline). No faz quebra de linha. Os
principais atributos so:
style: especifica o estilo a ser aplicado aos elementos
(estilo inline). Pode ser utilizado em outras Tags;
class: define a classe do estilo a ser aplicado. Pode ser
utilizado em outras Tags (atributo global);
id: define o identificador do estilo a ser aplicado.
Tambm pode ser utilizado em outras Tags (atributo
global).
CSS
<div [atributos]>
Elementos a serem formatados
</div>: tag utilizada para formatar um grupo de
elementos. Faz quebra de linha automtica. Os
principais atributos so:
style: especifica o estilo a ser aplicado aos elementos
(estilo inline). Pode ser utilizado em outras Tags;
class: define a classe do estilo a ser aplicado. Pode ser
utilizado em outras Tags (atributo global);
id: define o identificador do estilo a ser aplicado.
Tambm pode ser utilizado em outras Tags (atributo
global).
Ex:
CSS
<html>
<head>
<meta charset="utf-8">
<title>Uso de estilos</title>
h1 {color: blue}
p.modelo1 {color: brown}
div.modelo1 {color: green}
.modelo2 {color: red}
#modelo3 {color: gray}
</style>
</head>
<body>
<h1>Cabealho em azul e <span id="modelo3">cinza</span></h1>
<p class="modelo1">Pargrafo em modelo 1</p>
<div style="color:green;font-family:arial;font-size:48">
Bloco em Verde, Arial e tamanho 48
</div>
<div class="modelo1">
Bloco em Modelo 1
</div>
<div class="modelo2">
Bloco em Modelo 2
</div>
</body>
</html>
Ex:
CSS
<html>
<head>
<meta charset="utf-8">
<title>Uso de estilos</title>
#erro1 {position: fixed; top: 200px; left: 200px; width: 100px; height: 100px; background-color: green}
#erro2 {position: fixed; top: 400px; left: 400px; width: 100px; height: 100px; background-color: red}
#erro3 {position: fixed; bottom: 0px; right: 0px; width: 100px; height: 100px; background-color: blue}
</style>
</head>
<body>
Erro0<br>
<div id="erro1">
Erro1
</div>
<div id="erro2">
Erro2
</div>
<div id="erro3">
Erro3
</div>
Erro4<br>
Erro5<br>
</body>
</html>
CSS
<link [atributos]>:
tag utilizada no cabealho de uma pgina com o
objetivo de definir o arquivo de estilo da pgina (estilo
externo);
A sintaxe a seguinte:
<link rel="stylesheet" type="text/css" href="nome do arquivo.css">
CSS
Exerccios:
1) Quais so as formas de definio do estilo de
uma pgina?
2) Crie uma pgina usando cada uma das formas
de folhas de estilo.
HTML5
Outros assuntos
Outros assuntos
Exemplos de softwares para criao de
pginas:
Microsoft Front Page;
Adobe Dreamweaver.
Outros assuntos
Sites para criao/hospedagem de sites:
Wix:
http://pt.wix.com/
UOL Host
http://www.uolhost.com.br/
Locaweb
http://www.locaweb.com.br/
Outros assuntos
Sites importantes:
Validador de sites:
http://validator.w3.org
Referencia de TAGs HTML

http://www.w3schools.com/tags/
JavaScript
Introduo
Introduo
JavaScript:
Linguagem de programao criada com o objetivo
de dar interatividade a uma pgina web;
Desenvolvida pela Netscape em 1995 em parceria
com a Sun Microsystems;
Com ela possvel:
Manipular contedo e apresentao;

Manipular o navegador;
Interagir com formulrios;
Interarir com outras linguagens.
Para maiores informaes consulte:

http://www.w3schools.com/js/default.asp
Introduo
Formas de incluso de JavaScript em uma
pgina HTML:
Incorporado: dentro da tag <head>;
Externo: dentro de um arquivo externo e inserir
um link dentro da tag <head>;
Inline: dentro da tag <body>. No recomendvel.
Introduo
JavaScript incorporado:
<script type="text/javascript">
Declaraes ou Instrues;
</script>
Inicio do Javascript
Contedo do Javascript
Final do Javascript
Introduo
JavaScript externo:
<script type="text/javascript" src="arquivo.js"></script>
JavaScript inline:
<button type="button" onclick="alert(Ateno!)">Ateno</button>
Introduo
Exerccios:
1) O que o JavaScript?
2) Onde executado um JavaScript?
3)Qual a tag usada para delimitar um JavaScript?
4)Quais so as formas de insero de um
JavaScript em uma pgina web?
JavaScript
Conceitos bsicos
Conceitos bsicos
Tamanho de caixa:
JavaScript sensvel ao tamanho de caixa (letras
maisculas e minsculas).
Conceitos bsicos
Comentrios:
Se o comentrio estiver em uma nica linha, insira
os smbolos // ou <!-- no incio da linha onde estiver
o comentrio;
Se o comentrio estiver em vrias linhas, insira o
smbolo /* no incio da primeira linha onde estiver o
comentrio e o smbolo */ no final da ltima linha.
Conceitos bsicos
Varivel :
Elemento que pode armazenar um valor;
Devem ser definidas com a palavra var;
Os tipos de valores podem ser:
String (texto). Ex: var nome="Carlos";
Nmeros inteiros. Ex: var idade=1;
Nmeros decimais. Ex: var nota=7.5;
Booleano (true ou false). Ex: var achei=true;
Array (conjunto de valores). Ex: var cores=["Amarelo", "Azul",
"Verde"];
Objeto. Ex: var pessoa = {nome: "Carlos", idade:25}.
Podem ser globais (acessadas de qualquer ponto)

ou locais (acessadas apenas onde foram declaradas).
Conceitos bsicos
Varivel :
Seguem algumas regras/dicas para definio do
nome da varivel:
Palavras reservadas do Javascript no podem ser nomes
de variveis;
Devem comear com uma letra, underscore (_) ou o
caracter de cifro ($);
Podem tambm conter nmeros no meio do nome;
So sensveis ao tamanho da caixa, ou seja, uma
varivel de nome A diferente de uma varivel de nome a.
Utilize sempre letras minsculas;
Utilize como nome algo que lembre o contudo da
varivel.
Conceitos bsicos
Principais operadores matemticos :
+
/
*
soma
subtrao
diviso
multiplicao
Conceitos bsicos
Principais operadores de comparao :
<
<=
>
>=
==
!=
menor que
menor ou igual que
maior que
maior ou igual que
igual que
diferente de
Conceitos bsicos
Principais operadores lgicos:
&&
||
!
And (e). Retorna verdadeiro (true) se todas as

condies forem verdadeiras
Or (ou). Retorna verdadeiro (true) se pelo menos
uma das condies for verdadeira
Not (no). Inverte o resultado de uma condio
Conceitos bsicos
Estruturas condicionais:
If (condio)
{
Instrues que sero executadas se a condio for
verdadeira;
}
Else
{
Instrues que sero executadas se a condio for falsa;
}
Conceitos bsicos
Estruturas condicionais:
switch (varivel)
{
case valor1:
Instrues que sero executadas se a varivel for igual a valor1;
break;
case valorN:
Instrues que sero executadas se a varivel for igual a valorN;
break;
default:
Instrues que sero executadas se a varivel no for igual a
nenhum dos valores informados;
Conceitos bsicos
Estruturas de repetio:
for (var varivel=valor inicial; condio; contador)
{
Instrues;
}
Repete as instrues enquanto o valor da varivel

estiver dentro da condio informada. O contador
define se o valor da varivel vai aumentar ou
diminuir a cada repetio (loop);
O contador pode ser:
Varivel++: para aumentar o valor da vrivel;
Varivel--: para diminuir o valor da varivel.
Conceitos bsicos
Estruturas de repetio:
while (condio)
{
Instrues;
}
Repete as instrues enquanto a condio

informada for verdadeira.
Conceitos bsicos
Funo:
Recurso que permite executar um conjunto de
instrues a partir de valores informados e retornar
um valor como resultado final da funo. A funo
declarada da seguinte forma:
function nome da funo(varivel1, varivelN, ...)
{
Instrues;
return valor final;
}
A funo executada da seguinte forma:

nome da funo (valor1, valorN, ...)
Conceitos bsicos
Exerccios:
1) Quais so as formas de insero de comentrios?
2) O que so variveis e quais so os seus tipos?
3) Quais so os principais operadores matemticos, de
comparao e lgicos?
4) O que so estruturas condicionais e de repetio?
Cite exemplos.
5) O que so funes?
JavaScript
Botes
Botes
<button [atributos] [Eventos]>
Contedo do boto
</button>
Exibe um boto com o contedo informado. Os principais
atributos so:
type: define o tipo do boto. Pode ser:
button: boto comum;
reset: reseta (inicializa) um formulrio;
submit: encaminha o formulrio para uma pgina web.
id: define um identificador para o boto. um atributo

global no HTML;
autofocus: define que o boto receber o foco quando a
pgina for carregada.
Botes
Seguem alguns eventos que so disparados pelo
mouse:
onclick: define um script que ser executado quando o
boto for clicado;
ondblclick: define um script que ser executado quando
for acionado um duplo-clique no boto.
Os demais eventos pode ser consultados em:

http://www.w3schools.com/tags/ref_eventattributes.asp
Botes
Exerccios:
1) Qual a vantagem de utilizar botes em uma
pgina?
2)O que so eventos?
3)Crie uma pgina que ao clicar um boto
execute uma funo que apresente uma caixa de
alerta na tela.
JavaScript
Objetos nativos
Objetos nativos
Objeto :
Elemento que pode ser manipulado atravs das
suas propriedades e/ou mtodos. Seguem alguns
exemplos de objetos nativos:
String (http://www.w3schools.com/js/js_string_methods.asp);
Number (http://www.w3schools.com/js/js_number_methods.asp);
Date (http://www.w3schools.com/js/js_date_methods.asp).
Objetos nativos
Estrutura hierrquica dos principais objetos
de um navegador em Javascript:
Window
Document
Screen
History
Navigator
Location
O objeto nativo padro de um navegador o objeto

window.
Objetos nativos
Contedo dos principais objetos nativos:
window: contm os objetos de uma janela (frame) aberta
no browser;
document: contm os objetos da pgina HTML que est
aberta;
screen: contm as informaes sobre a tela do usurio que
est acessando a pgina;
history: contm as pginas visitadas pelo usurio;
navigator: contm informaes sobre o browser que est
aberto;
location: contm informaes sobre o endereo da pgina
que est aberta.
Objetos nativos
Propriedade :
Corresponde as caractersticas de um objeto. Cada
objeto possui as suas caractersticas;
Forma de atribuio de valor a uma propriedade:
Objeto.Propriedade = Valor
Forma de leitura do valor de uma propriedade:

Varivel = Objeto.Propriedade
Objetos nativos
Mtodos :
Corresponde as aes que um objeto pode
executar. Cada objeto possui os seus prprios
mtodos;
Forma de uso:
Objeto.Mtodo(Valor)
Objetos nativos
Propriedades e mtodos dos principais
objetos nativos
Objeto nativo
Pgina com as propriedades e os mtodos
window
http://www.w3schools.com/jsref/obj_window.asp
document
http://www.w3schools.com/jsref/dom_obj_document.asp
screen
http://www.w3schools.com/jsref/obj_screen.asp
history
http://www.w3schools.com/jsref/obj_history.asp
navigator
http://www.w3schools.com/jsref/obj_navigator.asp
location
http://www.w3schools.com/jsref/obj_location.asp
Objetos nativos
Principais propriedades do objeto Window:
Propriedade
Descrio
document
Retorna o objeto document da janela.
screen
Retorna o objeto screen da janela.
history
Retorna o objeto history da janela.
navigator
Retornar o objeto navigator da janela.
location
Retorna o objeto location da janela.
Objetos nativos
Principais mtodos do objeto Window:
Mtodo
Descrio
alert
Exibe uma caixa de alerta na tela.

Ex: window.alert("Ateno");
close
Fecha a janela atual.

Ex: window.close();
confirm
Exibe uma caixa de dilogo contendo os botes OK e Cancelar.

Ex: window.confirm("Deseja continuar");
open
Abre uma nova janela.

Ex: window.open("http://www.google.com.br");
print
Imprime a janela atual.

Ex: window.print();
prompt
Abre uma caixa de dilogo de entrada de informaes.

Ex: window.prompt("Digite uma data:", "dd/mm/aaaa");
Objetos nativos
Principais propriedades do objeto Document:
Propriedade
Descrio
body
Define ou retorna o elemento <body> do documento aberto.

Ex: document.body.style.backgroundColor="blue";
OBS: Para ver maiores informaes sobre o objeto Style ver:
http://www.w3schools.com/jsref/dom_obj_style.asp
cookie
Grava ou retorna os cookies de um documento.
forms
Retorna uma coleo contendo os elementos <form> de um

documento.
title
Define ou retorna o ttulo do documento aberto.

Ex: document.title = "Novo nome da pgina";
Objetos nativos
Principais mtodos do objeto Document:
Propriedade
Descrio
getElementById
Retorna o elemento que possui o id especificado.

Ex:
document.getElementById("btn1").style.position="fixed";
document. getElementById("btn1").style. marginTop = "100px";
document. getElementById("btn1").style. marginLeft = "100px";
document.getElementById("cabecalho").innerHTML="Novo texto";
write
Escreve cdigo HTML na pgina. OBS: Deve-se evitar.

Ex: document.write("<b>Texto em negrito</b>");
Objetos nativos
Principais propriedades do objeto Screen:
Propriedade
Descrio
height
Altura da tela.
Ex: alert("Altura da tela: "+screen.height);
pixelDepth
Bits por pixel da resoluo de cores da tela.

Ex: alert("Qtde de bits por pixel: "+screen.pixelDepth);
width
Largura da tela.
Ex: alert("Largura da tela: "+screen.width);
Objetos nativos
Principais propriedades do objeto History:
Propriedade
Descrio
length
Quantidade de pginas contidas no histrico do usurio ativo.

Ex: alert(history.length);
Principais mtodos do objeto History:

Mtodo
Descrio
back
Carrega a pgina anterior do histrico do usurio ativo.

Ex: history.back();
forward
Carrega a prxima pgina do histrico do usurio ativo.

Ex: history.forward();
Objetos nativos
Principais propriedades do objeto Navigator:
Propriedade
Descrio
appName
Retorna o nome do navegador utilizado.

Ex: alert("Nome do navegador: "+navigator.appName);
appVersion
Retorna a verso do navegador utilizado.

Ex: alert("Verso do navegador: "+navigator.appVersion);
cookieEnabled
Retorna se os cookies esto ativos no navegador.

Ex: alert("Cookies ativos: "+navigator.cookieEnabled);
Principais mtodos do objeto Navigator:

Mtodo
Descrio
javaEnabled
Retorna se o Java est habilitado no navegador.

Ex: alert("Java ativo: "+navigator.javaEnabled());
Objetos nativos
Principais propriedades do objeto Location:
Propriedade
Descrio
hostname
Nome do domnio da pgina ativa.

Ex: alert("Domnio da pgina: "+location.hostname);
href
Retorna o nome completo da pgina.

Ex: alert("Endereo da pgina:"+location.href);
Principais mtodos do objeto Location:

Mtodo
Descrio
assign
Carrega uma nova pgina.

Ex: location.assign("http://www.google.com");
reload
Recarrega a pgina.
Ex: location.reload();
Objetos nativos
Exerccios:
1) Qual so os principais objetos nativos em JavaScript?
2) Qual a diferena entre propriedade e mtodo?
3) Crie uma pgina com um boto que permite ao
usurio escolher entre as cores azul ou verde como
fundo da pgina e apresente uma mensagem de erro se
ele escolher algo diferente de azul ou verde. Tambm
inclua um boto para retornar a cor do fundo para
Branco.
JavaScript
Formulrios
Formulrios
<form [atributos] [eventos]>
objetos
</form>
Define um formulrio em HTML. Os atributos
podem ser:
name: define um nome para o formulrio;
action: define a pgina que ir receber os dados do
formulrio quando este for submetido;
method: define o mtodo de envio dos dados. Pode
ser:
get: envia os dados no endereo da pgina;
post: envia os dados encapsulados na mensagem http.
Formulrios
Os principais
formulrios so:
eventos
associados
onsubmit: executado antes do formulrio ser submetido.

Normalmente utilizado com uma funo de validao do
formulrio. Se o resultado desta funo retornar true, o
formulrio ser submetido. Se o resultado da funo for false,
o formulrio no ser submetido;
onreset: executado antes do formulrio ser resetado
(inicializado). Pode ser utilizado com uma funo para
confirmao da ao. Se o resultado desta funo retornar
true, o formulrio ser resetado. Se o resultado da funo for
false, o formulrio no ser resetado.
Formulrios
Os objetos do formulrio podem ser:
Campos de entrada de dados (Input);

Descries (Label);
Campos de mltiplas linhas (Textarea);
Campos de seleo (Select);
Lista de dados (Datalist);
Botes (Button).
Formulrios
<input [atributos] [eventos]>:
Define um campo de entrada de dados em um
formulrio. Os atributos podem ser:
type: define o tipo do campo. Pode ser principalmente:
text: campo de texto;
password: campo de senha;
number: campo de nmero;
date: campo de data. No suportado pelo Internet Explorer;
checkbox: caixa de marcao;
radio: boto de seleo;
button: boto normal. Normalmente utilizado com o evento
onclick para executar um script;
reset: boto para resetar (inicializar) o formulrio;
submit: boto para submeter o formulrio. Normalmente
utilizado com o evento onsubmit para validar o formulrio.
Formulrios
<input [atributos] [eventos]>:
id: define um identificador para o campo;
name: define um nome para o campo;
autofocus: define que o campo receber o foco ao ser aberta a
pgina;
list: define o identificador (id) de uma lista de dados (Datalist);
value: define o valor inicial do campo;
size: nmero de caracteres do campo na tela;
maxlength: nmero mximo de caracteres do campo;
checked: define se um campo do tipo checkbox ou radio estar
selecionado;
disabled: define se o campo estar desativado;
readonly: define se o campo estar somente para a leitura;
required: define que o campo deve ser preenchido.
Formulrios
<label [atributos] [eventos]> texto </label>:
Define um label para um campo de entrada
(input). Os atributos podem ser:
for: define o nome do campo de entrada (input);
id: define um identificador para o campo.
Formulrios
<textarea [atributos] [eventos]> Texto </textarea>:
Define um campo de entrada de dados de
mltiplas linhas em um formulrio. Os atributos
podem ser:
autofocus: define que o campo receber o foco ao ser aberta a
pgina;
rows: nmero de linhas visveis no campo;
cols: nmero de colunas visveis no campo;
maxlength: nmero mximo de caracteres do campo;
disabled: define se o campo estar desativado;
readonly: define se o campo estar somente para a leitura;
required: define que o campo deve ser preenchido.
Formulrios
<select [atributos] [eventos]>
<option value=valor1> texto1 </option>
<option value=valorN> textoN </option>
</select>
Define uma lista de opes. Os atributos podem ser:
autofocus: define o campo que deve receber o foco quando a
pgina for carregada;
disabled: define que o campo ficar desativado;
multiple: define que mais de uma opo pode ser selecionada;
required: define que o campo deve ser preenchido antes do
formulrio ser submetido;
size: define o nmero de opes visveis.
Formulrios
<datalist [atributos] [eventos]>
<option value=valor1 >
<option value=valorN >
</datalist>
Define uma lista de dados. Os atributos podem
ser:
id: define um identificador para o campo.
Formulrios
Os principais eventos associados a objetos de
entrada de dados so:
onfocus: executado quando um objeto ganha o foco;
oninput: executado a cada entrada de dados em um objeto
do tipo input ou textarea;
onselect: executado quando um texto selecionado em
um objeto do tipo input ou textarea;;
onchange: executado quando concluda a alterao de
um objeto;
onclick: executado quando um elemento clicado;
ondblclick: executado quando aplicado um duplo clique
em um elemento.
Formulrios
Validao de formulrios:
Normalmente so includas condies no evento onsubmit
com o mtodo getElementById do objeto document. Seguem
alguns exemplos:
document.getElementById("ID").focus(): define o foco no
elemento identificado como ID;
document.getElementById("ID").style.color: define a cor do texto
de um elemento identificado como ID;
document.getElementById("ID").value: define ou retorna o
contedo de um elemento identificado como ID;
document.getElementById("ID").disabled: define ou retorna
como bloqueado (true) ou desbloqueado (false) o elemento
identificado como ID;
document.getElementById("ID").checked: define ou retorna como
marcado (true) ou desmarcado (false) o elemento (radio ou checkbox)
identificado como ID.
Formulrios
Exerccios:
1)Criar uma pgina com o formulrio abaixo:
OBS:
O campo Assunto deve conter uma lista com as opes: Dvidas, Sugestes e
Reclamaes;
O boto Enviar deve executar a pgina processa.php atravs do mtodo get;
Os campos obrigatrios devem ser criticados.
JavaScript
Outros assuntos
Outros assuntos
Exemplos de bibliotecas Javascript:
jQuery (http://jquery.com/);
Prototype (http://prototypejs.org/);
script.aculo.us (http://script.aculo.us/);
Mootools (http://mootools.net/).
Referncias
ROBSON, Elisabeth & FREEMAN, Eric. Use a
Cabea! : HTML e CSS. Rio de Janeiro: Alta
Books, 2015.
SILVA, Maurcio Samy. JavaScript : Guia do
Programador. So Paulo: Novatec Editora, 2010.

HTML5 Com Javascript - V0

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML5 Com Javascript - V0

Uploaded by

Copyright:

Available Formats

Sofreu vrias revises.

Primeira verso padronizada.

Implementao de tabelas e applets. Primeira

Criadas as verses Strict, Transitional e

Implementao de frames e folhas de estilo.

Funes voltadas para smartphones.

Incio do corpo da pgina

Final do corpo da pgina

content: apresenta o contedo do atributo name.

left: esquerda (padro);

controls: Exibe ou no os controles;

S funciona a partir da verso 9 do Internet Explorer;

src: nome do arquivo contendo o vdeo;

controls: exibe ou no os controles;

S funciona a partir da verso 9 do Internet Explorer;

src: nome do arquivo contendo o arquivo de som;

Referencia de TAGs HTML

Manipular contedo e apresentao;

Para maiores informaes consulte:

Podem ser globais (acessadas de qualquer ponto)

And (e). Retorna verdadeiro (true) se todas as

Repete as instrues enquanto o valor da varivel

Repete as instrues enquanto a condio

A funo executada da seguinte forma:

id: define um identificador para o boto. um atributo

Os demais eventos pode ser consultados em:

O objeto nativo padro de um navegador o objeto

Forma de leitura do valor de uma propriedade:

Pgina com as propriedades e os mtodos

Retorna o objeto document da janela.

Retorna o objeto screen da janela.

Retorna o objeto history da janela.

Retornar o objeto navigator da janela.

Retorna o objeto location da janela.

Exibe uma caixa de alerta na tela.

Fecha a janela atual.

Exibe uma caixa de dilogo contendo os botes OK e Cancelar.

Abre uma nova janela.

Imprime a janela atual.

Abre uma caixa de dilogo de entrada de informaes.

Define ou retorna o elemento <body> do documento aberto.

Grava ou retorna os cookies de um documento.

Retorna uma coleo contendo os elementos <form> de um

Define ou retorna o ttulo do documento aberto.

Retorna o elemento que possui o id especificado.

Escreve cdigo HTML na pgina. OBS: Deve-se evitar.

Bits por pixel da resoluo de cores da tela.

Quantidade de pginas contidas no histrico do usurio ativo.

Principais mtodos do objeto History:

Carrega a pgina anterior do histrico do usurio ativo.

Carrega a prxima pgina do histrico do usurio ativo.

Retorna o nome do navegador utilizado.

Retorna a verso do navegador utilizado.

Retorna se os cookies esto ativos no navegador.

Principais mtodos do objeto Navigator:

Retorna se o Java est habilitado no navegador.

Nome do domnio da pgina ativa.

Retorna o nome completo da pgina.

Principais mtodos do objeto Location:

Carrega uma nova pgina.

onsubmit: executado antes do formulrio ser submetido.

Campos de entrada de dados (Input);

You might also like