Treinamento AJAX

Waelson Negreiros
Email: waelson@gmail.com
Blog: http://waelson.com.br
Agenda
O

que é Java Script?
 Iniciando
 Operadores Matemáticos
 Operadores Lógicos
 Comando Condicionais
 Estrutura...
O que é Java Script?
 Criada

pela Netscape;
 Roda no cliente;
 Sintaxe baseada em Java;
 Não é Java;
 Cross Browser ...
O que é Java Script?
O





que não posso?
Escrever programas;
Manipular o File Systema do SO;
Utilizar recursos de r...
O que é Java Script?
O







que posso?
Escrever aplicações mais interativas;
Fazer chamadas assíncronas;
Validar ...
O que é Java Script?

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

Podemos manipular os atributos desses objetos
Começando
 Passos:

1 - Escolher um bom editor;
2 - Crie sua página HTML;
3 - Crie o bloco de script
4 - Escreva sua funç...
Começando
 Escolhe


um bom editor

EmEditor




Suporta várias linguagens;
É free;
Sintaxe destacada;
Começando
 Crie

sua página HTML
Começando
 Crie

o bloco de script
Começando
 Escreva

sua função
Começando
 Invoque

sua função
Começando
 Resultado
Começando

Depois veremos mais sobre
funções
Operadores Matemáticos
Soma dois valores numéricos
 Concatena duas Strings

+



-



Subtração de valores numéricos

*...
Operadores Matemáticos
 Exemplo

com Operador de Adição ( + )
Operadores Matemáticos
 Exemplo

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

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

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

com Operador de Resto ( % )
Operadores Lógicos
==
!=



Igual



Diferente

>



Maior

>=



Maior ou igual

<



Menor

<=



Menor ou igual

...
Comando Condicionais
 Utilizados



IF
SWITCH

para desviar o fluxo da aplicação.
Comandos Condicionais
 Comando

“IF”

if (condição){
//Executa se a condição é verdadeira
}
If (condição){
//Executa se a...
Comandos Condicionais
If (condição1){
//Executa se a condição1 é verdadeira
}else if(condição2){
//Executa se a condição2 ...
Comandos Condicionais
 Exemplo
Comandos Condicionais
 Comando

“SWITCH”

switch(variável){
case valor1:
//Caso o valor da variável seja igual a valor1
b...
Comandos Condicionais
 Exemplo
Estruturas de Repetição
 Estruturas

utilizadas para executar um trecho
de código mais de uma vez, sem a
necessidade de d...
Estruturas de Repetição
 WHILE

while(condição){
//Executa enquanto a condição seja verdadeira
}
Estruturas de Repetição
 FOR

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

WHILE

do {
//Executa enquanto a condição seja verdadeira
}while(condição);
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 u...
Eventos
 Exemplo:
Evento
Evento

onClick
onSubmit
onLoad
onMouseOver
onMouseOut
onUnload

Quando Ocorre?

Ao clicar em um item na tela
Ao su...
Evento

Exemplos
Trabalhando com DOM
 Document

Object Model;
 Definido pela W3C;
 Usado pelo browser para definir sua página;
 Manipul...
Trabalhando com DOM


Estrutura HTML
Trabalhando com DOM


Estrutura DOM
HTML

HEAD

BODY

TITLE

FORM

INPUT

INPUT

INPUT
Trabalhando com DOM



Objetos possuem atributos;
Objetos podem executar ações;
Objeto

Atributos

Ações

form

action, ...
Trabalhando com DOM
 Manipulando

os objetos
Trabalhando com DOM
 Manipulando

os objetos
Perguntas
Upcoming SlideShare
Loading in …5
×

Treinamento ajax modulo javascript

612 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
612
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×