Javascript

672 visualizações

Publicada em

0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
672
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
51
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Javascript

  1. 1. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II c Programa¸˜o Web ca Javascript Ivo Calado Instituto Federal de Educa¸˜o, Ciˆncia e Tecnologia de Alagoas ca e 6 de Novembro de 20121 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  2. 2. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cRoteiro 1 Introdu¸˜o ca 2 B´sico do JavaScript a 3 JavaScript avan¸ado c 4 JavaScript avan¸ado II c2 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  3. 3. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cO que ´ Javascript eO que vimos at´ aqui? e Linguagens que possuem como foco a visualiza¸˜o da ca informa¸˜o ca N˜o possibilitam a execu¸˜o de fluxos de c´digo a ca o3 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  4. 4. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cO que ´ Javascript eO que vimos at´ aqui? e Linguagens que possuem como foco a visualiza¸˜o da ca informa¸˜o ca N˜o possibilitam a execu¸˜o de fluxos de c´digo a ca o N˜o s˜o destinadas a programadores!! a a3 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  5. 5. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cO que ´ Javascript eO que vimos at´ aqui? e Linguagens que possuem como foco a visualiza¸˜o da ca informa¸˜o ca N˜o possibilitam a execu¸˜o de fluxos de c´digo a ca o N˜o s˜o destinadas a programadores!! a a JavaScript foi projetado para adicionar interatividade ` a p´ginas HTML a Trata-se de uma linguagem de script Trata-se de uma linguagem interpretada3 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  6. 6. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cO que ´ Javascript eO que vimos at´ aqui? e Linguagens que possuem como foco a visualiza¸˜o da ca informa¸˜o ca N˜o possibilitam a execu¸˜o de fluxos de c´digo a ca o N˜o s˜o destinadas a programadores!! a a JavaScript foi projetado para adicionar interatividade ` a p´ginas HTML a Trata-se de uma linguagem de script Trata-se de uma linguagem interpretada O que ´ uma linguagem interpretada? e3 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  7. 7. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cO que ´ Javascript eO que vimos at´ aqui? e Linguagens que possuem como foco a visualiza¸˜o da ca informa¸˜o ca N˜o possibilitam a execu¸˜o de fluxos de c´digo a ca o N˜o s˜o destinadas a programadores!! a a JavaScript foi projetado para adicionar interatividade ` a p´ginas HTML a Trata-se de uma linguagem de script Trata-se de uma linguagem interpretada O que ´ uma linguagem interpretada? e Significa que o script ´ executada sem uma pr´via compila¸˜o e e ca3 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  8. 8. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cO que ´ Javascript eCuriosidades Qual a rela¸˜o entre Java e JavaScript? ca4 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  9. 9. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cO que ´ Javascript eCuriosidades Qual a rela¸˜o entre Java e JavaScript? ca Nenhuma. Trata-se de linguagens completamente diferentes. Uma criada pela Sun e a outra pela Netscape!4 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  10. 10. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cO que ´ Javascript eCuriosidades Qual a rela¸˜o entre Java e JavaScript? ca Nenhuma. Trata-se de linguagens completamente diferentes. Uma criada pela Sun e a outra pela Netscape! Qual o nome oficial da linguagem JavaScript? ECMAScript! Desenvolvido e mantido pela ECMA International Organization4 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  11. 11. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cHello World!Hello World Para adicionar algum script JavaScript basta fazer uso da tag script tendo como valor do campo type: text/javascript <html> <body> < s c r i p t type=" text / javascript "> document . w r i t e ( " <h1 > Hello World ! </ h1 >" ) ; </ s c r i p t> </ body> </ html> document.write ´ a maneira padr˜o para escrita na sa´ e a ıda!5 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  12. 12. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cHello World!Como tornar JavaScript compat´ com navegadores ıvelantigos? Deve-se fazer uso dos coment´rios HTML para “esconder” o a c´digo JavaScript do navegador para manter a o retrocompatibilidade! <html> <body> < s c r i p t type=" text / javascript "> <!−− document . w r i t e ( " Hello World !" ) ; //−−> </ s c r i p t> </ body> </ html>6 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  13. 13. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cOnde colocar o c´digo JavaScript? oNo HEAD? Scripts colocados na se¸˜o HEAD n˜o s˜o executados ca a a imediatamente e devem ser localizados em fun¸˜es! co <html> <head> < s c r i p t type=" text / javascript "> f u n c t i o n message ( ) { a l e r t ( " This alert box was called with the onload event " ); } </ s c r i p t> </ head> <body on l oa d=" message () "> </ body> </ html>7 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  14. 14. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cOnde colocar o c´digo JavaScript? oNo Body? Se vocˆ n˜o deseja que seu script esteja em uma fun¸˜o ou e a ca que ele seja destinado a escrever conte´do na tela ent˜o u a coloque-o na se¸˜o body! ca <html> <head></ head> <body> < s c r i p t type=" text / javascript "> document . w r i t e ( " This message is written by JavaScript " ) ; </ s c r i p t> </ body> </ html>8 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  15. 15. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cOnde colocar o c´digo JavaScript? oUsando em um arquivo externo? Se vocˆ deseja compartilhar seu c´digo JavaScript entre e o diversas p´ginas, pode-se fazer uso de uma p´gina externa a a <html> <head> < s c r i p t type=" text / javascript " s r c=" xxx . js "></ s c r i p t> </ head> <body on l oa d=" helloworld () "> </ body> </ html>9 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  16. 16. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cComandosUso do ponto e v´ ırgula Em JavaScript, ´ facultativo o uso do ; (ponto e v´ e ırgula) para delimitar o fim de um comando! <html> <body> < s c r i p t type=" text / javascript "> document . w r i t e ( " Fim de linha COM ponto e virgula " ) ; document . w r i t e ( " Fim de linha SEM ponto e virgula " ) </ s c r i p t> </ body> </ html>10 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  17. 17. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cComandosPulando linha em JavaScript Como vocˆ deve ter percebido no exemplo anterior, as duas e frases ficaram na mesma linha Este comportamento acontece porque toda sa´ de enviada ıda pelo JavaScript ´ tratata como c´digo HTML. Por isso, e o deve-se fazer uso do “<br/>” ao final da frase document . w r i t e ( " Fim de linha COM ponto e virgula < br />" ) ; document . w r i t e ( " Fim de linha SEM ponto e virgula < br />" )11 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  18. 18. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cComandosComent´rios de linhas e multilinhas a JavaScript oferece dois tipos de coment´rios “//” e “/* */” a A semˆntica ´ a mesma do que acontece em linguagens como a e Java e C++ <html> <body> < s c r i p t type=" text / javascript "> /∗ The c o d e b e l o w w i l l w r i t e one h e a d i n g ∗/ document . w r i t e ( " <h1 > This is a heading </ h1 >" ) ; </ s c r i p t> </ body> </ html>12 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  19. 19. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cUsando vari´veis aUsando vari´veis a Vari´veis em JavaScript tem a mesma semˆntica que em a a outras linguagens, isto ´, armazenar informa¸˜es na mem´ria e co o Assim como o restante do JavaScript, s˜o case-sensitive a Podem ser iniciadas por [aA-zZ], ou $ A partir do segundo caracter poder ser dos seguintes tipos [aA-zZ], [0-9], ou $13 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  20. 20. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cUsando vari´veis aExemplo do uso de vari´veis a <html> <body> < s c r i p t type=" text / javascript "> var firstname ; f i r s t n a m e=" Hege " ; document . w r i t e ( f i r s t n a m e ) ; document . w r i t e ( " <br />" ) ; f i r s t n a m e=" Tove " ; document . w r i t e ( f i r s t n a m e ) ; </ s c r i p t> </ body> </ html>14 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  21. 21. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cUsando vari´veis aUso de vari´veis n˜o declaradas a a ´ E poss´ atribuir valores ` vari´veis ainda n˜o declaradas. ıvel a a a <html> <body> < s c r i p t type=" text / javascript "> f i r s t n a m e=" Hege " ; </ s c r i p t> </ body> </ html> Nestes caso, a vari´vel ´ criada no momento da atribui¸˜o! a e ca15 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  22. 22. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cUsando vari´veis aArrays Em JavaScript ´ poss´ criar array para armazenamento de e ıvel diversos tipos de objetos Os objetos n˜o precisam ser do mesmo tipo a Existem 4 tipos de instancia¸˜o! ca var myCars=new A r r a y ( ) ; var myCars=new A r r a y ( 1 0 ) ; var myCars=new A r r a y ( " Saab " , " Volvo " , " BMW " ) ; var myCars =[" Saab " , " Volvo " , " BMW " ] ;16 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  23. 23. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cUsando vari´veis aIndexando arrays Assim como Java, arrays em JavaScript s˜o indexados a partir a da posi¸˜o 0 ca v a r myCars =[" Saab " , " Volvo " , " BMW " ] ; document . w r i t e ( myCars [ 0 ] ) // I m p r i m e Saab17 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  24. 24. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cUsando vari´veis aUnindo arrays Em JavaScript ´ poss´ unir dois arrays de maneira bastante e ıvel simples < s c r i p t type=" text / javascript "> v a r p a r e n t s = [ " Jani " , " Tove " ] ; v a r c h i l d r e n = [ " Cecilie " , " Lone " ] ; var family = parents . concat ( c h i l d r e n ) ; document . w r i t e ( f a m i l y ) ; </ s c r i p t>18 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  25. 25. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cUsando vari´veis aUnindo todos elementos de um array em uma string ´ E poss´ unir todos os elementos de um array em uma unica ıvel ´ string atrav´s do m´todo join e e v a r f r u i t s = [ " Banana " , " Orange " , " Apple " , " Mango " ] ; document . w r i t e ( f r u i t s . j o i n ( ) + " <br />" ) ; // U t i l i z a o s e p a r a d o r p a d r ˜ o " ," a document . w r i t e ( f r u i t s . j o i n ( "+" ) + " <br />" ) ; // U t i l i z a o s e p a r a d o r passado por parˆmetro a document . w r i t e ( f r u i t s . j o i n ( " and " ) ) ; // U t i l i z a o s e p a r a d o r passado por parˆmetro a </ s c r i p t>19 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  26. 26. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cUsando vari´veis aExerc´ ıcio Pesquisar e criar exemplos para os seguintes m´todos de um array: e push pop reverse shift slice sort unshift (se poss´ ıvel, testar no Firefox e IE)20 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  27. 27. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cUsando vari´veis aO objeto String Em JavaScript o objeto String possui as seguintes propriedades/m´todos e length toUpperCase() big() small() bold() italics() fixed() strike() etc21 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  28. 28. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cUsando vari´veis aExerc´ para casa! ıcio Pesquisar a utiliza¸˜o dos objetos: ca Date Boolean Math RegExp22 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  29. 29. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cUsando vari´veis aOperadores aritm´ticos e JavaScript oferece 7 operadores aritm´ticos (+, -, *, /, %, e ++, –)23 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  30. 30. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cUsando vari´veis aOperadores aritm´ticos e JavaScript oferece 7 operadores aritm´ticos (+, -, *, /, %, e ++, –) Al´m disso, s˜o oferecidos os operadores de atribui¸˜o e a ca correspondentes (=, +=, -=. *=, /= e %=)23 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  31. 31. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cUsando vari´veis aConcatena¸˜o de strings ca O operador “+” pode ser utilizado tamb´m no processo de e concatena¸˜o de strings ca Se pelo menos um dos operandos for uma string ent˜o ser´ a a realizado a concatena¸˜o ca v1 = 20 v2 = " 11 " v3 = v1 + v2 Ir´ resultar na string 2011 e n˜o no n´mero 31!!! a a u24 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  32. 32. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cUsando vari´veis aOperadores de compara¸˜o ca JavaScript especifica 7 operadores de compara¸˜o: ==, ca ===, !=, >, <, >=, <= e < s c r i p t type=" text / javascript "> x = 5 p r i n t l n ( x == 5 ) p r i n t l n ( x == "5" ) p r i n t l n ( x === 5 ) p r i n t l n ( x === "5" ) </ s c r i p t>25 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  33. 33. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cUsando vari´veis aOperadores de compara¸˜o ca JavaScript especifica 7 operadores de compara¸˜o: ==, ca ===, !=, >, <, >=, <= e < s c r i p t type=" text / javascript "> x = 5 p r i n t l n ( x == 5 ) p r i n t l n ( x == "5" ) p r i n t l n ( x === 5 ) p r i n t l n ( x === "5" ) </ s c r i p t> 3 operadores l´gicos: &&, ||, ! o25 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  34. 34. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cUsando vari´veis aOperadores tern´rio a Assim como Java e C++, em JavaScript ´ poss´ fazer uso do e ıvel operador tern´rio. a Qual o resultado da vari´vel valor ap´s a execu¸˜o do seguinte a o ca script? < s c r i p t type=" text / javascript "> x = 5 v a l o r = ( x != 5 ) ? " string de teste " : 10 </ s c r i p t>26 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  35. 35. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cControle de fluxoExpress˜es condicionais: if-else o A utiliza¸˜o da estrutura de sele¸˜o if-else ´ semelhante ` ca ca e a Java i f ( condition ) { statement 1; statement 2; } // Os d o i s comandos s ˜ o e x e c u t a d o s a i f ( condition ) statement 1; statement 2; statement 3; // Apenas o p r i m e i r o comando ´ e x e c u t a d o e27 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  36. 36. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cControle de fluxoExemplo if-else <html> <body> < s c r i p t type=" text / javascript "> v a r d = new Date ( ) ; var time = d . getHours () ; i f ( time < 12) { document . w r i t e ( " <b > Bom dia </b >" ) ; } else document . w r i t e ( " <b > Boa tarde </b >" ) ; </ s c r i p t> </ body> </ html>28 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  37. 37. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cControle de fluxoExerc´ ıcio Criar uma p´gina HTML que possua um script JavaScript que faz a uso da fun¸˜o Math.random() para gerar n´meros aleat´rios e ca u o caso o valor for maior que 0.5 criar o link para a p´gina do Google. a Caso contr´rio, redirecionar para a p´gina globo.com . a a29 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  38. 38. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cControle de fluxoExerc´ II ıcio Altere o exemplo if.html para que, dependendo da hora obtida no sistema seja impressa a aula atual (1a , 2a , 3a , intervalo, 4a , 5a , 6a ). Sabe-se que o m´todo getMinutes() do objeto Date retorna e os minutos atuais e getHours() retorna a hora atual.30 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  39. 39. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cControle de fluxoO comando For Em JavaScript, a estrutura for segue a mesma sintaxe da linguagem Java f o r ( v a r=s t a r t v a l u e ; v a r<=e n d v a l u e ; v a r=v a r+i n c r e m e n t ) { // c o d i g o a s e r e x e c u t a d o }31 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  40. 40. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cControle de fluxoO comando For Em JavaScript, a estrutura for segue a mesma sintaxe da linguagem Java f o r ( v a r=s t a r t v a l u e ; v a r<=e n d v a l u e ; v a r=v a r+i n c r e m e n t ) { // c o d i g o a s e r e x e c u t a d o } As estruturas while e do-while seguem a mesma estrutura da linguagem JavaScript31 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  41. 41. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cControle de fluxoExerc´ ıcio Implemente uma p´gina Web que escreva os 6 tipos de a cabe¸alhos fazendo uso do comando for c32 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  42. 42. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cControle de fluxoControles de fluxo adicionais break, continue e for..in Qual a diferen¸a entre break e continue c33 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  43. 43. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cControle de fluxoControles de fluxo adicionais break, continue e for..in Qual a diferen¸a entre break e continue c continue interrompe a itera¸˜o atual e inicia na pr´xima itera¸˜o. ca o ca break interrompe todo o loop.33 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  44. 44. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cControle de fluxofor..in A estrutura for..in tem a mesma semˆntica do for extendido a do Java Visa realizar itera¸˜o sobre arrays e listas ca var x ; v a r m y c a r s = new A r r a y ( ) ; m y c a r s [ 0 ] = " Saab " ; m y c a r s [ 1 ] = " Volvo " ; m y c a r s [ 2 ] = " BMW " ; f o r ( x i n mycars ) { document . w r i t e ( m y c a r s [ x ] + " <br />" ) ; }34 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  45. 45. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II c Caixa de di´logo e Ciclo de a vida das vari´veis a35 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  46. 46. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cCaixas PopupCaixas Popup JavaScript oferece trˆs tipos de caixas de di´logo e a AlertBox: tem como objetivo informar ao usu´rio alguma a mensagem ConfirmBox: recebe uma entrada do usu´rio a partir da a confirma¸˜o ca PromptBox: recebe uma entrada do usu´rio a partir de uma a entrada de texto36 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  47. 47. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cCaixas PopupAlert Box <head> < s c r i p t type=" text / javascript "> function show alert () { a l e r t ( " Hello ! I am an alert box !" ) ; } </ s c r i p t> </ head> <body> <i n p u t type=" button " o n c l i c k=" show_alert () " v a l u e=" Show alert box " /> </ body>37 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  48. 48. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cCaixas PopupConfirm Box <html> <head> < s c r i p t type=" text / javascript "> function show confirm () { v a r r=c o n f i r m ( " Press a button !" ) ; i f ( r==t r u e ) { a l e r t ( " You pressed OK !" ) ; } else { a l e r t ( " You pressed Cancel !" ) ; } } </ s c r i p t> </ head> <body> <i n p u t type=" button " o n c l i c k=" show_confirm () " v a l u e= " Show a confirm box " /> </ body> </ html>38 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  49. 49. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cCaixas PopupPrompt Box <html> <head> < s c r i p t type=" text / javascript "> function disp prompt () { v a r fname=prompt ( " Please enter your name :" , " Your name ") a l e r t ( fname ) ; } </ s c r i p t> </ head> <body> <i n p u t type=" button " o n c l i c k=" disp_prompt () " v a l u e=" Display a prompt box " /> </ body> </ html>39 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  50. 50. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cFun¸˜es coFun¸oes c˜ Fun¸˜es em JavaScript tem o mesmo prop´sito que em co o linguagens como Java e C++ Possibilitam o re´so de c´digo u o Fun¸˜es podem ser definidas no HEAD, BODY ou num co arquivo externo .js, por´m recomenda-se n˜o adicionar na e a se¸˜o BODY ca f u n c t i o n n o m e d a f u n c a o ( v a r 1 , v a r 2 , . . . , varX ) { some c o d e }40 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  51. 51. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cFun¸˜es coCiclo de vida de vari´veis em JavaScript a Se vocˆ declara uma vari´vel dentro de uma fun¸˜o, ela ter´ e a ca a escopo apenas local e quando a fun¸˜o for finalizada a ca vari´vel ser´ destru´ a a ıda Contudo, vari´veis criadas fora de fun¸˜es podem ser a co visualizadas de qualquer parte da p´gina, chamadas vari´veis a a globais e existem desde o momento que a p´gina ´ carregada a e at´ quando ela for fechada e41 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  52. 52. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cEventos Eventos42 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  53. 53. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cEventosEventos Eventos s˜o a¸˜es que podem ser detectadas em JavaScript a co A partir da implementa¸˜o de eventos, podemos criar p´ginas ca a dinˆmicas a Cada elemento em HTML tˆm um pr´prio conjunto de e o eventos que podem ser capturados A especifica¸˜o dos eventos que ser˜o “escutados” ´ definido ca a e nas tags HTML43 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  54. 54. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cEventosExemplos de Eventos Clique do mouse Carregamento de uma p´gina Web ou imagem a Mover o mouse sobre uma certa ´rea da p´gina Web a a Selecionar um campo de entrada de dados em um formul´rio a Submeter um formul´rio a44 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  55. 55. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cEventosExemplos de Eventos Clique do mouse Carregamento de uma p´gina Web ou imagem a Mover o mouse sobre uma certa ´rea da p´gina Web a a Selecionar um campo de entrada de dados em um formul´rio a Submeter um formul´rio a Eventos s˜o normalmente usados em combina¸˜es com fun¸˜es e, a co co portanto, a fun¸˜o n˜o ser´ executado at´ que o evento seja ca a a e lan¸ado c44 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  56. 56. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cEventosEventos OnLoad e OnUnload Esta classe de eventos s˜o lan¸ados no carregamento e no a c fechamento de uma p´gina HTML a OnLoad geralmente ´ utilizado para checar o tipo de browser e utilizado ou a vers˜o do navegador a Um outro uso seria setar Cookies quando o usu´rio entra ou a sai da p´gina Web a45 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  57. 57. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cEventosEventos OnFocus, OnBlur e OnChange OnFocus e OnBlur s˜o eventos complementares. O primeiro ´ a e lan¸ado quando um elemento ganha foco e o segundo quando c perde foco Onchange, por sua vez, ´ lan¸ado apenas se o conte´do do e c u elemento tiver sido alterado46 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  58. 58. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cEventosEvento OnSubmit Evento lan¸ado antes de um fomul´rio ser enviado c a Geralmente usado para fazer a valida¸˜o dos campos do ca formul´rio a <form method=" post " a c t i o n=" destino . htm " o n s u b m i t=" return checkForm () ">47 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  59. 59. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cEventosEventos OnMouseOver e OnMouseOut Controlam quando o mouse entra e sai de um componente respectivamente <a h r e f=" http :// www . google . com . br /" onMouseOver=" mouse () ; return true ">g o o g l e</a> <a h r e f=" http :// g1 . globo . com /" onMouseOut=" mouse2 () ; return true ">G1</a>48 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  60. 60. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cEventosEvento OnClick Evento lan¸ado quando o usu´rio clica em um componente c a vis´ da tela ıvel Um exemplo de utiliza¸˜o ´ em bot˜es de submiss˜o. Caso a ca e o a fun¸˜o JavaScript retorne falso o formul´rio n˜o ´ submetido ca a a e <i n p u t type=" submit " o n c l i c k=" return checkForm () ;" v a l u e=" Submeter " i d=" input3 "/>49 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  61. 61. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cTratamento de exce¸oes c˜ Tratamento de Exce¸˜es co50 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  62. 62. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cTratamento de exce¸oes c˜Tratamento de exce¸oes c˜ Assim como outras linguagens de programa¸˜o, JavaScript ca oferece suporte ao tratamento de erros atrav´s do uso de e exce¸˜es co A sintaxe em JavaScript ´ bastante semelhante ao que e acontece em C++ e Java try { // B l o c o que pode l a n c a r e x c e ¸ ˜ o ca } catch ( ex ) { // Tratamento de e x c e c ˜ o ¸a s t r = e x . message // r e c u p e r a o e r r o g e r a d o }51 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  63. 63. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cTratamento de exce¸oes c˜A cl´usula throw a Al´m de capturar exce¸˜es, podemos lan¸´-las e co ca Para tal, fazemos uso da cl´usula throw a Ela possui a mesma semˆntica do comando an´logo, em Java, a a throw! i f ( x >10) { t h r o w " Err1 " ; } else i f ( x<0 ) { t h r o w " Err2 " ; }52 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  64. 64. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cTratamento de exce¸oes c˜Exerc´ ıcio! :) Pesquisar sobre o objeto navigator Qual a fun¸˜o deste objeto? ca53 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  65. 65. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cTratamento de exce¸oes c˜Exerc´ ıcio! :) Pesquisar sobre o objeto navigator Qual a fun¸˜o deste objeto? ca O objeto navigator cont´m todas as informa¸˜es sobre o browser e co visitante, como: Nome da aplica¸˜o ca Vers˜o do navegador a Plataforma etc53 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  66. 66. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cTratamento de exce¸oes c˜Exerc´ 2! :) ıcio Pesquisar sobre eventos relacionados a tempo setTimeout e clearTimeout54 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  67. 67. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cHTML DOM HTML DOM55 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  68. 68. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cHTML DOMO que ´? e O que ´? e56 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  69. 69. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cHTML DOMO que ´? e O que ´? e De acordo com o W3C o DOM (Documento Object Model) ´ e definido como: ”The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.”56 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  70. 70. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cHTML DOMO que ´? e O que ´? e De acordo com o W3C o DOM (Documento Object Model) ´ e definido como: ”The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.” Em resumo HTML DOM == HTML + DOM56 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  71. 71. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cHTML DOMEm outras palavras... Trata-se de um padr˜o de modelagem dos elementos HTML a como objetos Uma abordagem padr˜o para acesso e altera¸˜o do HTMl a ca programa¸˜ co Um padr˜o W3C a Em outras palavras: O HTML DOM ´ um padr˜o para e a recupera¸˜o, altera¸˜o, adi¸˜o ou remo¸˜o de elementos ca ca ca ca HTML e suas propriedades57 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  72. 72. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cHTML DOMN´s DOM o O DOM segue a mesma filosofia de modelagem do JDOM, ou seja: O documento inteiro ´ um n´ e o Cada elemento HTML ´ um n´ e o O texto dos elementos HTML s˜o n´s a o Cada atributo do HTML ´ um atributo de um n´ e o Coment´rios s˜o n´s de coment´rio a a o a58 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  73. 73. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cHTML DOMExemplo <html> <head> < t i t l e>DOM T u t o r i a l</ t i t l e> </ head> <body> <h1>DOM L e s s o n one</h1> <p>H e l l o w o r l d !</p> </ body> </ html>59 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  74. 74. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cHTML DOMNavegando entre a hierarquia de n´s o60 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  75. 75. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cHTML DOMPropriedades b´sicas de um elemento HTML DOM a x.innerHTML - conte´do textual de x u x.nodeName - o nome de x x.nodeValue - o valor do x x.parentNode - referˆncia ao elemento pai de x e x.childNodes - N´s filhos de x o x.attributes - n´s atributos de x o61 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  76. 76. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cHTML DOMA propriedade innerHTML ´ E utilizado para recuperar ou substituir o conte´do de um u elemento HTML, inclusive <html> e <body> Pode ser utilizada tamb´m para visualizar o c´digo fonte de e o uma p´gina alterada dinamicamente a <p i d=" intro ">H e l l o World !</p> < s c r i p t type=" text / javascript "> t x t=document . g e t E l e m e n t B y I d ( " intro " ) . innerHTML ; document . w r i t e ( " <p > The text from the intro paragraph : " + t x t + " </p >" ) ; </ s c r i p t>62 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  77. 77. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cHTML DOMPropriedades childNodes e nodeValue Uma segunda forma de obten¸˜o ´ a partir da combina¸˜o das ca e ca propriedades childNodes e nodeValue <p i d=" intro ">H e l l o World !</p> < s c r i p t type=" text / javascript "> t x t=document . g e t E l e m e n t B y I d ( " intro " ) . c h i l d N o d e s [ 0 ] . nodeValue ; document . w r i t e ( " <p > The text from the intro paragraph : " + t x t + " </p >" ) ; </ s c r i p t>63 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  78. 78. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cHTML DOMAcessando N´s o Existem basicamente trˆs forma de acessar os n´s da ´rvore e o a HTML: getElementById getElementByTagName Navegando na estrutura dos n´s o64 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  79. 79. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cHTML DOMgetElementById Trata-se do m´todo mais utilizado para recupera¸˜o de valores e ca Recebe como o id do objeto a ser acessado Ver exemplo...65 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  80. 80. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cHTML DOMgetElementsByTagName Retorna todos os elementos da tag passada por parˆmetro a document . getElementsByTagName ( "p" ) ; // R e t o r n a t o d o s o s e l e m e n t o s p do HTML66 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  81. 81. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cHTML DOMgetElementsByTagName Retorna todos os elementos da tag passada por parˆmetro a document . getElementsByTagName ( "p" ) ; // R e t o r n a t o d o s o s e l e m e n t o s p do HTML Qual o significado do c´digo abaixo? o document . g e t E l e m e n t B y I d ( ’ main ’ ) . getElementsByTagName ( "p ") ;66 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  82. 82. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cHTML DOMgetElementsByTagName Retorna todos os elementos da tag passada por parˆmetro a document . getElementsByTagName ( "p" ) ; // R e t o r n a t o d o s o s e l e m e n t o s p do HTML Qual o significado do c´digo abaixo? o document . g e t E l e m e n t B y I d ( ’ main ’ ) . getElementsByTagName ( "p ") ; Os itens podem s˜o indexados como em um vetor!! a66 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  83. 83. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cHTML DOMExerc´ ıcio Criar um formul´rio que antes de ser submetido ser´ checado por a a valores vazio. E caso isso ocorra, cancele a transmiss˜o e imprima a um texto na cor vermelha indicando que houve erro.67 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  84. 84. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cHTML DOMAlterando as propriedades de um elemento At´ agora vimos como alterar o conte´do de um elemento e u HTML via propriedade innerHTML Por´m, ´ poss´ alterar o conte´do diretamente sem e e ıvel u “reescrever” um novo HTML <html> <body> < s c r i p t type=" text / javascript "> document . body . b g C o l o r=" lavender " ; </ s c r i p t> </ body> </ html>68 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  85. 85. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cHTML DOMExemplo 2 <html> <body> <p i d=" p1 ">H e l l o World !</p> < s c r i p t type=" text / javascript "> document . g e t E l e m e n t B y I d ( " p1 " ) . innerHTML=" New text !" ; </ s c r i p t> </ body> </ html>69 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  86. 86. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cHTML DOMMudando um elemento a partir de eventos ´ E poss´ alterar uma propriedade diretamente a partir do ıvel lan¸amento de um evento c <html> <body> <i n p u t type=" button " o n c l i c k=" document . body . bgColor =’ lavender ’; " v a l u e=" Change background color " /> </ body> </ html>70 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  87. 87. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cHTML DOMJavaScript + CSS Em JavaScript as regras CSS podem ser customizadas durante a execu¸˜o ca Para isso, faz-se uso da propriedade style de cada elemento < s c r i p t type=" text / javascript "> f u n c t i o n ChangeStyle () { document . g e t E l e m e n t B y I d ( " p1 " ) . s t y l e . c o l o r=" blue " ; document . g e t E l e m e n t B y I d ( " p1 " ) . s t y l e . f o n t F a m i l y=" Arial "; } </ s c r i p t>71 / 72 Ivo Calado IFALPrograma¸˜o Web ca
  88. 88. Introdu¸˜o ca B´sico do JavaScript a JavaScript avan¸ado c JavaScript avan¸ado II cHTML DOMExerc´ ıcio Altere o exerc´ anterior para que as propriedades sejam ıcio customizadas via CSS72 / 72 Ivo Calado IFALPrograma¸˜o Web ca

×