Treinamento AJAX Waelson Negreiros Blog:

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 Quando Ocorre? onClickAo clicar em um item na tela onSubmitAo submeter um formulario onLoadAo carregar a página onMouseOverQuando passamos o mouse por cima onMouseOutQuando tiramos o mouse de cima onUnloadQuando 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

Trabalhando com DOM Objetos possuem atributos; Objetos podem executar ações; ObjetoAtributosAções formaction, id, nameSubmit() inputvalue, id, namefocus() ahref, id, nameNão Possue windowtitle, defaultStatusNão possue

Trabalhando com DOM Manipulando os objetos

Trabalhando com DOM Manipulando os objetos

Perguntas