Tratamento de Eventos para WEB                  Felipe Natale Munhoz            ´               ´                         ...
Tratamento de Eventos para WEBCOMPETENCIAˆTratar eventos para web utilizando linguagem script, observando a               ...
Tratamento de Eventos para WEBPilares: conhecimentos, habilidades e valores    Caracter´sticas da linguagem script: sintax...
Tratamento de Eventos para WEBMetodologia    Aula expositiva e dialogada           ´    Aula pratica                    ¸˜...
Tratamento de Eventos para WEBIndicadores e Desempenho                        ¸˜                        ´    Associa event...
¸˜JavaScript: Introducao    ´Historico     JavaScript foi criada em dezembro de 1995 por Brendan Eich        ´            ...
¸˜JavaScript: Introducao    ´Historico     Rapidamente JavaScript fez sucesso como linguagem     client-side possibilitand...
¸˜JavaScript: Introducao    ´Historico    Mesmo que JScript fosse compat´vel com JavaScript, ainda                        ...
¸˜JavaScript: IntroducaoCuriosidade                          ´    Atualmente JavaScript e a linguagem mais popular no gith...
¸˜JavaScript: Introducao     ¸˜Definicao               ´    JavaScript e uma Linguagem Script                   ´Linguagem ...
¸˜JavaScript: IntroducaoMitos                                                ´    Apesar de sua popularidade JavaScript ai...
¸˜JavaScript: IntroducaoO que pode ser feito          ¸˜            ´    Validacoes em formularios                       ´...
¸˜JavaScript: IntroducaoAntes de comecar!             ¸                         13 / 1
¸˜    JavaScript: Introducao     ´        ´    Codigo binario1   00110001   00000000   000000002   00110001   00000001   0...
¸˜    JavaScript: Introducao     ´    Codigo JavaScript1   var c = 0, t = 1;2   while (t <= 10) {3   c += t;4   t += 1;5  ...
¸˜    JavaScript: Introducao     ´    Codigo JavaScript1   var total = 0, count = 1;2   while (count <= 10) {3     total +...
¸˜JavaScript: IntroducaoImportante             ´    Escreva codigo leg´vel                      ı             ´    Escreva...
¸˜JavaScript: IntroducaoConceitos             ´Valores, variaveis, e controle defluxo                                    18...
´JavaScript: valores, variaveis e controle de fluxo                             ¸˜         ˜   Dentro do mundo da computaca...
´JavaScript: valores, variaveis e controle de fluxo       ´Tipos basicos de valores    Number    String    Boolean    Objec...
¸˜JavaScript: IntroducaoNumber                         21 / 1
´JavaScript: valores, variaveis e controle de fluxoNumber   143   13178   -20.3   3.56   0.3455   2.493e8                  ...
´JavaScript: valores, variaveis e controle de fluxoNumber                                          ˜   Em JavaScript todos ...
¸˜JavaScript: IntroducaoOperadores                         24 / 1
´JavaScript: valores, variaveis e controle de fluxo ´                        ´Numeros, operadores, aritmetica    134 + 6   ...
¸˜JavaScript: Introducao  ´Pratica  Numbers  Operadores        ´  Aritmetica                         26 / 1
¸˜JavaScript: IntroducaoString                         27 / 1
JavaScript: strings    Tipo de dado para armazenamento de texto    O texto deve sempre ficar entre aspas duplas    Como col...
JavaScript: strings1   var   exemplo1   =   "exemplo simples de string";2   var   exemplo2   =   "aspas duplas devem ser e...
JavaScript: strings                           ˜    Strings em JavaScript nao podem ser subtra´das ou                      ...
JavaScript: strings1   var exemplo1 = "uma " + "parte " + "da " + "string";                                               ...
JavaScript: operadores                                   ´        ˜   Todos os operadores que vimos ate agora sao chamados...
JavaScript: operadores1   typeof   42   typeof   "teste"3   typeof   3.64   - (5 *   2)                             33 / 1
JavaScript: boolean                                     ˜   Outro tipo de dado em JavaScript sao os booleans   Booleans po...
JavaScript: boolean1   // repare nos operadores utilizados23   4 > 3 // true4   2 > 8 // false5   "string1" === "string2" ...
´JavaScript: operadores logicos                          ¸˜        ´   Existem algumas operacoes muito uteis que podem ser...
´    JavaScript: operadores logicos1   true && false // false2   true || false // true3   !true // false4   !false // true...
¸˜JavaScript: Introducao  ´Pratica  Strings  Booleans  Operadores                         38 / 1
˜            ¸˜JavaScript: expressoes e declaracoes     ´                                  ´   Ate agora vimos JavaScript ...
JavaScript: armazendando valores              ¸˜                                    ˜ ´   Uma declaracao simples como a mo...
JavaScript: armazendando valores   Para acessar valores armazenados JS e em outras               ˜                 ´   lin...
JavaScript: armazendando valores                       ´   A palavra-chave var e usada para criar/declarar uma nova       ...
JavaScript: armazendando valores       ´      ˜   Variaveis nao precisam armazenar o mesmo valor para   sempre   Basta atr...
JavaScript: armazenando valores1   var tiposDiferentes = 5;2   typeof tiposDiferentes // number3   tiposDiferentes = true4...
JavaScript: armazenando valores            ´     ˜   Uma variavel nao deve ser vista como uma caixa, e que                ...
JavaScript: armazenando valores  ´Pratica  Armazenando valores       ´  Variaveis                                  46 / 1
JavaScript: environment         ¸˜         ´   A colecao de variaveis e os valores que existem em                         ...
¸˜JavaScript: funcoes                             ˜   Muitos destes valores padrao carregados juntos com o              ˜ ...
¸˜JavaScript: funcoes                    ´               ¸˜   Para executar o codigo de uma funcao basta abrir e fechar   ...
¸˜JavaScript: funcoes          ¸˜           ´   Uma funcao pode tambem produzir um valor no seu final   Math.max(6, 9)     ...
¸˜JavaScript: funcoes             ¸˜     ´            ´            ˜   Outras funcoes pre-definidas alem do alert sao promp...
¸˜    JavaScript: funcoes1   function power(base, exponent) {2     var result = 1;3     for (var count = 0; count < expone...
JavaScript: objects                       ˜   Tudo em JavaScript sao objetos                                           ¸˜ ...
JavaScript: objetos1   var animal = {2      nome: ’Rex’,3      idade: 8,4      possuiDono: true5   };67   var idadeDoAnima...
JavaScript: controle de fluxo1   for (var counter = 0; counter < 20; counter++) {2     if (counter % 4 == 0)3       print(c...
JavaScript: eventos         ˜   ¸˜Eventos sao acoes que podem serdetectadas pelo JavaScript                               ...
JavaScript: eventos    ´                       ˜     ´   Paginas WEB em HTML+CSS sao estaticas                            ...
JavaScript: eventos                          ´   Todo elemento de uma pagina WEB possui eventos que   podem ser vinculados...
JavaScript: eventosExemplos de eventos    O clique do mouse                           ´    O carregamento de uma pagina WE...
JavaScript Inline - Nunca use!1   <html>2     <head>3     </head>4     <body>5       <span onclick="alert(’Hello World!’);...
Exemplo com o evento OnClick1    <html>2      <head>3      <script type="text/javascript">4        function displayDate() ...
JavaScript: eventosOnChange                                            ¸˜   Evento frequentemente utilizado em validacoes ...
OnChange1    <html>2      <head>3      <script type="text/javascript">4        function checkChange() {5           alert("...
JavaScript: eventosOnSubmit   Evento utilizado por exemplo para validar todos os campos de              ´   um formulario ...
OnSubmit1    <html>2      <head>3      <script type="text/javascript">4        function checkForm() {5           alert("Fo...
OnLoad1    <html>2      <head>3        <script type="text/javascript">4           function load() {5             alert("Ca...
JavaScriptjQuery    jQuery is a fast and concise JavaScript Library that    simplifies HTML document traversing, event hand...
JavaScriptjQuery Vantagens    Simplifica a forma de trabalhar com Javascript    ´    E extens´vel            ı    ´        ...
JavaScriptjQuery Vantagens                 ´                 ¸˜    Basicamente e criada uma funcao jQuery() que retorna um...
JavaScript              ¸˜jQuery Utilizacao    Para manipular um ou mais elementos apenas utilizamos    $(SELETOR)        ...
jQuery1    <html>2      <head>3        <script type="text/javascript">4        $(document).ready(function() {5            ...
JavaScript   The art of programming is the skill of controlling   complexity. eloquentjavascript.net                      ...
Upcoming SlideShare
Loading in …5
×

Tratamento de Eventos para WEB

1,308 views
1,174 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,308
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
27
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Tratamento de Eventos para WEB

  1. 1. Tratamento de Eventos para WEB Felipe Natale Munhoz ´ ´ ´SENAC TI - Tecnico em Informatica para Internet - Florianopolis/SC 1/1
  2. 2. Tratamento de Eventos para WEBCOMPETENCIAˆTratar eventos para web utilizando linguagem script, observando a ¸˜ ˆsintaxe da linguagem, funcoes, passagem de parametros,bibliotecas, a partir das caracter´sticas de tratamento de eventos, ı ˜ ´ ˆcom visao logica e paciencia, a fim de estabelecer a comunicacao ¸˜ ¸˜entre a acao e a rotina computacional. ´Carga horaria21 Horas 2/1
  3. 3. Tratamento de Eventos para WEBPilares: conhecimentos, habilidades e valores Caracter´sticas da linguagem script: sintaxe da linguagem, ı ¸˜ ˆ funcoes, passagem de parametros, bibliotecas Criar scripts da linguagem ¸˜ Organizacao ˜ ´ Visao logica Caracter´sticas de tratamento de eventos ı Utilizar eventos ˆ Paciencia ´ Pro-atividade 3/1
  4. 4. Tratamento de Eventos para WEBMetodologia Aula expositiva e dialogada ´ Aula pratica ¸˜ ´ M´nimo de separacao entre teoria e pratica ı ´Recursos didaticos Slides Computador Quadro Internet 4/1
  5. 5. Tratamento de Eventos para WEBIndicadores e Desempenho ¸˜ ´ Associa eventos e acoes aos componentes graficos de uma interface de acordo com as caracter´sticas de tratamento de ı ¸˜ ´ ˜ ´ eventos e aplicacoes graficas, com visao logica e ¸˜ organizacao. Eventos web tratados utilizando linguagem script. ´ ¸˜Estrategia de avaliacao ¸˜ ¸˜ ´ Observacao da participacao diaria de cada um ¸˜ ´ Avaliacoes praticas focadas no desenvolvimento de ¸˜ aplicacoes aplicando os conhecimentos adquiridos 5/1
  6. 6. ¸˜JavaScript: Introducao ´Historico JavaScript foi criada em dezembro de 1995 por Brendan Eich ´ ´ na epoca funcionario da Netscape. Originalmente foi chamada de Mocha, e logo depois renomeada para LiveScript. Devido a um acordo com a Sun Microsystems passou a ser ´ chamada de JavaScript como uma estrategia de marketing entre as duas empresas. 6/1
  7. 7. ¸˜JavaScript: Introducao ´Historico Rapidamente JavaScript fez sucesso como linguagem client-side possibilitando um novo patamar para o desenvolvimento WEB. ´ Pouco tempo depois devido a guerra dos browsers da epoca a Microsoft desenvolveu uma linguagem compat´vel com ı JavaScript para o IE. ˜ Para evitar problemas com uso de marcas a versao da Microsoft foi chamada JScript. 7/1
  8. 8. ¸˜JavaScript: Introducao ´Historico Mesmo que JScript fosse compat´vel com JavaScript, ainda ı haviam diferencas entre as duas linguagens ¸ Poucos meses depois a Netscape submeteu a linguagem ¸˜ JavaScript para a organizacao ECMA com o objetivo de se ˜ ´ tornar um padrao da industria. ˜ JavaScript foi entao padronizada como linguagem ECMAScript 8/1
  9. 9. ¸˜JavaScript: IntroducaoCuriosidade ´ Atualmente JavaScript e a linguagem mais popular no githubhttps://github.com/languages/JavaScript 9/1
  10. 10. ¸˜JavaScript: Introducao ¸˜Definicao ´ JavaScript e uma Linguagem Script ´Linguagem Script e aquela executada do interior de um programa, ´ ¸˜ ´atraves de outra linguagem de programacao, ou de maquina ´virtual propria. 10 / 1
  11. 11. ¸˜JavaScript: IntroducaoMitos ´ Apesar de sua popularidade JavaScript ainda e pouco compreendida nos dias de hoje ˜ ¸˜ As linguagens JavaScript e Java nao tem nenhuma relacao uma com a outra Por ter o sufixo Script no nome algumas pessoas acreditam ˜ ´ erroneamente que JavaScript nao e uma linguagem de ¸˜ programacao de verdade. 11 / 1
  12. 12. ¸˜JavaScript: IntroducaoO que pode ser feito ¸˜ ´ Validacoes em formularios ´ Interatividade em paginas WEB ¸˜ Animacoes Desenhos Jogos ¸˜ Aplicacoes server-side(node.js) 12 / 1
  13. 13. ¸˜JavaScript: IntroducaoAntes de comecar! ¸ 13 / 1
  14. 14. ¸˜ JavaScript: Introducao ´ ´ Codigo binario1 00110001 00000000 000000002 00110001 00000001 000000013 00110011 00000001 000000104 01010001 00001011 000000105 00100010 00000010 000010006 01000011 00000001 000000007 01000001 00000001 000000018 00010000 00000010 000000009 01100010 00000000 00000000 14 / 1
  15. 15. ¸˜ JavaScript: Introducao ´ Codigo JavaScript1 var c = 0, t = 1;2 while (t <= 10) {3 c += t;4 t += 1;5 }6 print(c); 15 / 1
  16. 16. ¸˜ JavaScript: Introducao ´ Codigo JavaScript1 var total = 0, count = 1;2 while (count <= 10) {3 total += count;4 count += 1;5 }6 print(total); 16 / 1
  17. 17. ¸˜JavaScript: IntroducaoImportante ´ Escreva codigo leg´vel ı ´ Escreva codigo para outras pessoas entenderem ¸˜ Preocupe-se com identacao ´ Pare e pense no nome das variaveis 17 / 1
  18. 18. ¸˜JavaScript: IntroducaoConceitos ´Valores, variaveis, e controle defluxo 18 / 1
  19. 19. ´JavaScript: valores, variaveis e controle de fluxo ¸˜ ˜ Dentro do mundo da computacao, tudo sao dados ˜ Em JavaScript a maioria destes dados sao separados em estruturas que vamos chamar de valores Cada um destes valores tem um tipo. ˜ Este tipo determina as regras que poderao ser aplicadas a este valor 19 / 1
  20. 20. ´JavaScript: valores, variaveis e controle de fluxo ´Tipos basicos de valores Number String Boolean Object Function Undefined 20 / 1
  21. 21. ¸˜JavaScript: IntroducaoNumber 21 / 1
  22. 22. ´JavaScript: valores, variaveis e controle de fluxoNumber 143 13178 -20.3 3.56 0.3455 2.493e8 22 / 1
  23. 23. ´JavaScript: valores, variaveis e controle de fluxoNumber ˜ Em JavaScript todos os valores Number sao armazenados em 64 bits ´ O number armazena tanto numeros positivos quanto negativos ´ ´ ˜ Armazena tambem numeros nao inteiros ˜ ´ Dos 64 bits 11 sao usados para armazenar o valor fracionario ´ do numero ´ E 1 bit e utilizado para armazenar o sinal ˜ Sobram entao 52 bits para armazenar o valor inteiro 23 / 1
  24. 24. ¸˜JavaScript: IntroducaoOperadores 24 / 1
  25. 25. ´JavaScript: valores, variaveis e controle de fluxo ´ ´Numeros, operadores, aritmetica 134 + 6 33 * 2 + 5 55 -3 (22 - 2) * 4 (15 / 3) - 3 100 * 4 - 4 + 10 / 2 25 / 1
  26. 26. ¸˜JavaScript: Introducao ´Pratica Numbers Operadores ´ Aritmetica 26 / 1
  27. 27. ¸˜JavaScript: IntroducaoString 27 / 1
  28. 28. JavaScript: strings Tipo de dado para armazenamento de texto O texto deve sempre ficar entre aspas duplas Como colocar o caracter aspas duplas em uma string? Alguns caracteres devem ser escapados ´ O cacacter barra invertida e usado para isso. 28 / 1
  29. 29. JavaScript: strings1 var exemplo1 = "exemplo simples de string";2 var exemplo2 = "aspas duplas devem ser escapadas: " ";3 var exemplo3 = "caracter de nova linha: n "4 var exemplo4 = "caracter barra invertida " 29 / 1
  30. 30. JavaScript: strings ˜ Strings em JavaScript nao podem ser subtra´das ou ı multiplicadas Para concatenar strings pode ser utilizado o caracter + ´ O caracter + neste caso e um operador, assim como os operadores * - / utilizados para o tipo de dado Number 30 / 1
  31. 31. JavaScript: strings1 var exemplo1 = "uma " + "parte " + "da " + "string"; 31 / 1
  32. 32. JavaScript: operadores ´ ˜ Todos os operadores que vimos ate agora sao chamados de ´ operadores binarios ´ ˜ Operadores binarios sao aplicados a dois argumentos ´ ´ ˜ Existem tambem operadores unarios que sao aplicados a um argumento ´ ´ O operador typeof e um exemplo de operador unario Dado um valor para o operador typeof ele retorna uma string com o tipo do valor passado ´ O operador menos (-) pode ser utilizado tanto como binario ´ quanto como unario 32 / 1
  33. 33. JavaScript: operadores1 typeof 42 typeof "teste"3 typeof 3.64 - (5 * 2) 33 / 1
  34. 34. JavaScript: boolean ˜ Outro tipo de dado em JavaScript sao os booleans Booleans podem ter dois valores true e false 34 / 1
  35. 35. JavaScript: boolean1 // repare nos operadores utilizados23 4 > 3 // true4 2 > 8 // false5 "string1" === "string2" // false6 "string1" === "string1" // true 35 / 1
  36. 36. ´JavaScript: operadores logicos ¸˜ ´ Existem algumas operacoes muito uteis que podem ser aplicadas aos valores booleanos. ˆ ´ JavaScript suporta tres operadores logicos and, or e not 36 / 1
  37. 37. ´ JavaScript: operadores logicos1 true && false // false2 true || false // true3 !true // false4 !false // true5 (4 >= 6 || "v1" != "v2") && !(12 * 2 == 144 && true) // true or false ? 37 / 1
  38. 38. ¸˜JavaScript: Introducao ´Pratica Strings Booleans Operadores 38 / 1
  39. 39. ˜ ¸˜JavaScript: expressoes e declaracoes ´ ´ Ate agora vimos JavaScript como uma maquina de calcular ´ ˜ Todos estes codigos JavaScript sao chamados de ˜ expressoes ´ ˜ Existe um n´vel mais elevado de codigo que expressoes, e ı ´ ¸˜ podemos chama-los de declaracoes ´ ¸˜ Um programa e constitu´do por uma lista de declaracoes ı ¸˜ Grande parte das declaracoes em JS terminam com um ponto e v´rgula. ı 0; 39 / 1
  40. 40. JavaScript: armazendando valores ¸˜ ˜ ´ Uma declaracao simples como a mostrada a seguir nao e ´ muito util false; ¸˜ ˜ ´ Esta declaracao nao faz nada, ela apenas e avaliada e jogada no coletor de lixo do JS. ¸˜ ´ As declaracoes se tornam uteis quando afetam o mundo exterior ´ Isto pode ser feito, enviando uma mensagem para o usuario, alterando a tela do programa, etc. ´ Um bom ponto de partida para isso e armazenar os valores ˜ das expressoes. 40 / 1
  41. 41. JavaScript: armazendando valores Para acessar valores armazenados JS e em outras ˜ ´ linguagens sao utilizadas variaveis ´ ˜ Variaveis sempre tem um nome e podem ou nao estar ´ referenciando um valor armazenado em memoria var variavelTeste = 4 * 7; ¸˜ ´ A declaracao acima cria uma variavel chamada ´ ˜ variavelTeste e e utilizada para acessar o valor da expressao 4*7 ´ ¸˜ ´ Apos executar esta declaracao ao digitar o nome da variavel ´ no console, o valor 28 sera mostrado; 41 / 1
  42. 42. JavaScript: armazendando valores ´ A palavra-chave var e usada para criar/declarar uma nova ´ variavel ´ ˜ Variaveis podem ter os mais diferentes nomes, mas nao podem ter espacos ¸ ´ ´ Para variaveis com multiplas palavras em JS utilize a ¸˜ convencao camelCase ´ ´ ˜ Variaveis podem conter numeros, mas nao podem comecar¸ por um caracter de d´gito ı ´ permitido tambem caracteres especiais como o underscore E ´ ˜ e o cifrao 42 / 1
  43. 43. JavaScript: armazendando valores ´ ˜ Variaveis nao precisam armazenar o mesmo valor para sempre Basta atribuir outro valor a mesma var´avel utilizando o ı ¸˜ operador de atribuicao (=) ´ Inclusive e poss´vel trocar o tipo de dado armazenado ı 43 / 1
  44. 44. JavaScript: armazenando valores1 var tiposDiferentes = 5;2 typeof tiposDiferentes // number3 tiposDiferentes = true4 typeof tiposDiferentes // boolean 44 / 1
  45. 45. JavaScript: armazenando valores ´ ˜ Uma variavel nao deve ser vista como uma caixa, e que ´ ´ dentro da caixa esta o valor desta variavel ´ ´ ´ Uma variavel e melhor compreendida como tentaculos ´ ˜ Sempre que for necessario guardar o valor de uma expressao ´ deve ser apontado um destes tentaculos para este valor ´ ˜ Valores sem tentaculos sao descartados pelo JavaScript ¸˜ assim que a declaracao termina 45 / 1
  46. 46. JavaScript: armazenando valores ´Pratica Armazenando valores ´ Variaveis 46 / 1
  47. 47. JavaScript: environment ¸˜ ´ A colecao de variaveis e os valores que existem em ´ determinado momento e chamado de ambiente (environment) ´ Sempre que um programa em JS inicia e criado um ambiente para ele. ˆ Por exemplo quando uma instancia de um navegador e ´ ´ ˆ carregada um ambiente e criado para esta instancia ´ Neste caso o ciclo de vida do ambiente e o mesmo da janela/aba do navegador ´ Ao ser criado, este ambiente carrega uma serie de valores ˜ padrao. 47 / 1
  48. 48. ¸˜JavaScript: funcoes ˜ Muitos destes valores padrao carregados juntos com o ˜ ambiente sao do tipo de dado function ¸˜ ˜ Funcoes sao pedacos de programas, mais formalmente, uma ¸ ¸˜ lista de declaracoes contidas em um valor. ´ Por exemplo no ambiente criado pelos navegadores esta ´ dispon´vel a variavel alert ı 48 / 1
  49. 49. ¸˜JavaScript: funcoes ´ ¸˜ Para executar o codigo de uma funcao basta abrir e fechar ˆ ´ ´ parenteses apos o nome da variavel alert(”Nova Mensagem”) ˆ ´ O valor do tipo String que aparece entre os parenteses e um ˆ paramentro/argumento da funcao¸˜ ¸˜ ˆ Uma funcao pode receber zero ou mais parametros, separados por v´rgula ı 49 / 1
  50. 50. ¸˜JavaScript: funcoes ¸˜ ´ Uma funcao pode tambem produzir um valor no seu final Math.max(6, 9) ¸˜ ´ Neste caso a funcao retorna o valor maximo de uma lista de valores passados como argumento ¸˜ ¸˜ Quando uma funcao produz um valor, dizemos que a funcao retorna um valor 50 / 1
  51. 51. ¸˜JavaScript: funcoes ¸˜ ´ ´ ˜ Outras funcoes pre-definidas alem do alert sao prompt, confirm 51 / 1
  52. 52. ¸˜ JavaScript: funcoes1 function power(base, exponent) {2 var result = 1;3 for (var count = 0; count < exponent; count++)4 result *= base;5 return result;6 }78 show(power(2, 10)); 52 / 1
  53. 53. JavaScript: objects ˜ Tudo em JavaScript sao objetos ¸˜ Podem ser acessados utilizando duas notacoes: objeto.atributo objeto[’atributo’] Para criar um novo objeto: var objeto = var objeto = new Object() 53 / 1
  54. 54. JavaScript: objetos1 var animal = {2 nome: ’Rex’,3 idade: 8,4 possuiDono: true5 };67 var idadeDoAnimal = animal.idade;89 var nomeDoAnimal = animal[’nome’]; 54 / 1
  55. 55. JavaScript: controle de fluxo1 for (var counter = 0; counter < 20; counter++) {2 if (counter % 4 == 0)3 print(counter);4 if (counter % 4 != 0)5 print("(" + counter + ")");6 } 55 / 1
  56. 56. JavaScript: eventos ˜ ¸˜Eventos sao acoes que podem serdetectadas pelo JavaScript 56 / 1
  57. 57. JavaScript: eventos ´ ˜ ´ Paginas WEB em HTML+CSS sao estaticas ´ Adicionar JavaScript permite criarmos paginas WEB ˆ dinamicas 57 / 1
  58. 58. JavaScript: eventos ´ Todo elemento de uma pagina WEB possui eventos que podem ser vinculados ao JavaScript ˜ Por exemplo podemos vincular o evento de clique de botao ¸˜ HTML para uma funcao JavaScript ˜ ¸˜ Desta forma sempre que o botao for clicado a funcao ´ JavaScript sera executada 58 / 1
  59. 59. JavaScript: eventosExemplos de eventos O clique do mouse ´ O carregamento de uma pagina WEB ou de uma imagem ´ Passar o mouse por um elemento da pagina ´ Selecionar um elemento de um campo de um formulario HTML ´ Submeter um formulario HTML Pressionar uma tecla 59 / 1
  60. 60. JavaScript Inline - Nunca use!1 <html>2 <head>3 </head>4 <body>5 <span onclick="alert(’Hello World!’);">Click Here</span>6 </body>7 </html> 60 / 1
  61. 61. Exemplo com o evento OnClick1 <html>2 <head>3 <script type="text/javascript">4 function displayDate() {5 alert(Date());6 }7 </script>8 </head>9 <body>10 <button type="button" onclick="displayDate()">Display Date</button>11 </body>12 </html> 61 / 1
  62. 62. JavaScript: eventosOnChange ¸˜ Evento frequentemente utilizado em validacoes de campos ´ em formularios ´ ¸˜ E ativado sempre que o campo sofrer um tipo de alteracao e perder o foco 62 / 1
  63. 63. OnChange1 <html>2 <head>3 <script type="text/javascript">4 function checkChange() {5 alert("Field was changed");6 }7 </script>8 </head>9 <body>10 Write something on the box11 <input type="text" onchange="checkChange()">12 </body>13 </html> 63 / 1
  64. 64. JavaScript: eventosOnSubmit Evento utilizado por exemplo para validar todos os campos de ´ um formulario antes submeter para o servidor ´ ˜ E ativado quando o botao de enviar for clicado. 64 / 1
  65. 65. OnSubmit1 <html>2 <head>3 <script type="text/javascript">4 function checkForm() {5 alert("Form was submitted");6 }7 </script>8 </head>9 <body>10 <form method="post" action="" onsubmit="return checkForm()">11 Write something on the box <input type="text">12 <input type="submit" value="Send form">13 </form>14 </body>15 </html> 65 / 1
  66. 66. OnLoad1 <html>2 <head>3 <script type="text/javascript">4 function load() {5 alert("Carregou!");6 }7 </script>8 </head>9 <body onload="load()">10 <h1>Hello World!</h1>11 </body>12 </html> 66 / 1
  67. 67. JavaScriptjQuery jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript. 67 / 1
  68. 68. JavaScriptjQuery Vantagens Simplifica a forma de trabalhar com Javascript ´ E extens´vel ı ´ ˜ ¸˜ E leve (31 kb a versao de producao) ´ E cross-browser (como os plugins podem ser criados por ˜ qualquer pessoa, podem nao manter a compatibilidade) 68 / 1
  69. 69. JavaScriptjQuery Vantagens ´ ¸˜ Basicamente e criada uma funcao jQuery() que retorna um objeto ´ ¸˜ E criado um alias $ para esta funcao ˆ ˆ ´ Quando voce acessa $(document) voce esta chamando a ¸˜ ˆ funcao jQuery() passando o objeto document por parametro ´ ´ Quando acessa $.ajax() esta chamando o metodo ajax() do ¸˜ objeto criado pela funcao jQuery 69 / 1
  70. 70. JavaScript ¸˜jQuery Utilizacao Para manipular um ou mais elementos apenas utilizamos $(SELETOR) ´ Existem varios valores para o SELETOR os mais comuns ˜ sao: seletor de tag, seletor de id e seletor de class 70 / 1
  71. 71. jQuery1 <html>2 <head>3 <script type="text/javascript">4 $(document).ready(function() {5 $("a").css("border", "9px solid red");6 });7 </script>8 </head>9 <body>10 <a href="#">teste1</a>11 <a href="#">teste2</a>12 </body>13 </html> 71 / 1
  72. 72. JavaScript The art of programming is the skill of controlling complexity. eloquentjavascript.net 72 / 1

×