JavaScript Introdução e Sintaxe Ferramentas para Internet Marx Gomes Van der Linden ( Material baseado no original de Marcelo José Siqueira Coutinho de Almeida )
Objetivos Apresentar os principais conceitos da linguagem Javascript referente à programação do lado cliente de uma aplicação Web http://marx.vanderlinden.com.br/ 2
Introdução HTML é uma linguagem voltada para definir a estrutura de documentos Não é uma linguagem de programação Se houver qualquer necessidade de processar uma informação, esta deve ser enviada ao servidor Pode-se usar applets Java ou plug-ins, mas isso torna a tarefa mais complexa http://marx.vanderlinden.com.br/ 3
Introdução HTML é uma linguagem voltada para definir a estrutura de documentos (cont.) Não é uma linguagem de formatação (completa) A aparência dos documentos não pode ser completamente controlada. Necessidade de uma linguagem complementar: Folhas de Estilo (CSS) http://marx.vanderlinden.com.br/ 4
Introdução HTML é uma linguagem declarativa criada para estruturar páginas de hipertexto através de marcadores que descrevem a função de blocos de texto. Documentos HTML não são apenas para ler, e sim para processar http://marx.vanderlinden.com.br/ 5
Limitações do HTML JavaScript vem a atender a duas demandas em especial: Processamento no lado cliente Controle do navegador http://marx.vanderlinden.com.br/ 6
Limitações do HTML Processamento no Lado Cliente CPF: 199755A78-11 CPF INVÁLIDO Dado tem que ser submetido ao servidor Aplicação servidora tem que testar entradas http://marx.vanderlinden.com.br/ 7
Limitações do HTML Processamento no Lado Cliente Dados incorretos não precisam ser passados ao servidor Diminuição de tráfego Aplicação concentra-se em seu objetivo principal Foco na solução http://marx.vanderlinden.com.br/ 8
Limitações do HTML Controle da Aplicação Monitorar carga e descarga de documentos Alterar propriedades conforme necessário Acessar propriedades do browser http://marx.vanderlinden.com.br/ 9
Relação entre Tecnologias Estrutura (HTML / XHTML) Computação (JavaScript) Apresentação (CSS) http://marx.vanderlinden.com.br/ 10
JavaScript É uma linguagem de programação interpretada com características de orientação a objetos Desenvolvida pela Netscape a fim de estender as capacidades de seu browser Permite que conteúdo executável seja incluído em páginas web Sintaticamente semelhante a C e C++ http://marx.vanderlinden.com.br/ 11
JavaScript Java! Java é uma linguagem orientada a objetos desenvolvida pela Sun Microsystems com um escopo bastante amplo (não necessariamente ligado à web) O nome JavaScript foi escolhido por mera questão de marketing... Seu nome ia ser LiveScript http://marx.vanderlinden.com.br/ 12
DOM Combina as características de uma linguagem de script com o Modelo de Objetos de Documentos DOM : Document Object Model Define uma hierarquia de objetos que são baseados no conteúdo de uma página web: Formulários, Imagens, Elementos de Bloco, etc. http://marx.vanderlinden.com.br/ 13
Destaques da Linguagem Controlar a aparência e conteúdo do documento Escrever código em documento enquanto ele está sendo interpretado pelo browser Controlar o browser Abrir novas janelas, exibir mensagens na barra de status, etc. Manipular formulários HTML http://marx.vanderlinden.com.br/ 14
Código JavaScript Podemos dividir o código JavaScript em três partes: Código comum Realiza qualquer tarefa Manipulação de eventos Funções devem ser chamadas para manipular os eventos Manipulação do Browser O browser é tratado como uma hierarquia de objetos http://marx.vanderlinden.com.br/ 15
Código JavaScript Blocos <script> Usado para definir funções que serão usadas dentro da mesma página, gerar HTML Arquivos externos Definir funções que serão usadas por várias páginas (.js) Junto à tags HTML Manipulação de eventos http://marx.vanderlinden.com.br/ 16
Bloco <script> <html> <head> <title>.::javascript::.</title> </head> <body> <script language="javascript"> document.write("hello World!"); </script> </body> </html> http://marx.vanderlinden.com.br/ 17
Sintaxe e Estrutura Estrutura Léxica Case Sensitive Valor, VALOR e VaLOR são variáveis diferentes Na maior parte dos casos, Javascript ignora espaços em branco. Inclusive tabulações e quebras de linha. http://marx.vanderlinden.com.br/ 18
Sintaxe e Estrutura Ponto e vírgula opcional Inserido automaticamente a = 3; b = 4; c = 5 d = 6 a = 3; b = 4; http://marx.vanderlinden.com.br/ 19
Sintaxe e Estrutura Comentários Suporta estilos de C e C++ /* texto entre duas marcas */ // texto até o fim da linha /* isso é um comentário de várias linhas */ // comenta // até o fim da linha http://marx.vanderlinden.com.br/ 20
Sintaxe e Estrutura Declaração de variáveis Não é necessário inicializar a variável na declaração Nesse caso o valor é indefinido (undefined) http://marx.vanderlinden.com.br/ 21
Tipos de Dados e Literais Tipos Primitivos string number boolean undefined null http://marx.vanderlinden.com.br/ 22
Tipos de dados Os tipos de dados em Javascript são implícitos Interpretador faz tudo automaticamente Strings "Texto de uma string" Números 15, 15.6, 18.23e10 Arrays e tipos complexos http://marx.vanderlinden.com.br/ 23
Variáveis Uma variável associa um nome a um valor na memória do computador. Javascript permite declarações explícitas ou implícitas de variáveis. http://marx.vanderlinden.com.br/ 24
Variáveis Declaração implícita Atribui-se um valor a um identificador cujo nome não seja uma palavra reservada salario = 1000; nome = "João"; Declaração explicita Usa-se a palavra reservada var para definir que o identificador a seguir é uma variável var salario; var nome; http://marx.vanderlinden.com.br/ 25
Variáveis Declaração de variáveis var i; var soma; var i, soma; var i = "olá, mundo" var soma = 0, y = 10, x = 20; http://marx.vanderlinden.com.br/ 26
Strings Literais entre aspas simples ( e ) ou duplas ( e ) var frase = "aspas duplas"; var frase2 = 'aspas simples'; http://marx.vanderlinden.com.br/ 27
Strings Combinações de aspas simples e duplas facilitam a mesclagem de código HTML e Javascript txt = '<a href="link.html"> Link </a>'; document.write(txt); <a href="link.html"> Link </a> http://marx.vanderlinden.com.br/ 28
Strings Strings podem ter caracteres especiais: \n Quebra de Linha \r Quebra de Linha (Carriage Return) \t Tab \" " (em aspas duplas) \' ' (em aspas simples) http://marx.vanderlinden.com.br/ 29
Números Podem ser inteiros ou de ponto flutuante Representações Decimais: 1, 200, -20 Hexadecimais: 0Xffac, 0Xaa11 http://marx.vanderlinden.com.br/ 30
Operadores Aritméticos Javascript define os 4 operadores aritméticos: + - * / http://marx.vanderlinden.com.br/ 31
Operadores Matemáticos Precedência de operadores: document.write(4 + 5 * 2); 14 http://marx.vanderlinden.com.br/ 32
Operador de Contatenação O operador + tem duas funções em Javascript: Número + Número Adição String + String Número + String Concatenação String + Número http://marx.vanderlinden.com.br/ 33
Concatenação var ola = 'Hello'; var mundo = 'World' document.write(ola + ' ' + mundo + '!' ); Hello World! http://marx.vanderlinden.com.br/ 34
Conversão de Tipos Em JavaScript, os tipos das variáveis são implícitos O tipo da variável depende do valor assumido naquele instante y = 10 y = "nome" A conversão de tipos é automática e transparente ao usuário Não existe casting http://marx.vanderlinden.com.br/ 35
Conversão de Tipos var a = 9; var b = 4; var c = '4' document.write( a + b + '<br>' ); document.write( a b + '<br>' ); document.write( a c + '<br>' ); document.write( a + c + '<br>' ); Saída: 13 5 5 94 http://marx.vanderlinden.com.br/ 36
Conversão de Tipos Vantagem Simplicidade Flexibilidade Desvantagem Programador tem que estar atento à utilização de cada variável http://marx.vanderlinden.com.br/ 37
Operadores de incremento Operadores de incremento servem como expressões de atalho para realizar incrementos em variáveis num = num + y; num += y; num = num - y; num -= y; num = num * y; num *= y; num = num / y; num /= y; str = str + s; str += s; http://marx.vanderlinden.com.br/ 38
Operadores de Incremento x = 1; x += 3; x += 'abc'; document.write(x); 4abc Saída: http://marx.vanderlinden.com.br/ 39
Auto-incremento Atalhos para adicionar e remover 1 ao valor de uma variável. num = num + 1; num += 1; num = num - 1; num -= 1; num++; ou ++num; num--; ou --num; http://marx.vanderlinden.com.br/ 40
Pré-Incremento vs. Pós-Incremento test=1; document.write("pré-incremento: "+(++test)); document.write("<br>"); document.write("valor : " + test); document.write("<br>"); test=1; document.write("pós-incremento: "+(test++)); document.write("<br>"); document.write("valor : " + test); http://marx.vanderlinden.com.br/ 41
Pré-Incremento vs. Pós-Incremento Pré-incremento: 2<br>Valor : 2<BR>Pósincremento: 1<br>Value : 2 Pré-incremento: 2 Valor : 2 Pós-incremento: 1 Value : 2 http://marx.vanderlinden.com.br/ 42
Precedência document.write(5 + 5 * 2 + 3); document.write(", "); document.write((5 + 5) * 2 + 3); Saída: 18, 23 http://marx.vanderlinden.com.br/ 43
Associatividade A maioria dos operadores indica que os operandos são avaliados da esquerda para a direita. O operador de atribuição ( = ) é associado da direita para a esquerda: x = y = z = 19; document.write(x + ' ' + y + ' ' + z); 19 19 19 http://marx.vanderlinden.com.br/ 44
Booleano Valor verdadeiro (true) ou false (false) Geralmente obtidos através de expressões condicionais ou funções lógicas condicao = true; http://marx.vanderlinden.com.br/ 45
null e undefined Javascript define dois valores especiais relacionados: null Nenhum valor undefined Valor não definido (padrão na declaração) http://marx.vanderlinden.com.br/ 46
if A construção if executa um bloco de instruções caso uma expressão seja verdadeira Sintaxe: if( x == 8 ){ document.write("x é igual a oito."); } http://marx.vanderlinden.com.br/ 47
else A instrução else só pode ocorrer após um bloco if. Indica o que fazer, caso a expressão seja avaliada como falsa. if( x == 8 ){ document.write("x é igual a oito."); } else { document.write("x é diferente de oito."); } http://marx.vanderlinden.com.br/ 48
Bloco if-else Parênteses são obrigatórios ao redor da expressão. Os caracteres {} delimitando o bloco são opcionais, se este contiver apenas uma instrução if( x == 8 ) document.write("x é igual a oito."); else document.write("x é diferente de oito."); http://marx.vanderlinden.com.br/ 49
else if A construção else if pode servir para testar várias condições: if( x < 8 ){ document.write("x é menor que oito."); } else if( x == 8){ document.write("x é igual a oito."); } else { document.write("x é maior que oito."); } http://marx.vanderlinden.com.br/ 50
Operador?? é o operador ternário Permite expressar de forma mais concisa uma operação de decisão Sintaxe: condição? expressão1 : expressão2 document.write( (x == 8)? "X é igual a 8" : "X é diferente de 8" ); http://marx.vanderlinden.com.br/ 51
Expressões Booleanas Uma expressão boolena pode ter dois valores: Verdadeiro (true) False (false) Em Javascript, todas as expressões podem ser avaliadas como booleanas http://marx.vanderlinden.com.br/ 52
Expressões Booleanas Quase todas as expressões são avaliadas como verdadeiras, exceto se seu resultado for: O inteiro 0 O número real 0.0 O string '' null ou undefined http://marx.vanderlinden.com.br/ 53
Operadores Booleanos Operadores booleanos permitem construir expressões booleanas complexas && (e) (ou)! (não) http://marx.vanderlinden.com.br/ 54
Operadores Booleanos var a = true; var b = false; document.write((a && b)? 'Sim' : 'Não' ); document.write( ' <br> ' ); document.write( (a b)? 'Sim' : 'Não' ); Saída: Não <br> Sim http://marx.vanderlinden.com.br/ 55
switch-case Compara uma expressão a vários valores. switch (cor) { case "azul": document.write("color: blue;"); break; case "vermelho": document.write("color: #FF0000;"); document.write("text-decoration: linethrough;"); break; case "preto": document.write("color: #000000;"); break; } http://marx.vanderlinden.com.br/ 56
switch-case Funciona com strings, inteiros e números reais. A instrução break, ao fim de cada caso, indica que a execução deve parar. Se for omitida, a execução continua. default: o que fazer se nenhuma das condições for cumprida http://marx.vanderlinden.com.br/ 57
switch-case-default switch (acao) { case 'preparar': document.write("<li> Preparar </li>\n"); case 'embalar': document.write("<li> Embalar </li>\n"); case 'enviar': document.write("<li> Enviar</li>\n"); break; } default: document.write("<em> Erro! </em>"); http://marx.vanderlinden.com.br/ 58
Loops Loops são estruturas que permite repetir várias vezes a mesma peça de código, até que uma condição seja satisfeita while do.. while for http://marx.vanderlinden.com.br/ 59
while A instrução while repete um bloco de instruções, enquanto a condição especificada for verdadeira var num = 1; while (num <= 10){ document.write( "O número é " + num + "<br>\n" ); num++; } document.write('fim'); http://marx.vanderlinden.com.br/ 60
while Saída: O número é 1 <br> O número é 2 <br> O número é 3 <br> O número é 4 <br> O número é 5 <br> O número é 6 <br> O número é 7 <br> O número é 8 <br> O número é 9 <br> O número é 10 <br> Fim O número é 1 O número é 2 O número é 3 O número é 4 O número é 5 O número é 6 O número é 7 O número é 8 O número é 9 O número é 10 Fim http://marx.vanderlinden.com.br/ 61
do... while A instrução do.. while funciona da mesma maneira que o while, mas o bloco é executado ao menos uma vez. var num = 1; do { document.write( "O número é " + num + "<br>\n" ); num++; } while (num <= 10); document.write('fim'); http://marx.vanderlinden.com.br/ 62
do... while var num = 11; do { document.write( "O número é " + num + "<br>\n" ); num++; } while (num <= 10); document.write('fim'); O número é 11 <br> Fim http://marx.vanderlinden.com.br/ 63
for Um bloco for define uma maneira padronizada de se especificar um loop seqüenciado Sintaxe: for(inicialização; condição; modificação) { }... http://marx.vanderlinden.com.br/ 64
for for (num = 1; num <= 10; num++) { document.write( "O número é " + num + "<br>\n" ); } document.write('fim'); http://marx.vanderlinden.com.br/ 65
for num = 1; for (; num <= 10; num++) { document.write( "O número é " + num + "<br>\n" ); } num = 1; for (; num <= 10; ) { document.write( "O número é " + num + "<br>\n" ); num++; } http://marx.vanderlinden.com.br/ 66
break Serve para interromper uma estrutura antes do momento determinado pela condição. Pode ser usado com while, do... while e for http://marx.vanderlinden.com.br/ 67
break for (counter = -3; counter < 10; counter++) { if (counter == 0){ document.write("pára tudo!"); break; } } document.write( 100 + '/' + counter + '<br>' ); http://marx.vanderlinden.com.br/ 68
break Saída: 100/-3 <br>100/-2 <br>100/-1 <br>pára tudo! 100/-3 100/-2 100/-1 Pára tudo! http://marx.vanderlinden.com.br/ 69
continue Interrompe apenas a iteração atual do loop, e passa para a próxima. for (counter=-3;counter<10;counter++){ if (counter==0){ document.write("pula o zero.<br>"); continue; } } document.write( 100 + '/' + counter + ( 100 / counter) + '<br>' ); http://marx.vanderlinden.com.br/ 70
100/-3-33.3333333333 100/-2-50 100/-1-100 Pula o zero. 100/1 100 100/2 50 100/3 33.3333333333 100/4 25 100/5 20 100/6 16.6666666667 100/7 14.2857142857 100/8 12.5 100/9 11.1111111111 http://marx.vanderlinden.com.br/ 71