HTML5 Com Javascript - V4
Enviado por
will_domingues_3HTML5 Com Javascript - V4
Enviado por
will_domingues_3HTML5 com Javascript
Programador WEB
Prof. Reinaldo Freitas
• HTML5
Agenda
– Introdução
– Estrutura da página
– Textos
– Multimídia
– Tabelas
– CSS
– Outros assuntos
• Javascript
– Introdução
– Conceitos básicos
– Botões
– Objetos nativos
– Formulários
– Outros assuntos
HTML5
Introdução
Introdução
• HTML:
– Significa HyperText Markup Language (Linguagem
de marcação de hipertexto). Hipertexto é um texto
ao qual se agregam outras informações na forma de
blocos de textos, imagens ou sons.
– É a Linguagem utilizada para a criação de páginas
Web (arquivos com extensão htm ou html);
– Um aplicativo conhecido como navegador
(Browser) é responsável por interpretar uma página
HTML e exibir o seu conteúdo. Alguns exemplos de
navegadores são: Microsoft Internet Explorer, Google
Chrome, Mozilla Firefox, Apple Safari e Opera.
Introdução
• HTTP:
– Significa HyperText Transfer Protocol (Protocolo
de Transferência de Hipertexto);
– Protocolo que permite a navegação na Web.
Introdução
• HTTPS:
– Significa HyperText Transfer Protocol Secure
(Protocolo de Transferência de Hipertexto Seguro);
– É uma versão criptografada via SSL do HTTP.
Introdução
• Servidor Web:
– Servidor que processa as requisições 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.
Introdução
• Arquitetura Web:
Primeira camada Segunda camada Terceira camada
(Apresentação) (Lógica de negócio) (Persistencia)
Internet
Conexão nativa
http ou ODBC
http
Navegador Servidor Web Servidor
HTML de
Javascript PHP Banco de dados
Applet JSP (Java Server Pages) SQL
VBScript ASP (Active Server Pages)
Plug-in (Flash, adobe, etc.)
ActiveX
Introdução
• Histórico da HTML:
Versão Data Principais características
HTML 1992 Sofreu várias revisões.
HTML 2.0 1994 Primeira versão padronizada.
HTML 3.0 1995 Não se tornou realidade.
HTML 3.2 1997 Implementação de tabelas e applets. Primeira
versão padronizada pela W3C.
HTML 3.5 1997 Desenvolvimento do XHTML.
HTML 4.0 1997 Criadas as versões Strict, Transitional e
Frameset.
HTML 4.01 1999 Implementação de frames e folhas de estilo.
HTML 5 2008 Funções voltadas para smartphones.
Considerada um padrão de fato.
Introdução
• W3C:
– Significa World Wide Web Consortium. É um
consórcio internacional que tem como objetivo criar
padrões para a web.
Introdução
• TAGs (rótulos):
– São os comandos utilizados na elaboração de uma
página HTML;
– É identificada por uma palavra ou letra entre os
símbolos “<“ e “>”. Geralmente precisa ser encerrada
por uma TAG de mesmo nome precedida pelo
símbolo “/”. Seguem alguns exemplos:
<h1> Exemplo de TAG com fechamento </h1>
<br> Exemplo de TAG sem fechamento
– Devem ser escritas em letras minúsculas por uma
questão de padronização e podem possuir atributos.
Introdução
• Exercícios:
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 característica
dela.
HTML5
Estrutura da Página
Estrutura da página
• Estrutura básica de uma página HTML 5:
<!DOCTYPE html> Versão do HTML
<html> Inicio do documento
<head> Início do cabeçalho
</head> Final do cabeçalho
<body> Início do corpo da página
</body> Final do corpo da página
</html> Final do documento
Estrutura da página
• <!DOCTYPE html>:
– Instrução que será utilizada pelo navegador para
identificar a versão do HTML em que a página 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 página
• <html [atributos]>:
– Tag utilizada para delimitar o inicio de uma página
HTML;
– Deve ser fechada com </html>;
– Os atributos podem ser:
• lang: define o idioma da página para fins de pesquisa
através de ferramentas de busca. Ex: pt-br.
• xmlns: define o padrão de xml que será utilizado no
documento. O padrão no HTML5 é:
– xmlns="http://www.w3.org/1999/xhtml"
Estrutura da página
• <head>:
– Tag utilizada para delimitar o cabeçalho de uma
pagina HTML;
– O cabeçalho é utilizado para indicar parâmetros de
configuração do documento;
– Deve ser fechada com </head>.
Estrutura da página
• <title>:
– Tag utilizada no cabeçalho de uma página para
definir o título dela;
– Deve ser fechada com </title>.
Estrutura da página
• <meta [atributos]>:
– Tag utilizada no cabeçalho da página com o objetivo
de passar informações sobre o site para os sites de
busca. Não precisa ser fechada com </meta>;
– Os atributos podem ser:
• charset: padrão de caracteres no qual a página foi
gravada no editor de texto. Ex: “utf-8” ou “iso-8859-1”;
• name: determina o tipo de informação que será
informada no atributo content. Pode ser:
– author: nome do autor da página;
– description: descrição da página;
– keywords: palavras-chave da página (separadas por vírgula)..
• content: apresenta o conteúdo do atributo name.
Estrutura da página
• <body [atributos]>:
– Tag utilizada para delimitar o inicio do corpo de
uma página HTML;
– O corpo da página é onde são incluídas as
informações que aparecerão na página;
– O conteúdo de cada atributo deve ser colocado
entre aspas e separados por espaços;
– Deve ser fechada com </body>.
Estrutura da página
• [atributos]:
– bgcolor: determina a cor de fundo da página. Ex:
bgcolor=“green”. As cores podem ser:
Cor Hexa RGB Significado Cor Hexa RGB Significado
white #FFFFFF rgb(255,255,255) Branco red #FF0000 rgb(255,0,0) Vermelho
(padrão)
pink #FFC0CB rgb(255,192,203) Rosa
black #000000 rgb(0,0,0) Preto
gray #808080 rgb(128,128,128) Cinza
blue #0000FF rgb(0,0,255) Azul
gold #FFD700 rgb(255,215,0) Ouro
yellow #FFFF00 rgb(255,255,0) Amarelo
silver #C0C0C0 rgb(192,192,192) Prata
green #00FF00 rgb(0,255,0) Verde
orange #FFA500 rgb(255,165,0) Laranja
http://www.w3schools.com/tags/ref_colorpicker.asp
Estrutura da página
• [atributos]:
– background: determina uma imagem como fundo
da página. Ex: background="foto.jpg"
Estrutura da página
• Comentários:
– Deve ser utilizado o símbolo “<!--” no inicio e o
símbolo “-->” no final do comentário.
Estrutura da página
• Exercícios:
1)Qual a estrutura básica de uma página HTML?
2)Qual a tag que define o título da página e em
que local ela é utilizada?
3)Para que serve a tag <meta>?
4)Elabore uma página contendo um título e
definindo a cor de fundo como azul. Utilize
comentários na página.
5)Altere a página criada para que tenha uma
imagem de fundo.
HTML5
Textos
Textos
• Cabeçalhos:
– <h1> texto </h1>: coloca o texto informado na
fonte/tamanho do cabeçalho 1;
– <h2> texto </h2>: coloca o texto informado na
fonte/tamanho do cabeçalho 2;
– <h3> texto </h3>: coloca o texto informado na
fonte/tamanho do cabeçalho 3;
– <h4> texto </h4>: coloca o texto informado na
fonte/tamanho do cabeçalho 4;
– <h5> texto </h5>: coloca o texto informado na
fonte/tamanho do cabeçalho 5;
– <h6> texto </h6>: coloca o texto informado na
fonte/tamanho do cabeçalho 6.
Textos
• <center> texto </center>: centraliza o texto na
página;
• <b> texto </b>: coloca o texto em negrito;
• <i> texto </i>: coloca o texto em itálico;
• <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é-formatação).
Textos
• <br>: pula uma linha na página;
• <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 (padrão);
» center: centralizado;
» right: direita.
Textos
• Caracteres especiais:
– Segue abaixo uma lista de caracteres especiais em
HTML:
Caracter Descrição Código
Espaço
© Cópyright ©
Marca registrada ®
®
€ Euro €
≠ Diferente ≠
± Mais ou menos ±
http://www.w3schools.com/html/html_symbols.asp
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 numeração:
• 1: lista numérica (padrão);
• A: lista alfabética iniciando com letras maiúsculas;
• a: lista alfabética iniciando com letras minúsculas;
• I: lista numérica com números romanos maiúsculos;
• i: lista numérica com números romanos minúsculos.
– start: define o valor inicial de uma lista (padrão=1).
Textos
<ul [atributos]>
<li> item 1
<li> item 2
<li> item 3
</ul>: coloca os itens informados em formato de lista não
ordenada. Os atributos da tag podem ser:
– type: define o formato do marcador. Pode ser:
• disc: ponto (padrão);
• square: quadrado;
• circle: círculo.
Textos
• Hiperlink:
– Objeto que ao ser cliclado direciona para uma
outra página;
– Deve ser utilizada a tag <a> para criar um
hiperlink. Segue a sintaxe:
<a href=“endereço da página”>
Objeto a conter o hiperlink
</a>
Textos
• Exercícios:
1) Elabore a página abaixo.
Multimidia
Multimidia
• <img [atributos]>:
– Tag utilizada para exibir uma imagem em uma
pagina HTML. Não precisa fechar com </img>;
– Os atributos podem ser:
• src: nome do arquivo contendo a imagem;
• alt: texto que será apresentado se não for possível
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 vídeo ou áudio em
uma página HTML. Não precisa fechar com
</embed>;
– Depende de um plug-in instalado (ex: Flash);
– Os atributos podem ser:
• src: nome do arquivo contendo o vídeo ou áudio;
• width: largura do vídeo ou áudio em pixels;
• height: altura do vídeo ou áudio em pixels;
• autostart: executar ou não automaticamente. Pode ser
“true” ou “false”;
• loop: define a quantidade de repetições.
Multimidia
• <video [atributos]>
<source [atributos]>
Mensagem de erro
</video>: Tag utilizada para exibir um vídeo em uma
pagina HTML 5. Os atributos podem ser:
• controls: Exibe ou não os controles;
• width: largura do vídeo em pixels;
• height: altura do vídeo em pixels.
• autoplay: executa automaticamente o vídeo.
– Só funciona a partir da versão 9 do Internet Explorer;
– Os atributos da tag <source> podem ser:
• src: nome do arquivo contendo o vídeo;
• type: tipo de mídia. Ex: video/mp4;
Multimidia
• <audio [atributos]>
<source [atributos]>
Mensagem de erro
</audio>: Tag utilizada para executar um áudio em
uma página HTML 5. Apresenta a mensagem de erro se
não for possível. Os atributos podem ser:
• controls: exibe ou não os controles;
• autoplay: executa automaticamente o áudio.
– Só funciona a partir da versão 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 mídia. Ex: audio/mpeg.
Multimidia
• Exercícios:
1) Qual a tag para inserir uma imagem em uma
página?
2)Quais são as tags para inserir um video ou som
em uma página?
3) Elabore uma página contendo um arquivo de
video.
4)Elabore uma página contendo um arquivo de
áudio.
HTML5
Tabelas
Tabelas
• <table [atributos]>
<caption>Título 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 página.
Tabelas
– Os atributos da tabela podem ser:
– border: define a largura da borda;
– width: largura da tabela em pixels ou percentual;
– cellpadding: espaço entre a célula e a borda em pixel;
– cellspacing: espaço entre as linhas em pixel (padrão é 2).
– tag <caption> define o título da tabela. Aparece como padrão sem borda
e centralizado;
– tag <thead> inicia o cabeçalho;
– tag <th> iniciar uma coluna de cabeçalho. Já aparece como padrão 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 célula. Pode ser: center,
right e left;
• bgcolor: cor de fundo da célula;
• width: largura da célula em pixels ou percentual;
• colspan: mescla a quantidade de colunas
informada;
• rowspan: mescla a quantidade de linhas
informadas.
Tabelas
• Exercícios:
1) Criar uma página com a tabela abaixo:
Empresa XPTO Ltda
Relação de empregados
Nome Cargo Salário
Carlos Programador 5.000,00
Renata Analista 8.000,00
Ricardo Digitador 2.000,00
Total 15.0000,00
HTML5
CSS
CSS
• Significa Cascading Style Sheets, ou seja,
folhas de estilo em cascata;
• É um documento que conterá todos os
detalhes, declarações e códigos que definirão o
estilo (style) do site;
• É processada pelo navegador (lado cliente -
client side).
CSS
• <style [atributos]>:
– tag utilizada no cabeçalho de uma página com o
objetivo de definir o estilo da página (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
página. Pode ser:
• static: posicionado com base na ordem que o objeto
aparece na página. Este é o padrão.
• fixed: posicionado com base na janela aberta.
– top: define a distancia do objeto em relação ao topo da
janela;
– left: define a margem esquerda do objeto;
– bottom: define a distancia do objeto em relação ao fundo da
janela;
– right: define a margem direita do objeto.
http://www.w3schools.com/css/css_positioning.asp
CSS
• Principais propriedades de formatação:
– 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 não o negrito. Ex: normal ou bold;
– font-size: tamanho da fonte. Ex: 12px, 14px, etc.
http://www.w3schools.com/css/css_text.asp
CSS
• Principais propriedades de tabelas:
– border: borda da tabela ou das células. Ex: 1px solid
#FF0000;
– border-collapse: Espaço entre a borda e as células.
Pode ser collapse (junto) ou separate (separado);
– padding: espaço entre a célula e o seu conteúdo. Ex:
2px.
http://www.w3schools.com/css/css_table.asp
CSS
• <span [atributos]>
Texto a ser formatado
</span>: tag utilizada para formatar texto dentro de
um elemento (inline). Não faz quebra de linha. Os
principais atributos são:
– 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.
Também 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 automática. Os
principais atributos são:
– 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.
Também pode ser utilizado em outras Tags (atributo
global).
CSS
– Ex:
<html>
<head>
<meta charset="utf-8">
<title>Uso de estilos</title>
<style type="text/css">
h1 {color: blue}
p.modelo1 {color: brown}
div.modelo1 {color: green}
.modelo2 {color: red}
#modelo3 {color: gray}
</style>
</head>
<body>
<h1>Cabeçalho em azul e <span id="modelo3">cinza</span></h1>
<p class="modelo1">Parágrafo 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>
CSS
– Ex:
<html>
<head>
<meta charset="utf-8">
<title>Uso de estilos</title>
<style type="text/css">
#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 cabeçalho de uma página com o
objetivo de definir o arquivo de estilo da página (estilo
externo);
– A sintaxe é a seguinte:
<link rel="stylesheet" type="text/css" href="nome do arquivo.css">
CSS
• Exercícios:
1) Quais são as formas de definição do estilo de
uma página?
2) Crie uma página usando cada uma das formas
de folhas de estilo.
HTML5
Outros assuntos
Outros assuntos
• Exemplos de softwares para criação de
páginas:
– Microsoft Front Page;
– Adobe Dreamweaver.
Outros assuntos
• Sites para criação/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
Introdução
Introdução
• JavaScript:
– Linguagem de programação criada com o objetivo
de dar interatividade a uma página web;
– Desenvolvida pela Netscape em 1995 em parceria
com a Sun Microsystems;
– Com ela é possível:
• Manipular conteúdo e apresentação;
• Manipular o navegador;
• Interagir com formulários;
• Interarir com outras linguagens.
– Para maiores informações consulte:
• http://www.w3schools.com/js/default.asp
Introdução
• Ativação do JavaScript:
– Normalmente o JavaScript já vem ativado no
navegador. Caso seja necessário ativá-lo, cada
navegador tem um local específico, mas nas versões
atuais do Internet Explorer seria:
• Clique em Opções da internet;
• Clique na guia Segurança;
• Clique em Nível Personalizado;
• Procure por Script Ativo.
Introdução
• Ativação do depurador de JavaScript:
– Normalmente o depurador e as mensagens de erro do
JavaScript vem desativados no navegador. Para ativar o
depurador e as mensagens de erro no Internet Explorer siga
os seguintes passos:
• Clique em Opções da internet;
• Clique na guia Avançadas;
• Desmarque a opção “Desabilitar depuração de script (Internet
Explorer)”;
• Marque a opção “Exibir notificação sobre cada erro de script”;
• Clique em Aplicar;
• Feche o navegador;
• Abra a sua página e depois clique na tecla F12 para ativar o
depurador.
Introdução
• Funções do depurador de JavaScript:
– Seguem as principais teclas de função a serem
utilizadas no depurador de JavaScript do Internet
Explorer:
• F9: define um ponto de parada;
• F10: executa o script linha por linha;
• F5: executa o script até o final ou até encontrar um
ponto de parada.
Introdução
• Formas de inclusão de JavaScript em uma
página 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>. Não recomendável.
Introdução
• JavaScript incorporado:
<script type="text/javascript"> Inicio do Javascript
Declarações ou Instruções; Conteúdo do Javascript
</script> Final do Javascript
Introdução
• JavaScript externo:
<script type="text/javascript" src="arquivo.js"></script>
• JavaScript inline:
<button type="button" onclick="alert(‘Atenção!’)">Atenção</button>
Introdução
• Exercícios:
1) O que é o JavaScript?
2) Onde é executado um JavaScript?
3)Qual a tag usada para delimitar um JavaScript?
4)Quais são as formas de inserção de um
JavaScript em uma página web?
JavaScript
Conceitos básicos
Conceitos básicos
• Tamanho de caixa:
– JavaScript é sensível ao tamanho de caixa (letras
maiúsculas e minúsculas).
Conceitos básicos
• Comentários:
– Se o comentário estiver em uma única linha, insira
os símbolos // ou <!-- no início da linha onde estiver
o comentário;
– Se o comentário estiver em várias linhas, insira o
símbolo /* no início da primeira linha onde estiver o
comentário e o símbolo */ no final da última linha.
Conceitos básicos
• Variável :
– Elemento que pode armazenar um valor;
– Os tipos de valores podem ser:
• String (texto). Ex: var nome="Carlos";
• Números inteiros. Ex: var idade=1;
• Números 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);
– A palavra reservada var define que a variável é local. Caso
não seja utilizada, a variável será global.
Conceitos básicos
• Variável :
– Seguem algumas regras/dicas para definição do
nome da variável:
• Palavras reservadas do Javascript não podem ser nomes
de variáveis;
• Devem começar com uma letra, underscore (_) ou o
caracter de cifrão ($);
• Podem também conter números no meio do nome;
• São sensíveis ao tamanho da caixa, ou seja, uma
variável de nome A é diferente de uma variável de nome a.
Utilize sempre letras minúsculas;
• Utilize como nome algo que lembre o contéudo da
variável.
Conceitos básicos
• Principais operadores matemáticos:
+ soma
- subtração
/ divisão
* multiplicação
% resto da divisão
++ incremento
-- decremento
Conceitos básicos
• Principais operadores de atribuição:
+= Adição.
Ex: x+= y equivale a x=x+y
-= Subtração
Ex: x-=y equivale a x=x-y
*= Multiplicação
Ex: x*=y equivale a x=x*y
/= Divisão
Ex: x/=y equivale a x=x/y
Conceitos básicos
• Principais operadores lógicos:
< menor que
<= menor ou igual que
> maior que
>= maior ou igual que
== igual que
!= diferente de
Conceitos básicos
• Principais operadores lógicos:
&& And (e). Retorna verdadeiro (true) se todas as
condições forem verdadeiras
|| Or (ou). Retorna verdadeiro (true) se pelo menos
uma das condições for verdadeira
! Not (não). Inverte o resultado de uma condição
Conceitos básicos
• Estruturas condicionais:
If (condição)
{
Instruções que serão executadas se a condição for
verdadeira;
}
Else
{
Instruções que serão executadas se a condição for falsa;
}
Conceitos básicos
• Estruturas condicionais:
switch (variável)
{
case valor1:
Instruções que serão executadas se a variável for igual a valor1;
break;
case valorN:
Instruções que serão executadas se a variável for igual a valorN;
break;
default:
Instruções que serão executadas se a variável não for igual a
nenhum dos valores informados;
}
Conceitos básicos
• Estruturas de repetição:
for (var variável=valor inicial; condição; contador)
{
Instruções;
}
– Repete as instruções enquanto o valor da variável
estiver dentro da condição informada. O contador
define se o valor da variável vai aumentar ou
diminuir a cada repetição (loop);
– O contador pode ser:
• Variável++: para aumentar o valor da variável em uma unidade;
• Variável--: para diminuir o valor da variável em uma unidade.
Conceitos básicos
• Estruturas de repetição:
while (condição)
{
Instruções;
}
– Repete as instruções enquanto a condição
informada for verdadeira.
Conceitos básicos
• Estruturas de repetição:
do
{
Instruções;
}
while (condição);
– Repete as instruções enquanto a condição
informada for verdadeira.
Conceitos básicos
• Função:
– Recurso que permite executar um conjunto de
instruções a partir de valores informados e retornar
um valor como resultado final da função. A função é
declarada da seguinte forma:
function nome da função(variável1, variávelN, ...)
{
Instruções;
return valor final;
}
– A função é executada da seguinte forma:
nome da função (valor1, valorN, ...)
Conceitos básicos
• Exemplo de uso de função:
<!DOCTYPE html>
<html>
<head>
<title>Uso de função</title>
<meta charset="utf-8">
<script type="text/javascript">
function calcula_soma(a,b)
{
var soma=a+b;
a=0;
b=0;
return soma
}
a = 10;
b = 20;
c = calcula_soma(a,b);
alert("a="+a);
alert("b="+b);
//alert("soma="+soma);
alert("a + b = " + c);
</script>
</head>
<body>
</body>
</html>
Conceitos básicos
• Seguem algumas funções globais:
Função Definição Exemplo
parseFloat Converte um número para float. x="30.5";
Sintaxe: parseFloat(<string>) y=parseFloat(x)+3;
alert(y);
parseInt Converte um número para inteiro. x="30.5";
Sintaxe: parseInt(<string>) y=parseInt(x)+3;
alert(y);
isNaN Verifica se um valor é um número x="Carlos";
ilegal. alert(isNaN(x));
Sintaxe: isNaN(<valor>)
http://www.w3schools.com/jsref/jsref_obj_global.asp
Conceitos básicos
• Exercícios:
1) Quais são as formas de inserção de comentários?
2) O que são variáveis e quais são os seus tipos?
3) Quais são os principais operadores matemáticos, de
comparação e lógicos?
4) O que são estruturas condicionais e de repetição?
Cite exemplos.
5) O que são funções?
JavaScript
Botões
Botões
• <button [atributos] [Eventos]>
Conteúdo do botão
</button>
– Exibe um botão com o conteúdo informado. Os principais
atributos são:
• type: define o tipo do botão. Pode ser:
– button: botão comum;
– reset: reseta (inicializa) um formulário;
– submit: encaminha o formulário para uma página web.
• id: define um identificador para o botão. É um atributo
global no HTML;
• autofocus: define que o botão receberá o foco quando a
página for carregada.
Botões
– Seguem alguns eventos que são disparados pelo
mouse:
• onclick: define um script que será executado quando o
botão for clicado;
• ondblclick: define um script que será executado quando
for acionado um duplo-clique no botão.
– Os demais eventos pode ser consultados em:
• http://www.w3schools.com/tags/ref_eventattributes.asp
Botões
• Exercícios:
1) Qual a vantagem de utilizar botões em uma
página?
2)O que são eventos?
3)Crie uma página que ao clicar um botão
execute uma função que apresente uma caixa de
alerta na tela.
JavaScript
Objetos nativos
Objetos nativos
• Objeto :
– Elemento que pode ser manipulado através das
suas propriedades e/ou métodos. Seguem alguns
exemplos de objetos nativos:
• String;
• Number.
Objetos nativos
• Propriedade :
– Corresponde as características de um objeto. Cada
objeto possui as suas características;
– Forma de atribuição de valor a uma propriedade:
Objeto.Propriedade = Valor
– Forma de leitura do valor de uma propriedade:
Variável = Objeto.Propriedade
Objetos nativos
• Métodos :
– Corresponde as ações que um objeto pode
executar. Cada objeto possui os seus próprios
métodos;
– Forma de uso:
Objeto.Método(Valor)
Objetos nativos
• Principais propriedades do objeto String:
Propriedade Definição Exemplo
length Retorna a largura de uma string. nome="Carlos";
tam=nome.length;
alert(tam);
• Principais métodos do objeto String:
Método Definição Exemplo
concat Concatena strings. a="xxx";
b="yyy";
c="zzz";
d=c.concat(a,b);
alert(d);
substr Extrai uma parte da string. a="AAABBBCCC";
b=a.substr(3,3);
alert(b);
http://www.w3schools.com/jsref/jsref_obj_string.asp
Objetos nativos
• Principais propriedades do objeto Number:
Propriedade Definição Exemplo
MAX_VALUE Retorna o maior valor possível em alert(Number.MAX_VALUE);
JavaScript.
MIN_VALUE Retorna o menor valor possível em alert(Number.MIN_VALUE);
JavaScript.
• Principais métodos do objeto Number:
Método Definição Exemplo
toString() Converte um número para string. a=10;
b=20;
c=a.toString()+b.toString();
alert(c);
http://www.w3schools.com/jsref/jsref_obj_number.asp
Objetos nativos
• Estrutura hierárquica dos principais objetos
de um navegador em Javascript:
Window
Document Screen History Navigator Location
• O objeto nativo padrão de um navegador é o objeto
window.
Objetos nativos
• Conteúdo dos principais objetos nativos:
– window: contém os objetos de uma janela (frame) aberta
no browser;
– document: contém os objetos da página HTML que está
aberta;
– screen: contém as informações sobre a tela do usuário que
está acessando a página;
– history: contém as páginas visitadas pelo usuário;
– navigator: contém informações sobre o browser que está
aberto;
– location: contém informações sobre o endereço da página
que está aberta.
Objetos nativos
• Propriedades e métodos dos principais
objetos nativos
Objeto nativo Página com as propriedades e os métodos
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 Descrição
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 métodos do objeto Window:
Método Descrição
alert Exibe uma caixa de alerta na tela.
Ex: window.alert("Atenção");
close Fecha a janela atual.
Ex: window.close();
confirm Exibe uma caixa de diálogo contendo os botões OK e Cancelar.
Ex: window.confirm("Deseja continuar");
open Abre uma nova página.
Ex: window.open("http://www.google.com","_blank");
OBS: No lugar de “_blank” poderia ser “_self” para abrir na mesma janela.
print Imprime a janela atual.
Ex: window.print();
prompt Abre uma caixa de diálogo de entrada de informações.
Ex: window.prompt("Digite uma data:", "dd/mm/aaaa");
Objetos nativos
• Principais propriedades do objeto Document:
Propriedade Descrição
body Define ou retorna o elemento <body> do documento aberto.
Ex: document.body.style.backgroundColor="blue";
OBS: Para ver maiores informações 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 coleção contendo os elementos <form> de um
documento.
title Define ou retorna o título do documento aberto.
Ex: document.title = "Novo nome da página";
Objetos nativos
• Principais métodos do objeto Document:
Propriedade Descrição
getElementById Retorna o elemento que possui o ID especificado.
Sintaxe:
document. getElementById(<ID do elemento>)
Ex:
document.getElementById("texto1").style.color="#FF0000";
document.getElementById("texto1").innerHTML="Novo texto";
document.getElementById("btn1").style.position="fixed";
document. getElementById("btn1").style.marginTop = "100px";
document. getElementById("btn1").style.marginLeft = "100px";
write Escreve código HTML na página. OBS: Deve-se evitar.
Ex: document.write("<b>Texto em negrito</b>");
Objetos nativos
• Principais propriedades do objeto Screen:
Propriedade Descrição
width Largura da tela.
Ex: alert("Largura da tela: "+screen.width);
height Altura da tela.
Ex: alert("Altura da tela: "+screen.height);
pixelDepth Bits por pixel da resolução de cores da tela.
Ex: alert("Qtde de bits por pixel: "+screen.pixelDepth);
Objetos nativos
• Principais propriedades do objeto History:
Propriedade Descrição
length Quantidade de páginas contidas no histórico do usuário ativo.
Ex: alert(history.length);
• Principais métodos do objeto History:
Método Descrição
back Carrega a página anterior do histórico do usuário ativo.
Ex: history.back();
forward Carrega a próxima página do histórico do usuário ativo.
Ex: history.forward();
Objetos nativos
• Principais propriedades do objeto Navigator:
Propriedade Descrição
appName Retorna o nome do navegador utilizado.
Ex: alert("Nome do navegador: "+navigator.appName);
appVersion Retorna a versão do navegador utilizado.
Ex: alert("Versão do navegador: "+navigator.appVersion);
cookieEnabled Retorna se os cookies estão ativos no navegador.
Ex: alert("Cookies ativos: "+navigator.cookieEnabled);
• Principais métodos do objeto Navigator:
Método Descrição
javaEnabled Retorna se o Java está habilitado no navegador.
Ex: alert("Java ativo: "+navigator.javaEnabled());
Objetos nativos
• Principais propriedades do objeto Location:
Propriedade Descrição
hostname Nome do domínio da página ativa.
Ex: alert("Domínio da página: "+location.hostname);
href Retorna o nome completo da página.
Ex: alert("Endereço da página:"+location.href);
• Principais métodos do objeto Location:
Método Descrição
assign Carrega uma nova página.
Ex: location.assign("http://www.google.com");
reload Recarrega a página.
Ex: location.reload();
Objetos nativos
• Exercícios:
1) Qual são os principais objetos nativos em JavaScript?
2) Qual a diferença entre propriedade e método?
3) Crie uma página com um botão que permite ao
usuário escolher entre as cores azul ou verde como
fundo da página e apresente uma mensagem de erro se
ele escolher algo diferente de azul ou verde. Também
inclua um botão para retornar a cor do fundo para
Branco.
JavaScript
Formulários
Formulários
• <form [atributos] [eventos]>
objetos
</form>
– Define um formulário em HTML. Os atributos
podem ser:
• name: define um nome para o formulário;
• action: define a página que irá receber os dados do
formulário quando este for submetido;
• method: define o método de envio dos dados. Pode
ser:
– get: envia os dados no endereço da página;
– post: envia os dados encapsulados na mensagem http.
Formulários
• Os principais eventos associados a
formulários são:
– onsubmit: executado antes do formulário ser submetido.
Normalmente utilizado com uma função de validação do
formulário. Se o resultado desta função retornar true, o
formulário será submetido. Se o resultado da função for false,
o formulário não será submetido;
– onreset: executado antes do formulário ser resetado
(inicializado). Pode ser utilizado com uma função para
confirmação da ação. Se o resultado desta função retornar
true, o formulário será resetado. Se o resultado da função for
false, o formulário não será resetado.
Formulários
• Os objetos do formulário podem ser:
– Campos de entrada de dados (Input);
– Descrições (Label);
– Campos de múltiplas linhas (Textarea);
– Campos de seleção (Select);
– Lista de dados (Datalist);
– Botões (Button).
Formulários
• <input [atributos] [eventos]>:
– Define um campo de entrada de dados em um formulário.
Os atributos podem ser:
• type: define o tipo do campo. Pode ser principalmente:
– text: campo de texto;
– password: campo de senha;
– number: campo de número;
– date: campo de data. Não suportado pelo Internet Explorer;
– checkbox: caixa de marcação;
– radio: botão de seleção;
– button: botão normal. Normalmente utilizado com o evento onclick
para executar um script;
– hidden: campo oculto, ou seja, não visível ao usuário;
– reset: botão para resetar (inicializar) o formulário;
– submit: botão para submeter o formulário. Normalmente utilizado
com o evento onsubmit para validar o formulário.
Formulários
• <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
página;
• list: define o identificador (id) de uma lista de dados (Datalist);
• value: define o valor inicial do campo;
• size: número de caracteres do campo na tela;
• maxlength: número máximo 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;
• placeholder: apresenta uma dica de preenchimento para o campo.
Formulários
• <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.
Formulários
• <textarea [atributos] [eventos]> Texto </textarea>:
– Define um campo de entrada de dados de
múltiplas linhas em um formulário. Os atributos
podem ser:
• 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
página;
• rows: número de linhas visíveis no campo;
• cols: número de colunas visíveis no campo;
• maxlength: número máximo 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;
• placeholder: apresenta uma dica de preenchimento para o campo.
Formulários
• <select [atributos] [eventos]>
<option value=valor1> texto1 </option>
<option value=valorN> textoN </option>
</select>
– Define uma lista de opções. Os atributos podem ser:
• id: define um identificador para o campo;
• name: define um nome para o campo;
• autofocus: define o campo que deve receber o foco quando a
página for carregada;
• disabled: define que o campo ficará desativado;
• multiple: define que mais de uma opção pode ser selecionada;
• required: define que o campo deve ser preenchido antes do
formulário ser submetido;
• size: define o número de opções visíveis.
Formulários
• <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.
Formulários
• Os principais eventos associados a objetos de
entrada de dados são:
– 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 é concluída a alteração de
um objeto;
– onclick: executado quando um elemento é clicado;
– ondblclick: executado quando é aplicado um duplo clique
em um elemento.
Formulários
• Validação de formulários:
– Normalmente são incluídas condições no evento onsubmit
com o método 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
conteúdo 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.
Formulários
• Exercícios:
1)Criar uma página com o formulário abaixo:
OBS:
• O campo Assunto deve conter uma lista com as opções: Dúvidas, Sugestões e
Reclamações;
• O botão Enviar deve executar a página processa.php através do método get;
• Os campos obrigatórios 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/).
Referências
• ROBSON, Elisabeth & FREEMAN, Eric. Use a
Cabeça! : HTML e CSS. Rio de Janeiro: Alta
Books, 2015.
• SILVA, Maurício Samy. JavaScript : Guia do
Programador. São Paulo: Novatec Editora, 2010.