Treinamento AJAX

Waelson Negreiros

Email: waelson@gmail.comBlog: 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ãoEx: 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 valor1break;

case valor2:

//Caso o valor da variável seja igual a valor2break;

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

WHILEwhile(condição){

//Executa enquanto a condição seja verdadeira

}

Estruturas de Repetição

FORfor(variável; condição; incremento){

//Executa enquanto a condição seja verdadeira

}

Estruturas de Repetição

DO WHILEdo {

//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 Quando Ocorre?

onClick Ao clicar em um item na tela

onSubmit Ao submeter um formulario

onLoad Ao carregar a página

onMouseOver Quando passamos o mouse por cima

onMouseOut Quando tiramos o mouse de cima

onUnload 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

TITLE

BODY

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