HTML 5 - Java Script Parte 3

Desenvolvimento Web
Com HTML, CSS e JavaScript

Prof. Rodrigo Santa Maria
rodrigo@digitallymade.com.br
S
Sobre o Prof. Rodrigo Santa Maria
S Bacharel em Cincia da Computao (PUC Minas);
S Especialista com MBA Internacional em Gerenciamento de

Projetos (FGV/Ohio University, USA);
S Professor Universitrio (UNIFEOB);
S Micro-empresrio da rea de TI;
S Acesse: www.digitallymade.com.br
S E-mail: rodrigo@digitallymade.com.br
Sobre o Prof. Rodrigo Santa Maria
S Analista/Desenvolvedor de aplicaes desde 2000;
S Ex-IBMer (de 2009 a 2013);
S Diretor-Presidente/Co-fundador do Instituto Internacional

de Ideias;
S Fundador do Google Developers Group So Joo da Boa

Vista;
Viso Geral
S Ao final deste curso, voc ser capaz de:

S Criar pginas HTML5;
S Utilizar folhas de estilo CSS3;
S Utilizar JavaScript e o framework jQuery;
S Criar pginas com funcionalidades Ajax;
S Utilizar frameworks como o Bootstrap;

Desenvolvimento Web
MDULO 03
S Pauta:
Introduo ao Javascript
Funcionalidades
Exemplos
Frameworks Javascript
Introduo ao jQuery
Funcionalidades
Exemplos
Introduo ao Javascript
S
Contato
Muito obrigado!

facebook.com/rodrigobsm
O que JavaScript?
S uma linguagem de programao

S Desenvolvida pela Netscape
S Microsoft tem o VBScript no tanto utilizado quanto o JavaScript
S JavaScript tambm roda no Microsoft Internet Explorer
S O cdigo escrito dentro da pgina HTML (client-side)
S Roda no navegador do usurio (e no no servidor)
S Simples e til (para fazer coisas simples)
Obs.: JavaScript NO Java

S Java entra nas pginas HTML atravs de applets
S JavaScript escrito dentro da pgina HTML
Para que serveJavaScript?
S Efeitos visuais
S Efeitos interativos
S Gerao dinmica de contedo (on-the-fly)

S Adequaes para a resoluo do monitor
S Padronizao da apresentao
S Armazenamento de informaes (cookies)
Personalizao do contedo
S Manipular objetos de interface

S Janelas, Barra de status, Formulrios etc.
S Operaes matemticas e textuais
S Validao de dados de um formulrio
S Animaes
S DHTML
Exemplos de JavaScript:
Ma
<IMG src="maca1.gif"
name="maca"
onMouseOver="maca.src='maca2.gif'"
onMouseDown="maca.src='maca3.gif'"
onMouseUp="maca.src='maca4.gif'"
onMouseOut="maca.src='maca5.gif'">
maca1.gif maca2.gif maca3.gif maca4.gif maca5.gif

Ol
<HTML>
<HEAD>
<TITLE>Ol</TITLE>
</HEAD>
<BODY>
<P>Script que escreve Ol:</P>
<SCRIPT>

</SCRIPT>
</BODY>
Rodap v1
<BODY>
<SCRIPT language="JavaScript">

</SCRIPT>
</BODY>
OBS1:
nome uma varivel armazena uma informao
Contedo Personalizado
<BODY>

</SCRIPT>
</BODY>
OBS1:
prompt uma funo faz alguma coisa:
- Abre uma janela de dilogo para o usurio entrar com um texto
- Retorna o texto digitado pelo usurio
OBS2:
Seja bem vindo"+nome+"</B> !!!" uma expresso soma textos
Rodap v2
<BODY>

</SCRIPT>
</BODY>
OBS1:
document uma objeto
OBS2:
document.lastModified uma propriedade do documento retorna
a data (mm/dd/aa) e hora da ltima modificao do documento
Rodap v3
<HTML>
<HEAD>
<TITLE>Pgina com nome do leitor</TITLE>

</SCRIPT>
</HEAD>
<BODY>
<P>Aqui escrevo qualquer coisa</P>
Rodape();
</SCRIPT> OBS:
</BODY> Rodape() uma funo (definida pelo
</HTML>
programador) escreve o rodap
Ttulo e Rodap, v1
<HTML>
<HEAD>
<TITLE>Pgina com nome do leitor</TITLE>

</SCRIPT>
</HEAD>
<BODY>
<SCRIPT>Titulo();</SCRIPT>
<P>Aqui escrevo qualquer coisa</P>
<SCRIPT>Rodape();</SCRIPT>
</BODY>
</HTML>
geral.js
function Titulo(){
document.write("<H1 align=center><I>Curso de JavaScript</I></H1>");
}
function Rodape(){
document.write("<HR><I>Autor: </I>Joo da Silva<BR>");
}
capitulo1.html capitulo2.html
<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>1 - Introduo</TITLE> <TITLE>2 - Fundamentos</TITLE>
<SCRIPT language="JavaScript" src="geral.js"> <SCRIPT language="JavaScript" src="geral.js">
</SCRIPT> </SCRIPT>
</HEAD> </HEAD>
<BODY> <BODY>
<SCRIPT>Titulo();</SCRIPT> <SCRIPT>Titulo();</SCRIPT>
<H2>Captulo 1 - Introduo</H2> <H2>Captulo 2 - Fundamentos</H2>
<P>Bl bl bl...</P> <P>Bl bl bl...</P>
<SCRIPT>Rodape();</SCRIPT> <SCRIPT>Rodape();</SCRIPT>
</BODY> </BODY>
Onde escrever um JavaScript?
S Soluo 1: Embutido na pgina HTML
S 1.1 - Como evento de um elemento (IMG, A, INPUT etc):

