REDES DE COMUNICAÇÃOfiles.pedrogoncalves.webnode.pt/200000014-4b5b94c554/RCOM... · – Gerar...

REDES DE COMUNICAÇÃOCurso Profissional de Técnico de Gestão e

Programação de Sistemas Informáticos

MÓDULO VDesenvolvimento de Páginas Web Dinâmicas (JavaScript)

Duração: 60 tempos

Redes de Comunicação - Pedro Matos Gonçalves2

Conteúdos (1)

� 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, parseInte 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.


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 Manufacuringorganization) – ECMA-261 (ISO-16262)– ECMA

http://www.ecma-international.org/publications/standards/ECMA-262.htm– Netscape

http://devedge.netscape.com/central/javascript/

– Microsofthttp://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



• 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 dovisitante (excepto os cookies) do sitio, nem no servidor



• Desvantagens– O código fica exposto no meio do código HTML– Não é uma ferramenta adequada para aceder a basede 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


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.


Estrutura dos programas emJavaScript

OlaMundo.htm


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 ignoradosvar x=0; � var x = 0;

• Utilização de comentários– /* comentário */ permite ter varias linhas de comentários– // comentário apenas numa linha


Exemplo de comentárioscoment.htm


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>


Exemplo de utilização deficheiros externos


Eventos (1)

• O JavaScript é uma linguagem orientada aeventos• 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


Eventos (2)

• A cada evento corresponde o respectivo manipular de evento– onblur, onclick, onchange, onfocus, onload, onmouseover, onselect, onsubmit, onunload


Eventos de sistema (1)eventossistema.htm


Eventos de sistema (2)


Eventos de utilizador (1)eventosutilizador.htm


Eventos de utilizador (2)


Envio de formulários (1)envioform.htm


Envio de formulários (2)


Detecção do foco (1)detFoco.htm


Detecção do foco (2)


Colocação inicial do foco (1)

ColocaFoco.htm


Colocação inicial do foco (2)


Janelas pop-up (1)

JanelaPopup.htm


Janelas pop-up (2)


Variáveis (1)

• Nome atribuído a uma posição de memória onde se pode armazenar dados

Vars1.htm


Variáveis (2)

• Declaraçãovar x;var y, z;var a=2, b=3;

• Tipos– Não é necessário indicar o tipo das variáveis

• Conversão entre tiposa=b.toString(); //conversão de número, ou objecto, para stringc=d.ParseInt(); //conversão de string para número inteiroe=f.ParseFloat(); //conversão de string para número real


Operadores


Precedência dos Operadores


Operadores: Aritméticos

OpArit.htm


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


Operadores: Atribuição


Operadores: Relacionais OpRelac.htm


Operadores: Lógicos

OpLogic.htm


Operadores: bit a bit


Operadores: concatenação

OpConcat.htm


Funções

• 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


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)


Â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).



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



Func2.htm



Func4.htm


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.


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



• Os botões das operações tem manipuladores de evento onClickque invocam as funções correspondentes

• Para aceder a cada caixa de texto, utiliza-se a notacaodocument.forms[i].elements[j].valueCom forms[i] a indicar que a referência é ao formulário i eelements[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]



MaqCalc.htm


Instruções condicionais: if

If.htm


Instruções condicionais: Exercício ?

If2.htm

Crie uma função que devolva o maior de 3 números inteiros introduzidos pelo utilizador.


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 @



Form.htm


Instruções condicionais: switch(1)

Switch1.htm


Instruções condicionais: switch(2)

Switch2.htm


Instruções condicionais: switchExercício ?

Switch3.htm

Um algoritmo que dado um inteiro, introduzido entre 1 e 5 apresente na página o respectivo número por extenso.


Instruções cíclicas:O ciclo while (1)

While1.htm


Instruções cíclicas:O ciclo while (2)

While2.htm


Instruções cíclicas:O ciclo whileExercício ?

While3.htm

Calcule 10 multiplos de um númerointroduzido pelo utilizador.



While4.htm

Calcule a média de 5 números introduzidospelo utilizador.



While5.htm

Dada uma sequência de números positivos, pretende-se calcular o produto dos números pares e a soma dos númerosimpares. O ciclo termina com o 0 introduzido.


Instruções cíclicas:O ciclo for (1)

For1.htm

Instruções cíclicas:O ciclo for (2) – Exercício ?

Crie com um ciclo for a tabuada de um número pedido ao utilizador.


For2.htm

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


For2.htm

Instruções cíclicas:O ciclo for (4)�- Exercício ?

Crie utilizando ciclos for a tabuada dos números de 1 a 10.


For3.htm


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

Break1.htm


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.


Instruções cíclicas:A instrução continue

Continue.htm


Objectos

• 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.atributoobjecto.metodo()

• Exemplosdocument.write() Invoca o método write() do objecto documentdocument.forms[0] Invoca o primeiro formulário do documentowindow.alert() Invoca o método alert() do objecto windowMath.pow() Invoca o método pow() do objecto MathSt.length Invoca o atributo length de um objecto com o nome StSt.toLowerCase() Invoca o método toLowerCase() de um objecto com o nome St


Propriedades de um objecto

Object.htm


Métodos de um objecto

Método.htm


Criação de novos objectos com propriedades e métodos

ObjectoNovo1.htm


Criação de novos objectosExercí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.


Animação interactiva (1)

Animacao1.htm


Animação interactiva (2)


Animação temporizada (1)

Animacao2.htm


Animação temporizada (2)

Esta imagem é mostrada 3 sEsta imagem é mostrada 1 s


O objecto predefinido String (1)

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.



String1.htm



String2.htm



String3.htm


Caracteres especiais nas strings (1)

�ó�� í��

��

� ��

��

��

��

��

��

��


Caracteres especiais nas strings (2)

String4.htm


O objecto predefinido Date (1)



Datas1.htm



Datas2.htm


O objecto predefinido Math (1)

Propriedades do Objecto Math:

Métodos do Objecto Math:

Math.floor(x) – devolve o valor arredondado de x para o inteiro mais baixo



Métodos do Objecto Math:



Math.htm


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.


Vectores (2)

Array1.htm


Vectores – Pesquisa (1)

Array2.htm

Redes de Comunicação - Pedro Matos Gonçalves

Vectores – Pesquisa (2)

103


Vectores – Métodos

Array3.htm


Cookies (1)

• 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

105


Cookies (2)

• 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 cookiesassociados à página– Escrever nesta string, adiciona um cookie aos existentes

106


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 embranco. 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)


Cookies - Utilizador (1)

Cookies2.htm



Cookies2.htm


Tratamento de erros (1)

TryCatch1.htm



TryCatch2.htm



Throw.htm


Ficha de Revisão (1)

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.



4 - Cria uma função associada ao botão “Calcular” que mostre no campo ”Resultado” o valor resultante das seguintes indicações:

Peso / Altura2;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.


Exercício de validação -Checkbox (1)

CheckBox.htm


Exercício de validação -Checkbox (2)

CheckBox.htm


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

RadioButton.htm


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

RadioButton.htm


Exercício de validação –DropBox (1)

DropBox.htm


Exercício de validação –DropBox (2)

DropBox.htm

Bibliografia

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

128

REDES DE COMUNICAÇÃOfiles.pedrogoncalves.webnode.pt/200000014-4b5b94c554/RCOM... · – Gerar...

Documents

Transcript of REDES DE COMUNICAÇÃOfiles.pedrogoncalves.webnode.pt/200000014-4b5b94c554/RCOM... · – Gerar...