View
484
Download
2
Category
Preview:
Citation preview
S
Desenvolvimento Web Com HTML, CSS e JavaScript
Prof. Rodrigo Santa Maria
rodrigo@digitallymade.com.br
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
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;
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;
Desenvolvimento Web MÓDULO 03
S Pauta:
Ø Introdução ao Javascript
Ø Funcionalidades
Ø Exemplos
Ø Frameworks Javascript
Ø Introdução ao jQuery
Ø Funcionalidades
Ø Exemplos
S
Introdução ao Javascript
Muito obrigado! Prof. Rodrigo Santa Maria rodrigo@digitallymade.com.br facebook.com/rodrigobsm
Contato
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
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
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 = ”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
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>
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
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é
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>
function Titulo(){ document.write("<H1 align=center><I>Curso 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); }
geral.js
<HTML> <HEAD> <TITLE>1 - Introdução</TITLE> <SCRIPT language="JavaScript" src="geral.js"> </SCRIPT> </HEAD> <BODY> <SCRIPT>Titulo();</SCRIPT> <H2>Capítulo 1 - Introdução</H2> <P>Blá blá blá...</P> <SCRIPT>Rodape();</SCRIPT> </BODY>
capitulo1.html <HTML> <HEAD> <TITLE>2 - Fundamentos</TITLE> <SCRIPT language="JavaScript" src="geral.js"> </SCRIPT> </HEAD> <BODY> <SCRIPT>Titulo();</SCRIPT> <H2>Capítulo 2 - Fundamentos</H2> <P>Blá blá blá...</P> <SCRIPT>Rodape();</SCRIPT> </BODY>
capitulo2.html
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
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
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
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)
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):",""); }
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; }
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()
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");
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
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 !!!
Eventos e Objetos 3 • Eventos • Objetos
• Window • Location • History • Document • Form
• TextArea, Text, Password • Select
• Frame • Image
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?')">
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
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
Objetos
Window
Frame
Document
Location
History Link
Image
Area
Anchor
Applet
Plugin
Form Option
TextArea
Text
Password
Radio
Select
Reset
Submit
FileUpload
Hidden
Button
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 à 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
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“
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(); }
Abrir uma janela e escrever o conteúdo dinamicamente:
Window (exemplo)
<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>
Abrir uma página “bloqueadora”:
<BODY> <SCRIPT><!-- window.open("google.html", "", "width=300,height=100"); //--> </SCRIPT> </BODY> index.html
google.html
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
Location (propriedades e métodos)
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 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
Location (exemplo)
<BODY> <SCRIPT language="JavaScript"> <!-- alert("Você está em "+ window.location.href); novoHREF=prompt("entre com um novo endereço:","http://"); window.location.href=novoHREF; //--> </SCRIPT> <BODY>
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>
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";
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 encoding conteú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
<HTML> <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(); } //--> </SCRIPT> </HEAD> <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>
TextArea, Text, Password (exemplo)
elements[0]=Caixa de texto “txtNome”; elements[1]=Caixa de texto “txtLogin”; elements[2]=Botão “btnCadastrar”;
<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;
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
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
§ 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
REP
RES
ENTA
ÇÃO
§ Indeterminado » NaN (Not a Number)
§ Infinito: » Infinity » -Infinity
VALO
RES
ES
PECIA
IS
§ Decimal » 734.25
§ Hexadecimal (Ex.: cores) » 0xFF87C1
§ Octal » 0677
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
Operadores
S Aritméticos S * multiplicação
S / divisão
S + soma
S - subtração
S % resto
S String S + concatenação
x = 5 / 3; x = 5 % 3; x = 5 + (5 - 2) / 2; x = (5 + (5 – 2)) / 2;
nome = ”Fabio"; sobreNome = ”Pereira"; meioNome = ”Marques"; nomeCompleto = nome + " " + meioNome + " " + sobreNome;
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; */
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) {...}
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!");}
Tomada de Decisão
S if ... else
if (condição) { // instruções caso condição==true } else { // instruções caso condição==false }
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; }
Funções
S function NomeFuncao(param1, param2) {...}
function Soma(x, y) { return x + y; }
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)
Exemplo: Antes de enviar o formulário, verificar se o campo ‘Nome’ foi preenchido
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>
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:
<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
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
Exercício: Fazer um formulário 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() 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
String
txt = "Pedro" charAt(n) txt.charAt(2) ⇒ ”d"
indexOf("sub-string") txt.indexOf(”e") ⇒ 1
txt.indexOf(”d") ⇒ 2 txt.indexOf("k") ⇒ -1 *não 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
0 1 2 3 4
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();
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
Array (continuação)
produtos = "1:Porta retrato PHT:21.00;2:Abajur Róse: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 Róse”, 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("João Grandão")+ "; 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);
}
}
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
S
Introdução ao jQuery
Conteúdo
S Introdução 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 Conteúdo S Eventos S Animação S Funções jQuery S Ajax S Formulários
Em 1995 nasce o JavaScript
VBSCRIPT
JAVASCRIPT
JavaScript hoje
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
jQuery não é nuhum milagre!
S Você ainda precisa de JavaScript
S jQuery é pesado
S Construa agora, melhore depois
S
Document Object Model (DOM)
DOM
<html> <head> <title>jQuery na Prática</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
li li li jQuery na Prática
Curso de jQuery
Rodrigo Santa Maria
JS DOM jQuery
S
Preparando o Ambiente
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>
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!)
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
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
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
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
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
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>”]
Espaço 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 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”
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
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)
S
Manipulando CSS
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
Definindo múlVplos atributos
UVlizando métodos 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 Conteúdo
CSS Apresentação
JavaScript Interação
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
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
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
S
Manipulando Conteúdo
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>
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”]
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
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
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
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
Append
$(“ul”).append(“<li>Seletores jQuery</li>”); Cronograma • Fundamentos JavaScript • DOM • jQuery • Seletores jQuery
Data: 21/01 à 25/01 Horário: 19:00 às 22:40
Prepend
$(“ul”).prepend(“<li>Seletores jQuery</li>”); Cronograma • Seletores jQuery • Fundamentos JavaScript • DOM • jQuery
Data: 21/01 à 25/01 Horário: 19:00 às 22:40
Before
$(“ul”).before(“<h3>Conteúdo</h3>”); Cronograma Conteúdo
• Fundamentos JavaScript • DOM • jQuery
Data: 21/01 à 25/01 Horário: 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 Horário: 19:00 às 22:40
S
Eventos
Como funciona
<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>
Click!
Timing
<html> <head> <title>jQuery na Prática</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>Horário: <span class=“hora”>19:00 às 22:40</span></p> </body> </html>
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!
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
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
Click
function esconder() { $(“p”).hide(); } $(“p”).click(esconder); Normalmente uVlizamos funções anônimas $(“p”).click(function () { $(“p”).hide(); });
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
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
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
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 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
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
S
Animações
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
slideUp, slideDown e slideToggle
$(“p”).slideUp(“slow”);
$(“p”).slideUp(1000, function () {
alert(“Concluiu a animação!”);
});
$(“p”).slideDown(“fast”);
$(“p”).slideToggle();
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();
S
Funções jQuery
Adicionando funções customizadas
$.fn.vazio = function () {
var value = $(this).val();
if (value == “”) {
return true;
}
else {
return false;
}
};
$(“input”).vazio();
S
Ajax
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 } });
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 });
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 });
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); });
S
Formulários
Serializando formulários
<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> $(“#cadastro”).serialize(); Retorna:
nome=Rodrigo&email=rodrigobsm.gm@gmail.com&cpf=123456789012
Rodrigo
Rodrigobsm.gm@gmail.com
123456789012
Nome: Email: Cpf:
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 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?
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/
Muito obrigado! Prof. Rodrigo Santa Maria rodrigo@digitallymade.com.br facebook.com/rodrigobsm
Contato
Recommended