Curso de Desenvolvimento Web - Módulo 03 - JavaScript

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

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

</SCRIPT>
</BODY>

“Rodapé v1”
<BODY>
<SCRIPT language="JavaScript">

</SCRIPT>
</BODY>
OBS1:
nome é uma 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
“Conteúdo Personalizado”
<BODY>

</SCRIPT>
</BODY>

“Rodapé v2”
<BODY>

</SCRIPT>
</BODY>
OBS1:
document é uma objeto
OBS2:
document.lastModified é uma propriedade do documento ⇒ retorna
a data (mm/dd/aa) e hora da última modificação do documento

“Rodapé v3”
<HTML>
<HEAD>
<TITLE>Página com nome do leitor</TITLE>

</SCRIPT>
</HEAD>
<BODY>
<P>Aqui escrevo qualquer coisa</P>
Rodape();
</SCRIPT>
</BODY>
</HTML>
OBS:
Rodape() é uma função (definida pelo
programador) ⇒ escreve o rodapé

“Título e Rodapé, v1”
<HTML>
<HEAD>
<TITLE>Página com nome do leitor</TITLE>

</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>");
}
geral.js
<HTML>
<HEAD>
<TITLE>1 - Introdução</TITLE>
<SCRIPT language="JavaScript" src="geral.js">
</SCRIPT>
</HEAD>
<BODY>
<H2>Capítulo 1 - Introdução</H2>
<P>Blá blá blá...</P>
</BODY>
capitulo1.html
<HTML>
<HEAD>
<TITLE>2 - Fundamentos</TITLE>
<SCRIPT language="JavaScript" src="geral.js">
</SCRIPT>
</HEAD>
<BODY>
<H2>Capítulo 2 - Fundamentos</H2>
<P>Blá blá blá...</P>
</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

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)

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

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;
}

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()

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>
</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>
</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
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

Location
(exemplo)
<BODY>

</SCRIPT>
<BODY>

History
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
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
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

<HTML>
<HEAD>

</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>
</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
REPRESENTAÇÃO
§  Indeterminado
»  NaN (Not a Number)
§  Infinito:
»  Infinity
»  -Infinity
VALORES
ESPECIAIS
§  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">

</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">
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT language="javascript">

</SCRIPT>
</BODY></HTML>
Solução 1

if ( isNaN(texto) ) {return false}
else{ return ( parseInt(texto)==parseFloat(texto) ) }
}
Solução 2
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>");
}

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

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

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
lilili
jQuery na
Prática
Curso de
jQuery
Rodrigo
Santa
Maria
JS DOM jQuery

S
Preparando
o
Ambiente

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>

Veriﬁcando
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

jQuery

$(“p.autor”);
(Elemento + . + Classe)

DOM

html
body

Seletores
jQuery

jQuery

$(“.autor”);
(Somente a classe)

DOM

html
body

Seletores
jQuery

Seletores
jQuery

jQuery

$(“p#rodape”);
(Elemento + # + Id)

DOM

html
body

Resultado
da
Seleção

jQuery

$(“p”);

DOM

p#rodape à google.com/jquery-na-pratica

JavaScript

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

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)

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

Deﬁnindo
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>
</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”]

Deﬁnindo
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

Deﬁnindo
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

Deﬁnindo
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
ﬁnal
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

Como
funciona

<html>
<head>
</head>
<body>
<h2>Cronograma</h2>
<ul>
<li>DOM</li>
<li>jQuery</li>
</ul>
</body>
</html>
Click!

Timing

<html>
<head>
<script src=“jquery.js”></script>
<script>
$(“p”).hide();
</script>
</head>
<body>
<h2>Cronograma</h2>
<ul>
<li>DOM</li>
<li>jQuery</li>
</ul>
</body>
</html>

Timing

<html>
<head>
<script>
$(“p”).hide();
</script> à Nenhum parágrafo no documento!
</head>
<body>
<h2>Cronograma</h2>
<ul>
<li>DOM</li>
<li>jQuery</li>
</ul>
</body>
</html> à DOM está pronto!

Document
Ready

<html>
<head>
<script>
$(document).ready(function () {
$(“p”).hide();
});
</script>
</head>
<body>
<h2>Cronograma</h2>
<ul>
<li>DOM</li>
<li>jQuery</li>
</ul>
</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

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();

Adicionando
funções

customizadas

$.fn.vazio = function () {
var value = $(this).val();
if (value == “”) {
return true;
}
else {
return false;
}
};
$(“input”).vazio();

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
especiﬁcar
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);
});

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/

Curso de Desenvolvimento Web - Módulo 03 - JavaScript

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a Curso de Desenvolvimento Web - Módulo 03 - JavaScript

Mais de Rodrigo Bueno Santa Maria, BS, MBA

Curso de Desenvolvimento Web - Módulo 03 - JavaScript