Pacote Web - JavaScript

Amirton Chagashttp://amirton.wordpress.comamirton@proativasolucoes.com

Este trabalho está licenciado sob uma Licença Creative Commons Atribuição 2.5 Brasil. Para ver uma cópia desta licença, visite http://creativecommons.org/licenses/by/2.5/br/ ou envie uma carta para Creative Commons, 171 Second Street, Suite 300, San Francisco, California 94105, USA.

HTML+CSS = Estático

Não tem lógica

Apenas posicionamento/layout

Javascript

Provê lógica Dinâmica para o documento

Client-Side

Enriquece a experiência do usuário As vezes atrapalha…

JavaScript IS NOT Java!

Tags - <script>

O código JavaScript pode estar No documento▪ <script type=“text/javascript”>

function olaMundo(){ alert(‘Hello World!’);}

Em arquivo separado▪ <script type=“text/javascript”

src=“olaMundo.js”>

Programando em Javascript

Variaveis

Espaço de memória utilizado para armazenar um valor

Nome da variável é case-sensitive pacoteWeb != pacoteweb

Não tipado

Não é necessário declarar a variável CUIDADO! var contador = 1;

Contador++;▪ Roda sem erros e dá dor de cabeça para descobrir porque não está

funcionando…

Funções

Bloco de operações a serem realizadas em sequência

Podem receber valores (parâmetros) alert(‘Texto do alerta’);

Podem retornar algum valor confirm(‘Realmente deseja continuar?’)▪ Retorna verdadeiro se o usuário escolheu Sim,

falso caso contrário

Operadores Lógicos

Comparam dois elementos, retornando true ou false

== Igual != Diferente > Maior >= Maior ou igual < Menor <= Menor ou igual && E (todos true para retornar true) || Ou (pelo menos um true para retornar true)

Condicionais

Um script tem um fluxo de execução

Deve ser necessário para ele escolher certos trechos de código para serem executados no momento apropriado

Execução condicional serve exatamente para este propósito Testa-se uma condição, e executa-se o código

de acordo com o resultado deste teste.

Condicionais - If

if (condição) { //código executado se a condição for verdadeira} else if (outra condição) { //código executado se “condição” é falso e “outra condição” for verdadeiro} else { //código executado se todas as condições testadas forem falsas}

Condicionais – Switch/case

Semelhante ao if Usado quando o comportamento varia

de acordo com diferentes valores que uma única variável pode assumir

Loop

Os scripts geralmente precisam executar tarefas iguais repetidas vezes para valores diferentes

Controles de loop realizam isto de forma controlada

Loop - While

while(condicao){ //código executado enquanto a condição for verdadeira}

Cuidado… condição pode nunca ficar falsa Loop infinito

Código pode nunca ser executado Condição pode ser falsa na primeira

execução

Loop – Do While

do { //código a ser executado} while (condição)

Semelhante a While Com a garantia que o código será

executado pelo menos uma vez

Loop - For

for (var i = 0; i < 10; i++){ //Código que, a princípio, será executado 10 vezes}

Mais controlado que o while Cuidado para não alterar

indiscriminadamente o valor do contador no código▪ Loop infinito…

Loop - break

As vezes é necessário quebrar um loop antes do esperado Antes da condição ficar falsa Antes do contador chegar ao limite

Break faz isto Cuidado▪ Legibilidade do código pode ser prejudicada

Operadores Matemáticos

+ Adição

- Subtração

* Multiplicação

/ Divisão

% Resto da divisão inteira

++ Incremento em 1

-- Decremento em 1

Funções Matemáticas

Classe Math Math.pow(x,y) = xy

Math.min(x,y) = menor entre x e y Math.max(x,y) = maior entre x e y Math.random = numero aleatório▪ [0,1)

Ver outras no autocomplete do Aptana

Eventos

São acontecimentos que ocorrem enquanto a página está sendo carregada e exibida no browser Podem ser ações do usuário, como um clique Podem ser fases do ciclo de vida da página, como

a conclusão do carregamento do documento

Cada tag suporta o disparo de determinados eventos Antes de usar, verificar referência em [[W3

School]]

Objeto window

O script pode manipular a janela do browser que contém o seu documento

O objeto window serve exatamente para expor os pontos que o script pode manipular

Objeto window

window.alert(‘aviso’); Mostra um alerta para o usuário

window.confirm(‘pergunta’); Mostra uma pergunta para o usuário. Retorna true

se o usuário escolher Sim, false caso contrário

window.prompt(‘pergunta’, ‘valor padrao’) Faz uma pergunta ao usuário, esperando uma

resposta em texto. Retorna o texto digitado pelo usuário.

Objeto window

window.location = ‘http://www.cin.ufpe.br’ Leva a janela do usuário à URL especificada

window.back() / window.forward() Mesmo que clicar no botão voltar/avançar do browser

window.close() Fecha a janela▪ Alguns browsers pedem confirmação do usuário

Explorar outros no Aptana

Objeto document

Representação do documento

document.write(‘código HTML’) Injeta código no documento

document.writeln(‘código HTML’) Injeta uma linha de código no documento

document. getElementById(‘id’) Retorna o elemento da id informada

Propriedades de imagens

Propriedades de elementos de forms

Problemas de Javascript

Incompatibilidade entre browsers

Dificuldade para escrever códigos simples

Linguagem error-prone

jQuery

Solução para os problemas citados

Facilita manipulação da página Funções para alterar a estrutura da

página abstraindo a complexidade do DOM

Termo de Exoneração de Responsabilidade A Licença Simplificada não é uma licença

propriamente dita. Ela é apenas uma referência útil para entender a Licença Jurídica (a licença integral) - ela é uma expressão dos seus termos-chave que pode ser compreendida por qualquer pessoa. A Licença Simplifica em si não tem valor legal e seu conteúdo não aparece na licença integral.

O Creative Commons não é um escritório de advocacia e não presta serviços jurídicos. A distribuição, exibição ou inclusão de links para esta Licença Simplificada não estabelece qualquer relação advocatícia.