curso de desenvolvimento web - módulo 03 - javascript

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

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çã”

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>

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>

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

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

Document

Location

History Link

Anchor

Applet

Plugin

Form Option

TextArea

Password

Select

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

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)

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

§  Indeterminado »  NaN (Not a Number)

§  Infinito: »  Infinity »  -Infinity

§  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

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:

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

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

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

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

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

Obs: setTimeout() e clearTimeout() são funções nativas

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

Document Object Model (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>

head body

title h1#titulo p.autor ul

li li li jQuery na Prática

Curso de jQuery

Rodrigo Santa Maria

JS DOM jQuery

Preparando o Ambiente

h^p://jquery.com

Carregando jQuery

Local Library:

Hosted Libraries:

Verificando se o jQuery está carregado

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

jQuery $(“p”);

(Nome do elemento)

DOM html

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

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)

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

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

Cronograma •  Fundamentos JavaScript •  DOM •  jQuery