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 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 2.Como conteúdo do elemento script (preferencialmente dentro de 3.Especificando um arquivo (quando pretende-se usar o mesmo código em várias páginas) alert("Executando o código");

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, evita- se 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 Conteúdo alternativo ao dispositivo caso usuário não tenha suporte alert("Parabéns, você está aprendendo JavaScript."); Parabéns, você está aprendendo JavaScript.

Comentários Dois tipos // uma linha /* */ bloco // 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. */

Comentários Browsers que não suportam JS Prevenir que exibam como se fosse conteúdo da página...

Case sensitive JS é case sensitive

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: 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 Exemplo: nomeDaVariável = (condição) ? valorSeVerdadeiro : valorSeFalso; var fruta = "Maçã"; var resposta = (fruta == "Maçã") ? "A fruta é a Maçã." : "Não sei qual é a fruta.";

Condições if if.... else if (condição) { //código a ser executado quando a condição for verdadeira. } 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 do.. while for (var = valorInicial; var <= valorFinal; var = var + incremento) { //código a ser executado. } while (var <= valorFinal) { //código a ser executado. } do { //código a ser executado. } while (var <= valorFinal);

Loops Break continue var numero = 95; for (numero = 95; numero < 150; numero++) { if(numero == 100) { break; } alert("Número: " + numero); } var idade = 20; for (idade = 20; idade <= 25; idade++) { if(idade == 24) { continue; } alert("Você tem " + idade + " anos ?"); }

Declaração de funções return Function nomeDaFuncao(varivel 1, variavel 2, variavel 3,...) { //códigos referente à função. }

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."); } }