P. 1
Treinamento AJAX - Modulo Javascript (1)

Treinamento AJAX - Modulo Javascript (1)

|Views: 6|Likes:
Published by Elísio Leonardo

More info:

Published by: Elísio Leonardo on Jun 26, 2012
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PPT, PDF, TXT or read online from Scribd
See more
See less

08/22/2014

pdf

text

original

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

onClick onSubmit onLoad onMouseOver onMouseOut onUnload

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 action, id, name Ações Submit()

form

input
a window

value, id, name
href, id, name title, defaultStatus

focus()
Não Possue Não possue

Trabalhando com DOM

Manipulando os objetos

Trabalhando com DOM

Manipulando os objetos

Perguntas

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->