REDES DE COMUNICAÇÃO

Transcrição

1 REDES DE COMUNICAÇÃO Curso Profissional de Técnico de Gestão e Programação de Sistemas Informáticos MÓDULO V Desenvolvimento de Páginas Web Dinâmicas (JavaScript) Duração: 60 tempos

2 Conteúdos (1) 2 Introdução à programação em JavaScript. Diferenças entre scripting do lado do servidor e do lado do cliente. Estrutura dos programas em JavaScript. Questões de sintaxe; ficheiros externos. Técnicas básicas de escrita de páginas dinâmicas com eventos em JavaScript. Variáveis, tipos de dados, âmbito e tempo de vida. Operadores: aritméticos, incremento ou decremento, concatenação, bit a bit, lógicos e relacionais.

3 Conteúdos (2) Funções; Funções predefinidas: eval, isnan, parseint e parsefloat. Instruções condicionais: if e switch. Instruções cíclicas: while, for, break e continue. Objectos: propriedades e métodos. Objectos predefinidos: String, Date, Math e Arrray. Cookies e noção de sessão. Tratamento de erros. 3

4 Notas introdutórias (1) O JavaScript é Uma linguagem de programacão da família da linguagem C Criada para a Internet pela Netscape em 1995 Standard definido pelo ECMA (European Computers Manufacuring organization) ECMA-261 (ISO-16262) ECMA Netscape Microsoft Os recursos para programar em JavaScript sao triviais Um editor de texto simples para escrever o código Um navegador (browser) para testar 4

5 Notas introdutórias (2) 5 Características Linguagem embebida no HTML Orientada a eventos Não compilada Interpretada Independente da plataforma Vantagens Semelhante a linguagem C Fácil aprendizagem Não exige recursos do lado do servidor Rápida, não tem de esperar por resposta do servidor Segura, porque não permite ler ou escrever no computador do visitante (excepto os cookies) do sitio, nem no servidor

6 Notas introdutórias (3) Desvantagens O código fica exposto no meio do código HTML Não é uma ferramenta adequada para aceder a base de dados E menos versátil do que o Java Potencialidades Gerar HTML Reagir a acções do visitante Gerar conteúdos dinâmicos Verificar o correcto preenchimento de formulários Criar efeitos gráficos 6

7 Diferenças entre scripting do lado do servidor e do lado do cliente. Do lado do cliente (exemplo: javascript) - O código fica exposto no meio do código HTML. - O código corre no cliente. - As validações são efectuadas no cliente diminuindo o tráfego de rede e aumentando a velocidade de funcionamento. Do lado do servidor (exemplo: php) - O código fica protegido e o cliente só vê o html criado pelo código. - O código corre no servidor. - As validações que ocorrem no servidor aumentam o tráfego de rede e diminuem a velocidade de funcionamento. 7

8 Estrutura dos programas em JavaScript OlaMundo.htm 8

9 Questões de sintaxe Todas as instruções devem terminar com ponto e virgula (;) Linguagem sensível a maiúsculas e a minúsculas, por exemplo A instrução while não deve ser escrita While A variável idade é diferente da variável Idade ou IDADE A função calculo é diferente da função Calculo ou CALCULO Os espaços em branco são ignorados var x=0; var x = 0; Utilização de comentários /* comentário */ permite ter varias linhas de comentários // comentário apenas numa linha 9

10 Exemplo de comentários coment.htm 10

11 Ficheiros externos Quando se pretende que o mesmo código seja usado por vários documentos O ficheiro externo com código JavaScript Deve ser um ficheiro com extensão.js Deve ser invocado a partir do ficheiro HTML Deve ser invocado na forma <script src= ficheiroexterno.js ></script> Nao deve conter a marca <script> 11

12 Exemplo de utilização de ficheiros externos 12

13 Eventos (1) O JavaScript é uma linguagem orientada a eventos Os eventos podem ser produzidos Pelo sistema Carregar ou descarregar uma página Por acção directa do visitante Premir um botão do rato 13

