Treinamento AJAX

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

Agenda

O que Java Script? Iniciando Operadores Matemticos Operadores Lgicos Comando Condicionais Estruturas de Repetio Eventos Trabalhando com DOM

O que Java Script?

Criada pela Netscape; Roda no cliente; Sintaxe baseada em Java; No Java; Cross Browser e cross Plataform; Fracamente Tipada; Interpretada; Roda em um SandBox

O que Java Script?

O que no 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 aplicaes mais interativas; Fazer chamadas assncronas; Validar formulrios; 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

Comeando

Passos:
1 - Escolher um bom editor; 2 - Crie sua pgina HTML; 3 - Crie o bloco de script 4 - Escreva sua funo; 5 Invoque sua funo.

Comeando

Escolhe um bom editor

EmEditor

Suporta vrias linguagens; free; Sintaxe destacada;

Comeando

Crie sua pgina HTML

Comeando

Crie o bloco de script

Comeando

Escreva sua funo

Comeando

Invoque sua funo

Comeando

Resultado

Comeando

Depois veremos mais sobre funes

Operadores Matemticos
+
Soma dois valores numricos Concatena duas Strings

Subtrao de valores numricos

*
/

Multiplicao de valores numricos

Diviso de valores numricos

Obtm o resto da diviso Ex: 7 % 3 = 1

Operadores Matemticos

Exemplo com Operador de Adio ( + )

Operadores Matemticos

Exemplo com Operador de Subtrao ( - )

Operadores Matemticos

Exemplo com Operador de Multiplicao ( * )

Operadores Matemticos

Exemplo com Operador de Diviso ( / )

Operadores Matemticos

Exemplo com Operador de Resto ( % )

Operadores Lgicos
== != >

Igual Diferente Maior

>=
<

Maior ou igual
Menor

<=
&&

Menor ou igual
E

||

Ou

Comando Condicionais

Utilizados para desviar o fluxo da aplicao.

IF SWITCH

Comandos Condicionais

Comando IF
if (condio){ //Executa se a condio verdadeira } If (condio){ //Executa se a condio verdadeira }else{ //Executa se a condio falsa }

Comandos Condicionais
If (condio1){ //Executa se a condio1 verdadeira }else if(condio2){ //Executa se a condio2 verdadeira }else if(condio3){ //Executa se a condio3 verdadeira }else{ //Executa se a condio falsa }

Comandos Condicionais

Exemplo

Comandos Condicionais

Comando SWITCH
switch(varivel){ case valor1: //Caso o valor da varivel seja igual a valor1
break;

case valor2: //Caso o valor da varivel seja igual a valor2

break;

default:
//Caso nenhum das condies sejam satisfeitas

Comandos Condicionais

Exemplo

Estruturas de Repetio

Estruturas utilizadas para executar um trecho de cdigo mais de uma vez, sem a necessidade de duplicao de cdigo, so elas:

while for do while

Estruturas de Repetio

WHILE
while(condio){ //Executa enquanto a condio seja verdadeira }

Estruturas de Repetio

FOR
for(varivel; condio; incremento){ //Executa enquanto a condio seja verdadeira }

Estruturas de Repetio

DO WHILE
do { //Executa enquanto a condio seja verdadeira }while(condio);

Eventos

So aes disparadas pela pgina, quando a pgina ou algum componente da pgina sofre uma ao, geralmente do usurio. Exemplo: Mostrar um alerta ao clicar em um boto

Eventos

Exemplo:

Evento
Evento Quando Ocorre?

onClick onSubmit onLoad onMouseOver onMouseOut onUnload

Ao clicar em um item na tela Ao submeter um formulario Ao carregar a pgina Quando passamos o mouse por cima Quando tiramos o mouse de cima Quando voc muda de pgina

Evento

Exemplos

Trabalhando com DOM

Document Object Model; Definido pela W3C; Usado pelo browser para definir sua pgina; 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 aes;

Objeto Atributos action, id, name Aes Submit()

form

input
a window

value, id, name

href, id, name title, defaultStatus

focus()
No Possue No possue

Trabalhando com DOM

Manipulando os objetos

Trabalhando com DOM

Manipulando os objetos

Perguntas