Amirton Chagas
http://amirton.wordpress.com
[email protected]
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/lice
nses/by/2.5/br/ ou envie uma
carta para Creative Commons,
171 Second Street, Suite 300,
San Francisco, California 94105,
USA.

Não tem lógica

Apenas posicionamento/layout

Provê lógica
 Dinâmica para o documento

Client-Side

Enriquece a experiência do usuário
 As vezes atrapalha…

JavaScript IS NOT Java!

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”>

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…

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

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)

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.

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
}

Semelhante ao if
 Usado quando o comportamento varia de acordo
com diferentes valores que uma única variável
pode assumir

Os scripts geralmente precisam executar
tarefas iguais repetidas vezes para valores
diferentes

Controles de loop realizam isto de forma
controlada

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

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

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…

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

+
Adição

-
Subtração

*
Multiplicação

/
Divisão

%
Resto da divisão inteira

++ Incremento em 1

--
Decremento em 1

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

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]]

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

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.

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

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

Incompatibilidade entre browsers

Dificuldade para escrever códigos simples

Linguagem error-prone

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

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.