14 Eventos (2) 14 A cada evento corresponde o respectivo manipular de evento onblur, onclick, onchange, onfocus, onload, onmouseover, onselect, onsubmit, onunload

15 Eventos de sistema (1) eventossistema.htm 15

16 Eventos de sistema (2) 16

17 Eventos de utilizador (1) eventosutilizador.htm 17

18 Eventos de utilizador (2) 18

19 Envio de formulários (1) envioform.htm 19

20 Envio de formulários (2) 20

21 Detecção do foco (1) detfoco.htm 21

22 Detecção do foco (2) 22

23 Colocação inicial do foco (1) ColocaFoco.htm 23

24 Colocação inicial do foco (2) 24

25 Janelas pop-up (1) JanelaPopup.htm 25

26 Janelas pop-up (2) 26

27 Variáveis (1) Nome atribuído a uma posição de memória onde se pode armazenar dados Vars1.htm 27

28 Variáveis (2) Declaração var x; var y, z; var a=2, b=3; Tipos Não é necessário indicar o tipo das variáveis Conversão entre tipos a=b.tostring(); //conversão de número, ou objecto, para string c=d.parseint(); //conversão de string para número inteiro e=f.parsefloat(); //conversão de string para número real 28

29 Operadores 29

30 Precedência dos Operadores 30

31 Operadores: Aritméticos OpArit.htm 31

32 Operadores: Incremento e Decremento Operador Nome ++ Incremento -- Decremento As instrucoes b++ (pos-incremento) e ++b (pre-incremento) incrementam a variavel b de uma unidade. As instrucoes b-- (pos-decremento) e --b (pre-decremento) decrementam a variavel b de uma unidade 32

33 Operadores: Atribuição 33

34 Operadores: Relacionais OpRelac.htm 34

35 Operadores: Lógicos OpLogic.htm 35

36 Operadores: bit a bit 36

37 Operadores: concatenação OpConcat.htm 37

38 Funções 38 Sequência de instruções que constitui uma entidade coerente e que pode ser invocada a partir de qualquer ponto do programa. O JavaScript possui funções predefinidas parseint(string), parsefloat(string),... O programador pode criar as suas funções que são, usualmente, definidas no cabeçalho do ficheiro e invocadas posteriormente Podem ter argumentos que são passados na chamada da função e usados pela função como variáveis locais Podem devolver um valor ao programa de chamada mediante a utilização da instrução return

39 Exemplo de uma função Func1.htm 39

40 Funções: Exercício? Func3.htm Crie uma função que devolva o maior de 2 números introduzidos pelo utilizador. Dica: numa=parsefloat(numa) 40

41 Âmbito e tempo de vida das variáveis (1) Podem ser declaradas fora de qualquer função: Tornam-se variáveis globais. Só são destruídas quando a página é encerrada. São acessíveis em qualquer lugar da página, ou seja, no script onde foi declarada e todos os demais scripts da página, incluindo os que são chamados pelos eventos (como o onclick). 41

42 Âmbito e tempo de vida das variáveis (2) Podem ser declaradas no interior de uma função: Tornam-se variáveis locais quando são declaradas utilizando o var. Quando se abandona a função a variável local é destruída. Tornam-se variáveis globais se forem criadas sem utilizar o var. 42

43 Âmbito e tempo de vida das variáveis (3) Func2.htm 43

44 Âmbito e tempo de vida das variáveis (4) Func4.htm 44

45 Âmbito e tempo de vida das variáveis (5) Func4.htm 45

46 Funções Globais: eval(expr) converte a expressão para um valor numérico; isnan(v) avalia se o valor v é ou não um valor numérico, retornando true ou false; parseint(s) converte a string s para um número inteiro; parsefloat(s) converte a string s para um float, com casas decimais se for caso disso. 46

47 Máquina de calcular (1) O que se vai testar Receber os valores introduzidos pelo visitante num formulário Processar os valores utilizando operadores aritméticos Apresentar resultados Para compreender o exemplo basta perceber o funcionamento da adição e depois aplicar para as outras operações; no entanto para a potenciação é necessário utilizar o método pow() do objecto Math. O formulário utilizado para a calculadora deve apresentar o seguinte layout 47

