Você está na página 1de 147

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!

Prof. Rodrigo Santa Maria


rodrigo@digitallymade.com.br
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


Exemplos de JavaScript:
Ol

<HTML>

<HEAD>
<TITLE>Ol</TITLE>
</HEAD>

<BODY>
<P>Script que escreve Ol:</P>
<SCRIPT>
<!--
document.write("<B>Ol!</B>");
//-->
</SCRIPT>
</BODY>
Exemplos de JavaScript:
Rodap v1

<BODY>
<SCRIPT language="JavaScript">
<!--
nome = Joo da Silva";
document.write("<HR>");
document.write("<I>Autor: </I>");
document.write(nome);
//-->
</SCRIPT>
</BODY>

OBS1:
nome uma varivel armazena uma informao
Exemplos de JavaScript:
Contedo Personalizado

<BODY>
<SCRIPT language="JavaScript">
<!--
nome = prompt("Qual o seu nome?","");
document.write("Seja bem vindo <B>"+nome+"</B> !!!");
//-->
</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
Exemplos de JavaScript:
Rodap v2
<BODY>
<SCRIPT language="JavaScript">
<!--
nome = Maria Pereira";
document.write("<HR>");
document.write("<I>Autor: </I>"+nome+"<BR>");
document.write("<I>ltima Modificao: </I>"+
document.lastModified);
//-->
</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
Exemplos de JavaScript:
Rodap v3

<HTML>
<HEAD>
<TITLE>Pgina com nome do leitor</TITLE>
<SCRIPT language="JavaScript">
<!--
function Rodape(){
document.write("<HR><I>Autor:</I> Joo da Silva<BR>");
document.write("<I>ltima Modificao: </I>"+document.lastModified);
}
//-->
</SCRIPT>
</HEAD>

<BODY>
<P>Aqui escrevo qualquer coisa</P>
<SCRIPT language="JavaScript">
Rodape();
</SCRIPT> OBS:
</BODY> Rodape() uma funo (definida pelo
</HTML>
programador) escreve o rodap
Exemplos de JavaScript:
Ttulo e Rodap, v1
<HTML>
<HEAD>
<TITLE>Pgina com nome do leitor</TITLE>
<SCRIPT language="JavaScript">
<!--
function Titulo(){
document.write("<H1 align=center><I>Aula de JavaScript</I></H1>");
}

function Rodape(){
document.write("<HR><I>Autor: </I>Joo da Silva<BR>");
document.write("<I>ltima Modificao: </I>"+document.lastModified);
}
//-->
</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>");
document.write("<I>ltima Modificao: </I>"+document.lastModified);
}

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
Conceitos 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
Conceitos de Programao

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):","");
}
Conceitos de Programao

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.");}
}
Conceitos de Programao

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()
Conceitos de Programao

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 language="JavaScript">
<!--
function AbrirJanela(){
window.open("http://www.google.com.br");
}
//-->
</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><!--
window.open("google.html", "", "width=300,height=100");
//-->
</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
(propriedades e mtodos)

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 language="JavaScript">
<!--
alert("Voc est em "+ window.location.href);
novoHREF=prompt("entre com um novo endereo:","http://");
window.location.href=novoHREF;
//-->
</SCRIPT>
<BODY>
History
(propriedades e mtodos)

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
(propriedades e mtodos)

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
(propriedades e mtodos)

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>
<SCRIPT language="JavaScript">
<!--
function Cadastrar(){
wndCadastro = window.open("","jc","width=300,height=80");
wndCadastro.document.open();
wndCadastro.document.write("<B>Nome: </B>");
wndCadastro.document.write(window.document.frmCadastro.txtNome.value);
wndCadastro.document.write("<BR>");
wndCadastro.document.write("<B>Idade: </B>");
wndCadastro.document.write(window.document.forms[0].elements[1].value);
wndCadastro.document.close();
wndCadastro.focus();
} elements[0]=Caixa de texto
//--> 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>
<SCRIPT language="JavaScript">
<!--
function Navegar(){
var x = document.frmSites.slcSites.selectedIndex;
if (x==0){}
if (x==1){document.location.href="http://www.google.com.br"}
if (x==2){document.location.href="http://www.facebook.com"}
if (x==3){document.location.href="http://www.uol.com.br "}
}
//--> 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">
<!--
function Enviar(){
if (window.document.Cadastro.nome.value==""){
alert("O campo 'Nome' precisa ser preenchido");
window.document.Cadastro.nome.focus();
}
else{
alert("Os dados do formulrio foram preenchidos corretamente");
//window.document.Cadastro.submit();
}
}
//-->
</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"><!--
function isInt(texto){
bValido=true;
//testar se texto um nmero
if ( isNaN(texto) ) {bValido=false}
else{
//testar se texto um nmero inteiro
if ( parseInt(texto)!=parseFloat(texto) ) {bValido=false}
}
return bValido;
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT language="javascript">
<!--
numero = prompt("Digite um nmero inteiro:","");
if ( isInt(numero) ) {alert("Ok, o nmero inteiro")}
else {alert("Voc no digitou um nmero inteiro")}
//-->
</SCRIPT>
</BODY></HTML>
Soluo 2
PROVA

function isInt(texto){
if ( isNaN(texto) ) {return false}
else{ return ( parseInt(texto)==parseFloat(texto) ) }
}

function isInt(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>");
document.write(prod[1] + "<BR>");
document.write(prod[2] + "<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
p.autor Rodrigo Santa Maria
p#rodape rodrigobsm.com.br/jquery-na-pratica

Seletores jQuery

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

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

Seletores jQuery

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

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

Seletores jQuery

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

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

Resultado da Seleo

jQuery
$(p);

DOM
p.autor Rodrigo Santa Maria
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>
<title>jQuery na Prtica</title>
</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>&lt;u&gt;28/01 01/02&lt;/u&gt;</


$(span.data).text(<u>28/01 01/02</u>);
span>

Cronograma
Fundamentos JavaScript
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
Fundamentos JavaScript
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
Fundamentos JavaScript
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
Fundamentos JavaScript
DOM
jQuery
Data: 21/01 25/01
Horrio: 19:00 s 22:40

Before

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

Amer

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

Eventos

S
Como funciona

<html>
<head>
<title>jQuery na Prtica</title>
</head>
<body>
k!
<h2>Cronograma</h2> Clic
<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>
Timing
<html>
<head>
<title>jQuery na Prtica</title>
<script src=jquery.js></script>
<script>
$(p).hide();
</script>
</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>
Timing
<html>
<head>
<title>jQuery na Prtica</title>
<script src=jquery.js></script>
<script>
$(p).hide();
</script> Nenhum pargrafo no documento!
</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> DOM est pronto!
Document Ready
<html>
<head>
<title>jQuery na Prtica</title>
<script src=jquery.js></script>
<script>
Executa o
$(document).ready(function () {
$(p).hide();
handler
});
</script>
</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>
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!

Prof. Rodrigo Santa Maria


rodrigo@digitallymade.com.br
facebook.com/rodrigobsm