Treinamento AJAX
Waelson Negreiros
Email: [email protected]
Blog: http://waelson.com.br
Agenda








O que é Java Script?
Iniciando
Operadores Matemáticos
Operadores Lógicos
Comando Condicionais
Estruturas de Repetição
Eventos
Trabalhando com DOM
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
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.
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.
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ção;
5 – Invoque sua função.
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
*

Multiplicação de valores numéricos
/

Divisão de valores numéricos
%
Obtém o resto da divisão
Ex: 7 % 3 = 1
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
&&

E
||

Ou
Comando Condicionais

Utilizados para desviar o fluxo da aplicação.


IF
SWITCH
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
}
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
}
Comandos Condicionais

Exemplo
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
}
Comandos Condicionais

Exemplo
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
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 usuário.
Exemplo: Mostrar um alerta ao clicar em um
botão
Eventos

Exemplo:
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
Evento
Exemplos
Trabalhando com DOM




Document Object Model;
Definido pela W3C;
Usado pelo browser para definir sua página;
Manipulamos seus objeto
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, id, name
Submit()
input
value, id, name
focus()
a
href, id, name
Não Possue
window
title, defaultStatus
Não possue
Trabalhando com DOM

Manipulando os objetos
Trabalhando com DOM

Manipulando os objetos
Perguntas