48 Máquina de calcular (2) Os botões das operações tem manipuladores de evento onclick que invocam as funções correspondentes Para aceder a cada caixa de texto, utiliza-se a notacao document.forms[i].elements[j].value Com forms[i] a indicar que a referência é ao formulário i e elements[j] a indicar que é o elemento j do formulário i No exemplo da calculadora primeira caixa de texto (campo a): elements[0] botão de adição (botão para adição): elements[1]... segunda caixa de texto (campo b): elements[6] terceira caixa de texto (campo resultado): elements[7] 48

49 Máquina de calcular (3) MaqCalc.htm 49

50 Máquina de calcular (4) MaqCalc.htm 50

51 Máquina de calcular (5) MaqCalc.htm 51

52 Máquina de calcular (6) 52

53 Instruções condicionais: if If.htm 53

54 Instruções condicionais: Exercício? If2.htm Crie uma função que devolva o maior de 3 números inteiros introduzidos pelo utilizador. 54

55 Exemplo de validação de formulários (1) Pretende-se que o código Javascript faça as seguintes validações: O campo Nome esta preenchido O campo Número do BI esta preenchido com, pelo menos, 7 caracteres Apenas tem algarismos O campo Ano Não tem mais de 4 algarismos Tem apenas algarismos O seu valor deve ser posterior a 1900 O campo Mês Tem 2 caracteres Deve ter um valor entre 01 e 12 O campo Correio electrónico deve ter um 55

56 Exemplo de validação de formulários (2) Form.htm 56

57 Exemplo de validação de formulários (3) Form.htm 57

58 Exemplo de validação de formulários (4) Form.htm 58

59 Exemplo de validação de formulários (5) Form.htm 59

60 Instruções condicionais: switch(1) Switch1.htm 60

61 Instruções condicionais: switch(2) Switch2.htm 61

62 Instruções condicionais: switch Exercício? Switch3.htm Um algoritmo que dado um inteiro, introduzido entre 1 e 5 apresente na página o respectivo número por extenso. 62

63 Instruções cíclicas: O ciclo while (1) While1.htm 63

64 Instruções cíclicas: O ciclo while (2) While2.htm 64

65 Instruções cíclicas:o ciclo while Exercício? While3.htm Calcule 10 multiplos de um número introduzido pelo utilizador. 65

66 Instruções cíclicas:o ciclo while Exercício? While4.htm Calcule a média de 5 números introduzidos pelo utilizador. 66

67 Instruções cíclicas:o ciclo while Exercício? While5.htm Dada uma sequência de números positivos, pretende-se calcular o produto dos números pares e a soma dos números impares. O ciclo termina com o 0 introduzido. 67

68 Instruções cíclicas: O ciclo for (1) For1.htm 68

69 Instruções cíclicas: O ciclo for (2) Exercício? For2.htm Crie com um ciclo for a tabuada de um número pedido ao utilizador. 69

70 Instruções cíclicas: O ciclo for (3) - Resolução For2.htm 70

71 Instruções cíclicas: O ciclo for (4)- Exercício? For3.htm Crie utilizando ciclos for a tabuada dos números de 1 a

72 Instruções cíclicas: A instrução break (1) Break1.htm 72

73 Instruções cíclicas: A instrução break (2) Break2.htm Crie um ciclo que some os números introduzidos pelo utilizador. O ciclo deve ser interrompido quando a soma for superior a

74 Instruções cíclicas: A instrução continue Continue.htm 74

