Beruflich Dokumente
Kultur Dokumente
S
Sobre o Prof. Rodrigo Santa Maria
S Acesse: www.digitallymade.com.br
S E-mail: rodrigo@digitallymade.com.br
Sobre o Prof. Rodrigo Santa Maria
S Pauta:
Introduo ao Javascript
Funcionalidades
Exemplos
Frameworks Javascript
Introduo ao jQuery
Funcionalidades
Exemplos
Introduo ao Javascript
S
Contato
Muito obrigado!
S Efeitos visuais
S Efeitos interativos
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'">
<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 Conceitos de programao
S Dados, Variveis, Expresses e Operadores
S Tomada de deciso, Repetio
S Funes, Eventos, Objetos
programar em JavaScript?
S Exerccios
Conceitos de Programao
JavaScript
linguagem de programao
processar informaes
resolver um problema
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
x = (y 5) / 7 diferente de x=y5/7
operadores precedncia
Conceitos de Programao
S Repetio
x = "";
while (x != "fim"){
document.write(x);
x = prompt("Entre com um texto HTML ('fim' para terminar):","");
}
Conceitos de Programao
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
<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 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 !!!
desenvolver a
Lgica de Programao !!!
3 Continue fazendo !
Eventos e Objetos
3
Eventos
Objetos
Window
Location
History
Document
Form
TextArea, Text, Password
Select
Frame
Image
Eventos
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
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)
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)
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
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 Identificador de varivel
S letras, nmeros e "_" (underscore)
S tem que comear com um letra
S case sentive nome Nome NoMe
Tipos de Dados
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);}
S if ... else
if (condio) {
// instrues caso condio==true
}
else {
// instrues caso condio==false
}
Repetio
i=1;
while (i<=1000) {
document.write("<P>" + i + "</P>");
i = i + 1;
}
Funes
function Soma(x, y) {
return x + y;
}
Funes nativas
<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
Ex.:
x = 1 + Math.floor(Math.random()*50);
// x recebe um nmero entre 1 e 50
String
0 1 2 3 4
txt = "Pedro"
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
txt = "20/02/1975";
data = txt.split("/");
data.length 3 // length uma propriedade de Array
Array
(continuao)
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
this.codigo = aCodigo;
this.nome =aNome;
this.preco = aPreco;
...
...
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"
function getConteudoCookie(nome){
cookies[i] = cookies[i].split("=");
nomeCookie = unescape(cookies[i][0]);
return "";
}
Cancelar um Cookie
function CancelarCookie(nome){
diaOntemGMT = diaOntem.toGMTString();
}
Criar um Cookie
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
S
Contedo
VBSCRIPT
JAVASCRIPT
JavaScript
hoje
Por
que
usar
jQuery?
S jQuery pesado
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
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
$(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);
$(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
S
Manipulando
CSS
$(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
$(p).addClass(bigger);
$(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
$(p:first).html();
[Data: <span class=data>21/01 25/01</span>]
$(p:first).text();
[Data: 21/01 25/01]
Denindo
text
Cronograma
Fundamentos
JavaScript
DOM
jQuery
Data:
28/01
1/01
0
21/02
5/01
Horrio:
19:00
s
22:40
Denindo
text
Cronograma
Fundamentos
JavaScript
DOM
jQuery
Data:
<2u>28/01
1/01
25/01
01/02</u>
Horrio:
19:00
s
22:40
Denindo
html
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);
$(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) {
});
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
Adicionando
funes
customizadas
$.fn.vazio = function () {
var value = $(this).val();
if (value == ) {
return true;
}
else {
return false;
}
};
$(input).vazio();
Ajax
S
XMLH^pRequest
$('#resultado').load(usuarios.php, function () {
// Executa aps terminar a requisio
});
S
Serializando
formulrios
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 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!