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


IF
SWITCH
para desviar o fluxo da aplicação.

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
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. 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
BODY
TITLE
FORM
INPUT
INPUT
INPUT

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. Trabalhando com DOM
 Manipulando
os objetos

44. Trabalhando com DOM
 Manipulando
os objetos

45. Perguntas