Este documento fornece informações sobre um curso de desenvolvimento web ministrado pelo professor Rodrigo Santa Maria. O curso ensina HTML5, CSS3, JavaScript e frameworks como o Bootstrap. O professor tem formação em Ciência da Computação e MBA em Gerenciamento de Projetos e experiência como analista, professor e empreendedor na área de tecnologia.
2. Sobre o Prof. Rodrigo Santa Maria
S Bacharel em Ciência da Computação (PUC Minas);
S Especialista com MBA Internacional em Gerenciamento de
Projetos (FGV/Ohio University, USA);
S Professor Universitário (UNIFEOB);
S Micro-empresário da área de TI;
S Acesse: www.digitallymade.com.br
S E-mail: rodrigo@digitallymade.com.br
3. Sobre o Prof. Rodrigo Santa Maria
S Analista/Desenvolvedor de aplicações 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 São João da Boa
Vista;
4. Visão Geral
S Ao final deste curso, você será capaz de:
S Criar páginas HTML5;
S Utilizar folhas de estilo CSS3;
S Utilizar JavaScript e o framework jQuery;
S Criar páginas com funcionalidades Ajax;
S Utilizar frameworks como o Bootstrap;
5. Desenvolvimento Web
MÓDULO 03
S Pauta:
Ø Introdução ao Javascript
Ø Funcionalidades
Ø Exemplos
Ø Frameworks Javascript
Ø Introdução ao jQuery
Ø Funcionalidades
Ø Exemplos
8. O que é JavaScript?
S É uma linguagem de programação
S Desenvolvida pela Netscape®
S Microsoft® tem o VBScript ⇒ não é tanto utilizado quanto o JavaScript
S JavaScript também roda no Microsoft Internet Explorer®
S O código é escrito dentro da página HTML (client-side)
S Roda no navegador do usuário (e não no servidor)
S Simples e Útil (para fazer coisas simples)
Obs.: JavaScript NÃO É Java
S Java entra nas páginas HTML através de applets
S JavaScript é escrito dentro da página HTML
9. Para que serve“JavaScript”?
S Efeitos visuais
S Efeitos interativos
S Geração dinâmica de conteúdo (on-the-fly)
S Adequações para a resolução do monitor
S Padronização da apresentação
S Armazenamento de informações (cookies)
Personalização do conteúdo
S Manipular objetos de interface
S Janelas, Barra de status, Formulários etc.
S Operações matemáticas e textuais
S Validação de dados de um formulário
S Animações
S DHTML
12. Exemplos de JavaScript:
“Rodapé v1”
<BODY>
<SCRIPT language="JavaScript">
<!--
nome = ”João da Silva";
document.write("<HR>");
document.write("<I>Autor: </I>");
document.write(nome);
//-->
</SCRIPT>
</BODY>
OBS1:
nome é uma variável ⇒ armazena uma informação
13. OBS1:
prompt é uma função ⇒ faz alguma coisa:
- Abre uma janela de diálogo para o usuário entrar com um texto
- Retorna o texto digitado pelo usuário
OBS2:
“Seja bem vindo"+nome+"</B> !!!" é uma expressão ⇒ soma textos
Exemplos de JavaScript:
“Conteúdo Personalizado”
<BODY>
<SCRIPT language="JavaScript">
<!--
nome = prompt("Qual o seu nome?","");
document.write("Seja bem vindo <B>"+nome+"</B> !!!");
//-->
</SCRIPT>
</BODY>
14. 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 Modificação: </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 modificação do documento
15. Exemplos de JavaScript:
“Rodapé v3”
<HTML>
<HEAD>
<TITLE>Página com nome do leitor</TITLE>
<SCRIPT language="JavaScript">
<!--
function Rodape(){
document.write("<HR><I>Autor:</I> João da Silva<BR>");
document.write("<I>Última Modificação: </I>"+document.lastModified);
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<P>Aqui escrevo qualquer coisa</P>
<SCRIPT language="JavaScript">
Rodape();
</SCRIPT>
</BODY>
</HTML>
OBS:
Rodape() é uma função (definida pelo
programador) ⇒ escreve o rodapé
16. Exemplos de JavaScript:
“Título e Rodapé, v1”
<HTML>
<HEAD>
<TITLE>Página 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>João da Silva<BR>");
document.write("<I>Última Modificação: </I>"+document.lastModified);
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT>Titulo();</SCRIPT>
<P>Aqui escrevo qualquer coisa</P>
<SCRIPT>Rodape();</SCRIPT>
</BODY>
</HTML>
18. Onde escrever um JavaScript?
S Solução 1: Embutido na página 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 Conteúdo Personalisado
S Rodapé, v2
S 1.3 - Como função, dentro de HEAD
S Rodapé, v3
S Título e Rodapé, v1
S Solução 2: Num arquivo a ser importado
S Título e Rodapé, v2
19. Programando Javascript
S Conceitos de programação
S Dados, Variáveis, Expressões e Operadores
S Tomada de decisão, Repetição
S Funções, Eventos, Objetos
S O que é preciso para
programar em JavaScript?
S Exercícios
20. Conceitos de Programação
JavaScript
linguagem de programação
processar informações
resolver um problema
Processar informações (ou seja, resolver um problema) exige um tipo de pensamento
particular ⇒ Lógica de Programação
21. Conceitos de Programação
S Dado = informação
Tipos de Dados: “Pedro” 75 1.57 true
S Variável ⇒ armazena dado
nome = “Patricia”
Idade = 25
S Expressão e Operador ⇒ opera dados
x = (y – 5) / 7 é diferente de x = y – 5 / 7
operadores
operadores precedência
string inteiro real
(ponto-flutuante)
boleano
(verdadeiro
ou falso)
22. Conceitos de Programação
S Tomada de decisão (é necessário testar: if)
if (x<10) {
alert(“x é menor que 10”);
}
else{
alert(“x é maior ou igual a 10”);
}
S Repetição
x = "";
while (x != "fim"){
document.write(x);
x = prompt("Entre com um texto HTML ('fim' para terminar):","");
}
23. Conceitos de Programação
S Função ⇒ bloco de programa;
quebra do problema em partes!
function Par(x){
resto = x % 2;
alert(resto);
if (resto==0) {return true}
else {return false}
}
function Classifica(){
numero = prompt("Entre com um número:","");
if (Par(numero)) {alert("O número "+numero+" é par.");}
else {alert("O número "+numero+" é impar.");}
}
function Par(x){
return (x % 2)==0;
}
24. Conceitos de Programação
S Evento ⇒ se alguma coisa acontece,
então faça algo...
<FORM>
<INPUT type="button" value="Par ou Impar?" onClick="Classifica()">
</FORM>
EVENTO
O botão, ao se clicado,
chama a função Classifica()
25. Conceitos de Programação
S Objetos ⇒ elementos de uma página Web
S Propriedades (variáveis)
document.title; (contém o título do documento)
document.location; (contém a URL do documento)
S Métodos (funções)
document.write("<B>Bom Dia!</B>");
window.open("http://www.google.com.br", ”Google");
26. O que é preciso para programar em
JavaScript?
S Saber programar ⇒
S Quebrar o problema em pedaços (funções)
S Resolver os pedaços do problemas utilizando:
S dados, variáveis e operações
S decisões + repetições
S Conhecer os eventos e saber utilizá-los
S Conhecer os objetos e saber utilizá-los
desenvolver a
Lógica de Programação !!!
Algoritmo
27. O que é preciso para programar em
JavaScript?
3 passos para desenvolver a Lógica de programação:
1 – Faça exercícios
2 – Faça mais exercícios
3 – Continue fazendo !
desenvolver a
Lógica de Programação !!!
28. Eventos e Objetos
3
• Eventos
• Objetos
• Window
• Location
• History
• Document
• Form
• TextArea, Text, Password
• Select
• Frame
• Image
29. Eventos
<BODY onLoad="alert('Página carregada.’)">
<script>
window.onbeforeunload = function() {
return "Deseja sair mesmo?";
};
</script>
<P>Testando alguns eventos...</P>
<FORM>
<INPUT type="button"
value="Não aperte este botão!"
onClick="alert('Clique o botão Ok para formatar o HD')">
</FORM>
</BODY>
<INPUT type="button" value= "Formatar o HD"
onClick="confirm(‘Tem certeza?')">
30. Eventos
A, IMG
A, IMG
A, IMG
A, IMG
A, IMG
A, IMG, Botões,
SELECT
Caixa de Texto
Caixa de Texto
Caixa de Texto
Ponteiro do mouse entra
Ponteiro do mouse se movimenta
Ponteiro do mouse sai
Botão do mouse é apertado
Botão do mouse é desapertado
Clique (MouseDown + MouseUp)
Tecla apertada
Tecla desapertada
Tecla “clicada” (KeyDown + KeyUp)
onMouseOver
onMouseMove
onMouseOut
onMouseDown
onMouseUp
onClick
onKeyDown
onKeyUp
onKeyPress
31. Eventos
antes de enviar o formulário
antes de limpar o formulário
quando elemento recebe o foco
quando elemento perde o foco
quando modifica-se texto ou seleção
após carregar uma página BODY
antes de sair da página BODY
quando a janela é redimensionada
quando a janela é arrastada
quando um erro ocorre ao carregar
quando interrompe-se carregamento
onSubmit
onReset
onFocus
onBlur
onChange
onLoad
onUnLoad
onResize
onMove
onError
onAbort
FORM
FORM
compts. de FORM, BODY
compts. de FORM, BODY
SELECT, TEXTAREA,
INPUT:text, INPUT:passw.
BODY
BODY
BODY
BODY
BODY, IMG
IMG
34. Window
(exemplo)
window.open("http://www.google.com.br");
Cada chamada à função AbrirJanela(),
irá abrir uma nova janela
window.open("http://www.google.com.br", "j1");
Nome da Janela
mesmo com várias chamadas
à função AbrirJanela(),
somente uma janela será aberta
window.open("http://www.google.com.br", "");
Nome não especificado
Netscape: Abre só 1 janela
Internet Explorer: Abre várias janelas
35. Window
(exemplo)
window.open("http://www.google.com.br","j1",
"width=400,height=400,resizable=no");
Opções:
• width=número largura da janela
• height=número altura da janela
• left=número posição do canto esquerdo da janela
• top=número posição do topo da janela
• resizable=yes|no permite o usuário 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 endereço
• 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 opção do tipo yes|no é apenas declarada, seu valor é yes.
Caso contrário, seu valor é no. Ex.: "width=400, height=400, menubar,
status“
38. Window
(propriedades e métodos)
S Propriedades
S frames[index] quadros filhos, indexados pela ordem de criação
S frames.length número de quadros existentes
S self janela atual
S parent janela pai
S top janela mais antiga
S opener janela que a abriu
S Métodos
S alert("texto") exibe caixa de diálogo para exibir um aviso
S confirm("texto") exibe caixa de diálogo para exibir um aviso
S prompt("texto","inicial") exibe caixa de diálogo para entrada de texto
S home() vai para a página inicial do navegador
S open("URL", "nome", "opções")cria janela cliente
S close() fecha janela
39. Location
(propriedades e métodos)
S Propriedades
S href URL completo
S protocol protocolo utilizado
S host nome e port do host
S hostnamenome do host
S port port do host
S path diretório e arquivo (exclui protocolo e host)
S hash URL após sinal #
S search URL após sinal ?
S Métodos
S toString() retorna uma string
S assign("string") ajusta a localização
S reload(true) recarrega a página atual incondicionalmente
41. History
(propriedades e métodos)
S Propriedades
S back penúltimo URL acessado
S foward URL posterior da lista de URLs acessados
S current URL da página atual
S length tamanho da lista de histórico atual
S Métodos
S back() volta uma posição no histórico
S foward() avança uma posição no histórico
S go(n) vai para o URL localizado em n posições em relação
a posição atual (+n ou –n)
S go("string") vai para a página mais recente cujo título ou URL
contenha a string especificada. Obs.: o sistema
diferencia maiúsculas e minúsculas.
S toString() retorna uma tabela HTML com ligações para todas
as entradas da lista de diretório
Ex.: <A href="javascript:history.back()">Voltar</A>
42. Document
(propriedades e métodos)
S Propriedades
S title
S location
S lastModified
S Métodos
S write("textoHTML") escreve uma linha de texto HTML
S writeln("textoHTML") escreve e adiciona um avanço de linha
S clear() limpa o texto do documento
S close() fecha o documento
• bgColor
• fgColor
• linkColor
• aLinkColor
• vLinkColor
• form[index]
• form.length
• links[index]
• links.length
• anchors[index]
• anchors.length
Ex.: window.document.write("<B>Olá</B>");
window.document.bgColor="silver";
43. Form
(propriedades e métodos)
S Propriedades
S elements Array. Vetor de elementos do formulário
S elements.length Número de elementos do formulário
S name conteúdo do atributo NAME
S action conteúdo do atributo ACTION
S encodingconteúdo do atributo ENCTYPE
S method valor do atributo METHOD ("get"=0; "post"=1)
S target janela alvo usada para resposta após envio do
formulário (atributo TARGET)
S Métodos
S submit() envia o formulário
45. <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 "}
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<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>
Select
(exemplo)
slcSites.options[0]=“Sites”;
slcSites.options[1]=“Google”;
slcSites.options[2]=“Facebook
”;
slcSites.options[3]=“UOL;
46. Lógica de Programação
4
• Variáveis
• Tipos de Dados
• Operadores
• Tomada de Decisão (if...else)
• Repetição (while e for)
• Funções
• Exemplos e Exercícios
47. Variáveis
S Variável armazena dado
S nome="Pedro";
S idade=25;
S nome="Pedro"; /*não precisa declarar nem tipar a variável*/
S var nome; /*declaração sem atribuição de valor*/
S var nome="Pedro"; /*declaração com atribuição de valor*/
S Identificador de variável
S letras, números e "_" (underscore)
S tem que começar com um letra
S case sentive ⇒ nome ≠ Nome ≠ NoMe
48. § Inteiro:
» 5
» 14509
§ Ponto-flutuante
» 14.075
» 1.78e-45
Tipos de Dados
S string (cadeia de letras)
S “João da Silva”;
S “Qualquer ‘texto’, inclusive, toda uma página HTML.”;
S “123”
S number
TIPO
REPRESENTAÇÃO
§ Indeterminado
» NaN (Not a Number)
§ Infinito:
» Infinity
» -Infinity
VALORES
ESPECIAIS
§ Decimal
» 734.25
§ Hexadecimal (Ex.: cores)
» 0xFF87C1
§ Octal
» 0677
49. Tipos de Dados
S true
S false
S undefined
valor ainda não definido
Ex.: var nome; /* nome=undefined */
S null
valor nulo (inválido)
S object
S objetos: documento, janela, componente de formulário etc.
boolean
51. Operadores
S Atribuição
S = (Ex.: x = 5)
S op= (atribuição com operação)
S Incrementais
S var++ ou ++var
S var-- ou --var
x += y; x = x + y;
x –= y; x = x – y;
x /= y; x = x / y;
x *= y; x = x * y;
x %= y; x = x % y;
x = 5;
y = ++x;
/* x=6; y=6; */
x=5;
y = x++;
/* y=5; x=6; */
52. Operadores
S Comparação
S > maior
S >= maior ou igual
S < menor
S <= menor ou igual
S == igual
S != diferente
if (x<10) {...}
if (senha!="12345") {alert("Senha inválida!");}
if (x==y) {...}
53. Operadores
S Lógicos
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 inválida!");}
54. Tomada de Decisão
S if ... else
if (condição) {
// instruções caso condição==true
}
else {
// instruções caso condição==false
}
55. Repetição
S for (inicialização; condição; incremento){...}
S while (condição) {...}
for (i=1; i<=1000; i = i + 1) {
document.write("<P>" + i + "</P>");
}
i=1;
while (i<=1000) {
document.write("<P>" + i + "</P>");
i = i + 1;
}
57. Funções nativas
parseInt(string) Converte a string num número 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
Converte a string num número real
x = parseFloat("7.5"); //x==7.5
Retorna true se a string não é número
texto = prompt("Entre com um número:","");
if ( isNaN(texto) ) {
alert("Você não digitou um número válido.")
}
Executa o conteúdo de uma string
resultado = eval(“5 + 6 / 2”); // resultado = 8
escape = ("João"); // nome = "Jo%E3o"
unescape("Jo%E3o"); // nome = "João"
parseFloat(string)
eval(string)
isNaN(string)
escape(string)
unescape(string)
58. Exemplo: Antes de enviar o formulário, verificar se o campo
‘Nome’ foi preenchido
59. Solução
<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 formulário 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>
60. Exemplo: Fazer uma função para saber se um texto é ou
não um número inteiro
• Verificar se o texto é um número
• Verificar se este número é inteiro
• Se ambas as condições forem verdadeiras,
então retornar true
caso contrário, retornar false.
Passos:
61. <HTML>
<HEAD>
<SCRIPT language="javascript"><!--
function isInt(texto){
bValido=true;
//testar se texto é um número
if ( isNaN(texto) ) {bValido=false}
else{
//testar se texto é um número inteiro
if ( parseInt(texto)!=parseFloat(texto) ) {bValido=false}
}
return bValido;
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT language="javascript">
<!--
numero = prompt("Digite um número inteiro:","");
if ( isInt(numero) ) {alert("Ok, o número é inteiro")}
else {alert("Você não digitou um número inteiro")}
//-->
</SCRIPT>
</BODY></HTML>
Solução 1
62. function isInt(texto){
if ( isNaN(texto) ) {return false}
else{ return ( parseInt(texto)==parseFloat(texto) ) }
}
Solução 2
function isInt(texto){
bValido=true;
if ( isNaN(texto) ) {bValido=false}
else{
if ( parseInt(texto)!=parseFloat(texto) ) {bValido=false}
}
return bValido;
}
PROVA
63. Exercício: Fazer um formulário que seja validado antes
de ser enviado
Validar:
Ø preenchimento de Nome
Ø validade de Data
65. Math
random() número pseudo-aleatório 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 número entre 1 e 50
67. Date
S dataHoje = new Date();
dataHoje.getDay(); //dia da semana (0 a 6)
dataHoje.getDate(); //dia do mês (1 a 31)
dataHoje.getMonth();
dataHoje.getYear();
dataHoje.getHour();
dataHoje.getMinutes();
dataHoje.getSeconds();
68. 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 indexação prédefinida
data[0] = "20";
data[2] = "1975";
if (data[1]==null) {data[1]=prompt("Entre com o mês", "");}
txt = "20/02/1975";
data = txt.split("/");
data.length ⇒ 3 // length é uma propriedade de Array
72. 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 "";
}
73. 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;
}
74. Criar um Cookie
function Cria Cookie(nome, valor){
cookies=getConteudoCookie("compras");
if (cookies!=""){cookies+="*”}
document.cookie = ”nome="+escape(valor);
}
}
75. Relógios (timers)
S id = setTimeout("funcao()", 1000);
Cria um relógio (id)
para chamar uma função após n milisegundos
S clearTimeout(id)
Cancela o relógio
7
Obs: setTimeout() e clearTimeout() são funções nativas
80. Por
que
usar
jQuery?
jQuery
é
uma
camada
de
abstração
Use
jQuery
porque...
...
é
fácil
...
é
produVvo
...
browsers
são
incompaXveis
...
seus
usuários
uVlizam
browsers
anVgos
81. jQuery
não
é
nuhum
milagre!
S Você
ainda
precisa
de
JavaScript
S jQuery
é
pesado
S Construa
agora,
melhore
depois
88. Verificando
se
o
jQuery
está
carregado
<script>
console.log(jQuery);
//ou
alert(jQuery);
</script>
jQuery; à ReferenceError: jQuery is not defined
(jQuery não está carregado)
jQuery; à function (e,t){return new v.fn.init(e,t,n)}
(Pronto para começar!)
$; à function (e,t){return new v.fn.init(e,t,n)}
(Também jQuery!)
89. jQuery
$(“h1”);
(Nome do elemento)
DOM
html
body
h1 à jQuery na Prática
p.autor à Rodrigo Santa Maria
p#rodape à rodrigobsm.com.br/jquery-na-pratica
Seletores
jQuery
90. Seletores
jQuery
jQuery
$(“p”);
(Nome do elemento)
DOM
html
body
h1 à jQuery na Prática
p.autor à Rodrigo Santa Maria
p#rodape à rodrigobsm.com.br/jquery-na-pratica
91. jQuery
$(“p.autor”);
(Elemento + . + Classe)
DOM
html
body
h1 à jQuery na Prática
p.autor à Rodrigo Santa Maria
p#rodape à rodrigobsm.com.br/jquery-na-pratica
Seletores
jQuery
92. jQuery
$(“.autor”);
(Somente a classe)
DOM
html
body
h1 à jQuery na Prática
p.autor à Rodrigo Santa Maria
p#rodape à rodrigobsm.com.br/jquery-na-pratica
Seletores
jQuery
93. Seletores
jQuery
jQuery
$(“p#rodape”);
(Elemento + # + Id)
DOM
html
body
h1 à jQuery na Prática
p.autor à Rodrigo Santa Maria
p#rodape à rodrigobsm.com.br/jquery-na-pratica
94. Resultado
da
Seleção
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>”]
95. Espaço
em
branco
$(“p#rodape”);
Elemento
p
com
id
rodape
$(“p #rodape”);
Elemento
com
id
rodape
dentro
do
elemento
p
96. 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”);
97. Seletores
css
também
são
válidos
<i class=“icon-ok”></i>
<i class=“icon-cancelar”></i>
$(“i[class^=‘icon-’]”);
// Todos elementos i que a classe começa 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”
98. Filtros
de
seleção
Filtros
baseados
no
index
do
array
de
retorno
da
seleção
$(“p:first”); // primeiro p da seleção
$(“p:last”); // último p da seleção
$(“li:eq(2)”); // elemento li com index 2
$(“tr:even”); // todos tr com index par
$(“tr:odd”); // todos tr com index ímpar
99. Filtros
de
hierarquia
Filtros
baseados
no
hierarquia
do
DOM
$(“body div”); // todas as divs dentro do body
$(“body > div”); // todas as divs que estão diretamente
abaixo do body
$(“label + input”); // label com input adjacente (deve
possuir o mesmo elemento pai)
101. 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
103. Mas...
vamos
com
calma
HTML
Conteúdo
CSS
Apresentação
JavaScript
Interação
104. 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
manutenível
105. Manipulando
classes
$(“p”).hasClass(“autor”); // retorna true ou false
$(“p”).addClass(“bigger”);
$(“p”).removeClass(“bigger”); // remove a classe
passada via parâmetro
$(“p”).removeClass(); // remove todas as classes
$(“p”).toggleClass(“bigger”); // se o elemento tiver a
classe bigger, o jQuery remove. Se não tiver, adiciona
106. 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
108. Template
<html>
<head>
<title>jQuery na Prática</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>Horário: <span class=“hora”>19:00 às 22:40</span></p>
</body>
</html>
109. Acessando
text
e
html
S html
à
Recupera
todo
conteúdo
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”]
110. Definindo
text
$(“span.data”).text(“28/01 à 01/02”);
<span class=“data”>28/01 à 01/02</span>
Cronograma
•
Fundamentos
JavaScript
•
DOM
•
jQuery
Data:
21/01
à
25/01
Horário:
19:00
às
22:40
Cronograma
•
Fundamentos
JavaScript
•
DOM
•
jQuery
Data:
28/01
à
01/02
Horário:
19:00
às
22:40
111. Definindo
text
$(“span.data”).text(“<u>28/01 à 01/02</u>”);
<span class=“data”><u>28/01 à 01/02</u></
span>
Cronograma
•
Fundamentos
JavaScript
•
DOM
•
jQuery
Data:
21/01
à
25/01
Horário:
19:00
às
22:40
Cronograma
•
Fundamentos
JavaScript
•
DOM
•
jQuery
Data:
<u>28/01
à
01/02</u>
Horário:
19:00
às
22:40
112. Definindo
html
$(“span.data”).html(“<u>28/01 à 01/02</u>”);
<span class=“data”><u>28/01 à 01/02</u></span>
Cronograma
•
Fundamentos
JavaScript
•
DOM
•
jQuery
Data:
21/01
à
25/01
Horário:
19:00
às
22:40
Cronograma
•
Fundamentos
JavaScript
•
DOM
•
jQuery
Data:
28/01
à
01/02
Horário:
19:00
às
22:40
113. Inserindo
html
no
DOM
$(“ul”).append(“<li>Seletores jQuery</li>”);
Insere
elemento
dentro
do
final
da
seleção
$(“ul”).prepend(“<li>Seletores jQuery</li>”);
Insere
elemento
dentro
do
inicio
da
seleção
$(“ul”).before(“<h3>Conteúdo</h3>”);
Insere
elemento
antes
da
seleção
$(“ul”).after(“<h3>Data e Hora:</h3>”);
Insere
elemento
após
a
seleção
117. Amer
$(“ul”).after(“<h3>Data e Hora:</h3>”);
Cronograma
•
Fundamentos
JavaScript
•
DOM
•
jQuery
Data
e
Hora:
Data:
21/01
à
25/01
Horário:
19:00
às
22:40
121. Timing
<html>
<head>
<title>jQuery na Prática</title>
<script src=“jquery.js”></script>
<script>
$(“p”).hide();
</script> à Nenhum parágrafo 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>Horário: <span class=“hora”>19:00 às 22:40</span></p>
</body>
</html> à DOM está pronto!
122. Document
Ready
<html>
<head>
<title>jQuery na Prática</title>
<script src=“jquery.js”></script>
<script>
$(document).ready(function () {
$(“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>Horário: <span class=“hora”>19:00 às 22:40</span></p>
</body>
</html>
Documento
está
pronto!
Executa o
handler
123. 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 botão 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 término do click do mouse
125. Hover
.destacar {
background: yellow;
}
$(“p”).hover(function () {
$(this).addClass(“destacar”);
});
Data:
21/01
à
25/05
Horário:
19:00
às
22:40
Data:
21/01
à
25/05
126. Hover
.destacar {
background: yellow;
}
$(“p”).hover(
function () { $(this).addClass(“destacar”);},
function () { $(this).removeClass(“destacar”);}
);
Data:
21/01
à
25/05
Horário:
19:00
às
22:40
Data:
21/01
à
25/05
127. Hover
.destacar {
background: yellow;
}
$(“p”).hover(function () {
$(this).toggleClass(“destacar”);
});
Data:
21/01
à
25/05
Horário:
19:00
às
22:40
Data:
21/01
à
25/05
128. Eventos
de
Teclado
$(“input”).keydown();
//Dispara ao apertar a tecla
$(“input”).keypress();
//Dispara ao pressionar a tecla
$(“input”).keyup();
//Dispara ao soltar a tecla
129. Eventos
de
Formulário
$(“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 formulário
130. Objeto
event
$(“body”).keypress(function (event) {
});
event.which; // código númerico da tecla pressionada
event.preventDefault(); // evita a ação padrão do browser
event.stopPropagation(); // evita propagação do evento no
DOM
132. Animações
slide
.slideUp([duração][,callback]);
duração
S Tempo da animação em milisegundos
S Default 400 milisegundos
S Aceita parâmetros “slow” (600ms) e “fast” (200ms)
callback
S Função que será executada após o término da animação
133. slideUp,
slideDown
e
slideToggle
$(“p”).slideUp(“slow”);
$(“p”).slideUp(1000, function () {
alert(“Concluiu a animação!”);
});
$(“p”).slideDown(“fast”);
$(“p”).slideToggle();
134. Animações
fade
S UVliza
os
mesmos
parâmetros
do
slide
$(“p”).fadeIn(“slow”);
$(“p”).fadeIn(1000, function () {
alert(“Concluiu a animação!”);
});
$(“p”).fadeOut(“fast”);
$(“p”).fadeToggle();
138. XMLH^pRequest
S Requisições
assíncronas
por
trás
dos
panos
$.ajax({
url: ‘usuarios.php’,
data: { id: “10”, acao: “editar” },
cache: false,
type: “POST”,
beforeSend: function () {
// execução antes de realizar requisição
},
success: function (data) {
// execução em caso de sucesso
},
error: function () {
// execução em caso de erro
}
complete: function () {
// execução ao terminar requisição
}
});
139. load
Permite
especificar
um
elemento
para
receber
a
resposta
e
uma
função
de
callback
$('#resultado').load(‘usuarios.php‘);
// A resposta da requisição à página usuarios.php é inserida dentro do
elemento #resultado
$('#resultado').load(‘usuarios.php‘, function () {
// Executa após terminar a requisição
});
$('#resultado').load(‘usuarios.php‘, { id: 10 } function () {
// Executa após terminar a requisição
});
140. post
$.post(url [,data] [,success(data, textStatus, jqXHR)] [,dataType])
O
método
post
do
jQuery
corresponde
à
seguinte
implementação:
$.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
});
141. get
$.get(url [,data] [,success(data, textStatus, jqXHR)] [,dataType])
O
método
get
do
jQuery
corresponde
à
seguinte
implementação:
$.ajax({
url: url,
data: data,
success: success,
dataType: dataType
});
$.get(“cidades.php”, { uf: “mg” }, function (data) {
$(“select”).html(data);
});
144. Serializando
em
array
$(“#cadastro”).serializeArray();
[
{
name = “nome”,
value = “rodrigo”
},
{
name = “email”,
value = “rodrigobsm.gm@gmail.com”
},
{
name = “cpf”,
value = “123456789012”
}
]
145. Plugins jQuery
S Um dos grandes trunfos do jQuery é a sua vasta gama de
plugins.
S Um plugin é uma extensão da biblioteca do jQuery que
implementa uma nova funcionalidade.
S Praticamente qualquer efeito, ação ou manipulação que
você consiga imaginar já deve possuir um plugin. Caso
contrário, quem sabe você mesmo não desenvolve um?