REDES DE COMUNICAÇÃO

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

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.

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

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 http://www.ecma-international.org/publications/standards/ecma-262.htm Netscape http://devedge.netscape.com/central/javascript/ Microsoft http://msdn.microsoft.com/library/en-us/script56/html/js56jsorijscript.asp Os recursos para programar em JavaScript sao triviais Um editor de texto simples para escrever o código Um navegador (browser) para testar 4

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

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

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

Estrutura dos programas em JavaScript OlaMundo.htm 8

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

Exemplo de comentários coment.htm 10

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

Exemplo de utilização de ficheiros externos 12

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

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

Eventos de sistema (1) eventossistema.htm 15

Eventos de sistema (2) 16

Eventos de utilizador (1) eventosutilizador.htm 17

Eventos de utilizador (2) 18

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

Envio de formulários (2) 20

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

Detecção do foco (2) 22

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

Colocação inicial do foco (2) 24

Janelas pop-up (1) JanelaPopup.htm 25

Janelas pop-up (2) 26

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

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

Operadores 29

Precedência dos Operadores 30

Operadores: Aritméticos OpArit.htm 31

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

Operadores: Atribuição 33

Operadores: Relacionais OpRelac.htm 34

Operadores: Lógicos OpLogic.htm 35

Operadores: bit a bit 36

Operadores: concatenação OpConcat.htm 37

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

Exemplo de uma função Func1.htm 39

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

Â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

Â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

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

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

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

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

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

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

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

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

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

Máquina de calcular (6) 52

Instruções condicionais: if If.htm 53

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

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 carácter @ 55

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 100. 73

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

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

Propriedades de um objecto Object.htm 76

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

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

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

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

Animação interactiva (2) 81

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

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

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.

O objecto predefinido String (2) String1.htm 85

O objecto predefinido String (3) 86

O objecto predefinido String (4) 87

O objecto predefinido String (5) String2.htm 88

O objecto predefinido String (6) String2.htm 89

O objecto predefinido String (7) String3.htm 90

Caracteres especiais nas strings (1) ó í 91

Caracteres especiais nas strings (2) String4.htm 92

O objecto predefinido Date (1) 93

O objecto predefinido Date (2) 94

O objecto predefinido Date (3) Datas1.htm 95

O objecto predefinido Date (4) Datas2.htm 96

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

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

O objecto predefinido Math (3) Math.htm 99

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

Vectores (2) Array1.htm 101

Vectores Pesquisa (1) Array2.htm 102

Vectores Pesquisa (2) 103

Vectores Métodos Array3.htm 104

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

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

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

Cookies (4) Cookies1.htm 108

Cookies (5) Cookies1.htm 109

Cookies (6) Cookies1.htm 110

Cookies (7) - Traçagem 111

Cookies (8) 112

Cookies - Utilizador (1) Cookies2.htm 113

Cookies - Utilizador (2) Cookies2.htm 114

Cookies - Utilizador (3) Cookies2.htm 115

Tratamento de erros (1) TryCatch1.htm 116

Tratamento de erros (2) TryCatch2.htm 117

Tratamento de erros (3) Throw.htm 118

Ficha de Revisão (1) 119 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.

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

Ficha de Revisão (3) 121

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

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

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

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

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

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

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