JavaScript Introdução e Sintaxe

Transcrição

1 JavaScript Introdução e Sintaxe Ferramentas para Internet Marx Gomes Van der Linden ( Material baseado no original de Marcelo José Siqueira Coutinho de Almeida )

2 Objetivos Apresentar os principais conceitos da linguagem Javascript referente à programação do lado cliente de uma aplicação Web 2

3 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 3

4 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) 4

5 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 5

6 Limitações do HTML JavaScript vem a atender a duas demandas em especial: Processamento no lado cliente Controle do navegador 6

7 Limitações do HTML Processamento no Lado Cliente CPF: A78-11 CPF INVÁLIDO Dado tem que ser submetido ao servidor Aplicação servidora tem que testar entradas 7

8 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 8

9 Limitações do HTML Controle da Aplicação Monitorar carga e descarga de documentos Alterar propriedades conforme necessário Acessar propriedades do browser 9

10 Relação entre Tecnologias Estrutura (HTML / XHTML) Computação (JavaScript) Apresentação (CSS) 10

11 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

12 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 12

13 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. 13

14 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 14

15 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 15

16 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 16

17 Bloco <script> <html> <head> <title>.::javascript::.</title> </head> <body> <script language="javascript"> document.write("hello World!"); </script> </body> </html> 17

18 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. 18

19 Sintaxe e Estrutura Ponto e vírgula opcional Inserido automaticamente a = 3; b = 4; c = 5 d = 6 a = 3; b = 4; 19

20 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 20

21 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) 21

22 Tipos de Dados e Literais Tipos Primitivos string number boolean undefined null 22

23 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 23

24 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. 24

25 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; 25

26 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; 26

27 Strings Literais entre aspas simples ( e ) ou duplas ( e ) var frase = "aspas duplas"; var frase2 = 'aspas simples'; 27

28 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> 28

29 Strings Strings podem ter caracteres especiais: \n Quebra de Linha \r Quebra de Linha (Carriage Return) \t Tab \" " (em aspas duplas) \' ' (em aspas simples) 29

30 Números Podem ser inteiros ou de ponto flutuante Representações Decimais: 1, 200, -20 Hexadecimais: 0Xffac, 0Xaa

31 Operadores Aritméticos Javascript define os 4 operadores aritméticos: + - * / 31

32 Operadores Matemáticos Precedência de operadores: document.write(4 + 5 * 2);

33 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 33

34 Concatenação var ola = 'Hello'; var mundo = 'World' document.write(ola + ' ' + mundo + '!' ); Hello World! 34

35 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 35

36 Conversão de Tipos var a = 9; var b = 4; var c = '4' document.write( a + b + ' ' ); document.write( a b + ' ' ); document.write( a c + ' ' ); document.write( a + c + ' ' ); Saída:

37 Conversão de Tipos Vantagem Simplicidade Flexibilidade Desvantagem Programador tem que estar atento à utilização de cada variável 37

38 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; 38

39 Operadores de Incremento x = 1; x += 3; x += 'abc'; document.write(x); 4abc Saída: 39

40 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; 40

41 Pré-Incremento vs. Pós-Incremento test=1; document.write("pré-incremento: "+(++test)); document.write(" "); document.write("valor : " + test); document.write(" "); test=1; document.write("pós-incremento: "+(test++)); document.write(" "); document.write("valor : " + test); 41

42 Pré-Incremento vs. Pós-Incremento Pré-incremento: 2 Valor : 2 Pósincremento: 1 Value : 2 Pré-incremento: 2 Valor : 2 Pós-incremento: 1 Value :

43 Precedência document.write(5 + 5 * 2 + 3); document.write(", "); document.write((5 + 5) * 2 + 3); Saída: 18,

44 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);

45 Booleano Valor verdadeiro (true) ou false (false) Geralmente obtidos através de expressões condicionais ou funções lógicas condicao = true; 45

46 null e undefined Javascript define dois valores especiais relacionados: null Nenhum valor undefined Valor não definido (padrão na declaração) 46

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

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

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

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

51 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" ); 51

52 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 52

53 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 53

54 Operadores Booleanos Operadores booleanos permitem construir expressões booleanas complexas && (e) (ou)! (não) 54

55 Operadores Booleanos var a = true; var b = false; document.write((a && b)? 'Sim' : 'Não' ); document.write( ' ' ); document.write( (a b)? 'Sim' : 'Não' ); Saída: Não Sim 55

56 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; } 56

57 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 57

58 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(" Erro! "); 58

59 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 59

60 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 + " \n" ); num++; } document.write('fim'); 60

61 while Saída: 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 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 61

62 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 + " \n" ); num++; } while (num <= 10); document.write('fim'); 62

63 do... while var num = 11; do { document.write( "O número é " + num + " \n" ); num++; } while (num <= 10); document.write('fim'); O número é 11 Fim 63

64 for Um bloco for define uma maneira padronizada de se especificar um loop seqüenciado Sintaxe: for(inicialização; condição; modificação) { }

65 for for (num = 1; num <= 10; num++) { document.write( "O número é " + num + " \n" ); } document.write('fim'); 65

66 for num = 1; for (; num <= 10; num++) { document.write( "O número é " + num + " \n" ); } num = 1; for (; num <= 10; ) { document.write( "O número é " + num + " \n" ); num++; } 66

67 break Serve para interromper uma estrutura antes do momento determinado pela condição. Pode ser usado com while, do... while e for 67

68 break for (counter = -3; counter < 10; counter++) { if (counter == 0){ document.write("pára tudo!"); break; } } document.write( '/' + counter + ' ' ); 68

69 break Saída: 100/-3 100/-2 100/-1 pára tudo! 100/-3 100/-2 100/-1 Pára tudo! 69

70 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. "); continue; } } document.write( '/' + counter + ( 100 / counter) + ' ' ); 70

71 100/ / / Pula o zero. 100/ / / / / / / / /