75 Objectos 75 O Javascript dispõe de um conjunto de objectos predefinidos, por exemplo: document, window, Math, Frame, String, Form, Array, Browser, Date Os objectos tem atributos (variáveis) e métodos (funções). A sintaxe para a utilização de objectos, métodos e atributos é a seguinte: objecto.atributo objecto.metodo() Exemplos document.write() Invoca o método write() do objecto document document.forms[0] Invoca o primeiro formulário do documento window.alert() Invoca o método alert() do objecto window Math.pow() Invoca o método pow() do objecto Math St.length Invoca o atributo length de um objecto com o nome St St.toLowerCase() Invoca o método tolowercase() de um objecto com o nome St

76 Propriedades de um objecto Object.htm 76

77 Métodos de um objecto Método.htm 77

78 Criação de novos objectos com propriedades e métodos ObjectoNovo1.htm 78

79 Criação de novos objectos Exercício? ObjectoNovo2.htm Crie um objecto novo chamado circulo e defina três propriedades raio, área e perímetro. O construtor deve ter como argumento o raio. Crie dois objectos tipo circulo e imprima na página as suas propriedades. 79

80 Animação interactiva (1) Animacao1.htm 80

81 Animação interactiva (2) 81

82 Animação temporizada (1) Animacao2.htm 82

83 Animação temporizada (2) Esta imagem é mostrada 1 s Esta imagem é mostrada 3 s 83

84 O objecto predefinido String (1) 84 S1 = Isto é uma string ; S2 = new String ( Isto é outra string ); É criado um objecto do tipo string, em JS quando uma variável recebe por valor uma string que passa a ser tratada como um objecto do tipo string. S2.length - propriedade que se refere ao número de caracteres da string. A todos os objectos do tipo string podem ser aplicados métodos, como: S1.toLowerCase(); Reescreve a string em minúsculas; S1.toUpperCase(); Reescreve a string em MAIÚSCULAS; S2.bold(); S2.italics(); Negrito e Itálico; S1.concat(S2); Concatena à string o conteúdo da outra string; S2.substr(início, comprimento); Devolve os elementos da string S2 a começar em início e com o número de caracteres indicado em comprimento.

85 O objecto predefinido String (2) String1.htm 85

86 O objecto predefinido String (3) 86

87 O objecto predefinido String (4) 87

88 O objecto predefinido String (5) String2.htm 88

89 O objecto predefinido String (6) String2.htm 89

90 O objecto predefinido String (7) String3.htm 90

91 Caracteres especiais nas strings (1) ó í 91

92 Caracteres especiais nas strings (2) String4.htm 92

93 O objecto predefinido Date (1) 93

94 O objecto predefinido Date (2) 94

95 O objecto predefinido Date (3) Datas1.htm 95

96 O objecto predefinido Date (4) Datas2.htm 96

97 O objecto predefinido Math (1) Propriedades do Objecto Math: Métodos do Objecto Math: 97 Math.floor(x) devolve o valor arredondado de x para o inteiro mais baixo

98 O objecto predefinido Math (2) Métodos do Objecto Math: 98

99 O objecto predefinido Math (3) Math.htm 99

100 Vectores (1) X = new Array(); Cria um array X; Y = new Array(n); Cria um array Y com n elementos; Z = new Array(e1, e2, e3); Cria um array Z com os elementos que o compõem inicializados; O acesso aos elementos de um array faz-se invocando o índice do array. X[1] refere-se ao segundo elemento do array (em JavaScript o 1ºelemento de um array é 0); X.length; propriedade que se refere ao tamanho do array. Existem métodos pré-definidos para usar no trabalho com arrays: X.sort(); ordena o array por ordem crescente; X.reverse(); inverte a ordem do array; X.push(d); adiciona d ao array; X.pop(); remove e devolve o último elemento do array. 100

101 Vectores (2) Array1.htm 101

102 Vectores Pesquisa (1) Array2.htm 102

103 Vectores Pesquisa (2) 103

104 Vectores Métodos Array3.htm 104

105 Cookies (1) 105 E uma informação escrita, pelo navegador, no computador do visitante. A sua utilização é limitada, de forma a não comprometer a segurança do visitante Aplicações Possibilidade de passar informação de uma página para outra Guardar informação para visitas posteriores do mesmo visitante Lista das compras efectuadas numa loja Numero de visitas a um sitio Data da ultima visita Preferências Limitações Tamanho Não podem ter mais de 4 kb Não deve existir mais de 20 cookies por cada sitio Não deve existir mais de 300 cookies no total