S Ma
S Mestre-Cuca
S 1.2 - Como elemento SCRIPT dentro de BODY:

S Ol
S Rodap, v1
S Contedo Personalisado
S Rodap, v2
S 1.3 - Como funo, dentro de HEAD

S Rodap, v3
S Ttulo e Rodap, v1
S Soluo 2: Num arquivo a ser importado

S Ttulo e Rodap, v2
Programando Javascript
S Conceitos de programao
S Dados, Variveis, Expresses e Operadores
S Tomada de deciso, Repetio
S Funes, Eventos, Objetos
S O que preciso para
programar em JavaScript?
S Exerccios
Conceitos de Programao
JavaScript
linguagem de programao
processar informaes
resolver um problema
Processar informaes (ou seja, resolver um problema) exige um tipo de pensamento

particular Lgica de Programao
S Dado = informao
Tipos de Dados: Pedro 75 1.57 true
string inteiro real boleano
(ponto-flutuante) (verdadeiro
ou falso)
S Varivel armazena dado
nome = Patricia
Idade = 25
S Expresso e Operador opera dados

operadores
x = (y 5) / 7 diferente de x=y5/7
operadores precedncia
S Tomada de deciso ( necessrio testar: if)

if (x<10) {
alert(x menor que 10);
}
else{
alert(x maior ou igual a 10);
}
S Repetio
x = "";
while (x != "fim"){
document.write(x);
x = prompt("Entre com um texto HTML ('fim' para terminar):","");
}
S Funo bloco de programa;
quebra do problema em partes!
function Par(x){
resto = x % 2; function Par(x){
alert(resto); return (x % 2)==0;
if (resto==0) {return true}
}
else {return false}
}
function Classifica(){
numero = prompt("Entre com um nmero:","");
if (Par(numero)) {alert("O nmero "+numero+" par.");}
else {alert("O nmero "+numero+" impar.");}
}
S Evento se alguma coisa acontece,
ento faa algo...
<FORM>
<INPUT type="button" value="Par ou Impar?" onClick="Classifica()">
</FORM>
EVENTO
O boto, ao se clicado,
chama a funo Classifica()
S Objetos elementos de uma pgina Web
S Propriedades (variveis)
document.title; (contm o ttulo do documento)
document.location; (contm a URL do documento)
S Mtodos (funes)
document.write("<B>Bom Dia!</B>");
window.open("http://www.google.com.br", Google");
O que preciso para programar em
JavaScript?
desenvolver a
S Saber programar
Lgica de Programao !!!
S Quebrar o problema em pedaos (funes)

S Resolver os pedaos do problemas utilizando:
S dados, variveis e operaes
S decises + repeties Algoritmo
S Conhecer os eventos e saber utiliz-los
S Conhecer os objetos e saber utiliz-los

O que preciso para programar em
JavaScript?
desenvolver a
Lgica de Programao !!!
3 passos para desenvolver a Lgica de programao:

1 Faa exerccios
2 Faa mais exerccios
3 Continue fazendo !
Eventos e Objetos
3
Eventos
Objetos
Window
Location
History
Document
Form
TextArea, Text, Password
Select
Frame
Image
Eventos
<BODY onLoad="alert('Pgina carregada.)">

<script>
window.onbeforeunload = function() {
return "Deseja sair mesmo?";
};
</script>
<P>Testando alguns eventos...</P>
<FORM>
<INPUT type="button"
value="No aperte este boto!"
onClick="alert('Clique o boto Ok para formatar o HD')">
</FORM>
</BODY>
<INPUT type="button" value= "Formatar o HD"
onClick="confirm(Tem certeza?')">
Eventos
onMouseOver Ponteiro do mouse entra A, IMG

onMouseMove Ponteiro do mouse se movimenta A, IMG
onMouseOut Ponteiro do mouse sai A, IMG
onMouseDown Boto do mouse apertado A, IMG
Boto do mouse desapertado A, IMG
onMouseUp
Clique (MouseDown + MouseUp) A, IMG, Botes,
onClick
SELECT
onKeyDown Tecla apertada Caixa de Texto

onKeyUp Tecla desapertada Caixa de Texto
onKeyPress Tecla clicada (KeyDown + KeyUp) Caixa de Texto
Eventos
onSubmit antes de enviar o formulrio FORM
onReset antes de limpar o formulrio FORM
onFocus quando elemento recebe o foco compts. de FORM, BODY

onBlur quando elemento perde o foco compts. de FORM, BODY
onChange quando modifica-se texto ou seleo SELECT, TEXTAREA,

INPUT:text, INPUT:passw.
onLoad aps carregar uma pgina BODY BODY

onUnLoad antes de sair da pgina BODY BODY
onResize quando a janela redimensionada BODY
onMove quando a janela arrastada BODY
onError quando um erro ocorre ao carregar BODY, IMG

onAbort quando interrompe-se carregamento IMG
Objetos
TextArea
Location Image Text
Password
Link
History
Window Radio
Form
Document Select Option
Area
Reset
Frame
Anchor Submit
Button
Applet
FileUpload
Plugin
Hidden
Window
(exemplo)
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<A href="javascript:AbrirJanela();">Abrir Janela</A>
</BODY>
</HTML>
Window
(exemplo)
window.open("http://www.google.com.br");
Cada chamada funo AbrirJanela(),
ir abrir uma nova janela
window.open("http://www.google.com.br", "j1");
Nome da Janela
mesmo com vrias chamadas
funo AbrirJanela(),
somente uma janela ser aberta
window.open("http://www.google.com.br", "");
Nome no especificado
Netscape: Abre s 1 janela
Internet Explorer: Abre vrias janelas
Window
(exemplo)
window.open("http://www.google.com.br","j1",
"width=400,height=400,resizable=no");
Opes:
width=nmero largura da janela
height=nmero altura da janela
left=nmero posio do canto esquerdo da janela
top=nmero posio do topo da janela
resizable=yes|no permite o usurio redimensionar a janela

menubar=yes|no exibe a barra de menu
toolbar=yes|no exibe a barra de ferramentas
location=yes|no exibe a barra de endereo
directories=yes|no exibe a barra de ferramentas
status=yes|no exibe a barra de status
scrollbars=yes|no exibe as barras de rolamento
Obs.: Quando uma opo do tipo yes|no apenas declarada, seu valor yes.
Caso contrrio, seu valor no. Ex.: "width=400, height=400, menubar,
status
Window
(exemplo)
Abrir uma janela e escrever o contedo dinamicamente:
function AbrirJanela(){
janela=window.open("","wndPropaganda","width=300,height=100");
janela.document.open();
janela.document.write("<DIV align=center><P>Voc j conhece o Google?</P>");
janela.document.write('<P><A href="http://www.google.com.br" target="_blank">');
janela.document.write("Quero Conhecer</A></P>");
janela.document.close();
janela.focus();
}
Window
(exemplo)
Abrir uma pgina bloqueadora:

<HTML>
<HEAD></HEAD>
<BODY onBlur="window.focus()">
<P><A href="javascript:window.close();">Fechar</A></P>
<FORM>
<INPUT type="button" value="Fechar" onClick="window.close()">
</FORM>
</BODY>
</HTML> google.html
<BODY>
<SCRIPT>
</SCRIPT>
</BODY> index.html
Window
(propriedades e mtodos)
S Propriedades
S frames[index] quadros filhos, indexados pela ordem de criao
S frames.length nmero de quadros existentes
S self janela atual
S parent janela pai
S top janela mais antiga
S opener janela que a abriu
S Mtodos
S alert("texto") exibe caixa de dilogo para exibir um aviso
S confirm("texto") exibe caixa de dilogo para exibir um aviso
S prompt("texto","inicial") exibe caixa de dilogo para entrada de texto
S home() vai para a pgina inicial do navegador
S open("URL", "nome", "opes") cria janela cliente
S close() fecha janela
Location
S Propriedades
S href URL completo
S protocol protocolo utilizado
S host nome e port do host
S hostname nome do host
S port port do host
S path diretrio e arquivo (exclui protocolo e host)
S hash URL aps sinal #
S search URL aps sinal ?
S Mtodos
S toString() retorna uma string
S assign("string") ajusta a localizao
S reload(true) recarrega a pgina atual incondicionalmente
Location
(exemplo)
<BODY>

</SCRIPT>
<BODY>
History
S Propriedades
S back penltimo URL acessado
S foward URL posterior da lista de URLs acessados
S current URL da pgina atual
S length tamanho da lista de histrico atual
S Mtodos
S back() volta uma posio no histrico
S foward() avana uma posio no histrico
S go(n) vai para o URL localizado em n posies em relao
a posio atual (+n ou n)
S go("string") vai para a pgina mais recente cujo ttulo ou URL
contenha a string especificada. Obs.: o sistema
diferencia maisculas e minsculas.
S toString() retorna uma tabela HTML com ligaes para todas
as entradas da lista de diretrio
Ex.: <A href="javascript:history.back()">Voltar</A>

Document
S Propriedades bgColor form[index]

S title fgColor form.length
S location linkColor links[index]
S lastModified aLinkColor links.length
vLinkColor anchors[index]
anchors.length
S Mtodos
S write("textoHTML") escreve uma linha de texto HTML
S writeln("textoHTML") escreve e adiciona um avano de linha
S clear() limpa o texto do documento
S close() fecha o documento
Ex.: window.document.write("<B>Ol</B>");
window.document.bgColor="silver";
Form
S Propriedades
S elements Array. Vetor de elementos do formulrio
S elements.length Nmero de elementos do formulrio
S name contedo do atributo NAME
S action contedo do atributo ACTION
S encoding contedo do atributo ENCTYPE
S method valor do atributo METHOD ("get"=0; "post"=1)
S target janela alvo usada para resposta aps envio do
formulrio (atributo TARGET)
S Mtodos
S submit() envia o formulrio
TextArea, Text, Password
<HTML>
(exemplo)
<HEAD>
 txtNome;
</SCRIPT> elements[1]=Caixa de texto
</HEAD> txtLogin;
elements[2]=Boto btnCadastrar;
<BODY>
<FORM name="frmCadastro">
Nome: <INPUT type=text size=35 name=txtNome><BR>
Login: <INPUT type=text size=10 name=txtLogin></P>
<INPUT type=button value="Cadastrar Dados" name="btnCadastrar" onClick="Cadastrar()">
</FORM>
</BODY>
</HTML>
Select
(exemplo)
<HTML>
<HEAD>
 slcSites.options[0]=Sites;
</SCRIPT> slcSites.options[1]=Google;
</HEAD> slcSites.options[2]=Facebook
;
<BODY> slcSites.options[3]=UOL;
<FORM name="frmSites">
<SELECT size="1" name="slcSites" onChange="Navegar()">
<OPTION>Sites:</OPTION>
<OPTION>Google</OPTION>
<OPTION>Facebook</OPTION>
<OPTION>UOL</OPTION>
</SELECT>
</FORM>
</BODY>
</HTML>
Lgica de Programao
4
Variveis
Tipos de Dados
Operadores
Tomada de Deciso (if...else)
Repetio (while e for)
Funes
Exemplos e Exerccios
Variveis
S Varivel armazena dado

S nome="Pedro";
S idade=25;
S nome="Pedro"; /*no precisa declarar nem tipar a varivel*/
S var nome; /*declarao sem atribuio de valor*/

S var nome="Pedro"; /*declarao com atribuio de valor*/
S Identificador de varivel
S letras, nmeros e "_" (underscore)
S tem que comear com um letra
S case sentive nome Nome NoMe
Tipos de Dados
S string (cadeia de letras)

S Joo da Silva;
S Qualquer texto, inclusive, toda uma pgina HTML.;
S 123 Indeterminado
ESPECIAIS
VALORES
NaN (Not a Number)
S number Infinito:
Inteiro: Infinity
-Infinity
5
14509
REPRESENTAO
TIPO
Decimal
Ponto-flutuante
734.25
14.075 Hexadecimal (Ex.: cores)
1.78e-45 0xFF87C1
Octal
0677
Tipos de Dados
S true
boolean
S false
S undefined
valor ainda no definido
Ex.: var nome; /* nome=undefined */
S null
valor nulo (invlido)
S object
S objetos: documento, janela, componente de formulrio etc.
Operadores
x = 5 / 3;
S Aritmticos
x = 5 % 3;
S * multiplicao x = 5 + (5 - 2) / 2;
S / diviso x = (5 + (5 2)) / 2;
S + soma
S - subtrao
S % resto
S String
nome = Fabio";
S + concatenao sobreNome = Pereira";
meioNome = Marques";
nomeCompleto = nome + " " + meioNome
+ " " + sobreNome;
Operadores
S Atribuio
x += y; x = x + y;
S = (Ex.: x = 5) x = y; x = x y;
S op= (atribuio com operao) x /= y; x = x / y;
x *= y; x = x * y;
x %= y; x = x % y;
x = 5;
y = ++x;
S Incrementais /* x=6; y=6; */
S var++ ou ++var
x=5;
S var-- ou --var y = x++;
/* y=5; x=6; */
Operadores
S Comparao
S > maior
S >= maior ou igual
S < menor
S <= menor ou igual
S == igual
if (x<10) {...}
S != diferente
if (senha!="12345") {alert("Senha invlida!");}
if (x==y) {...}
Operadores
S Lgicos
S && e
S || ou
S ! not
if ( (x<y) && (y<z) ) {alert(x +" menor que " +z);}
if ( (x<z) || (y<z) ) {...}
if !(senha=="12345") {alert("Senha invlida!");}

Tomada de Deciso
S if ... else
if (condio) {
// instrues caso condio==true
}
else {
// instrues caso condio==false
}
Repetio
S for (inicializao; condio; incremento){...}
for (i=1; i<=1000; i = i + 1) {

document.write("<P>" + i + "</P>");
}
S while (condio) {...}
i=1;
while (i<=1000) {
document.write("<P>" + i + "</P>");
i = i + 1;
}
Funes
S function NomeFuncao(param1, param2) {...}
function Soma(x, y) {
return x + y;
}
Funes nativas
parseInt(string) Converte a string num nmero inteiro

texto="7";
x = parseInt(texto);
x = numero + 5; //x==12 (7 + 5)
texto = texto + 5; //texto=="75" ("7" +"5)
x = parseInt("7.5"); //x==7
x = parseInt("7a"); //x==7
parseFloat(string) Converte a string num nmero real

x = parseFloat("7.5"); //x==7.5
isNaN(string) Retorna true se a string no nmero

texto = prompt("Entre com um nmero:","");
if ( isNaN(texto) ) {
alert("Voc no digitou um nmero vlido.")
}
eval(string) Executa o contedo de uma string

resultado = eval(5 + 6 / 2); // resultado = 8
escape(string) escape = ("Joo"); // nome = "Jo%E3o"

unescape(string) unescape("Jo%E3o"); // nome = "Joo"
Exemplo: Antes de enviar o formulrio, verificar se o campo
Nome foi preenchido
Soluo
<HTML>
<HEAD>
<SCRIPT language="javascript">

</SCRIPT>
</HEAD>
<BODY>
<FORM name="Cadastro" onSubmit="return false">
Nome:<INPUT name="nome" type=text size=50><BR>
<INPUT type=button value="Enviar" onClick="Enviar()">
</FORM>
</BODY>
</HTML>
Exemplo: Fazer uma funo para saber se um texto ou
no um nmero inteiro
Passos:
Verificar se o texto um nmero
Verificar se este nmero inteiro
Se ambas as condies forem verdadeiras,
ento retornar true
caso contrrio, retornar false.
Soluo 1
<HTML>
<HEAD>
<SCRIPT language="javascript">
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT language="javascript">

</SCRIPT>
</BODY></HTML>
Soluo 2
PROVA
if ( isNaN(texto) ) {return false}
else{ return ( parseInt(texto)==parseFloat(texto) ) }
}
bValido=true;
if ( isNaN(texto) ) {bValido=false}
else{
if ( parseInt(texto)!=parseFloat(texto) ) {bValido=false}
}
return bValido;
}
Exerccio: Fazer um formulrio que seja validado antes
de ser enviado
Validar:
preenchimento de Nome
validade de Data
Objetos Nativos
5
Math
String
Date
Array
Novos Objetos
Math
random() nmero pseudo-aleatrio entre 0 e 1

