Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Treinamento ajax modulo javascript

720 views

Published on

  • Be the first to comment

  • Be the first to like this

Treinamento ajax modulo javascript

  1. 1. Treinamento AJAX Waelson Negreiros Email: waelson@gmail.com Blog: http://waelson.com.br
  2. 2. Agenda O que é Java Script?  Iniciando  Operadores Matemáticos  Operadores Lógicos  Comando Condicionais  Estruturas de Repetição  Eventos  Trabalhando com DOM
  3. 3. O que é Java Script?  Criada pela Netscape;  Roda no cliente;  Sintaxe baseada em Java;  Não é Java;  Cross Browser e cross Plataform;  Fracamente Tipada;  Interpretada;  Roda em um SandBox
  4. 4. O que é Java Script? O     que não posso? Escrever programas; Manipular o File Systema do SO; Utilizar recursos de rede; Gerenciar Processos do SO.
  5. 5. O que é Java Script? O       que posso? Escrever aplicações mais interativas; Fazer chamadas assíncronas; Validar formulários; Escrever e ler Cookies; Ler XML; Manipular o DOM.
  6. 6. O que é Java Script? O que é DOM?
  7. 7. O que é Java Script? O que é DOM?
  8. 8. O que é Java Script? O que é DOM?
  9. 9. O que é Java Script? O que é DOM? Podemos manipular os atributos desses objetos
  10. 10. Começando  Passos: 1 - Escolher um bom editor; 2 - Crie sua página HTML; 3 - Crie o bloco de script 4 - Escreva sua função; 5 – Invoque sua função.
  11. 11. Começando  Escolhe  um bom editor EmEditor    Suporta várias linguagens; É free; Sintaxe destacada;
  12. 12. Começando  Crie sua página HTML
  13. 13. Começando  Crie o bloco de script
  14. 14. Começando  Escreva sua função
  15. 15. Começando  Invoque sua função
  16. 16. Começando  Resultado
  17. 17. Começando Depois veremos mais sobre funções
  18. 18. Operadores Matemáticos Soma dois valores numéricos  Concatena duas Strings +  -  Subtração de valores numéricos *  Multiplicação de valores numéricos /  Divisão de valores numéricos % Obtém o resto da divisão Ex: 7 % 3 = 1
  19. 19. Operadores Matemáticos  Exemplo com Operador de Adição ( + )
  20. 20. Operadores Matemáticos  Exemplo com Operador de Subtração ( - )
  21. 21. Operadores Matemáticos  Exemplo com Operador de Multiplicação ( * )
  22. 22. Operadores Matemáticos  Exemplo com Operador de Divisão ( / )
  23. 23. Operadores Matemáticos  Exemplo com Operador de Resto ( % )
  24. 24. Operadores Lógicos == !=  Igual  Diferente >  Maior >=  Maior ou igual <  Menor <=  Menor ou igual &&  E ||  Ou
  25. 25. Comando Condicionais  Utilizados   IF SWITCH para desviar o fluxo da aplicação.
  26. 26. Comandos Condicionais  Comando “IF” if (condição){ //Executa se a condição é verdadeira } If (condição){ //Executa se a condição é verdadeira }else{ //Executa se a condição é falsa }
  27. 27. Comandos Condicionais If (condição1){ //Executa se a condição1 é verdadeira }else if(condição2){ //Executa se a condição2 é verdadeira }else if(condição3){ //Executa se a condição3 é verdadeira }else{ //Executa se a condição é falsa }
  28. 28. Comandos Condicionais  Exemplo
  29. 29. Comandos Condicionais  Comando “SWITCH” switch(variável){ case valor1: //Caso o valor da variável seja igual a valor1 break; case valor2: //Caso o valor da variável seja igual a valor2 break; default: //Caso nenhum das condições sejam satisfeitas }
  30. 30. Comandos Condicionais  Exemplo
  31. 31. Estruturas de Repetição  Estruturas utilizadas para executar um trecho de código mais de uma vez, sem a necessidade de duplicação de código, são elas:    while for do while
  32. 32. Estruturas de Repetição  WHILE while(condição){ //Executa enquanto a condição seja verdadeira }
  33. 33. Estruturas de Repetição  FOR for(variável; condição; incremento){ //Executa enquanto a condição seja verdadeira }
  34. 34. Estruturas de Repetição  DO WHILE do { //Executa enquanto a condição seja verdadeira }while(condição);
  35. 35. Eventos  São ações disparadas pela página, quando a página ou algum componente da página sofre uma ação, geralmente do usuário.  Exemplo: Mostrar um alerta ao clicar em um botão
  36. 36. Eventos  Exemplo:
  37. 37. Evento Evento onClick onSubmit onLoad onMouseOver onMouseOut onUnload Quando Ocorre? Ao clicar em um item na tela Ao submeter um formulario Ao carregar a página Quando passamos o mouse por cima Quando tiramos o mouse de cima Quando você muda de página
  38. 38. Evento Exemplos
  39. 39. Trabalhando com DOM  Document Object Model;  Definido pela W3C;  Usado pelo browser para definir sua página;  Manipulamos seus objeto
  40. 40. Trabalhando com DOM  Estrutura HTML
  41. 41. Trabalhando com DOM  Estrutura DOM HTML HEAD BODY TITLE FORM INPUT INPUT INPUT
  42. 42. Trabalhando com DOM   Objetos possuem atributos; Objetos podem executar ações; Objeto Atributos Ações form action, id, name Submit() input value, id, name focus() a href, id, name Não Possue window title, defaultStatus Não possue
  43. 43. Trabalhando com DOM  Manipulando os objetos
  44. 44. Trabalhando com DOM  Manipulando os objetos
  45. 45. Perguntas

×