106 Cookies (2) 106 Limitações (cont.) Funcionais Navegador pode ser configurado para rejeitar cookies Visitante pode apagar os cookies Não permite identificar o visitante se este aceder a partir de diferentes computadores Não permite identificar o visitante se este partilhar o computador Elementos essenciais Nome, Valor Data de expiração (se não existir, o cookie expira no final da sessão) Está associado à página que o criou São manipulados através da propriedade document.cookie, que é uma string A leitura desta string mostra o seu conteúdo, isto e, todos os cookies associados à página Escrever nesta string, adiciona um cookie aos existentes

107 Cookies (3) A sintaxe para criar ou modificar um cookie é a seguinte: document.cookie = nomecookie = valorcookie2; expires = data2;...;...; A leitura de um cookie inicia-se com nomecookie=valor Utilizam-se os métodos String.indexOf() e String.substring() para analisar a string document.cookie Utilizar o método String.split() para separar a string em cookies individuais A alteração dos cookies é possível rescrevendos-os Os valores dos cookies não devem ter espaços em branco. Se o valor tiver espaços em branco, deve ser codificado antes da escrita, usando a função escape() e descodificado após a leitura, usando a função unescape() 107

108 Cookies (4) Cookies1.htm 108

109 Cookies (5) Cookies1.htm 109

110 Cookies (6) Cookies1.htm 110

111 Cookies (7) - Traçagem 111

112 Cookies (8) 112

113 Cookies - Utilizador (1) Cookies2.htm 113

114 Cookies - Utilizador (2) Cookies2.htm 114

115 Cookies - Utilizador (3) Cookies2.htm 115

116 Tratamento de erros (1) TryCatch1.htm 116

117 Tratamento de erros (2) TryCatch2.htm 117

118 Tratamento de erros (3) Throw.htm 118

119 Ficha de Revisão (1) Cria um documento HTML com o seguinte formulário (atribui nomes à tua escolha): Caixa de texto Peso; Caixa de texto Altura; Botão Calcular; Botão Limpar; Caixa de texto Resultado; 2 - Cria uma função associada ao campo Peso em que, ao perder o foco, seja verificado se o conteúdo está entre 30 e 220 inclusive. Se sim continue normalmente, se não emite um alerta, limpa o conteúdo e coloca o foco na caixa respectiva. 3 - Cria uma função semelhante à anterior mas associada ao campo Altura. Neste caso o teste deve verificar se o valor escrito se situa entre 1.3 e 2.2 exclusive.

120 Ficha de Revisão (2) 4 - Cria uma função associada ao botão Calcular que mostre no campo Resultado o valor resultante das seguintes indicações: Peso / Altura 2 ; 5 - Mostre numa caixa de mensagem o texto adequado mediante as seguintes indicações: Resultado inferior a 18.5 Peso Baixo; Resultado entre 18.6 e 24.9 Peso Normal; Peso igual ou superior a 25 Peso Alto; 6 - Tendo em conta a propriedade disabled, cujos parâmetros são true ou false, desactiva, no momento em que clicas no botão Calcular, os campo Peso e Altura. 7 - Cria uma função que mostre, ao sair da página, uma mensagem de despedida a teu gosto. 120

121 Ficha de Revisão (3) 121

122 Exercício de validação - Checkbox (1) CheckBox.htm 122

123 Exercício de validação - Checkbox (2) CheckBox.htm 123

124 Exercício de validação - RadioButton (1) RadioButton.htm 124

125 Exercício de validação - RadioButton (2) RadioButton.htm 125

126 Exercício de validação DropBox (1) DropBox.htm 126

127 Exercício de validação DropBox (2) DropBox.htm 127

128 Bibliografia SÉRGIO, Ricardo. Redes de Comunicação I. Porto: Areal Editores, ISBN