treinamento ajax modulo javascript
TRANSCRIPT
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