Tópicos avançados em
internet B
Carlos Oberdan Rolim
Ciência da Computação
Javascript
Tecnologias que iremos estudar
Javascript
DOM
JSON
CSS
XMLHTTP
Introdução
Criador: Brendan Eich, programador da Netscape
1995.
Primeiro nome de batismo: LiveScript (1995)
Netscape Navigator 2.0
Nome JavaScript, apareceu em 4 de Dezembro de 1995
Introdução
Linguagem client-side
Executada via browser
Browser disponibiliza objetos que permitem ler e/ou modificar
atributos de todos os elementos da página
Interação rica com o usuário: botões, novas janelas,
formulários
Inserindo Javascript
3 formas de uso
1. Associando código a atributos designadores de handlers de eventos
<input type="button" value="clickMe" onClick=‘alert("thanks to click me!");’ />
2. Como conteúdo do elemento script (preferencialmente dentro de
<head>
<script type="text/javascript" >
alert("Executando o código");
</script>
3. Especificando um arquivo (quando pretende-se usar o mesmo código
em várias páginas)
<SCRIPT SRC=“arquivo.js">
Inserindo Javascript
Porque usar preferencialmente de forma externa
Facilidade na manutenção
Uma vez que o script está localizado em apenas um arquivo, facilita a
edição ou correção dos códigos.
Carregamento mais rápido da página
O arquivo externo é armazenado no cache do navegador. Assim, evitase carregá-lo toda vez que a página for chamada.
Semântico
O arquivo externo separa a camada de comportamento (JavaScript) da
camada de conteúdo (HTML).
Tag <noscript>
Conteúdo alternativo ao dispositivo caso usuário não tenha
suporte
<script type="text/javascript">
alert("Parabéns, você está aprendendo JavaScript.");
</script>
<noscript>
<p>Parabéns, você está aprendendo JavaScript.</p>
</noscript>
Comentários
Dois tipos
// uma linha
/* */ bloco
<script type="text/javascript">
// Isto é um comentário de uma linha.
/* Isto é um comentário de várias linhas, e o
interpretador ignora todo esse conteúdo.
O que nos permite a criação de notas e lembretes em nossos códigos.
*/
</script>
Comentários
Browsers que não suportam JS
Prevenir que exibam como se fosse conteúdo da página
...
<head>
<script type="text/javascript">
<!-//códigos JavaScript
//-->
</script>
</head>
...
Case sensitive
JS é case sensitive
<script type="text/javascript">
<!-var txtMsg = "Você foi introduzido ao JavaScript.";
alert(txtmsg); // Isto irá causar um erro.
//-->
</script>
Final de declarações
Opcional
Usar ponto e virgula (;) ao final de declarações que usam
mesma linha
Boa prática recomenda usar sempre ;
alert("Estes detalhes..."); alert("... são importantes");
alert("Notou...")
alert("A diferença?")
Variáveis
Não é fortemente tipada
Deve-se iniciar o nome de uma variável com uma letra ou
com um sublinhado (_).
Declaração:
var nomeVariavel = "valorVariavel";
ou
nomeVariavel = "valorVariavel";
var minhaVariavel = “meu valor”;
inicializando a variavel
Tipos primitivos
Valores númericos (inteiros e reais)
Exs: 42 3.1415 50.0 NaN (lê-se not a number e é o resultado de
uma expressão com um operando que não pode ser convertido em
valor numérico)
Valores lógicos (booleanos).
true e false
Cadeias de caracteres (strings)
Ex: "Isto é uma string!"
x
Tipos primitivos
undefined representa o conteúdo de variáveis não
iniciadas
null representa o não valor, ou seja a inexistência de
valor associado a uma variável
Ex: varA= null; // varA passou a valer null!
Variáveis locais e globais
Existem variáveis globais e locais
Escopo
Operadores
Aritméticos
Operadores
Comparação
Operadores
Atribuição
Operadores
Lógicos
Operadores
Binários
Operadores
Condicional
nomeDaVariável = (condição) ? valorSeVerdadeiro : valorSeFalso;
Exemplo:
var fruta = "Maçã";
var resposta = (fruta == "Maçã") ? "A fruta é a Maçã." : "Não sei qual é a fruta.";
Condições
if
if (condição) {
//código a ser executado quando a condição for verdadeira.
}
if.... else
if (condição) {
//código a ser executado quando a condição for verdadeira.
} else {
//código a ser executado quando a condição for falsa.
}
Condições
If... else if ... else
if (condição) {
//código a ser executado quando a condição for verdadeira.
} else if (2º condição) {
//código a ser executado quando a 2º condição for verdadeira.
} else {
//código a ser executado quando a primeira e a segunda condição forem falsas.
}
Condições
Switch
switch(expressão) {
case valor 1:
//código a ser executado se a expressão = valor 1;
break
case valor 2:
//código a ser executado se a expressão = valor 2;
break
default:
//código a ser executado se a expressão for diferente do valor 1 e valor 2;
}
Loops
for
while (var <= valorFinal) {
//código a ser executado.
}
while
for (var = valorInicial; var <= valorFinal; var = var + incremento) {
//código a ser executado.
}
do.. while
do {
//código a ser executado.
} while (var <= valorFinal);
Loops
Break
var numero = 95;
for (numero = 95; numero < 150; numero++) {
if(numero == 100) {
break;
}
alert("Número: " + numero);
}
var idade = 20;
continue
for (idade = 20; idade <= 25; idade++) {
if(idade == 24) {
continue;
}
alert("Você tem " + idade + " anos ?");
}
Declaração de funções
Function nomeDaFuncao(varivel 1, variavel 2, variavel 3, ...) {
//códigos referente à função.
}
return
Popup boxes
Alert
alert(‘teste’);
Confirm
confirm(‘Confirma ?’);
Popup boxes
Prompt
prompt(“Informe idade","");
Popup boxes
Exemplo de uso de boxes
var querMsg = confirm("Gostaria de receber uma mensagem de boas vindas?");
if(querMsg) {
var nome = prompt("Por favor, qual o seu nome?","");
if(nome != null && nome != "") {
alert("Olá " + nome + ", seja bem vindo.");
}
}
Download