min(a, b) min(5, 7) -> 5
max(a,b) max(5, 7) -> 7
abs(x) abs(-5.7) -> 5.7
floor(x) floor(5.7) -> 5
ceil(x) ceil(5.4) -> 6
round(x) round(5.7) -> 6; round(5.4) -> 5
Ex.:
x = 1 + Math.floor(Math.random()*50);
// x recebe um nmero entre 1 e 50
String
0 1 2 3 4
txt = "Pedro"
charAt(n) txt.charAt(2) d"
indexOf("sub-string") txt.indexOf(e") 1
txt.indexOf(d") 2
txt.indexOf("k") -1 *no encontrado!
split("separdor") txt="20/02/1975";
data = txt.split("/");
// data[0] = "20";
// data[1] = "02";
// data[2] = "1975;
*length; txt = "Pedro";
x = txt.length; // x = 5
Date
S dataHoje = new Date();
dataHoje.getDay(); //dia da semana (0 a 6)

dataHoje.getDate(); //dia do ms (1 a 31)
dataHoje.getMonth();
dataHoje.getYear();
dataHoje.getHour();
dataHoje.getMinutes();
dataHoje.getSeconds();
Array
S Armazena dados indexados
data = new Array(3);

data[0] = 20;
data[1] = 02;
data[2] = 1975;
data = new Array(20,02,1975);
data = new Array(); //sem indexao prdefinida

data[0] = "20";
data[2] = "1975";
if (data[1]==null) {data[1]=prompt("Entre com o ms", "");}
txt = "20/02/1975";
data = txt.split("/");
data.length 3 // length uma propriedade de Array
Array
(continuao)
produtos = "1:Porta retrato PHT:21.00;2:Abajur Rse:35.50;

34:Cesta lixo valise:5.99";
produtosArray = produtos.split(";");
for (i=0; i < produtosArray.length; i++){
prod = produtosArray[i].split(":");
document.write(prod[0] + "<BR>");
}
Novos Objetos
function Produto(aCodigo, aNome, aPreco){
this.codigo = aCodigo;
this.nome =aNome;
this.preco = aPreco;
...
p1 = new Produto(1, Porta retrato PHT, 21.00);
P2 = new Produto(2, Abajur Rse, 35.50);
P3 = new Produto (34, Cesta lixo valise, 5.99);
...
document.write(p1.nome);
Cookies
6
document.cookie =
nomeCookie=texto_escape;
expires=dataGMT;
Ex.:
document.cookies = "cliente=Pedro; expires=Monday, 22-Feb-15 00:00:00 GMT"
document.cookies = "RG=123456789"
alert(document.cookie); //cliente=Pedro; RG=123456789
dataMorte = new Date(05,12,31);

document.cookies =
"nome="+escape("Joo Grando")+
"; expires="+dataMorte.toGMTString();
Ler um Cookie
function getConteudoCookie(nome){
cookies = document.cookie.split("; ");
for (i=0; i<=cookies.length-1; i++){
cookies[i] = cookies[i].split("=");
nomeCookie = unescape(cookies[i][0]);
if (nomeCookie==nome) {return unescape(cookies[i][1])}
return "";
}
Cancelar um Cookie
function CancelarCookie(nome){
diaHoje = new Date();
diaOntem = new Date( diaHoje.getTime() - 1000*60*60*24 );
diaOntemGMT = diaOntem.toGMTString();
document.cookie = nome+"=; expires=" + diaOntemGMT;
}
Criar um Cookie
function Cria Cookie(nome, valor){
cookies=getConteudoCookie("compras");
if (cookies!=""){cookies+="*}
document.cookie = nome="+escape(valor);
}
Relgios (timers)
7
S id = setTimeout("funcao()", 1000);
Cria um relgio (id)
para chamar uma funo aps n milisegundos
S clearTimeout(id)
Cancela o relgio
Obs: setTimeout() e clearTimeout() so funes nativas

Introduo ao jQuery
S
Contedo
S Introduo ao JavaScript e jQuery

S Fundamentos de JavaScript
S Document Object Model (DOM)
S Preparando o Ambiente
S Seletores jQuery
S Manipulando CSS
S Manipulando Contedo
S Eventos
S Animao
S Funes jQuery
S Ajax
S Formulrios
Em 1995 nasce o JavaScript
VBSCRIPT
JAVASCRIPT
JavaScript hoje
Por que usar jQuery?
jQuery uma camada de abstrao
Use jQuery porque...

... fcil
... produVvo
... browsers so incompaXveis
... seus usurios uVlizam browsers anVgos
jQuery no nuhum milagre!
S Voc ainda precisa de JavaScript
S jQuery pesado
S Construa agora, melhore depois

Document Object
Model (DOM)
S
DOM
<html>
<head>
<title>jQuery na Prtica</title>
</head>
<body>
<h1 id=titulo>Curso de jQuery</h1>
<p class=autor>Rodrigo</p>
<ul>
<li>JS</li>
<li>DOM</li>
<li>jQuery</li>
</ul>
</body>
</html>
DOM
html
head body
title h1#titulo p.autor ul
jQuery na Curso de Rodrigo

Prtica jQuery Santa li li li
Maria
JS DOM jQuery
Preparando o Ambiente
S
h^p://jquery.com
Carregando jQuery
Local Library:
<script type=text/javascript
src=jquery-2.1.3.min.js></script>
Hosted Libraries:
<script src="https://ajax.googleapis.com/ajax/libs/
jquery/2.1.3/jquery.min.js"></script>
Vericando se o jQuery est carregado
<script>
console.log(jQuery);
//ou
alert(jQuery);
</script>
jQuery; ReferenceError: jQuery is not defined

(jQuery no est carregado)
jQuery; function (e,t){return new v.fn.init(e,t,n)}

(Pronto para comear!)
$; function (e,t){return new v.fn.init(e,t,n)}

(Tambm jQuery!)
Seletores jQuery
jQuery
$(h1);
(Nome do elemento)

DOM
html
body
h1 jQuery na Prtica
p.autor Rodrigo Santa Maria
p#rodape rodrigobsm.com.br/jquery-na-pratica

Seletores jQuery
jQuery
$(p);
(Nome do elemento)

DOM
html
body
h1 jQuery na Prtica

Seletores jQuery
jQuery
$(p.autor);
(Elemento + . + Classe)

DOM
html
body
h1 jQuery na Prtica

Seletores jQuery
jQuery
$(.autor);
(Somente a classe)

DOM
html
body
h1 jQuery na Prtica

Seletores jQuery
jQuery
$(p#rodape);
(Elemento + # + Id)

DOM
html
body
h1 jQuery na Prtica

Resultado da Seleo
jQuery
$(p);

DOM
p#rodape google.com/jquery-na-pratica

JavaScript
<p class=autor>Rodrigo Santa Maria</p>,
<p id=rodape>google.com/jquery-na-pratica</p>]

Espao em branco
$(p#rodape);
Elemento p com id rodape

$(p #rodape);
Elemento com id rodape dentro do elemento p
Selecionando atributos
$(input);
// Todos inputs do DOM
$(input[type=text]);
// Todos inputs do tipo text
$(input[type=text][name=email]);
// Selecione por mais de um atributo
$(p[id=rodape]); ou $(p#rodape);
$(p[class=autor]); ou $(p.autor);
Seletores css tambm so vlidos
<i class=icon-ok></i>
<i class=icon-cancelar></i>
$(i[class^=icon-]);
// Todos elementos i que a classe comea com
icon-
$(i[class$=ok]);
// Todos elementos i que a classe termina com ok

$(i[class*=icon]);
// Todos elementos i que a classe possua icon

Filtros de seleo
Filtros baseados no index do array de retorno da seleo

$(p:first); // primeiro p da seleo
$(p:last); // ltimo p da seleo
$(li:eq(2)); // elemento li com index 2
$(tr:even); // todos tr com index par
$(tr:odd); // todos tr com index mpar

Filtros de hierarquia
Filtros baseados no hierarquia do DOM

$(body div); // todas as divs dentro do body
$(body > div); // todas as divs que esto diretamente

abaixo do body
$(label + input); // label com input adjacente (deve

possuir o mesmo elemento pai)
Manipulando CSS
S
Manipulando CSS
<p>Lorem ipsum dolor sit amet</p>
$(p).css(font-size); // retorna o valor do

font-size do elemento p
$(p).css(font-size, 12px); // define o font-

size do elemento p para 12px
Denindo mlVplos atributos
UVlizando mtodos encadeados
$(p).css(font-size, 24px)
.css(font-weight, bold)
.css(line-height, 32px);
Ou um map
$(p).css({font-size: 24px,
font-weight: bold,
line-height: 32px});
Mas... vamos com calma
HTML CSS
Contedo Apresentao
JavaScript
Interao
Interface CSS
S DOM e CSS comunicam via IDs e Classes
S Use .css() com cautela
S Manipule IDs e Classes
S Mais seguro e manutenvel

Manipulando classes
$(p).hasClass(autor); // retorna true ou false
$(p).addClass(bigger);
$(p).removeClass(bigger); // remove a classe

passada via parmetro
$(p).removeClass(); // remove todas as classes
$(p).toggleClass(bigger); // se o elemento tiver a

classe bigger, o jQuery remove. Se no tiver, adiciona
Visibilidade
$(p.autor).hide();
[<p class=autor style=display: none>Rodrigo</p>]
$(p.autor).show();
[<p class=autor style=display: normal>Rodrigo</p>]
$(p.autor).toggle();
Alterna entre hide e show
Manipulando Contedo
S
Template
<html>
<head>
</head>
<body>
<h2>Cronograma</h2>
<ul>
<li>Fundamentos <span class=js>JavaScript</span></li>
<li>DOM</li>
<li>jQuery</li>
</ul>
<p>Data: <span class=data>21/01 25/01</span></p>
<p>Horrio: <span class=hora>19:00 s 22:40</span></p>
</body>
</html>
Acessando text e html
S html Recupera todo contedo dentro do elemento selecionado,

inclusive as tags HTML
$(p:first).html();
[Data: <span class=data>21/01 25/01</span>]
S text Recupera todo texto dentro do elemento selecionado, ignorando

as tags HTML
$(p:first).text();
[Data: 21/01 25/01]
Denindo text
<span class=data>28/01 01/02</span>

$(span.data).text(28/01 01/02);
Cronograma
Fundamentos JavaScript
DOM
jQuery
Data: 28/01
1/01 0
21/02
5/01
Horrio: 19:00 s 22:40

Denindo text
<span class=data><u>28/01 01/02</u></

$(span.data).text(<u>28/01 01/02</u>);
span>
Cronograma
DOM
jQuery
Data: <2u>28/01
1/01 25/01
01/02</u>
Horrio: 19:00 s 22:40

Denindo html
<span class=data><u>28/01 01/02</u></span>

$(span.data).html(<u>28/01 01/02</u>);
Cronograma
DOM
jQuery
Data: 28/01
1/01 0
21/02
5/01
Horrio: 19:00 s 22:40

Inserindo html no DOM
$(ul).append(<li>Seletores jQuery</li>);
Insere elemento dentro do nal da seleo
$(ul).prepend(<li>Seletores jQuery</li>);
Insere elemento dentro do inicio da seleo
$(ul).before(<h3>Contedo</h3>);
Insere elemento antes da seleo
$(ul).after(<h3>Data e Hora:</h3>);
Insere elemento aps a seleo
Append
$(ul).append(<li>Seletores jQuery</li>);
Cronograma
DOM
jQuery
Seletores jQuery
Data: 21/01 25/01
Horrio: 19:00 s 22:40

Prepend
$(ul).prepend(<li>Seletores jQuery</li>);
Cronograma
Seletores jQuery
DOM
jQuery
Data: 21/01 25/01
Horrio: 19:00 s 22:40

Before
$(ul).before(<h3>Contedo</h3>);
Cronograma
Contedo
DOM
jQuery
Data: 21/01 25/01
Horrio: 19:00 s 22:40

Amer
$(ul).after(<h3>Data e Hora:</h3>);
Cronograma
DOM
jQuery
Data e Hora:
Data: 21/01 25/01
Horrio: 19:00 s 22:40

Eventos
S
Como funciona
<html>
<head>
</head>
<body>
k!
<h2>Cronograma</h2> Clic
<ul>
<li>DOM</li>
<li>jQuery</li>
</ul>
</body>
</html>
Timing
<html>
<head>
<script src=jquery.js></script>
<script>
$(p).hide();
</script>
</head>
<body>
<h2>Cronograma</h2>
<ul>
<li>DOM</li>
<li>jQuery</li>
</ul>
</body>
</html>
Timing
<html>
<head>
<script>
$(p).hide();
</script> Nenhum pargrafo no documento!
</head>
<body>
<h2>Cronograma</h2>
<ul>
<li>DOM</li>
<li>jQuery</li>
</ul>
</body>
</html> DOM est pronto!
Document Ready
<html>
<head>
<script>
Executa o
$(document).ready(function () {
$(p).hide();
handler
});
</script>
</head>
<body>
<h2>Cronograma</h2>
<ul>
<li>DOM</li>
<li>jQuery</li>
</ul>
</body>
Documento
</html>
est pronto!
Eventos de Mouse
$(p).click();
//Dispara no evento de click do mouse
$(p).dblclick();
//Dispara com click duplo
$(p).hover();
//Dispara quando mouse entra e/ou sai do elemento
$(p).mousedown();
//Dispara quando o boto do mouse pressionado
$(p).mouseenter();
//Dispara quando o mouse entra no elemento
$(p).mouseleave();
//Dispara quando o mouse sai do elemento
$(p).mousemove();
//Dispara quando o mouse se move
$(p).mouseup();
//Dispara quando ao trmino do click do mouse
Click
function esconder() {
$(p).hide();
}
$(p).click(esconder);
Normalmente uVlizamos funes annimas
$(p).click(function () {
$(p).hide();
});
Hover
.destacar {
background: yellow;
$(p).hover(function () {
$(this).addClass(destacar);
Data: 21/01 25/05
});
Horrio: 19:00 s 22:40
Hover
.destacar {
background: yellow;
$(p).hover(
function () { $(this).addClass(destacar);},
function () { $(this).removeClass(destacar);}
Data: 21/01 25/05
);
Horrio: 19:00 s 22:40
Hover
.destacar {
background: yellow;
$(p).hover(function () {
$(this).toggleClass(destacar);
Data: 21/01 25/05
});
Horrio: 19:00 s 22:40
Eventos de Teclado
$(input).keydown();
//Dispara ao apertar a tecla
$(input).keypress();
//Dispara ao pressionar a tecla
$(input).keyup();
//Dispara ao soltar a tecla
Eventos de Formulrio
$(input).blur();
//Dispara ao input perder o foco
$(input).change();
//Dispara quando um valor alterado
$(input).focus();
//Dispara quando um input recebe foco
$(input).select();
//Dispara ao selecionar um texto, option, radio
$(input).submit();
//Dispara submeter o formulrio
Objeto event
$(body).keypress(function (event) {
});
event.which; // cdigo nmerico da tecla pressionada
event.preventDefault(); // evita a ao padro do browser
event.stopPropagation(); // evita propagao do evento no

DOM
Animaes
S
Animaes slide
.slideUp([durao][,callback]);
durao
S Tempo da animao em milisegundos
S Default 400 milisegundos
S Aceita parmetros slow (600ms) e fast (200ms)
callback
S Funo que ser executada aps o trmino da animao
slideUp, slideDown e slideToggle
$(p).slideUp(slow);
$(p).slideUp(1000, function () {
alert(Concluiu a animao!);
});
$(p).slideDown(fast);
$(p).slideToggle();
Animaes fade
S UVliza os mesmos parmetros do slide

$(p).fadeIn(slow);
$(p).fadeIn(1000, function () {
alert(Concluiu a animao!);
});
$(p).fadeOut(fast);
$(p).fadeToggle();
Funes jQuery
S
Adicionando funes
customizadas
$.fn.vazio = function () {
var value = $(this).val();
if (value == ) {
return true;
}
else {
return false;
}
};
$(input).vazio();
Ajax
S
XMLH^pRequest
S Requisies assncronas por trs dos panos

$.ajax({
url: usuarios.php,
data: { id: 10, acao: editar },
cache: false,
type: POST,
beforeSend: function () {
// execuo antes de realizar requisio
},
success: function (data) {
// execuo em caso de sucesso
},
error: function () {
// execuo em caso de erro
}
complete: function () {
// execuo ao terminar requisio
}
});
load
Permite especicar um elemento para receber a resposta e uma

funo de callback

$('#resultado').load(usuarios.php);
// A resposta da requisio pgina usuarios.php inserida dentro do
elemento #resultado
$('#resultado').load(usuarios.php, function () {
// Executa aps terminar a requisio
});
$('#resultado').load(usuarios.php, { id: 10 } function () {

// Executa aps terminar a requisio
});
post
$.post(url [,data] [,success(data, textStatus, jqXHR)] [,dataType])
O mtodo post do jQuery corresponde seguinte implementao:

$.ajax({
type: "POST",
url: url,
data: data,
success: success,
dataType: dataType
});
$.post(login.php, { usuario: rodrigobsm, senha: 123456 });
$.post(login.php, $(form).serialize(), function () {

// Executa callback
});
get
$.get(url [,data] [,success(data, textStatus, jqXHR)] [,dataType])
O mtodo get do jQuery corresponde seguinte implementao:

$.ajax({
url: url,
data: data,
success: success,
dataType: dataType
});
$.get(cidades.php, { uf: mg }, function (data) {

$(select).html(data);
});
Formulrios
S
Serializando formulrios
<form method=post action=cadastro.php id=cadastro>

Nome: <input type=text name=nome id=nome>
Email: <input type=text name=email id=email>
Cpf: <input type=text name=cpf id=cpf>
<button type=submit>Enviar</button>
</form>
Nome: Rodrigo
Email: Rodrigobsm.gm@gmail.com
Cpf: 123456789012
$(#cadastro).serialize();
Retorna:
nome=Rodrigo&email=rodrigobsm.gm@gmail.com&cpf=123456789012
Serializando em array
$(#cadastro).serializeArray();
[
{
name = nome,
value = rodrigo
},
{
name = email,
value = rodrigobsm.gm@gmail.com
},
{
name = cpf,
value = 123456789012
}
]
Plugins jQuery
S Um dos grandes trunfos do jQuery a sua vasta gama de

plugins.
S Um plugin uma extenso da biblioteca do jQuery que

implementa uma nova funcionalidade.
S Praticamente qualquer efeito, ao ou manipulao que

voc consiga imaginar j deve possuir um plugin. Caso
contrrio, quem sabe voc mesmo no desenvolve um?
Plugins jQuery teis
S http://jquery.malsup.com/cycle/
S http://jqueryvalidation.org/
S http://digitalbush.com/projects/masked-input-plugin/
S http://www.linhadecodigo.com.br/artigo/3584/10-plugins-
de-jquery-que-voce-precisa-conhecer.aspx
S http://daviwp.com/os-40-melhores-plugins-jquery-para-
facilitar-a-vida-do-desenvolvedor-web/
Contato
Muito obrigado!

facebook.com/rodrigobsm

HTML 5 - Java Script Parte 3

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

HTML 5 - Java Script Parte 3

Uploaded by

Copyright:

Available Formats

Desenvolvimento Web

Com HTML, CSS e JavaScript

S Bacharel em Cincia da Computao (PUC Minas);

S Especialista com MBA Internacional em Gerenciamento de

S Micro-empresrio da rea de TI;

S Analista/Desenvolvedor de aplicaes desde 2000;

S Ex-IBMer (de 2009 a 2013);

S Diretor-Presidente/Co-fundador do Instituto Internacional

S Fundador do Google Developers Group So Joo da Boa

S Ao final deste curso, voc ser capaz de:

S Utilizar folhas de estilo CSS3;

S Utilizar JavaScript e o framework jQuery;

S Criar pginas com funcionalidades Ajax;

S Utilizar frameworks como o Bootstrap;

Prof. Rodrigo Santa Maria

S uma linguagem de programao

Obs.: JavaScript NO Java

S Gerao dinmica de contedo (on-the-fly)

S Manipular objetos de interface

S Operaes matemticas e textuais

S Validao de dados de um formulrio

maca1.gif maca2.gif maca3.gif maca4.gif maca5.gif

S Soluo 1: Embutido na pgina HTML

S 1.1 - Como evento de um elemento (IMG, A, INPUT etc):

S 1.2 - Como elemento SCRIPT dentro de BODY:

S 1.3 - Como funo, dentro de HEAD

S Soluo 2: Num arquivo a ser importado

S O que preciso para

Processar informaes (ou seja, resolver um problema) exige um tipo de pensamento

S Expresso e Operador opera dados

S Tomada de deciso ( necessrio testar: if)

S Funo bloco de programa;

quebra do problema em partes!

S Evento se alguma coisa acontece,

ento faa algo...

S Objetos elementos de uma pgina Web

S Quebrar o problema em pedaos (funes)

S Conhecer os eventos e saber utiliz-los

S Conhecer os objetos e saber utiliz-los

3 passos para desenvolver a Lgica de programao:

2 Faa mais exerccios

<BODY onLoad="alert('Pgina carregada.)">

onMouseOver Ponteiro do mouse entra A, IMG

onKeyDown Tecla apertada Caixa de Texto

onFocus quando elemento recebe o foco compts. de FORM, BODY

onChange quando modifica-se texto ou seleo SELECT, TEXTAREA,

onLoad aps carregar uma pgina BODY BODY

onError quando um erro ocorre ao carregar BODY, IMG

Location Image Text

resizable=yes|no permite o usurio redimensionar a janela

Abrir uma janela e escrever o contedo dinamicamente:

Abrir uma pgina bloqueadora:

Ex.: <A href="javascript:history.back()">Voltar</A>

S Propriedades bgColor form[index]

S Varivel armazena dado

S var nome; /*declarao sem atribuio de valor*/

S string (cadeia de letras)

if ( (x<z) || (y<z) ) {...}

if !(senha=="12345") {alert("Senha invlida!");}

S for (inicializao; condio; incremento){...}

for (i=1; i<=1000; i = i + 1) {

S while (condio) {...}

S function NomeFuncao(param1, param2) {...}

parseInt(string) Converte a string num nmero inteiro

S var nome; /declarao sem atribuio de valor/

diaOntem = new Date( diaHoje.getTime() - 10006060*24 );

<span class=data><u>28/01 01/02</u></