Treinamento AJAX Waelson Negreiros Blog:

Apresentação em tema: "Treinamento AJAX Waelson Negreiros Blog:"— Transcrição da apresentação:

1 Treinamento AJAX Waelson Negreiros Email: waelson@gmail.com Blog: http://waelson.com.br

2 Agenda O que é Java Script? Iniciando Operadores Matemáticos Operadores Lógicos Comando Condicionais Estruturas de Repetição Eventos Trabalhando com DOM

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 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 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 O que é Java Script? O que é DOM?

7 O que é Java Script? O que é DOM?

8 O que é Java Script? O que é DOM?

9 O que é Java Script? O que é DOM? Podemos manipular os atributos desses objetos

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 Começando Escolhe um bom editor EmEditor Suporta várias linguagens; É free; Sintaxe destacada;

12 Começando Crie sua página HTML

13 Começando Crie o bloco de script

14 Começando Escreva sua função

15 Começando Invoque sua função

16 Começando Resultado

17 Começando Depois veremos mais sobre funções

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 Operadores Matemáticos Exemplo com Operador de Adição ( + )

20 Operadores Matemáticos Exemplo com Operador de Subtração ( - )

21 Operadores Matemáticos Exemplo com Operador de Multiplicação ( * )

22 Operadores Matemáticos Exemplo com Operador de Divisão ( / )

23 Operadores Matemáticos Exemplo com Operador de Resto ( % )

24 Operadores Lógicos == Igual != Diferente > Maior >= Maior ou igual < Menor <= Menor ou igual && E || Ou

25 Comando Condicionais Utilizados para desviar o fluxo da aplicação. IF SWITCH

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 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 Comandos Condicionais Exemplo

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 Comandos Condicionais Exemplo

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 Estruturas de Repetição WHILE while(condição){ //Executa enquanto a condição seja verdadeira }

33 Estruturas de Repetição FOR for(variável; condição; incremento){ //Executa enquanto a condição seja verdadeira }

34 Estruturas de Repetição DO WHILE do { //Executa enquanto a condição seja verdadeira }while(condição);

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 Eventos Exemplo:

37 Evento Quando Ocorre? onClickAo clicar em um item na tela onSubmitAo submeter um formulario onLoadAo carregar a página onMouseOverQuando passamos o mouse por cima onMouseOutQuando tiramos o mouse de cima onUnloadQuando você muda de página

38 Evento Exemplos

39 Trabalhando com DOM Document Object Model; Definido pela W3C; Usado pelo browser para definir sua página; Manipulamos seus objeto

40 Trabalhando com DOM Estrutura HTML

41 Trabalhando com DOM Estrutura DOM HTML HEAD TITLE BODY FORM INPUT

42 Trabalhando com DOM Objetos possuem atributos; Objetos podem executar ações; ObjetoAtributosAções formaction, id, nameSubmit() inputvalue, id, namefocus() ahref, id, nameNão Possue windowtitle, defaultStatusNão possue

43 Trabalhando com DOM Manipulando os objetos

44 Trabalhando com DOM Manipulando os objetos

45 Perguntas