curso de desenvolvimento web - módulo 03 - javascript

S

Desenvolvimento Web Com HTML, CSS e JavaScript

Prof. Rodrigo Santa Maria

[email protected]

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: [email protected]

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 [email protected] 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>  </SCRIPT> </BODY>

Exemplos de JavaScript: “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

Exemplos de JavaScript: “Conteúdo Personalizado”

<BODY> <SCRIPT language="JavaScript">  </SCRIPT> </BODY>

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

<HTML> <HEAD> <TITLE>Página com nome do leitor</TITLE> <SCRIPT language="JavaScript">  </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">  </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


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 language="JavaScript">  </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 (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">  </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">  </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">  </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">  </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

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


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>


Data: 21/01 à 25/01 Horário: 19:00 às 22:40


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>


Data: 21/01 à 25/01 Horário: 19:00 às 22:40


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 protected]&cpf=123456789012

Rodrigo

[email protected]

123456789012

Nome: Email: Cpf:

Serializando em array

$(“#cadastro”).serializeArray(); [ { name = “nome”, value = “rodrigo” }, { name = “email”, value = “[email protected]” }, { 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 [email protected] facebook.com/rodrigobsm

Contato