Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
Unidade 4 – Concepção de web sites.
Subunidade 3 - Client-side scripting
-Geração de scripts client-side - Introdução ao Javascript
o Introdução
o Noções elementares sobre programação por objectos
o Scripts e HTML
o Prevenção com a compatibilidade com os browsers – mensagens de erro
o Variáveis e tipos de dados
o Operações com dados
o Estruturas de controlo
o Tratamento de excepções
o Arrays
o Funções
o Programação Orientada a Objectos em Javascript
o O HTML Document Object Model (DOM) e a Javascript
o Alguns Scripts
Escola Secundária S. João do Estoril
o Bibliografia
Paula Cardoso Alcobia
-1-
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
Introdução
♦ O que são linguagens de scripting
As linguagens de scripting são linguagens de programação interpretadas, cujo o código
fonte é interpretado directamente pelo programa onde está a ser executado e no
momento da sua execução. Estas linguagens utilizam geralmente um menor leque de
funções e têm como objectivo acrescentar funcionalidades ao programa onde estão
embutidas. Por sua vez, um script é um programa constituído por um conjunto de
instruções, escritas numa determinada linguagem e dirigidas para uma aplicação que
as execute e interpreta.
Como os scripts são fáceis de editar, pois podem ser editados com qualquer editor de
texto, eles são vulneráveis. É possível fazer um script para que execute actividades
maliciosas ao ser interpretado - são designados por de scripts maliciosos. Esses scripts
podem ser programados para editar códigos de outros scripts. Os scripts maliciosos
executam actividades de vírus, por exemplo: criar e excluir ficheiros, modificar chaves
do registo do windows e fazer download de ficheiros e executá-los.
♦ Client
Client-- side e server
server-- side scripting
Escola Secundária S. João do Estoril
Quando se utiliza a designação Client-side scripting, fala-se de códigos de programas
que são processados do lado do cliente. Em aplicações ligadas à internet, estes são
processados pelo browser que estiver instalado no computador-cliente, quando receber
a página web que solicitou. (ver figura)
Paula Cardoso Alcobia
-2-
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
Quando se utiliza a designação server-side scripting, fala-se de códigos de programas
que são processados do lado do servidor. Neste caso, o servidor encarrega-se de
interpretar o código embebido na página web e envia uma página já processada
como resposta ao cliente.
Os servidores actuais alojam diferentes tipos de páginas web: dinâmicas, estáticas e
activas.
As páginas dinâmicas são páginas com capacidade de actualizarem automaticamente
os seus conteúdos e de apresentarem interactividade entre cliente e o servidor. Este
tipo de página contém códigos que são processados do lado do servidor antes de
serem enviadas ao cliente. No processamento destas páginas podem ser executadas:
-programas que entendem o servidor, como os CGI (Common Gateway
Interface), as API ( Application Program Interface) e os Java Servlets;
- código embebido no html como o ASP( Active Server Pages), o JSP(Java Server
pages) e o PHP(Personal Home Pages)
As páginas activas são páginas que apresentam algum dinamismo desenvolvido do
lado do cliente. Estas páginas contêm código que são interpretados pelo browser do
cliente, depois de enviadas pelo servidor. No processamento destas páginas podem
ser executadas:
-código embebido no HTML, como o Javascript, que são interpretadas pelo o
browser ao mesmo tempo que a página é descarregada;
-código pré-compilados de um objecto do documento, que são depois
executados por plug-ins.
As páginas estáticas são constituídas apenas por código HTML e não apresentam
qualquer actividade ou dinamismo.
Escola Secundária S. João do Estoril
♦ A linguagem JavaScript
O JavaScript é uma linguagem de programação simples criada para dar mais
interactividade e maior funcionalidade às páginas da Web. Foi inicialmente
desenvolvida pela Netscape e era designada por LiveScript. Mais tarde resolveram
trocar o nome para mostrar a sua proximidade com o JAVA, embora sejam linguagens
totalmente distintas.
A linguagem JavaScript acabou por dar origem à especificação técnica ECMAScript
(ECMA-Europe Computer Manufactures Association), que é um padrão oficial reconhecido
pela indústria. Apesar de esta linguagem ser mais conhecida pelo nome de JavaScript,
e de a versão produzida pela Microsoft ter recebido o nome de JScript, a verdade é
que se tratam de implementações que sendo fiéis à norma ECMAScript lhe
acrescentaram novas funcionalidades úteis, mas respeitando sempre as especificações
oficiais.
Paula Cardoso Alcobia
-3-
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
O código escrito em JavaScript destina-se a ser executado pelo web browser quando
a página HTML que o contém é visualizada. Ele é uma parte integrante da página e
permite que o browser seja capaz de tomar decisões quanto ao modo como o conteúdo
é apresentado ao utilizador e como pode ser manipulado.
♦ Compatibilidade com os browsers
O inconveniente de se utilizar uma linguagem de scripting é a possibilidade de existir
alguma incompatibilidade de interpretação desta por alguns browsers. O Microsoft
Internet Explorer, por exemplo é capaz de interpretar o Visual Basic Script, porém o
Netscape não o faz sem o auxílio de um plug-in.
O Javascript é a linguagem indicada para se poder construir scripts devido à sua
compatibilidade com a maioria dos browsers, nomeadamente o Netscape e o Microsoft
Internet Explorer, que devem ser de versões iguais ou superiores à 3.0 e 4.0,
respectivamente.
♦ O que posso fazer com o Javascript?
A linguagem javascript possibilita realizar muitas tarefas importantes para o
enriquecimento de uma página web. Da validação de dados à visualização de
mensagens e efeitos dinâmicos, tudo é possível.
As suas potencialidades são:
- O JavaScript dá aos criadores em HTML uma ferramenta de programação
Habitualmente, os autores de páginas HTML não são programadores, mas o
JavaScript é uma linguagem de script com uma sintaxe muito simples, pelo que
possibilita a criação de pequenos “snippets” nas páginas HTML.
-O
O JavaScript permite inserir texto dinâmico nas páginas HTML
Uma instrução em JavaScript tal como: document.write(“<h1>” + name +
“</h1>”) permite criar uma variável de texto numa página HTML.
- O JavaScript reage a eventos
Com JavaScript pode-se definir o que deve ser executado, quando algo acontece,
como por exemplo, quando numa página é concluído um download, ou quando
o utilizador clica sobre um elemento HTML.
Escola Secundária S. João do Estoril
-O
O JavaScript pode ler e escrever elementos HTML
O JavaScript pode ler e alterar o conteúdo de elementos HTML.
-O
O JavaScript pode ser usado para validar dados
O JavaScript pode ser usado para validar dados introduzidos em formulários
antes de serem submetidos ao servidor, aliviando - o na sua carga de
processamento.
Paula Cardoso Alcobia
-4-
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
♦ JavaScript é a mesma coisa que Java?
Não, o Java e o JavaScript são linguagens completamente diferentes!
O Java (desenvolvido pela Sun Microsystems) é uma linguagem de programação muito
complexa e poderosa, baseada no paradigma da orientação a objectos, tal como o
C++.
Noções elementares sobre programação por objectos
♦ O conceito
Na programação por objectos temos linguagens orientadas a objectos como o Java e
linguagens baseadas em objectos como o JavaScript.
Um software orientado a objectos é uma forma de criar software que usa classes e
objectos para modelar as características dos objectos reais ou abstractos, utilizando
mecanismos de encapsulamento, herança e polimorfismo.
Um software baseado em objectos não utiliza os mecanismos de criação de classes e
de herança utilizados no software orientado a objectos.
♦ TTerminologia
erminologia
Numa linguagem de programação orientada a objectos os dois conceitos-chave da
programação são as classes e os objectos.
Classe
Escola Secundária S. João do Estoril
Cada objecto é definido pelas suas características (atributos) e pelas suas acções
(comportamento). Assim, um veículo motorizado pode ser caracterizado pelo tipo de
motor – diesel ou gasolina – pela potência do motor e pela sua cor enquanto que
podemos definir acções como acelerar, travar e parar. Consequentemente, podemos
referir ao estado do objecto – veículo automóvel – como estando a acelerar ou parado
ou a desacelerar.
A produção de cada objecto é realizada a partir de uma matriz à semelhança da
reprodução de uma publicação, seja livro ou jornal, em que os diversos exemplares
são reproduzidos a partir do fotolito nas máquinas da tipografia. Essa matriz, no modelo
orientado a objectos, é a classe. Sendo uma matriz, a classe é constituída pelas
características do objecto a que passamos a designar por atributos ou variáveis de
objecto – variáveis ou dados no modelo modular – e pelas acções que são designadas
por métodos – funções e procedimentos no modelo modular –.
Com a classe automóvel (matriz) são produzidos dois
automóveis (objectos) com as características definidas na
matriz:
• atributos: quatro rodas, motor e
velocidade;
• acções: travar e acelerar.
Paula Cardoso Alcobia
-5-
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
Objecto
Os objectos são criados à imagem e semelhança das classes. São concretizações das
classes. São – em linguagem no modelo orientado a objectos – instâncias das classes.
Os métodos (funções e procedimentos) são sempre aplicados a um objecto. Por
exemplo, sendo dias um objecto de inteiros. No modelo Orientado a Objectos, poderse-ía escrever a seguinte instrução:
dias.setInteger(25);
supondo-se que a classe inteiros teria um método setInteger para alterar o valor do
objecto dias. Usando o exemplo dos automóveis podíamos ter:
táxi.acelerar()
para aumentar a velocidade do táxi.
No conceito do modelo orientado a objectos quando se aplicam métodos aos objectos,
diz-se que estamos a enviar mensagens aos objectos. Por exemplo, para definir o ano
do objecto umaData, definido por uma classe Data, que tem um método setYear, dizse que foi enviado ao objecto umaData a mensagem para que este use o método
setYear para definir o seu atributo ano com o valor do argumento da mensagem.
Mensagens
As mensagens são invocações dos métodos, sendo estes a interface de comunicação
entre os objectos.
A figura exemplifica a comunicação entre dois objectos das classes professor e aluno
e quadro identifica as classes, os objectos, os métodos e as mensagens presentes na
comunicação.
Realizar teste
Professora
Paula
O javascript é uma linguagem
baseada em objectos
Aluna
Cláudia
Responder teste
Escola Secundária S. João do Estoril
sim
Classe
Instância da classe ou objecto
Método
Mensagem
Paula Cardoso Alcobia
Professora
Professora Paula
Realizar Teste
O javascript é uma linguagem
baseada em objectos
Aluna
Aluna Cláudia
Responder Teste
Sim
-6-
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
♦ Mecanismos em que se fundamenta
Encapsulamento e abstracção
A necessidade de construir módulos de software de pequena dimensão, com uma
identidade e individualidade próprias é uma estratégia fundamental para levar a bom
porto o navio das aplicações complexas e de grande dimensão.
Estes módulos de software permitem uma mais fácil detecção e correcção de erros e
criar-lhes uma robustez confirmada por testes que darão ao programador a segurança
da sua utilização. Acrescenta-se, ainda, a vantagem de promover a reutilização de
software. Um módulo de software testado garante a qualidade das aplicações
desenvolvidas, assim, não há necessidade de reinventar o que está feito e provado. A
esta estratégia dá-se o nome de encapsulamento devido ao isolamento que promove
da peça de software.
Nas linguagens procedimentais modulares como o C e o Pascal tal é realizado,
respectivamente, com as bibliotecas e as unidades (unit). No modelo orientado a
objectos usam-se as classes.
Numa outra vertente do encapsulamento aparece o isolamento da estrutura interna
do módulo sendo criado um interface – esse, público e conhecido pelo programadorque transforma o módulo numa caixa negra produtora de resultados sujeita a regras
de utilização conhecidas definidas pelo interface. A isto designa-se por abstracção.
Voltando às linguagens referidas a zona interface da unit apresenta a parte pública e
interface com o programador isolando a estrutura e implementação dessa unit.
Herança
Escola Secundária S. João do Estoril
As classes podem ser relacionadas entre si por sistemas de herança. Este conceito
leva a uma descendência que vai na direcção do refinamento e consequente
particularização. Parte-se da generalização do modelo no sentido do particular. Usando
a classe automóvel posso construir outras viaturas, um veículo pesado com seis rodas
ou um desportivo.
Paula Cardoso Alcobia
-7-
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
As classes pesado e desportivo são construídas a partir da classe automóvel herdando
as suas características. O pesado passa a ter seis rodas (4+2) e além de travar e
acelerar também atrela e desatrela os atrelados. Neste caso, seria pertinente construir
uma classe atrelado que não seria da família automóvel, pois as suas características
são diferentes.
Polimorfismo
Designa-se polimorfismo à variação de formatos que um objecto pode apresentar.
Neste caso vamos debruçar nos métodos, pois nas linguagens em análise esta
característica restringe-se aos métodos.
Enquanto que na programação procedimental não é possível criar procedimentos ou
funções diversas com o mesmo nome, tal é possível no modelo orientado a objectos.
Escola Secundária S. João do Estoril
As chamadas linguagens no modelo orientado a objectos puras, esta característica é
encontrada, também, nas variáveis. Como exemplo, poderia criar novos métodos travar
e acelerar na classe desportivo salientando que o carro desportivo acelera e trava
como qualquer automóvel, mas de modo diferente. Apesar de os métodos terem o
mesmo nome e objectivo, eles funcionam, internamente, de modo diferente dos da
classe automóvel.
Paula Cardoso Alcobia
-8-
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
Scripts e HTML
♦ Aspectos relacionados com a inserção de scripts
Para inserir código JavaScript dentro do HTML é necessário identificar o início e o fim
do código. Para tal, utiliza-se a tag <script>para indicar o início e </script> para
indicar o fim do script.
Utiliza-se o atributo type para definir a linguagem ou o tipo de texto que vai ser
usada na escrita do script:
<script type="text/javascript">
<script language=”JavaScript”>
A tag <noscript> é utilizada para mostrar um conteúdo alternativo quando o browser
não reconhece a tag <script> ou para as situações em que o utilizador desactivou a
execução dos scripts no computador. Para indicar o fim deste código, coloca-se a tag
</noscript>.
♦ Terminar as instruções com ponto
ponto-- e -vígula (;)?
O JavaScript não nos obriga a terminar as instruções com ponto e vírgula, visto que é
opcional.
O Javascript reconhece que uma instrução chegou ao fim quando se muda de linha,
não necessitando portanto do ponto e vírgula. No entanto isso torna mais difícil a
localização dos erros e pode também contribuir para a criação de mais erros.
É conveniente que se terminem todas as instruções com o carácter ; .
♦ Os comandos JavaScript são sensíveis ao tipo de letra (maiúsculas e minúsculas)
O JavaSscript é sensível à troca das letras maiúsculas por minúsculas e vice-versa (é
Case sensitive). Esta regra aplica-se a nomes de instruções, nomes de variáveis, nomes
de funções, nomes de objectos e a tudo o que possa existir num script.
Escola Secundária S. João do Estoril
♦ Comentários e blocos de código
Os comentários permitem-nos descrever o código JavaScript que produzimos tornandoo mais legível e mais fácil de manter.
Em JavaScript podemos usar comentários com uma única linha e comentários com
várias linhas. Os comentários com uma única linha começam com os caracteres //.
Isto dá ao interpretador de JavaScript a indicação de que o resto da linha é um
comentário, pelo que este ignora o resto da linha, continuando a interpretar o código
na linha seguinte.
Paula Cardoso Alcobia
-9-
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
Um comentário que se estende por várias linhas começa com a sequência de caracteres
/* e continua até ser econtrada a sequência de caracteres */, que marcam o fim do
comentário. Ao encontrar a sequência /* o interpretador de JavaScript procura
imediatamente a sequência de fecho */, continuando aí a interpretação do código e
ignorando o que está no meio.
Aqui ficam alguns exemplos de comentários em JavaScript.
// Isto é um comentário com uma única linha
/* Este comentário ocupa uma só linha mas podia ocupar mais */
/*
Este comentário ocupa várias linhas. Tudo o que for
escrito aqui dentro será ignorado pelo interpretador
de JavaScript
*/
Blocos de código - Um bloco de código é uma sequência de instruções compostas
por várias linhas agrupadas. Para agrupar é necessário colocar a sequência de
instruções entre chavetas ({ }.)
Exemplo:
{
var i = 0;
var j = i * 3;}
♦ Colocação dos Scripts
Os scripts em Javascript podem ser colocados num documento HTML na secção
<head>, na secção <body> ou em ambas as secções. Os scripts também pdem ser
colocados externamente a um documento HTML.
Script
Escola Secundária S. João do Estoril
internos
São escritos no mesmo ficheiro
Na secção head
São executados
despoletados
Na secção boby
São executados quando a página é
carregada
externos
quando
são
São escritos noutro ficheiro
Quando o script é usado em várias páginas
Paula Cardoso Alcobia
- 10 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
Scripts na secção head
- São executados apenas quando são chamados para serem executados quando
um evento é despelotado
- Os scripts são carregados antes de serem usados
Sintaxe:
<head>
<script type="text/javascript">
sequência de instruções
</script>
</head>
Exemplo:
<html>
<head>
<script type="text/javascript">
<!-- alert("Isto é uma caixa de diálogo")
// -->
</script>
<title></title>
</head>
<body>
</body>
</html>
Scripts na secção body
- São executados quando a página é carregada
- Quando um script é colocado na secção body, este cria o conteúdo da
página
Escola Secundária S. João do Estoril
Sintaxe:
<head> </head>
<body>
<script type="text/javascript">
sequência de instruções
</script>
</body>
Paula Cardoso Alcobia
- 11 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
Exemplo:
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
<!-- document.write("Esta mensagem refere-se ao Javascript")
// -->
</script>
</body>
</html>
Scripts em ambas as secções head e body
-É possível escrever um número ilimitado de scripts no documento
-Podem ser colocados em ambas as secções head e body
Sintaxe:
<html>
<head>
<script type="text/javascript">
sequência de instruções
</script>
</head>
<body>
Escola Secundária S. João do Estoril
<script language=”JavaScript”>
sequência de instruções
</script>
</body>
Paula Cardoso Alcobia
- 12 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
Scripts Externos
-Escreve-se o script num ficheiro externo, que se grava com a extensão “.js”
document.write(“This script is external”)
-Invoca-se o script, usando o atributo “src”, nas páginas HTML:
Sintaxe:
<html>
<head>
</head>
<body>
<script type="text/javascript" src=”xxx.js”>
</script>
</body>
Nota: Os scripts externos não devem conter a tag <script> e deve ser colocado
exactamente onde se escreveria o script
Exemplo:
<html>
<head>
<title></title>
</head>
<body>
<p>
O script encontra-se num ficheiro externo designado por
"ext.js".
</p>
Escola Secundária S. João do Estoril
<p>
<script type="text/javascript" src="ext.js">
</script>
</p>
</body>
</html>
Paula Cardoso Alcobia
- 13 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
Prevenção com a compatibilidade com os browser-mensagem de erro
As mensagens de erro podem surgir quando um script está a ser carregado ou executado
e podem ser devidas a erros de sintaxe, uso incorrecto dos comandos ou objectos do
Javascript e por incompatibilidade com os browsers. A solução na maioria dos casos
passa pela correcção dos erros.
Os scripts são incompatíveis com alguns browsers, e nestes casos mostram o código
script como se fosse o conteúdo de uma página. Para prevenir esta situação, deve
usar-se a tag de comentário do HTML ou a tag noscript.
Sintaxe:
<script type="text/javascript" >
<!—
sequência de instruções
//—>
</script>
As 2 barras (//) no final do comentário são os símbolos de comentário. Previnem o
compilador (interpretador) Javascript de proceder à compilação da linha. Não se pode
colocar as 2 barras no início do comentário (e.g. //<!—), porque os browser mais
antigos, mostram-nas.
Exemplo:
<html>
<head><title></title></head>
<body>
<script type="text/javascript">
<!-document.write("<h1>Olá Mundo!</h1>")
-->
Escola Secundária S. João do Estoril
</script>
<p> Olá </p>
</body>
</html>
Paula Cardoso Alcobia
- 14 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
Variáveis e tipos de Dados
♦ O que são as V
ariáveis?
Variáveis?
As variáveis são objectos que servem para guardar informação. Elas permitem-nos
dar nomes a cada um dos fragmentos de informação com que temos de lidar.
Existem regras a respeitar na atribuição de um nome a uma variável:
1º - O nome das variáveis é case sensitive
2º - Deve começar com uma letra ou um underscore (_)
3º - O nome não deve ser nenhuma palavra reservada
4º- Os restantes caracteres que compoem o nome podem igualmente conter
números, letras ou sinal de cifrão ($).
Para além do atributo nome, uma variável é caracterizada pelo seu valor e pelo tipo
de dados que a identifica. O valor é o conteúdo armazenado no espaço de memória
associado à variável. O tipo de dados indica o conjunto de dados que uma variável
pode conter. O valor de uma variável pode ser alterado durante o script. Pode-se
referir à variável pelo seu nome, para saber o seu valor, para usar o seu valor, para o
alterar, para o visualizar, etc.
♦ T ipos de dados
Escola Secundária S. João do Estoril
Tipo
De scr i çã o
numérico
representa os números inteiros (decimal, octal ou hexadecimal) ou reais de
vírgula flutuante.
texto
Representa uma cadeia de caracteres(string) entre aspas ou plicas.
booleano
Representa um dos seguintes valores lógicos: True ou False
null
Representa um valor nulo, ou seja, a inexistência de um valor associado a
uma variável. Uma variável inicializada com null não assume qualquer valor,
ou seja, está vazia.
undefined
Representa o conteúdo de variáveis não inicializadas ou indefinidas, ou seja,
armazenam o valor especial undefined.
objecto
Representa um objecto que é uma colecção de valores (propriedades) e
métodos (funções). As propriedades podem assumir valores de qualquer tipo.
array
Representa um tipo de objectos da linguagem JavaScript. Um array é uma
colecção sequencial de valores ou elementos. Cada valor pode ser acedido,
para leitura ou escrita, através de um número inteiro ou índice.
Paula Cardoso Alcobia
- 15 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
♦ Declaração de V
ariáveis - V
ariáveis locais e globais
Variáveis
Variáveis
Ao acto de criar uma variável dá-se o nome de declaração. As variáveis que são
declaradas fora de qualquer função são designadas por variáveis globais. Aqui o
termo global significa que a variável em causa pode ser utilizada em qualquer parte
do script; ela está permanentemente acessível. Quando uma variável é declarada
dentro de uma função ela é uma variável local porque só pode ser utilizada dentro
dessa função. Se tentarmos aceder a uma variável local fora da função em que ela foi
declarada é criado um erro porque a variável só existe no universo da função em que
foi declarada; ela não faz parte do mundo exterior a essa função e como tal não pode
ser aí utilizada.
Exemplos de declaração de variáveis:
divisor = 3;
cor=”amarelo”;
pi = 3.14159;
As variáveis declaradas nos exemplos acima são variáveis globais. Para declarar
variáveis locias (variáveis cuja existência se limite a uma pequena secção do código)
usamos a declaração var, assim: var divisor = 3;
Se a declaração var for utilizada fora de qualquer função então, a variável é declarada
na base da estrutura do código, e sendo assim a variável é global.Numa variável
global não existe a necessidade de colocar a declaração var, pois esta é opcional.
Escola Secundária S. João do Estoril
Exemplo:
<html>
<head>
<title></title>
</head>
<body>
<script type=”text/JavaScript”>
var a = 5, b = 8
var soma
soma = a + b
alert(“Resultado da soma: “ + soma)
</script>
</body>
</html>
Paula Cardoso Alcobia
- 16 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
♦ Variáveis locais e globais
globais-- resumidamente
Variável LLocais
ocais
- São variáveis declaradas dentro de funções
- Apenas podem ser acedidas dentro da função
- Quando a função termina, a variável é destruída
- Podem existir variáveis locais com o mesmo nome em diferentes funções,
porque cada uma delas só é reconhecida dentro da função onde se
encontra declarada
Variável Globais
- São variáveis declaradas fora de uma função
- Todas as funções da página podem aceder a ela
- Estas variáveis são criadas quando são declaradas e só deixam de existir
quando a página é fechada
♦ Atribuição de V
ariáveis
Variáveis
Para atribuir um valor a uma variável, este deve ser colocado do lado direito do sinal
de igual, enquanto que o nome da variável se encontra do lado esquerdo.
Exemplo: var cor=”azul”
Uma variável é inicializada quando lhe é atribuído um valor. Neste exemplo acima a
variável cor foi inicializada com o valor azul.
Outras atribuições de variáveis:
Escola Secundária S. João do Estoril
var x=1, y , z=0
- declaração de três variáveis na mesma linha. Duas foram
inicializadas, uma com o valor de 1 e outra com o valor
de 0. A variável y foi inicializada com o valor undefined.
var nome= “Paula Alcobia” - declara a variável nome e inicializa-a com o
valor Paula Alcobia do tipo string.
Paula Cardoso Alcobia
- 17 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
♦ Constantes
As constantes
constantes, têm a mesma função que as variáveis, mas o valor de uma constante
não pode ser alterado. Na declaração de uma constante utiliza-se a palavra reservada
const.
Exemplo: const maximo=10;
Não se pode declarar uma constante dentro do corpo de uma função. Também não
se pode declarar uma constante com o nome de uma variável existente.
// Estas declarações estão incorrectas
function f
{
const g=5;
var g;
}
♦ Literais
As expressões literais representam valores fixos e não variáveis.
Tipo
Escola Secundária S. João do Estoril
numérico
Exe m p l o
54
Inteiro decimal
0xA 153
Inteiro hexadecimal( número que
começa por 0x)
0671
Inteiro Octal (número que começa por 0)
5,41
- 2E8
3E- 10
Real ou vírgula flutuante
Infinity
Infinito positivo (x/0)
- Infinity
Infinito negativo (- x/0)
Na N
Indeterminação
(0/0)
(Not a Number)
string
"Isto é uma string"
"50"
"amarelo"
booleano
true
false
null
null
undefined
undefined
array
["aluno, "professor", funcionário"]
Paula Cardoso Alcobia
- 18 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
Números inteiros
Os números inteiros podem ser expressos na forma decimal (base 10), hexadecimal
(base 16) ou octal (base 8). Um número decimal consiste numa sequência de dígitos
que nunca deve começar por 0 (zero). Se escrevermos um número com um zero no
início isso significa que se trata de um número escrito na forma octal. Por outro lado,
se no início escrevermos os caracteres 0x (ou 0X) isso significa que o número está
escrito na forma hexadecimal. Os números escritos na forma decimal podem conter
os dígitos (0-9), a forma octal aceita apenas dígitos de (0-7) e a forma hexadecimal
aceita os dígitos (0-9) mais as letras a-f e A-F.
Números com vírgula flutuante
Uma expressão literal com vírgula flutuante representa um número que não é inteiro
mas que contém uma parte inteira e uma parte fraccionária. Os números 21.37e 0.0764 são exemplos disto. A representação que a máquina constrói para estes
números baseia-se na notação científica. Por exemplo, o número -7645.4532 é igual
a -7.64532 a multiplicar por 10 elevado a 3, e escreve-se como -7.6454532E3, em
que E3 representa 10 elevado a 3. Um outro exemplo é o número 0.00045431, que
é representado na forma 4.5431E-4, ou seja 4.5431 a multiplicar por 10 elevado a 4.
Expressões de texto
Escola Secundária S. João do Estoril
Uma expressão de texto é composta zero ou mais caracteres colocados entre aspas
("), como por exemplo "esta é uma expressão de texto", ou entre plicas ('), como por
exemplo 'esta é outra expressão de texto'. Para além dos caracteres normais, as
expressões de texto podem conter os caracteres especiais apresentados na lista
seguinte:
Ca r á ct e r
S i g ni fi ca d o
\b
backspace
\f
form feed
\n
new line
\r
carriage return
\t
ta b
\\
backslash
Cada um destes caracteres produz o mesmo resultado que se obtém carregando na
tecla indicada na segunda coluna. Assim o carácter \b equivale a carregar na tecla
backspace (apagar o carácter à esquerda). O carácter \n provoca uma mudança de
linha tal como a tecla "enter". O carácter \ é usado como prefixo dos outros caracteres
especiais, o que faz também dele um carácter especial. Por isso, para obtermos este
carácter temos de temos escrevê-lo duas vezes (\\).
Paula Cardoso Alcobia
- 19 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
♦ Caracteres Unicode
O uso de caracteres Unicode permite que os computadores processem caracteres de
diversas línguas. As novas versões da linguagem Javascript suportam nativamente
caracteres Unicode, enquanto que as versões anteriores à 1.3 não o faziam. O código
Unicode permite codificar uma enorme quantidade de caracteres e é compatível com
o código ASCII e ISO (International Standard ISO).
Sequências de escape Unicode - podemos utilizar sequências de escape Unicode em
literais de strings (conforme página 19). A sequência de escape consiste na utilização
de seis caracteres ASCII: \u e mais 4 caracteres hexadecimais. Por exemplo: \u00A9
que representa o símbolo de copyright. Cada sequência de escape Unicode no
Javascript é interpretado como um caracter.
Lista de alguns caracteres de sequência de escape
C ategoria
V alor U nicode
N om e
F orm ato
\u0009
Tab
<TA B >
\u000B
V erticalTab
<V T>
\u000C
Form Feed
<FF>
\u0020
S pace ( espaço)
<S P >
\u000A
Line Feed
<LF>
\u000D
C arriage R eturn
<C R >
\u000b
B ackspace
<B S >
\u0009
H orizontalTab
<H T>
\u0022
D ouble Q uote ( aspas)
"
\u0027
S ingle Q uote( plicas)
'
\u005C
B ackslash ( barra)
\
E spaços em branco
V alores de fim de linha
Escola Secundária S. João do Estoril
V alores adicionais de
S equencias de escape
Para obter mais informações sobre Unicode, consulte o site Unicode Consortium Web
site:http://www.unicode.org/.
Paula Cardoso Alcobia
- 20 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
Operações com dados
As operações com dados permitem criar expressões que são sequências de operadores
(aritméticos e outros) e operandos(variáveis, literais e subexpressões), cujo resultado
pode originar valores do tipo número, string, booleano, null e undefined.
♦ Operadores de atribuição de valor
Um operador de atribuição é um operador que afecta o lado esquerdo do sinal de
igual(=) com o valor resultante da expressão do seu lado direito.
O perador
E xem plo
E quivalência
=
x=y
x=y
+=
x+=y
x=x+y
-=
x-=y
x=x-y
*=
x*=y
x=x*y
/=
x/=y
x=x/y
%=
x% =y
x=x% y
Os operadores mais conhecidos
são as quatro operações
aritméticas básicas (adição
subtracção, multiplicação e
divisão.) Para estes a linguagem
JavaScript define as seguintes
versões curtas.
♦ Operador String
Uma string é uma sequência de caracteres (letras, números, pontuação, etc). Por
exemplo: “Olá Mundo!”.
Para concatenar duas ou mais strings, usa-se o operador “+”.
Exemplo:
txt1=”O meu nome é: “
txt2=”Paula Cardoso Alcobia”
Escola Secundária S. João do Estoril
txt3=txt1+” “+txt2
O resultado da variável txt3 seria: O meu nome é Paula Cardoso Alcobia
Outro exemplo:
a= 6
b=Dto
c= a+b
Quando um do operandos não
é do tipo string (variável a)é
feita a conversão automática
desse operando para o tipo
string.
O resultado da variável c seria 6Dto
Paula Cardoso Alcobia
- 21 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
♦ Operadores de aritméticos
Um operador aritmético recebe valores numéricos (tanto variáveis como expressões
literais) e produz um valor numérico como resultado. Os operadores numéricos mais
importantes são a adição (+), a subtracção (-), a multiplicação (*), a divisão (/) e o
resto da divisão (%). O funcionamento destes operadores em JavaScript respeita todas
as regras da álgebra.
O perador
D escrição
E xem plo
R esultado
+
adição
x=2
x+2
4
-
subtracção
x=2
5-x
3
*
m ultiplicação
x=4
x*5
20
/
divisão
15/5
5/2
3
2.5
%
m ódulo ( obtém o resto de um a divisão
inteira)
5% 2
10% 8
10% 2
1
2
0
x=5
x++
6
++
increm ento
--
decrem ento
x=5
x--
4
-
m enos unário
x=3
-x
-3
O seguinte quadro mostra as formas de incrementar e decrementar um determinado
valor.
Escola Secundária S. João do Estoril
Exp r e ssã o
X
A
X=A++
A+1
A+1
X=++A
A
A+1
X=A--
A-1
A-1
X=--A
A
A-1
Paula Cardoso Alcobia
- 22 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
♦ Operadores de comparação
Um operador de comparação compara os valores que lhe são fornecidos e retorna
um valor lógico que indica se o resultado da comparação é verdadeiro ou falso.
Op era d or
De scr i çã o
Igualdade
(==)
Verifica se os dois
operandos são iguais
Desigualdade
(!=)
Verifica se os operandos
são desiguais
Maior do que
(>)
Verifica se o operando da
esquerda é maior do que o
da direita
Verifica se o operando da
Maior ou igual
esquerda é maior ou igual
(>=)
ao da direita
Exe m p l o
x==y dá true se x
igualar y
5==8 Devolve
Falso
x!=y dá true se x não
5!=8 Devolve
for igual a y
verdadeiro
x>y dá true se x for
maior do que y
x>=y dá true se x for
5>=8 Devolve
maior ou igual a y
falso
Verifica se o operando da
x<y dá true se x for
Menor do que
esquerda é menor do que o menor do que y
(<)
da direita
verifica se o operando da
Menor ou igual
esquerda é menor ou igual
(<=)
ao da direita
5>8 Devolve
Falso
5<8 Devolve
verdadeiro
x<=y dá true se x for 5<=8 Devolve
menor ou igual a y
verdadeiro
Para comparar diferentes operandos entre si, é necessário salientar algumas regras:
-o valor null é igual ao valor undefined;
-dois valores booleanos são iguais se forem ambos true e false;
- duas strings são iguais se contiverem a mesma sequência de caracteres;
Escola Secundária S. João do Estoril
- duas variáveis diferentes são iguais se referenciarem o mesmo objecto.
A comparação de strings é feita por ordem alfabética. No caso de um dos operandos
ser do tipo número, o interpretador faz a conversão do operando string para número
e faz uma comparação numérica.
Exe m p l o
T i p o d e co m p a r a çã o
Re s ul t a d o
"12"<"5"
A lfabética
verdadeiro
"12"<5
Numérica- o"12" é convertido
em12
falso
"doze"<5
Numérica- "doze" não pode ser
convertido em número e a
conversão resulta em NaN.
falso
Paula Cardoso Alcobia
- 23 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
♦ Operadores lógicos
Os operadores lógicos aceitam os valores lógicos true e false (verdadeiro e falso)
como operandos e retornam valores lógicos como resultado. Os operadores lógicos
base encontram-se listados a seguir:
Op era d or
e (&&)
ou (||)
U t i l i za çã o
b && c
b || c
negação (!)
!b
De scr i çã o
Dá true se b for true e c
for true.
Dá false se b for false e
c for false. Dá true nos
casos restantes.
Dá true se b for false e
dá false se b for true.
Exp r e ssã o
EX P 1 && EX P 2
Escola Secundária S. João do Estoril
EX P1 || EX P2
!EX P1
Paula Cardoso Alcobia
Exe m p l o
x=6
y=3
(x<10 && y>1) devolve verdadeiro
x=6
y=3
(x==5 ||==5) devolve falso
x=6
y=3
!(x==y) devolve verdadeiro
EX P1
EX P2
Re s ul t a d o
V
V
V
V
F
F
F
V
F
F
F
F
V
V
V
V
F
V
F
V
V
F
F
F
V
F
F
V
- 24 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
♦ Outros operadores
Existem outros operadores que são designados por operadores especiais, visto que
não se encaixam nas categorias anteriores, que são:
♦ Operador Condicional (?:)
♦ Operador vírgula (,)
♦ Operador Delete
♦ Operador In
♦ Operador Instanceof
♦ Operador New
♦ Operador This
♦ Operador Typeof
♦ Operador void
♦ Operador Condicional (?:)
O operador condicional é o único operador que no Javascript admite três operandos.
O operador pode ter um ou dois valores baseado numa condição (permite implementar
um if-else).
A sintaxe é a seguinte: condição? val1: val2
é equivalente a : if (condição)
val1
else
val2
Se a condição for verdadeira, o operador assume o valor de val1, caso contrário
assume o valor val2.
Exemplo:
Escola Secundária S. João do Estoril
status= (idade>=18)? “adulto”: “menor”
Esta expressão assume o valor de adulto se a idade for 18 ou mais, caso contrário
assume o valor de menor.
♦ Operador vírgula (,)
Permite criar uma expressão através da concatenação de outras expressões. Este
operador é basicamente utilizado dentro de um ciclo FOR, para permitir a actualização
de multiplas variáveis ao longo ciclo.
Paula Cardoso Alcobia
- 25 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
Exemplo:
for (var i=0, j=9; i <= 9; i++, j--)
document.writeln("a["+i+","+j+"]= " + a[i,j])
♦ Operador Delete
Permite eliminar um objecto, uma propriedade de um objecto ou um elemento com
um determinado índice num array. A sintaxe é a seguinte:
delete objecto
delete objecto.propriedade
delete objecto[índice]
delete propriedade //permitido apenas dentro da instrução with
Exemplos:
x=42
var y= 43
myobj=new Number()
myobj.h=4
// cria a propriedade h
delete myobj.h // apaga a propriedade
delete myobj
// apaga o objecto
♦ Operador In
Devolve verdadeiro(true) se uma determinada propriedade existe num determinado
objecto.
Sintaxe: Propriedade in objecto
♦ Operador Instanceof
Devolve verdadeiro(true) se um determinado objecto é um determinado tipo de objecto.
Escola Secundária S. João do Estoril
Sintaxe: Objecto instanceof tipoObjecto
♦ Operador New
Permite criar uma instância de um objecto de um tipo definido pelo utilizador ou de
um dos tipos já construídos no JavaScript: Array, Boolean, Date, Function, Image,
Number, Object, Option, RegExp, ou String. No servidor podemos usar também
DbPool, Lock, File, ou SendMail.
Sintaxe do new:objecto = new tipoobjecto ([param1] [,param2] ...[,paramN])
Paula Cardoso Alcobia
- 26 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
♦ Operador This
Palavra-chave que é usada para referir um objecto em uso.
Sintaxe: this[.propriedade]
this[.método]
Exemplo:
<B>Insira a idade entre 18 e 99:</B>
<INPUT TYPE = "text" NAME = "age" SIZE = 3
onChange="validate(this, 18, 99)">
♦ Operador TTypeof
ypeof
O typeof é utilizado de uma das seguintes formas:
1. typeof operando
2. typeof (operando)
O operador typeof retorna uma string indicando o tipo da variável. Os parêntesis
são opcionais.
♦ Operador void
O void é utilizado de uma das seguintes formas:
1. void expressão
2. void (expressão)
O operador void especifica uma expressão para ser avaliada , mas não retorna nenhum
valor. Os parêntesis são opcionais.
Escola Secundária S. João do Estoril
Exemplo:<A HREF="javascript:void(0)">Clique aqui</A>
A presente expressão cria uma hiperligação que não faz nada quando o utilizador
clica no link. Quando o utilizador clica no link, void(0) retorna 0, o que não tem
nenhum efeito no Javascript.
O exemplo a seguir, cria uma hiperligação que submete um form quando o utilizador
clica no link.
<A HREF="javascript:void(document.form.submit())"> Clique aqui para submeter o
form.</A>
Paula Cardoso Alcobia
- 27 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
♦ Precedências dos Operadores
A precedência dos operadores determina a ordem pela qual é avaliada uma expressão.
Pode-se ultrapassar esta precedência usando-se parêntesis. A tabela a seguir apresenta
a precedência dos vários operadores da ordem mais alta para a mais baixa.
Ord em
Op era d or
De scr i çã o
1
.[]()
2
- ! ~ ++ -new delete void typeof
3
*/%
4
+-
5
>> << >>>
6
> >= < <= in
7
=
== != === !==
8
&
E sobre Bits
9
^
Ou exclusivo sobre Bits
10
|
Ou sobre Bits
11
&&
12
||
OU lógico
13
?:
Condicional ou decisão binária com
operador ternário
14
= += -= *= /= %=
<<= >>= >>>= &=
^=
15
,
Acesso a propriedade, indexação em
array, chamada a função e agrupamento
de expressões
Peradores unários e de objectos
Multiplicação, divisão e resto
Adição/ concatenação e subtracção
Deslocamentos
Comparação
Igualdade e desigualdade
E lógico
Atribuição e atribuição com operação
associada
Escola Secundária S. João do Estoril
Avaliação múltipla
Paula Cardoso Alcobia
- 28 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
Estruturas de controlo
Existem dois tipos de estruturas de controle: estruturas de repetição(ciclos) e estruturas
de decisão(condicionais).. A estrutura de repetição permite que um bloco de instruções
seja executado repetidamente uma quantidade controlada de vezes. A estrutura de
decisão permite executar um entre dois ou mais blocos de instruções.
♦ Estruturas de decisão - condicionais
As instruções condicionais testam uma condição e com base no resultado do teste
decidem se uma parte do código deve ou não ser executada. Elas permitem-nos
executar código diferente em situações diferentes.
♦ A instrução if
A instrução if é utilizada para testar uma condição e executar um bloco de código
apenas quando ela é satisfeita.
Sintaxe:
if (condição)
{
bloco de instruções
}
Se a condição for verdadeira, o bloco é executado. Caso contrário, o bloco não é
executado.
Exemplo:
<script language=“JavaScript”>
// Se o tempo no browser for inferior a 12, aparecerá escrito “Bom dia”
Escola Secundária S. João do Estoril
var d=new Date()
var tempo=d.getHours()
if (tempo<10)
{
document.write(“<b>Bom dia</b>”)
}
</script>
Paula Cardoso Alcobia
- 29 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
♦ A instrução if ... else
A instrução if ... else é utilizada para testar uma
condição. Se a condição for satisfeita é executado um
bloco de código e no caso de não satisfazer a condição
é executado um outro bloco de código alternativo.
Sintaxe:
if(condição)
{
bloco 1
}
else
{
bloco 2
}
Se a condição for verdadeira o
bloco 1 é executado. Caso
contrário, o bloco 2 é executado.
Exemplo:
<script language=“JavaScript”>
//Se o tempo no browser é inferior a 12, sera ecrito “Bom dia”
//Caso contrário será escrito”Boa tarde”
var d = new Date()
var tempo = d.getHours()
if (tempo < 10)
{
document.write(“Bom dia!”)
}
Escola Secundária S. João do Estoril
else
{
document.write(“Boa tarde!”)
}
</script>
Paula Cardoso Alcobia
- 30 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
♦ A instrução if ... else if
... else
if...
Também é possível escrever uma estrutura que execute um entre múltiplos blocos de
instruções.
Sintaxe:
if(condição 1)
{
bloco 1
...
}
else
if(condição N)
{
bloco N
Escola Secundária S. João do Estoril
}
else
{
bloco P
}
Paula Cardoso Alcobia
Se a condição 1 for verdadeira o bloco 1 é
executado. Caso contrario, a condição 2 é
avaliada. Se a condição 2 for verdadeira o
bloco 2 é executado. Caso contrario, a
condição 3 é avaliada e assim
sucessivamente. Se nenhuma condição é
verdadeira bloco P é executado. Observe
que apenas um dos blocos é executado.
- 31 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
♦ Atribuição condicional de valores
A linguagem JavaScript possui um operador que nos permite escolher o valor a atribuir
a uma variável consoante o resultado do teste que é feito a uma condição.
Esse operador é um operador condicional de atribuição de valor e é composto por
diversas partes: uma condição, um ponto de interrogação e dois valores que podem
ser atribuídos à variável separados pelo carácter : (dois pontos).
Sintaxe:
variável = (condição) ? valor1 : valor2
Este operador actua do seguinte modo: se a condição for verdadeira a variável passará
a ter o valor1; se a condição não for satisfeita será atribuído o valor2 à variável.
♦ Estrutura switch...case
A estrutura switch...case é uma estrutura de decisão que permite comparar o valor do
seu argumento (uma variável ou uma expressão) com vários valores. Para cada caso
em que houver uma igualdade será executada uma determinada porção de código.
Sintaxe:
switch (expressão)
{
case label1:
código a ser executado se expressão = label1
break
case label2:
código a ser executado se expressão = label2
break
default:
código a ser executado se expressão for diferente de label1 e label2
Escola Secundária S. João do Estoril
}
Modo de funcionamento do switch
- Parte-se de uma expressão simples (frequentemente uma variável), que é
avaliada.
- O valor dessa expressão é comparado com os valores de cada um dos casos
existentes na estrutura.
- Se coincide, é executado o bloco de instruções associado a esse caso.
Paula Cardoso Alcobia
- 32 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
- Usa-se o break no final do bloco de instruções para impedir que sejam as
instruções contíguas (já pertencentes a outro bloco subsequente)
- O valor “default” é usado para representar os casos em que “expressão”
assume valores diferentes de label1, label2, …
Exemplo:
// este exemplo usa a instrução switch para dizer se um número i
// pertence ou não ao conjunto {6, 12, 32, 66}
var i = 12
var s = "O número " + i
switch(i)
{
case 6:
s += " pertence "
break
case 12:
s += " pertence "
break
case 32:
s += " pertence "
break
case 66:
s += " pertence "
break
default:
s += " não pertence "
}
s += "ao conjunto {6, 12, 32, 66}"
Escola Secundária S. João do Estoril
document.write(s)
Paula Cardoso Alcobia
- 33 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
♦ Estruturas de R
epetição - ciclos
Repetição
As estruturas de repetição são usados para executar o mesmo bloco de código diversas
vezes.
Em JavaScript existem os seguintes ciclos de repetição:
-for - executam um bloco de código enquanto uma condição for satisfeita.
-while - repetem a execução de um bloco de código enquanto uma condição
for satisfeita.
- do...while - repetem a execução de um bloco de código enquanto uma
condição for satisfeita mas executam-no pelo menos uma vez, mesmo que a
condição nunca seja satisfeita.
♦ Estrutura for
A estrutura for costuma ser utilizada quando se quer um número determinado de ciclos.
A contagem dos ciclos é feita por uma variável chamada de contador. A estrutura for
é, as vezes, chamada de estrutura de repetição com contador.
A sintaxe é a seguinte:
for(inicialização; condição;pós-instrução)
{
bloco
}
onde: inicialização é uma expressão de inicialização do contador.
condição é uma expressão lógica de controle de repetição.
pós-instrução é uma expressão de incremento/decremento do contador.
Escola Secundária S. João do Estoril
bloco é um conjunto de instruções a ser executado.
Nota: O ciclo for identifica três componentes, separadas por ponto e vírgula. Se for
necessário realizar mais do que uma inicialização ou pós-instrução, estas deverão ser
separadas por vírgulas.
Exemplo:
for (i = 0; i < 2; i++)
{
a=i
}
Paula Cardoso Alcobia
- 34 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
♦ Estrutura while
A estrutura de repetição condicional while é semelhante a
estrutura do...while. A sintaxe é a seguinte:
while(condição)
{
bloco
}
Esta estrutura faz com que a condição seja avaliada em
primeiro lugar. Se a condição é verdadeira o bloco é executado
uma vez e a condição é avaliada novamente. Caso a condição
seja falsa a repetição é terminada sem a execução do bloco. Observe que nesta
estrutura, ao contrário da estrutura do...while, o bloco de instruções pode não ser
executado nenhuma vez, basta que a condição seja inicialmente falsa.
Exemplo:
<script type="text/javascript">
<!-var i = 0
while (i <= 5)
{
document.write("O número é " + i)
document.write("<br/>")
i++
}
document.write("O ciclo terminou<br/>")
Escola Secundária S. João do Estoril
// -->
</script>
Paula Cardoso Alcobia
- 35 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
♦ Estrutura do...while
Esta é uma estrutura básica de repetição condicional. Permite
a execução de um bloco de instruções repetidamente. A sintaxe
é a seguinte:
do
{
bloco
}while(condição)
Esta estrutura faz com que o bloco de instruções seja executado
pelo menos uma vez. Após a execução do bloco, a condição é avaliada. Se a condição
é verdadeira o bloco é executado outra vez, caso contrário a repetição é terminada.
Exemplo:
<script type=”text/javascript”>
<!—
i=0
do
{
document.write(“O número é “ + i)
document.write(“<br/>”)
i++
}
while (i <= 5)
document.write(“O ciclo terminou<br/>”)
// —>
</script>
♦ Ciclos Infinitos
Ciclos infinitos, são ciclos que nunca terminam, isto é, apresentam condições que
são sempre verdadeiras.
Escola Secundária S. João do Estoril
Exemplos:
do
while (1)
instrução
instrução
for ( ; ; )
instrução
while (1)
Paula Cardoso Alcobia
- 36 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
♦ Outros tipos de Instruções
♦ A instrução break --Esta instrução serve para terminar a execução das instruções de
um ciclo de repetição (for, do...while, while) ou para terminar um conjunto switch.
Quando em um ciclo de repetição, esta instrução força a interrupção do ciclo
independentemente da condição de controle.
Exemplo:
for (i = 0; i < a.length; i++) {
if (a[i] = theValue);
break;
}
♦ A instrução continue - Esta instrução opera de modo semelhante à instrução break
dentro de um ciclo de repetição. Quando executada, ela salta as instruções de um
ciclo de repetição sem sair do ciclo. Isto é, a instrução força a avaliação da condição
de controle do ciclo.
Exemplo:
i=0
n=0
while (i < 5) {
i++
if (i == 3)
continue
n += i
}
♦ A instrução return(expressão) - só pode ser usada dentro das funções, terminando
de imediato a sua execução a partir do local onde está inserida. A expressão associado
(opcional) é o valor retornado pela função.
Exemplo:
Escola Secundária S. João do Estoril
function factorial(n) {
if ((n == 0) || (n == 1))
return 1
else {
result = (n * factorial(n-1) )
return result }
}
Paula Cardoso Alcobia
- 37 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
Tratamento de excepções
Por vezes surgem situações em que uma parte de um script é executada em condições
desfavoráveis. Isso acontece sempre que um script tenta usar um objecto que não está
definido ou tenta realizar uma operação que não pode ser realizada. Sempre que
aparece uma situação deste tipo surge uma excepção na execução do código. O
comportamento normal do interpretador de JavaScript é parar a execução do script
porque não sabe o que deve fazer a seguir.
Porém, há situações adversas das quais o script pode recuperar em boas condições
desde que o programador lhe dê instruções para tal. Isso consegue-se fazendo a
captura da excepção criada pelo erro e executando código capaz de fazer a
recuperação.
...catch, que têm a sintaxe seguinte:
Para tal usa-se as instruções try
try...catch,
try
{
bloco com código normal mas que pode gerar erros
}
catch(excepção)
{
bloco com código capaz de fazer a recuperação dos erros
}
A secção try contém o código normal logo a seguir à instrução try. Ao chegar a esta
instrução o interpretador de JavaScript tenta executar esse bloco da forma habitual.
Se não ocorrer nenhum erro o interpretador ignora o código que está na secção catch
e continua a executar o resto do script. Se ocorrer um erro no bloco try esse erro é
capturado pelo bloco catch. É aí que o interpretador de JavaScript continua a executar
o código imediatamente após o erro. No bloco catch devemos colocar o código de
recuperação.
Exemplo:
Escola Secundária S. João do Estoril
try
{
s = a[1].substring(0,4)
}
catch(e)
{
s = “Ocorreu um erro no script: “+e
}
Paula Cardoso Alcobia
- 38 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
Throw
A instrução throw é utilizada para lançar uma excepção e quando utilizada na instrução
try, permite controlar o fluxo do programa, criando mensagens de erro para a instrução
cacth.
Sintaxe:
throw expressão
Arrays
Definição:
- O objecto Array é usado para armazenar um conjunto de valores numa única
variável.
-Este tipo de objectos é constituído por diversos compartimentos, em que cada
um destes armazena um valor.
-Cada valor armazenado num dos campor do array encontra-se associado a
um índice.
Exemplo:
var frutas_tropicais = new Array("Goiaba", "Manga", "Maracujá");
var frutas_nacionais = new Array(3);
frutas_nacionais[0] = "Maçã";
frutas_nacionais[1] = "Cereja";
frutas_nacionais[2] = "Laranja";
Escola Secundária S. João do Estoril
Ao declararmos a variável frutas_tropicais nós declarámos o Array e atribuímos-lhe
os valores numa única operação. Já no segundo caso primeiro declarámos o Array e
só depois definimos os valores que ele deve conter. Neste caso temos que a variável
frutas_tropicais[3] possui o valor "Maracujá" e a variável frutas_nacionais[0] possui o
valor "Maçã".
Em JavaScript as variáveis não têm um tipo definido, por isso um array pode conter
valores de tipos diferentes que podemos alterar sempre que necessário.
Paula Cardoso Alcobia
- 39 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
Exemplo:
var sortido = new Array(8975, "Livro", false, -27.765, "Bolachas");
document.write("sortido = " + sortido);
sortido[0] = 0.0004763;
sortido[2] = true;
sortido[6] = "Caderno";
document.write("<br/>");
document.write("sortido = " + sortido);
Se atribuirmos um valor a um elemento do array com um índice mais alto do que o
seu comprimento, o sistema JavaScript resolve o problema aumentando o tamanho
do array até chegar ao índice pretendido. É isso que acontece no exemplo anterior
quando se chega à linha que tem sortido[6] = "Caderno"; Os arrays são objectos, e
entre as suas propriedades conta-se a propriedade length, que nos dá o número de
elementos (variáveis) que ele contém num determinado momento. Assim, se ao exemplo
anterior juntarmos uma linha com o seguinte código:
var numeroDeElementos = sortido.length;
a variável numeroDeElementos ficará com o valor 7 (repare que inserimos um elemento
adicional com o índice 6, o que fez crescer o array). De forma análoga se usarmos
frutas_nacionais.length iremos obter 3.
♦ Criação de um Array
- Para criar um objecto Array usa-se a palavra-chave “new”
Exemplo:
var familia_nomes=new Array(3)
Escola Secundária S. João do Estoril
var familia_nomes =new Array(“Maria”,”João”,”Pedro”)
Neste exemplo são criados dois arrays, ambos com 3 elementos. Na primeira linha é
apenas criado o array. Na segunda linha, além de ser criado o array, são atribuídos
valores a cada um dos seus elementos.
♦ Acesso a um Array
Para aceder a um elemento do array é necessário referir:
- O nome do array
- O número do índice
Paula Cardoso Alcobia
- 40 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
Depois de criado um array, pode ser atribuído o valor aos seus elementos (todos
ou parte).Exemplo 1:
var familia_nomes=new Array(3)
familia_nomes [0]=”Cláudia”
familia_nomes [1]=”Rafela”
familia_nomes [2]=”Daniel”
Exemplo 2:
var familia_nomes =new Array(“Cláudia”,”Rafaela”,”Daniel”)
familia_nomes [0]=”Maria”
familia_nomes [1]=”Inês”
familia_nomes [2]=”Diogo”
O acesso ao valor de um elemento pode ser realizado da seguinte forma:
mae= familia_nomes [0]
pai= familia_nomes [1]
♦ R eferência a elementos de um array
-resumo
array-resumo
Cada elemento de um array é referenciado pelo nome do array seguido de um índice
inteiro. O primeiro elemento do array tem índice 0 e o último tem índice tam-1. O
índice de um array deve ser inteiro
inteiro.
♦ Arrays (vectores) Multidimensionais
Escola Secundária S. João do Estoril
Podemos ter vectores de duas, três, ou mais dimensões. Podemos entender um vector
de duas dimensões associando-o aos dados de um tabela. Neste caso, cada dado é
referenciado por dois índices e dizemos que se trata de um vector bidimensional (ou
matriz
matriz). Assim o primeiro número de um índice indica o array dentro da matriz e o segundo
número do índice idêntica a posição do conteúdo no array.
Exemplo (forma de aceder):
brinquedo [0][2]
Paula Cardoso Alcobia
- 41 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
Funções
Definição: designamos por função um bloco de código, a que foi atribuído um nome
para que possa ser chamada várias vezes em diferentes locais.
Em Javascript existem dois tipos de funções:
- As funções próprias do Javascript- que chamamos de métodos. Elas
são associadas a um objecto bem particular como o caso do método
Alert() com o objecto window.
- As funções escritas pelo programador para executar um script.
As funções são definidas no início de um documento (na secção head) e são chamadas
posteriormente no mesmo documento (na secção body).
♦ Declaração de funções
Para declarar ou definir uma função utiliza-se a palavra function. A sintaxe é a seguinte:
function nome_da_função(argumentos){
…. Instruções …
}
O nome de uma função segue as regras das variáveis (começa por uma letra, etc).
Não esquecer que o Javascript é case sensitive, pois função() é diferente de Função().
Todos os nomes de funções num script devem ser únicos.
- Uma função sem argumentos tem que continuar a conter parêntesis:
function segunda()
{
instruções
}
Escola Secundária S. João do Estoril
- Os argumentos são variáveis usadas na função. Os valores dessas variáveis são
passados quando a função é chamada.
- Função com argumentos:
function primeira(argumento1,argumento2,etc)
{
instruções
}
Paula Cardoso Alcobia
- 42 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
♦ Invocação de funções
A invocação de uma função faz-se através do nome da função com parêntesis.
Sintaxe:
nome_da_função();
Convém verificar se a função foi definida antes de a chamar.
Exemplos:
- Chamar uma função que contém argumentos, fazendo a subtituição por valores
concretos:
primeira(valor1,valor2, etc)
- Ou sem argumentos: segunda()
♦ Passagem de parâmetros
Pode-se passar valores ou parâmetros nas funções em Javascript.
- FFunções
unções com um número fixo de argumentos - uma função que recebe um número
como argumento, soma duas unidades a esse número e devolve o valor da soma:
function somar(n)
{
var soma = n + 2
return soma
}
Para usarmos esta função basta escrever: var r = somar(5) e a variável r passará a ter
o valor 7.
Escola Secundária S. João do Estoril
Se precisarmos de usar mais argumentos basta especificá-los ao declarar a função,
separando os argumentos por vírgulas:
function multiplicar(p, q)
{
var m = p*q
return m
}
Para usarmos esta função basta que escrevamos: var produto = multiplicar(5, 4) e a
variável produto passará a ter o valor 20, que é igual a 5 vezes 4.
Paula Cardoso Alcobia
- 43 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
argumentos Há casos em que o
- Funções que aceitam um número variável de argumentosnúmero de argumentos que são passados a uma função pode variar. Numa situação
dessas pode ser preciso atribuir valores por omissão aos argumentos que possam
estar em falta. Para tal é necessário distinguir que:
1) Todos os argumentos são declarados ao definir a função;
2) Nenhum argumento é declarado ao definir a função.
1) TTodos
odos os argumentos são declarados ao definir a função
Esta situação ocorre quando os argumentos têm naturezas diferentes. Alguns
argumentos são obrigatórios mas outros são opcionais. Quando um argumento
opcional não é fornecido a função deve dar-lhe um valor por omissão.
Exemplo:
function multiplicar(p, q)
{
var m = p*q
return m
}
2) Não são declarados argumentos ao definir a função
Esta situação ocorre normalmente quando os argumentos são todos do mesmo tipo
(são todos números ou são todos strings.)
Exemplo:
function somar()
{
var soma=0
for(var i=0;i<somar.arguments.length;++i)
soma += somar.arguments[i]
return soma
Escola Secundária S. João do Estoril
}
♦ R etorno de valores
Quando se pretende que uma função devolva ou retorne um valor para o corpo
principal do programa. Dela deve conter a instrução return dentro do seu bloco de
código. O valor de retorno de uma função pode ser de qualquer tipo. Esta instrução é
facultativa e podemos encontrar vários return na mesma função.
Paula Cardoso Alcobia
- 44 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
Exemplo:
function resultado(a,b){
var c = a + b
return c
}
Esta função calcula a soma de dois números e devolve o resultado:
soma=resultado(2,3). Quando a função é invocada, dão entrada dois valores
(parâmetros) para dentro da função. O valor que é devolvido (valor de retorno) é 5 e
é armazenado na variável soma.
<html>
<head>
<title></title>
<script type="text/javascript">
<!-function multiplicar(p, q)
{
var m = p*q
return m
}
// -->
</script>
</head>
<body>
<p>
O valor devolvido pela função é:
Escola Secundária S. João do Estoril
<script type="text/javascript">
<!-document.write('multiplicar(5, 6) = '+multiplicar(5, 6))
// -->
</script>
</body>
</html>
Paula Cardoso Alcobia
- 45 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
Programação Orientada a Objectos em Javascript
A linguagem JavaScript é uma linguagem orientada para objectos. Isto significa que
em JavaScript tudo são objectos.
Um objecto é uma estrutura que pode conter uma colecção de propriedades(variáveis)
e métodos (funções que manipulam as variáveis).
O javascript tem objectos predefinidos como strings, Date, Array, Math e outros, com
métodos e propriedades predefinidos. No entanto é possível criar novos objectos com
propriedades e métodos associados.
♦ Propriedades de objectos
Uma propriedade é um atributo, uma característica, um descrição do objecto. Para
definir uma propriedade , identifica-se o nome da variável e para a criar basta associála a um valor através de uma atribuição.
Sintaxe:
nome Propriedade= valor
As propriedades podem também estar associadas a objectos. Neste caso para indicar
as propriedades que pertencem a um objecto, basta ligá-las ao objecto através do
operador ponto(.).
Sintaxe:
nome_do_objecto. nome_da_propriedade
Para atribuir valores às propriedades de um objecto, utiliza-se a seguinte sintaxe
sintaxe:
nome_do_objecto. nome_da_propriedade= valor
♦ Métodos
Escola Secundária S. João do Estoril
Os métodos de um objecto são funções que pertencem a esse objecto. Enquanto que
as propriedades correspondem a variáveis, os métodos correspondem a funções. Os
métodos realizam transformações no objecto a que pertencem e devolvem o resultado
da sua actuação.
A sintaxe para definir um método é a seguinte:
function nome_do_método([parâmetro1][,parâmetro2][…,parâmetro N])
{
Corpo do método
}
Paula Cardoso Alcobia
- 46 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
Qualquer informação que seja preciso passar para um método é recebida pelas
variáveis especificadas dentro do par de parêntesis que segue o nome do método.
Essas variáveis são designadas por parâmetros. Se um determinado método não
precisar de nenhum parâmetro, é necessário incluir um parêntesis vazio.
Os métodos podem também estar associados a objectos. Neste caso, para indicar os
métodos que pertencem a um objecto, basta ligá-los ao objecto através do operador
ponto(.).
Sintaxe:
Nome_do_objecto. nome_do_método([parâmetro1][,parâmetro2][…,parâmetro
N])
♦ Métodos estáticos
Alguns objectos oferecem métodos estáticos. Esses métodos diferem dos métodos
normais pelo facto de não pertencerem a um objecto criado com a instrução new. Os
métodos estáticos estão sempre disponíveis para ser usados, não é preciso criar um
objecto para usá-los. Um exemplo de um método estático é o método
String.fromCharCode(). Por ser um método estático do objecto String ele deve ser
sempre invocado na forma String.fromCharCode () e antes de .fromCharCode () nunca
se deve colocar o nome de uma variável. Quando utilizado deve começar sempre por
String.
♦ Criação de novos objectos
Um objecto é definido por uma função especial designada por construtora e criado
ou instanciado com o operador new.
Sintaxe para criar um novo objecto:
Escola Secundária S. João do Estoril
Novo_objecto= new nome_construtor([parâmetro1][,parâmetro2][…,parâmetro
N])
O Javascript permite criar objectos instanciando directamente as funções predefinidas
da linguagem. Mas, para criar um objecto com propriedades e métodos definidos por
nós, é necessário construir previamente o construtor para depois se criar uma instância
do mesmo através do operador new. O construtor é o modelo do objecto a criar e é
descrito por uma função.
Sintaxe para definir um construtor:
function nome_do_construtor([parâmetro1][,parâmetro2][…,parâmetro N])
{
Corpo do construtor
}
Paula Cardoso Alcobia
- 47 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
♦ As declarações this e with
- A declaração this
this-- A declaração this representa o próprio objecto em que é usada.
Esse objecto pode ser uma função, uma ligação de hipertexto, uma imagem, etc. Esta
declaração é bastante útil em HTML Dinâmico porque nos ajuda muito a construir
funções que respondem a eventos sabendo sempre qual foi o objecto que originou o
evento e funcionam correctamente em todos os browsers.
- A declaração with
with- Esta declaração estabelece o objecto ao qual se aplica uma
série de instruções. Os dois exemplos seguintes usam o objecto Math para ilustrar o
uso desta declaração e são totalmente equivalentes
Versão 1:
x = Math.cos(3 * Math.PI) + Math.sin(Math.LN10)
y = Math.tan(14 * Math.E)
Versão 2 (equivalente à anterior.) Repare que não foi preciso colocar a parte Math.
antes dos nomes dos métodos cos(), sin() ou tan().
with (Math)
{
x = cos(3 * PI) + sin (LN10)
y = tan(14 * E)
}
Quando o número de instruções é pequeno não vale a pena usar a declaração with,
mas se esse número crescer muito o código será mais compacto e fácil de ler se
usarmos esta declaração.
Escola Secundária S. João do Estoril
♦ Principais objectos predefinidos em Javascript
Os objectos predefinidos em Javacript estão associados a funções construtoras
predefinidas, podendo evocar propriedades e métodos dessas funções. As funções
construtoras devem ser evocadas através do operador new para que o objecto seja
criado.
Paula Cardoso Alcobia
- 48 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
♦ Objecto Array
O objecto Array é usado para armazenar um conjunto de valores numa única variável.
Este tipo de objectos é constituído por diversos compartimentos, em que cada um
destes armazena um valor. Cada valor armazenado num dos campos do array encontrase associado a um índice.
Propriedades do objecto Array
Sintaxe
Sintaxe: objecto.nome_da_propriedade
Pr o p r i e d a d e
length
De scr i çã o
Fornece o número de elementos que estão no Array. O valor desta
propriedade é estabelecido quando o Array é criado, mas pode crescer se
formos juntando mais elementos ao Array.
Método do objecto Array
Sintaxe
Sintaxe: objecto.nome_do_método
Mé t o d o
chop()
concat()
join()
Escola Secundária S. João do Estoril
pop()
push()
reverse()
De scr i çã o
Permite truncar o último caracter de um
array
Concatena 2 ou mais arrays e devolve
um novo array.
S i nt a xe
array.chop()
array.concat(nome_array2,nome_array3,...,nome_arrayN)
Coloca todos os elementos de um array
em strings separadas para um caracter
array.join(separator)
(por defeito é a vírgula).
Remove e devolve o ultimo elemento de
array.pop()
um array.
Adiciona 1 ou mais elementos ao fim
de um array e devolve o novo
comprimento.
array.push(elemento1,...,elementoN)
Devolve um novo Array em que a
ordem dos elementos está invertida (em
aprticular temos que o elemento que
array.reverse()
tinha o índice zero passa a ter o índice
mais alto e vice versa).
Paula Cardoso Alcobia
- 49 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
Método do objecto Array(continuação)
Mé t o d o
De scr i çã o
Remove e devolve o primeiro elemento
de um array, alterando o seu
comprimento.
shift()
Cria um novo array a partir de uma
secção seleccionada de um array já
existente
slice()
array.shift()
array.slice(begin[,end])
sort()
Devolve um novo array em que os
elementos estão ordenados (geralmente array.sort(compara function)
por ordem crescente)
splice()
Adiciona e/ou remove os elementos de
um array.
array.splice(index,howmany[,el1,el2])
split()
divide uma string e devolve um array.
array.split(separator)
Devolve uma string que representa o
toSource() código fonte do array
Converte um array numa string e
devolve o resultado.
toString()
Adiciona um ou mais elementos ao
início de um array e devolve o novo
comprimento.
unshift()
valueOf()
Escola Secundária S. João do Estoril
S i nt a xe
Devolve o primeiro valor de um array.
array.toSource()
array.toString()
array.unshift(elemento1,...,elementoN)
array.valueOf()
Exemplo de um array que inverte a ordem dos elementos:
<html>
<head>
<title></title>
</head>
<body>
Paula Cardoso Alcobia
- 50 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
<script type="text/javascript">
<!-var fruta = new array("Laranja","Banana","Morango","Ananás","Maçã","Kiwi")
// Agora ordenamos o Array por ordem alfabética invocando o método sort()
fruta.sort()
// -->
</script>
<table>
<tr>
<td width="140"><b>Ordem alfabética</b></td>
<td><b>Ordem inversa</b></td>
</tr>
<td>
<script type="text/javascript">
<!-for (var i=0; i<6; i++)
document.write(fruta[i] + "<br/>")
// -->
</script>
</td>
<td>
<script type="text/javascript">
<!-// Agora invertemos a ordem do Array invocando o método reverse()
fruta.reverse()
for (var i=0; i<6; i++)
document.write(fruta[i] + "<br/>")
Escola Secundária S. João do Estoril
// -->
</script>
</td>
</tr>
</table>
</body>
</html>
Paula Cardoso Alcobia
- 51 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
♦ Objecto Boolean
Cria um objecto do tipo boolean com valor inicial false, se for chamado sem
argumentos, ou com um valor especificado. O objecto Boolean tem o valor false
(falso) se:
- não se encontra inicializado
- tem valor 0 (zero)
- tem o valor null
- tem o valor “” (string vazia)
- tem o valor falso
- tem o valor NaN
- O objecto Boolean tem o valor true (verdadeiro) se:se não se verificr nenhuma das
situações acima citadas.
Linhas de código onde são criados objectos Boolean com o valor inicial false:
var b1=new Boolean()
var b2=new Boolean(0)
var b3=new Boolean(null)
var b4=new Boolean(“”)
var b5=new Boolean(false)
var b6=new Boolean(NaN)
Linhas de código onde são criados objectos Boolean com o valor inicial true:
var b1=new Boolean(“true”)
var b2=new Boolean(“Paula”)
Propriedades do objecto Boolean
Escola Secundária S. João do Estoril
Sintaxe: objecto.nome_da_propriedade
Pr o p r i e d a d e
De scr i çã o
constructor
Contém a função que cria uma protótipo do objecto
prototype
Possibilita a adição de Propriedades e métodos ao objecto
Paula Cardoso Alcobia
- 52 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
Método do objecto Boolean
Sintaxe: objecto.nome_do_método
Mé t o d o
toString()
valueOf()
De scr i çã o
Converte um valor Boolean numa string. Este método é chamado
automaticamente pelo JavaScript sempre que um objecto Boolean é usado
numa situação que requere uma string.
Devolve o valor "true" ou "false" de um objecto Boolean
Exemplo:
<html>
<body>
<script language=“JavaScript”>
var b1= new Boolean(0)
var b2= new Boolean(1)
var b3= new Boolean(“”)
var b4= new Boolean(null)
var b5= new Boolean(NaN)
var b6= new Boolean(“false”)
document.write(“0 é booleano e tem o valor <b>” + b1 + “</b><br/>”)
document.write(“1 é booleano e tem o valor <b>” + b2 + “</b><br/>”)
document.write(“Uma string vazia é booleano e tem o valor <b>” + b3 +
“</b><br/>”)
document.write(“null é booleano e tem o valor <b>” + b4 + “</b><br/>”)
Escola Secundária S. João do Estoril
document.write(“NaN é booleano e tem o valor <b>” + b5 + “</b><br/>”)
document.write(“A string ‘false’ é booleano e tem o valor <b>” + b6 +
“</b><br/>”)
</script>
</body>
</html>
Paula Cardoso Alcobia
- 53 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
♦ Objecto Date
O objecto Date permite-nos ler, construir e realizar operações com datas e horas.
Propriedades do objecto Date
Sintaxe: objecto.nome_da_propriedade
Pr o p r i e d a d e
De scr i çã o
constructor
Contém a função que cria uma protótipo do objecto
prototype
Possibilita a adição de Propriedades e métodos ao objecto
Métodos do objecto Date
Sintaxe: objecto.nome_do_método
Escola Secundária S. João do Estoril
Mé t o d o
De scr i çã o
S i nt a xe
getDate()
Devolve o dia do mês (de 1 a 31) que está
guardado no objecto Date
object.getDate()
getDay()
Devolve o dia da semana (de 0=Domingo
até 6=Sábado) guardado no objecto Date
object.getDay()
getMonth()
Devolve o mês (de 0=Janeiro até
11=Dezembro) guardado no objecto Date
object.getMonth()
getFullYear()
Devolve o valor completo do ano (quatro
dígitos) guardado no objecto Date
object.getFullYear()
getYear()
getHours()
Paula Cardoso Alcobia
Devolve o valor incompleto do ano
(apenas dois dígitos) guardado no objecto
Date. Não use este método, use antes o
getFullYear.
Devolve o valor da hora (de 0 a 23)
guardada no objecto Date.
object.getYear()
object.getHours()
- 54 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
Métodos do objecto Date(continuação)
Mé t o d o
S i nt a xe
getMinutes()
Devolve o valor dos minutos (de 0 a 59)
guardados no objecto Date.
object.getMinutes()
getSeconds()
Devolve o valor dos segundos (de 0 a 59)
guardados no objecto Date
object.getSeconds()
getMilliseconds()
Devolve o valor dos milisegundos (de 0 a
999) guardados no objecto Date
object.getMilliseconds()
getTime()
getTimezoneOffset()
getUTCDate()
getUTCDay()
getUTCMonth()
Escola Secundária S. João do Estoril
De scr i çã o
getUTCFullYear()
getUTCHours()
Paula Cardoso Alcobia
Devolve a quantidade de milisegundos
decorridos desde as zero horas do dia 1 de
object.getTime()
Janeiro de 1970 até à data que está
guardada no objecto Date
Devolve a diferença de tempo entre o fuso
horário do computador que está a ser
usado e o Tempo Médio de Greenwich
("Greenwich Mean Time", ou GMT)
Devolve o dia do mês (de 1 a 31)
guardado no objecto Date medido no
padrão de tempo universal (UTC)
Devolve o dia da semana (de 0 a 6)
guardado no objecto Date medido no
padrão de tempo universal (UTC)
Devolve o valor do mês (de 0 a 11)
guardado no objecto Date medido no
padrão de tempo universal (UTC)
Devolve o valor completo do ano (com
quatro dígitos) guardado no objecto Date
medido no padrão de tempo universal
(UTC)
Devolve a hora (de 0 a 23) guardada no
objecto Date medida no padrão de tempo
universal (UTC)
object.getTimezoneOffset()
object.getUTCDate()
object.getUTCDay()
object.getUTCMonth()
object.getUTCFullYear()
object.getUTCHours()
- 55 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
Métodos do objecto Date(continuação)
Mé t o d o
getUTCMinutes()
getUTCSeconds()
Escola Secundária S. João do Estoril
getUTCMilliseconds()
De scr i çã o
Devolve o valor dos minutos (de 0 a 59)
guardados no objecto Date medidos no
padrão de tempo universal (UTC)
Devolve o valor dos segundos (de 0 a 59)
guardados no objecto Date medidos no
padrão de tempo universal (UTC)
Devolve o valor dos milisegundos (de 0 a
999) guardados no objecto Date medidos
no padrão de tempo universal (UTC)
S i nt a xe
object.getUTCMinutes()
object.getUTCSeconds()
object.getUTCMilliseconds()
setDate(valor)
Acerta o valor do dia (de 1 a 31) do mês
guardado no objecto Date
setFullYear(valor)
Acerta o valor do ano (com quatro dígitos)
guardado no objecto Date
object.setFullYear(ano[,mês,dia])
setHours(valor)
Acerta o valor da hora (de 0 a 23)
guardada no objecto Date
setMilliseconds(milisegundos)
Acerta o valor dos milisegundos (de 0 a
999) guardados no objecto Date
setMinutes(valor)
Acerta o valor dos minutos (de 0 a 59)
guardados no objecto Date
setMonth(valor)
Acerta o valor do mês (de 0=Janeiro a
11=Dezembro) guardado no objecto Date
object.setMonth(mês[,dia])
Acerta o valor dos segundos (de 0 a 59)
guardados no objecto Date
object.setSeconds(segundos[,milissegundos])
setSeconds(valor)
setTime(valor)
Paula Cardoso Alcobia
object.setDate(valor)
object.setHours(horas[,minutos,segundos,milissegundos])
object.setMilliseconds(milisegundos)
object.setMinutes(minutos[,segundos,milissegundos])
Acerta a data e a hora guardadas no
objecto Date para o valor correspondente
às zero horas do dia 1 de Janeiro de 1970
object.setTime(data_numérica)
mais o número de milisegundos que é
fornecido como argumento do método
- 56 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
Métodos do objecto Date(continuação)
Mé t o d o
setYear(ano)
setUTCDate(dia_mês)
setUTCDay(dia_semana)
setUTCMonth(mês)
setUTCFullYear(ano)
setUTCHour(horas)
Escola Secundária S. João do Estoril
setUTCMinutes(minutos)
setUTCSeconds(segundos)
setUTCMilliseconds(milisegundos)
Paula Cardoso Alcobia
De scr i çã o
Acerta o valor do ano guardado
no objecto Date. Não use este
método, use antes o método
setFullYear.
S i nt a xe
object.setYear(ano)
Acerta o valor do dia (de 1 a 31)
do mês guardado no objecto Date
usando o padrão de tempo
object.setUTCDate(dia_mês)
universal (UTC)
Acerta o valor do dia da semana
(de 0=Domingo a 6=Sábado)
guardado no objecto Date usando
object.setUTCDay(dia_semana)
o padrão de tempo universal
(UTC)
Acerta o valor do mês (de
0=Janeiro a 11=Dezembro)
guardado no objecto Date usando object.setUTCMonth(mês)
o padrão de tempo universal
(UTC)
Acerta o valor do ano (com quatro
dígitos) guardado no objecto Date object.setUTCFullYear(ano)
Acerta o valor da hora (de 0 a 23)
guardada no objecto Date usando
o padrão de tempo universal
object.setUTCHour(horas)
(UTC)
Acerta o valor dos minutos (de 0 a
59) guardados no objecto Date
usando o padrão de tempo
object.setUTCMinutes(minutos)
universal (UTC)
Acerta o valor dos segundos (de 0
a 59) guardados no objecto Date
usando o padrão de tempo
universal (UTC)
Acerta o valor dos milisegundos
(de 0 a 999) guardados no
objecto Date usando o padrão de
tempo universal (UTC)
object.setUTCSeconds(segundos)
object.setUTCMilliseconds(milisegundos)
- 57 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
Métodos do objecto Date(continuação)
Mé t o d o
De scr i çã o
S i nt a xe
Devolve uma representação textual (a
data e a hora escritas por extenso)
usando como referência o fuso horário
do Tempo Médio de Greenwich (GMT)
toGMTString()
Devolve uma representação textual (a
data e a hora escritas por extenso) no
fuso horário do computador local.
toLocaleString()
Fornece uma representação textual (a
data e a hora escritas por extenso) da
data contida no objecto Date medida
no padrão UTC.
toUTCString()
object.toGMTString()
object.toLocaleString()
object.toUTCString()
Métodos estáticos do objecto Date
Mé t o d o
De scr i çã o
Date.parse(data_texto)
Devolve o número de milisegundos decorridos entre as zero
horas do dia 1 de Janeiro de 1970 e a data indicada por
data_texto (formato de texto)
Date.UTC(ano, mês,
dia, horas, minutos,
segundos,
milisegundos)
Devolve o número de milisegundos que separam a data
fornecida como argumento das 0 horas do dia 1 de Janeiro de
1970. É obrigatório indicar o ano, o mês e o dia. As horas, os
minutos, os segundos e os milisegundos são facultativos.
Exemplo:
Exemplo:<html>
<body>
<script language=“JavaScript”>
Escola Secundária S. João do Estoril
var d= new Date()
document.write(d.getHours() + “.”)
document.write(d.getMinutes() + 1+ “.” )
document.write(d.getSeconds())
</script>
</body>
</html>
Paula Cardoso Alcobia
- 58 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
♦ Object
A função Object é um construtor utilizado para criar qualquer objecto com o operador
new.
Sintaxe para criar um objecto qualquer:
nome_do_objecto=new object()
♦ Objecto String
O objecto String é usado para trabalhar com texto. Uma string é uma cadeia de
caracteres, que pode conter:
- letras
- números
- pontos
- outros caracteres (#, &, $, …)
Propriedades do objecto String
Sintaxe: objecto.nome_da_propriedade
Pr o p r i e d a d e
De scr i çã o
constructor
Função que cria o objecto
length
Devolve o comprimento de uma string
prototype
Permite acrescentar Propriedades e métodos ao objecto
Métodos estáticos do objecto String
Escola Secundária S. João do Estoril
Sintaxe: objecto.nome_do_método()
Mé t o d o
String.fromCharCode()
De scr i çã o
Devolve o carácter correspondente ao código Unicode fornecido
Este objecto é muito importante em diversas tarefas que podemos realizar em
JavaScript: validar formulários, trabalhar com cookies, etc.
Paula Cardoso Alcobia
- 59 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
Métodos do objecto String
Mé t o d o
S i nt a xe
anchor()
Cria uma âncora HTML
object.anchor()
big()
Escreve uma string em fonte big
object.big()
blink()
Escreve uma string a piscar
object.blink()
bold()
Escreve uma string a bold
object.bold()
charAt()
Devolve o caracter que se
encontra numa determinada
posição
object.charAt(index)
charCodeAt()
Devolve o Unicode de um caracter
object.charCodeAt(index)
numa determinada posição
concat()
Concatena 2 ou mais strings
object.concat(nome1,nome2,...nome[n])
fixed()
Escreve uma string como as texto
teletype
object.fixed()
fontcolor()
Escreve uma string numa
determinada cor
object.fontcolor(color)
fontsize()
Escreve uma string num
determinado tamanho
object.fontsize("fontsize")
fromCharCode()
Tendo em conta o valor do
Unicode especificado, devolve a
string
indexOf()
Devolve a posição da 1ª
ocorrência de uma string noutra
object.indexOf(nome,[index])
italics()
Escreve uma string em itálico
object.italics()
Devolve a posição da útima
ocorrência de uma determinada
string noutra.
object.lastindexOf(nome,[index])
link()
Escreve uma string como um
hyperlink
object.link("url_destino")
match()
Procura por uma string noutra
object.match(expressão_regular)
replace()
Substitui alguns caracteres por
outros, numa string
object.replace(expressão_regular,nova_string)
search()
Procura uma string
object.replace(expressão_regular)
Extrai uma parte de uma string e
devolve a parte extraída, como
uma nova string
object.slice(inicio_secção,fim_secção)
Escreve uma string em fonte small
object.small()
lastIndexOf()
Escola Secundária S. João do Estoril
De scr i çã o
slice()
small()
Paula Cardoso Alcobia
- 60 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
Métodos do objecto String (continuação)
Mé t o d o
De scr i çã o
S i nt a xe
split()
Divide uma string num array de
strings
object.split([separator][,número_limite])
strike()
Escreve uma string com um a
strikethrough
object.strike()
sub()
Escreve uma string subscrita
object.sub()
Extrai um determinado número de
caracteres de uma string, a partir
de um determinado índice de
início
object.substr()
substring()
Extrai os caracteres de uma string
entre 2 índices especificados
object.substring()
sup()
Escreve uma string superscrita
object.sup()
toLowerCase()
Escreve uma string em minúsculas
object.toLowerCase()
toUpperCase()
Escreve uma string em maiúsculas
object.toUpperCase()
toSource()
Representa o código fonte de um
objecto
object.toSource()
valueOf()
Devolve o valor primitivo de um
objecto String
object.valueOf()
substr()
Exemplo:
<html>
<body>
<script language=“JavaScript”>
var str=”Olá mundo”
Escola Secundária S. João do Estoril
document.write(“<p>” + str + “</p>”)
document.write(“comprimento da string: “ + str.length)
</script>
</body>
</html>
Este exemplo devolve uma string, guardada previamente numa variável e escreve
também o comprimento (número de caracteres) dessa string, usando a propriedade
length, do objecto string..
Paula Cardoso Alcobia
- 61 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
♦ Objecto Math
O objecto Math é um objecto intrínseco do sistema JavaScript. Ele não deve ser criado
explicitamente pelo programador porque é o próprio sistema que o cria
automaticamente ao arrancar.
Para armazenar um número aleatório entre 0 e 1, usa-se uma variável designada
“r_number”: r_number=Math.random().
Para armazenar o valor arredondado de 8.6 numa variável designada “r_number”:
r_number=Math.round(8.6).
Propriedades do objecto Math
Sintaxe: objecto.nome_da_propriedade
Pr o p r i e d a d e
E
L N2
LN10
LOG2E
LOG10E
PI
SQRT1_2
Escola Secundária S. João do Estoril
SQRT2
De scr i çã o
Contém a base dos logaritmos naturais (número de Euler)
Contém o logaritmo natural de 2 (base E)
Contém o logaritmo natural de 10 (base E)
Contém o logaritmo de E na base 2
Contém o logaritmo de E na base 10
Contém o número PI (3.1415927...)
Contém 1 a dividir pela raiz quadrada de 2
Contém a raiz quadrada de 2
Métodos do objecto Math
Sintaxe: objecto.nome_do_método
Todos os métodos do objecto Math aceitam um, dois ou nenhum números como
argumentos e devolvem um número como resultado.
Paula Cardoso Alcobia
- 62 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
Métodos do objecto Math (continuação)
Mé t o d o
S i nt a xe
math.abs(x)
abs(x)
Devolve o valor absoluto de x
acos(x)
Devolve o valor do arco (radianos) cujo
math.acos(x)
cosseno é x
asin(x)
Devolve o valor do arco (radianos) cujo
math.asin(x)
seno é x
atan(x)
Devolve o valor do arco (radianos) cuja
math.atan(x)
tangente é x
atan2(x, y)
Devolve o valor do ângulo formado
pelo eixo dos xx com a linha que une a
origem dos eixos ao ponto de
coordenadas (x, y)
ceil(x)
Devolve o número inteiro mais próximo
math.ceil(x)
de x e não inferior a x
cos(x)
Devolve o cosseno de x
math.cos(x)
exp(x)
Devolve o valor da exponencial de x (E
elevado à potência x)
math.exp(x)
floor(x)
Devolve o número inteiro mais próximo
math.floor(x)
de x e não superior a x
log(x)
Devolve o logaritmo natural de x
math.log(x)
max(x,y)
Devolve o maior dos números (x, y)
math.max(x,y)
min(x,y)
Devolve o menor dos números (x, y)
math.min(x,y)
pow(x,y)
Escola Secundária S. João do Estoril
De scr i çã o
Devolve o valor x elevado à potência y
math.atan2(x, y)
math.pow(x,y)
random()
Devolve um número aleatório situado
entre 0 e 1 (não aceita argumentos)
round(x)
Devolve o número inteiro mais próximo
math.round(x)
de x
sin(x)
Devolve o seno de x
math.sin(x)
sqrt(x)
Devolve a raiz quadrada de x
math.sqrt(x)
tan(x)
Devolve a tangente de x
math.tan(x)
Paula Cardoso Alcobia
math.random()
- 63 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
Exemplo:
<html>
<body>
<script language=“JavaScript”>
document.write(“Arredondamento <br>”)
document.write(Math.round(7.25) )
document.write(“<br><br>Máximos e Mínimos “)
document.write(“<br>” + Math.max(2,4))
document.write(“<br>” + Math.min(10, 67))
document.write(“<br><br>Potências “)
document.write(“<br>” + Math.pow(2,3))
</script>
</body>
</html>
Este exemplo mostra o uso de algumas funções matemáticas, que possibilitam
calcular o arredondamento de um número, o máximo e o mínimo entre 2 valores e
Escola Secundária S. João do Estoril
ainda a potência de um número.
Paula Cardoso Alcobia
- 64 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
♦ Eventos
Eventos são acontecimentos ocorridos durante a execução do programa, que podem
ser detectadas pelo JavaScript, como por exemplo:
- Um clique do rato
- O carregamento de uma página WEB, ou mesmo de uma imagem
- Deslocar o rato sobre uma determinada zona de uma página
- Seleccionar uma caixa de input num formulário HTML
- Submeter um formulário HTML
- Carregar numa tecla
O JavaScript detecta e interpreta os diversos eventos. Os eventos são definidos, usando
as tags do HTML, que correspondem a cada elemento.
Os eventos Javascript, associados às funções, aos métodos e aos formulários, abrem
uma grande porta para uma verdadeira interactividade das páginas web.
Sintaxe:
<elemento tipo_de_gestor_de_evento=”função_gestora”>
Lista de eventos
Ev e nt o
Abort
Blur
Change
Escola Secundária S. João do Estoril
Click
DblClick
Error
Gestor d o
Ev e nt o
A p l i ca d o a :
De scr i çã o
onAbort
i m a g es
Quando o carregamento de uma
imagem é interrompida.
onBlur
windows e todos os
elementos de formulário
Quando se retira o focus de uma
janela ou de um elemento.
onChange
text fields, textareas,
select lists
Quando o conteúdo de um campo é
modificado.
onClick
buttons, radio buttons,
checkboxes, submit
buttons, reset buttons, links
Quando se clica num objecto como
um botão, um link ou outro elemento.
onDblClick
documents, links
Quando se efectua um duplo clique
num objecto como um botão, um link
ou outro elemento.
onError
images, windows
Quando ocorre um erro.
Paula Cardoso Alcobia
- 65 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
Lista de eventos(continuação)
Ev e nt o
Focus
KeyDown
KeyPress
KeyUp
L oa d
MouseDown
MouseMove
MouseOut
MouseOver
MouseUp
Move
Reset
Escola Secundária S. João do Estoril
Resize
Select
Submit
Unload
Gestor d o
Ev e nt o
A p l i ca d o a :
De scr i çã o
onFocus
windows e todos os
elementos de formulário
Quando o elemento obtém o foco.
onKeyDown
documents, images, links,
text areas
Quando é pressionada uma tecla.
onKeyPress
documents, images, links,
text areas
Quando é pressionada e libertada
uma tecla.
onKeyUp
documents, images, links,
text areas
Quando é libertada uma tecla.
onLoad
corpo do
documento(document
body)
Quando o objecto é carregado.
onMouseDown
documents, buttons, links
Quando o botão do rato é
pressionado.
onMouseMove
nada por defeito (nothing
by default)
Quando é movido o cursor do rato.
onMouseOut
areas, links
Quando o cursor do rato está parado
ou sai de uma ligação.
onMouseOver
links
Quando o cursor do rato está sobre
uma ligação ou outro elemento.
onMouseUp
documents, buttons, links
Quando é libertado o botão do rato.
onMove
windows
Quando se move uma janela
onReset
forms
Quando é efectuado um clique sobre
um botão reset, restaurando-se um
objecto.
onResize
windows
Quando a janela ou frame são
redimensionadas.
onSelect
text fields, textareas
Quando é seleccionado algum texto.
onSubmit
forms
Quando é efectuado um clique sobre
um botão submit, enviando-se um
objecto.
onUnload
corpo do
documento(document
body)
Quando se sai de uma página.
Paula Cardoso Alcobia
- 66 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
Associação entre elementos do HTML e eventos
Cada evento descrito anteriormente, está associado apenas a determinados elementos
HTML.Existem alguns elementos HTML que nem sequer se encontram associados a
nenhum evento.
Os eventos são associados a tags do HTML
El e m e nt o
Á rea
<á r e a >
Body
<b o d y>
B ut t o n
<i np ut t yp e = "b ut t o n">
d o cum e nt
che ckb o x
Escola Secundária S. João do Estoril
<i np ut t yp e = "che ckb o x">
Paula Cardoso Alcobia
G e s t o r d e Ev e nt o
onmouseover
onmouseout
ondblclick
onclick
ondblclick
onkeydown
onkeyup
onkeypress
onmousedown
onmouseup
onblur
onclick
onfocus
onmousedown
onmouseup
onclick
ondblclick
onkeydown
onkeyup
onkeypress
onmousedown
onmouseup
onblur
onclick
onfocus
Fi l e U p l o a d
onblur
onchange
onfocus
Fr a m e
Fr a m e s e t
Wi nd o w
onblur
onerror
onfocus
onload
onresize
onunload
- 67 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
Os eventos são associados a tags do HTML(continuação)
El e m e nt o
Wi nd o w
img
Ra d i o
<i np ut t yp e = " r a d i o ">
Escola Secundária S. João do Estoril
L i nk
<a >
G e s t o r d e Ev e nt o
onreset
onsubmit
onabort
onerror
onkeydown
onkeyup
onkeypress
onload
onblur
onclick
onfocus
onclick
ondblclick
onkeydown
onkeyup
onkeypress
onmousedown
onmouseup
onmouseout
Pa s s w o r d
onblur
onfocus
Re s e t
<i np ut t yp e = " r e s e t ">
onblur
onclick
onfocus
S e l e ct
<i np ut t yp e = " s e l e ct ">
onblur
onchange
onfocus
S ub m i t
<i np ut t yp e = " s ub m i t ">
onblur
onclick
onfocus
Te x t
<i np ut t yp e = " t e xt ">
onblur
onchange
onfocus
onselect
Te x t A r e a
onblur
onchange
onfocus
onselect
onkeydown
onkeyup
onkeypress
Paula Cardoso Alcobia
- 68 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
O HTML Document Object Model (DOM) e a Javascript
♦ O que é o DOM.
O DOM (Document Object Model) é um standard para o desenvolvimento web,
independente de qualquer linguagem de programação. Este standard define a estrutura
lógica dos Documentos XTML e XML e as interfaces pelas quais são acedidas e
manipuladas.
O DOM foi desenvolvido pela W3C ( World Web Consortium) para colocar alguma
ordem de desenvolvimento de páginas web, criando um ambiente e homogéneo a
todos os browsers actuais.
O standard DOM é constituído pelas partes Core, HTML e XML e subdividido pelos
níveis 1,2 e 3. O Core(núcleo) fornece um conjunto de objectos de baixo nível que
podem representar qualquer tipo de documento de forma estruturada, enquanto que
o HTML DOM e XML DOM definem um conjunto de objectos específicos para
documentar HTML e em XML.
- O nível 1 especifica funcionalidades para navegar e manipular documentos
em HTML e XML.
- O nível 2 especifica funcionalidades para manipular informação sobre o estilo
de um documento e define um modelo de eventos, assim como acrescenta outras
funcionalidades para aceder e actualizar o conteúdo e a estrutura de
documentos.
- O nível 3 expande as funcionalidades do nível 2, assim como define
funcionalidades para carregar, guardar e validar documentos e modelos de
conteúdos.
♦ Os objectos DOM
No DOM, os elementos ou objectos de um documento dispõem-se segundo uma
estrutura lógica em forma de árvore e cada objecto é um conjunto de propriedades e
métodos, associados a um nó dessa estrutura. Desta forma, O DOM permite especificar:
- os objectos utilizados para representar e manipular um documento e as
interfaces a partir das quais é possível navegar através da estrutura dos
documentos;
Escola Secundária S. João do Estoril
- a semântica das interfaces e dos objectos;
- o relacionamento entre estas interfaces e os objectos.
Em suma, o DOM apresenta os documentos como uma hierarquia de objectos do
tipo nó. Alguns tipos de nós podem conter nós filhos e outros serem, apenas , nós
finais. Estes vários nós comunicam entre si através de interfaces que devem ser
implementadas segundo as regras do DOM.
Paula Cardoso Alcobia
- 69 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
Descrição de alguns dos principais tipos de nós do núcleo (core) DOM:
♦ Node – a interface Node implementa o primeiro nó DOM
♦ Document – a interface implementada com document representa o objecto
de mais alto nível, isto é representa todo o documento em HTML. A partir deste
nó, a interface Document contém métodos necessários à criação de outros
objectos do documento.
♦ Element – a grande maioria dos objectos num documento é o nó Element.
Estes podem ter atributos e métodos para obter o objecto Attr. O nó Element
representa as tags de um documento em HTML.
♦ Attr – os nós attr representam os atributos das tags num documento, isto é a
interface Attr representa um atributo no objecto Element. Os nós Attr não fazem
parte da árvore do documento desde que estejam associados com o nó Element.
♦ Text – os nós Text representam texto nas tags de um nó Element ou o valor de
um nó Attr. Um nó Text não deve ter qualquer nó filho.
O standard DOM, para além do Core, é constituído pelo HTML DOM. Este fornece
interfaces de alto nível específicas para tipos particulares de nós e que são usadas
com o Core Dom, fundamentais para fornecerem uma representação de um documento
HTML.
Escola Secundária S. João do Estoril
O HTML DOM define um documento HTML como uma colecção de objectos, onde
todas as propriedades, métodos e eventos disponíveis para manipular e criar páginas
web organizadas em objectos. A raiz de um documento HTML é o objecto HTML
Document. Por outro lado, todas as tags HTML correspondem a objectos HTML DOM
e os atributos são as suas propriedades.
Quando um browser carrega uma página ele cria uma representação hierárquica do
seu conteúdo que se assemelha à sua estrutura HTML. Isto resulta numa árvore
organizada em nós, cada um representando uma tag, um atributo, um conteúdo ou
outro objecto. A raiz da árvore do documento é acedida pela interface document.
Paula Cardoso Alcobia
- 70 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
♦ Uso de objectos DOM com Javascript
Os browsers modernos colocam ao dispor dos criadores de páginas um conjunto
numeroso de objectos que permitem ler e manipular todo o conteúdo de uma página
web e métodos para manipular janelas. Estes métodos que manipulam janelas e
documentos são normalmente invocados por uma linguagem de scripting, como o
Javascript. Entretanto as especificações DOM fornecem as formas para manipular
documentos em HTML através de scripts.
Quando um documento em HTML é aberto na janela do browser este cria uma estrutura
hierárquica em árvore com os objectos que o constituem. O primeiro objecto criado é
o objecto window que representa a janela do browser. Este objecto pode incluir outros
objectos como barras e menus, outras janelas, frames e, principalmente, documentos
em HTML.
Os principais objectos que compõem o objecto window são:
-document – que contém propriedades e objectos do documento actual;
- location – que contém propriedades baseadas na URL actual;
- history – que contém a história da navegação das URL previamente acedidas;
- frame . que contém as propriedades sobre outras janelas;
- event – que contém informação sobre acontecimentos que resultam de acções
do utilizador sobre a página web;
- navigator – que contém informação sobre o browser que apresenta a página
web
- screen – que contém informação sobre o ecrã em que a página está a ser
visualizada.
Escola Secundária S. João do Estoril
A figura seguinte apresenta a hierarquia de alguns dos objectos que podem estar
presentes num documento em HTML. É de observar que o document contém a
representação da página HTML. Cada um dos objectos ou tags que compõem a
página(formulários, parágrafos, imagens, links e outros) podem ser lidos e manipulados
através deste objecto.
Paula Cardoso Alcobia
- 71 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
Descrição dos objectos:
Screen – criado automaticamente pelo Javascript, contém informação sobre o ecrã
do utilizador.
Navigator – Contém informação sobre o browser do utilizador.
W indow – Corresponde à janela do browser do computador. É automaticamente criado
com cada instância da tag <body> ou <frameset>.
Event – representa o estado de um evento, assim como o estado do elemento em que
o evento ocorre, o estado das teclas do teclado, a localização do cursor do rato e dos
botões do rato.
Escola Secundária S. João do Estoril
History – objecto predefinido que pode ser acedido através do histórico do objecto
window. Este objecto consiste num array de URL.
Frame – representa o elemento HTML frame.
Frameset – representa o elemento HTML frameset.
L ocation – contém informação sobre o URL actual.
Iframe – representa o elemento HTML inline-frame.
Document – objecto que permite aceder a todos os elementos de uma página.
Meta – representa o elemento HTML meta.
Paula Cardoso Alcobia
- 72 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
Body - representa o elemento HTML body.
Anchor - representa o elemento HTML de uma hiperligação.
Area – representa uma área de um mapa de imagem com uma hiperligação associada.
Base - representa o elemento HTML base.
Image - representa o elemento HTML img.
Link - representa o elemento HTML link. Este elemento só pde ser usado com a tag
<head>.
Style
Style- representa o elemento HTML style.
Object - representa o elemento HTML object, que é usado para colocar um conteúdo
executável na página.
Table - representa o elemento HTML table.
TableData - representa o elemento HTML td.
TableHeader - representa o elemento HTML th.
TableR
ow - representa o elemento HTML tr.
ableRow
Form - representa o elemento HTML form.
Button - representa um botão de um formulário HTML.
Textarea - representa o elemento HTML textarea
Text – representa um campo de teto de um formulário HTML
File Upload - criado para cada instância da tag HTML <input type=”file”> de um
formulário, permite o upload de ficheiros para o servidor.
Hidden – representa um campo escondido num formulário HTML.
Password – representa o campo password de um formulário HTML.
Rádio – representa o botão rádio de um formulário HTML.
R eset – Representa o botão reset num formulário HTML.
Select – representa uma lista de selecção de um formulário HTML.
Option – representa uma opção numa lista de selecção num formulário HTML.
Escola Secundária S. João do Estoril
Submit – representa um botão de envio de um formulário HTML.
Paula Cardoso Alcobia
- 73 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
♦ Criação de scripts em Javascript com os objectos DOM
Neste ponto serão apresentados alguns exemplos que tentarão dar uma ideia da
utilização dos objectos DOM em scripts na linguagem JavaScript.
Exemplo que mostra qual foi o tipo de elemento clicado:
<html>
<head>
<script type="text/javascript">
function whichElement(e)
{
var targ
if (!e) var e = window.event
if (e.target) targ = e.target
else if (e.srcElement) targ = e.srcElement
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode
var tname
tname=targ.tagName
alert("You clicked on a " + tname + " element.")
}
</script>
</head>
<body onmousedown="whichElement(event)">
Escola Secundária S. João do Estoril
<p>Click somewhere in the document. An alert box will alert the tag name of the
element you clicked on.</p>
<h3>This is a header</h3>
<p>This is a paragraph</p>
<img border="0" src="ball16.gif" width="29" height="28" alt="Ball">
</body>
</html>
Paula Cardoso Alcobia
- 74 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
Exemplo que conta o número de imagens num documento:
<html>
<body>
<img border="0" src="hackanm.gif" width="48" height="48">
<br />
<img border="0" src="compman.gif" width="107" height="98">
<br /><br />
<script type="text/javascript">
document.write("This document contains: " + document.images.length + " images.")
</script>
</body>
</html>
Exemplo altera a largura e altura de uma imagem quando clico no botão:
<html>
<head>
<script type="text/javascript">
function changeSize()
{
document.getElementById("compman").height="250"
document.getElementById("compman").width="300"
}
</script>
Escola Secundária S. João do Estoril
</head>
<body>
<img id="compman" src="compman.gif" width="107" height="98" />
<br /><br />
<input type="button" onclick="changeSize()" value="Change size of image">
</body>
</html>
Paula Cardoso Alcobia
- 75 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
Alguns Scripts
Exercício 1 - Janela animada
<HEAD>
<SCRIPT LANGUAGE=”JavaScript”>
<!— Begin
function moveWin() {
for (var i = 1; i < 1001; i++)
window.moveBy(1, 1);
window.moveBy(-1000, -1000);
}
// End —>
</script>
</HEAD>
<!— Inserir a primeira parte do script entre os <HEAD></HEAD> tags . E o
resto do script em qualquer parte da página, dentro de (body) —>
<BODY>
<form>
aula - LLOL
OL
<input type=button value= “Eu vou para a página da PPaula
OL””
’http://1212.page.vu
onClick=”moveWin();window.location.href=’http://1212.page.vu
’http://1212.page.vu’’ ;”>
</form>
Ou então
http://1212.page.vu
<a href=”http://1212.page.vu
http://1212.page.vu”; onClick=”moveWin()”>Eu
Eu vou para a página da
Paula - LLOL
OL </a>
Escola Secundária S. João do Estoril
</BODY>
Paula Cardoso Alcobia
- 76 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
Exercício 2 - Efeito animado e colorido no cursor
cursor..
<HEAD>
<style type=”text/css”>
<!— Begin CSS
#a { position: absolute; top: 10px; left: 10px; visibility: visible }
#b { position: absolute; top: 10px; left: 10px; visibility: visible }
#c { position: absolute; top: 10px; left: 10px; visibility: visible }
#d { position: absolute; top: 10px; left: 10px; visibility: visible }
#e { position: absolute; top: 10px; left: 10px; visibility: visible }
#f { position: absolute; top: 10px; left: 10px; visibility: visible }
#g { position: absolute; top: 10px; left: 10px; visibility: visible }
End CSS —>
</style>
</HEAD>
<!— Inserir a primeira parte do script entre os <HEAD></HEAD> tags . E o
resto do script em qualquer parte da pagina, dentro de (body) —>
Escola Secundária S. João do Estoril
<BODY>
<layer name=”a0" left=10
clip=”0,0,2,2"></layer>
<layer name=”a1" left=10
clip=”0,0,2,2"></layer>
<layer name=”a2" left=10
clip=”0,0,2,2"></layer>
<layer name=”a3" left=10
clip=”0,0,2,2"></layer>
<layer name=”a4" left=10
clip=”0,0,2,2"></layer>
<layer name=”a5" left=10
clip=”0,0,2,2"></layer>
<layer name=”a6" left=10
clip=”0,0,2,2"></layer>
top=10 visibility=show bgcolor=”#ff0000"
top=10 visibility=show bgcolor=”#ff8000"
top=10 visibility=show bgcolor=”#ffff00"
top=10 visibility=show bgcolor=”#00ff00"
top=10 visibility=show bgcolor=”#0000ff ”
top=10 visibility=show bgcolor=”#ff00ff ”
top=10 visibility=show bgcolor=”#ffffff ”
<div id=”starsDiv” style=”position:absolute;top:0px;left:0px”>
<div style=”position:relative;width:2px;height:2px;background:#ffffff;fontsize:2px;visibility:visible”></div>
<div style=”position:relative;width:2px;height:2px;background:#ffff00;fontsize:2px;visibility:visible”></div>
<div style=”position:relative;width:2px;height:2px;background:#ffa000;fontsize:2px;visibility:visible”></div>
Paula Cardoso Alcobia
- 77 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
<div style=”position:relative;width:2px;height:2px;background:#ff0000;fontsize:2px;visibility:visible”></div>
<div style=”position:relative;width:2px;height:2px;background:#00ff00;fontsize:2px;visibility:visible”></div>
<div style=”position:relative;width:2px;height:2px;background:#0000ff;fontsize:2px;visibility:visible”></div>
<div style=”position:relative;width:2px;height:2px;background:#FF00FF;fontsize:2px;visibility:visible”></div>
</div>
<script language=”JavaScript”>
Escola Secundária S. João do Estoril
<!— Original: freeware.de —>
<!— Web Site: http://freeware.de —>
<!— MSIE Fix by: Kurt Grigg ([email protected]) —>
<!— Begin
if (document.layers) {
window.captureEvents(Event.MOUSEMOVE);
}
var yBase = 200;
var xBase = 200;
var yAmpl = 10;
var yMax = 40;
var step = .2;
var ystep = .5;
var currStep = 0;
var tAmpl=1;
var Xpos = 1;
var Ypos = 1;
var i = 0;
var j = 0;
if (document.all) {
function MoveHandler(){
Xpos = document.body.scrollLeft + event.x;
Ypos = document.body.scrollTop + event.y;
}
document.onmousemove = MoveHandler;
}
else if (document.layers) {
function xMoveHandler(evnt) {
Xpos = evnt.pageX;
Ypos = evnt.pageY;
}
window.onMouseMove = xMoveHandler;
}
Paula Cardoso Alcobia
- 78 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
function animateLogo() {
if (document.all) {
yBase = window.document.body.offsetHeight / 4;
xBase = window.document.body.offsetWidth / 4;
}
else if (document.layers) {
yBase = window.innerHeight / 4;
xBase = window.innerWidth / 4;
}
if (document.all) {
for (i = 0 ; i < starsDiv.all.length; i++) {
starsDiv.all[i].style.top = Ypos + Math.cos((20*Math.sin(currStep/
20))+i*70)*yBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + i*25)/
10);
starsDiv.all[i].style.left = Xpos + Math.sin((20*Math.sin(currStep/
20))+i*70)*xBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + i*25)/
10);
}
}
else if (document.layers) {
for (j = 0; j < 7; j++) { //7 is number of NS layers!
var templayer=”a” + j;
document.layers[templayer].top = Ypos + Math.cos((20*Math.sin(currStep/
20))+j*70)*yBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + j*25)/
10);
document.layers[templayer].left =Xpos + Math.sin((20*Math.sin(currStep/
20))+j*70)*xBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + j*25)/
10);
}
}
currStep += step;
setTimeout(“animateLogo()”, 10);
}
animateLogo();
// End —>
</script>
Escola Secundária S. João do Estoril
</BODY>
Paula Cardoso Alcobia
- 79 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
Exercício 3 - R
etirar o sublinhado das hiperligações.
Retirar
<HEAD>
<style>
<!—
a{text-decoration:none}
//—>
</style>
</HEAD>
<!— Inserir a primeira parte do script entre os <HEAD></HEAD> tags. Depois
para inserir os links é o resto do script.(Um para cada um dos links.) —>
<BODY>
<A HREF=”javascript:void(0)”
http://
ONCLICK=”open(‘http://
1112.page.vu
1112.page.vu’’ ,’miniwin’,’toolbar=0,location=0,directories=0,
status=0,menubar=0,scrollbars=0,resizable=0,width=800,height=600')”> Página
da TTurma
urma 12 do 11º Ano </A>
</BODY>
Exercício 4 - PPergunta
ergunta o nome ao visitante.
<!— Inserir este script em qualquer parte da pagina, dentro de (body) —>
<BODY>
<SCRIPT LANGUAGE=”Javascript”>
Escola Secundária S. João do Estoril
<!—
name=window.prompt(“ Insira o seu nome?”,” ““);
document.write(“ <H3 align=center><font color =#006699> Olá “+name+ “
<br> Obrigada pela sua visita </H3> </font> </br>”)
//—>
</script>
</BODY>
Paula Cardoso Alcobia
- 80 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
Exercício 5 - Um simples relógio.
Escola Secundária S. João do Estoril
<!— Inserir este script em qualquer parte da pagina, dentro de (body) —>
<BODY>
<script language=”Javascript1.2">
<!—
if(navigator.appName == “Netscape”) {
document.write(‘<layer id=”clock”></layer><br>’);
}
if (navigator.appVersion.indexOf(“MSIE”) != -1){
document.write(‘<span id=”clock”></span><br>’);
}
function upclock(){
var dte = new Date();
var hrs = dte.getHours();
var min = dte.getMinutes();
var sec = dte.getSeconds();
var col = “:”;
var spc = “ “;
var apm;
if (12 < hrs) {
apm=”PM”;
hrs-=12;
}
else {
apm=”AM”;
}
if (hrs == 0) hrs=12;
if (min<=9) min=”0"+min;
if (sec<=9) sec=”0"+sec;
if(navigator.appName == “Netscape”) {
document.clock.document.write(hrs+col+min+col+sec+spc+apm);
document.clock.document.close();
}
if (navigator.appVersion.indexOf(“MSIE”) != -1){
clock.innerHTML = hrs+col+min+col+sec+spc+apm;
}
}
setInterval(“upclock()”,1000);
//—>
</script>
</BODY>
Paula Cardoso Alcobia
- 81 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
Exercício 6 - Botão animado muda de cor e de texto.
<HEAD>
<SCRIPT LANGUAGE=”JavaScript”>
<!— Begin
hexColor = [“0”,”1",”2",”3",”4",”5",”6",”7",”8",”9",”a”,”b”,”c”,”d”,”e”,”f ”];
function mOver() {
for (i = 0; i < 13; i++) {
setTimeout(‘document.myForm.button.style.background = “#’+hexColor[12i]+’0'+hexColor[12-i]+’0c0";’, i * 40);
}
}
function mOut() {
document.myForm.button.value = “ Clique Aqui “;
for (i = 0; i < 12; i++) {
setTimeout(‘document.myForm.button.style.background =
“#’+hexColor[i]+’0'+hexColor[i]+’0c0";’, i * 40);
}
}
// End —>
</script>
</HEAD>
<!— Inserir este script em qualquer parte da pagina, dentro de (body) —>
<BODY>
Escola Secundária S. João do Estoril
<form name=myForm>
<input type=button name=button value=” Clique Aqui “ onMouseOver=’mOver()’’
onMouseDown=’document.myForm.button.value=” Obrigado!! “‘
onClick=’window.location=”http://1212.page.vu”’ onMouseOut=’mOut()’>
</form>
</BODY>
Paula Cardoso Alcobia
- 82 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
Exercício 7 - Mostrar a resolução do ecrã
<!— Inserir este script em qualquer parte da pagina, dentro de (body) —>
<BODY>
<script language=”Javascript”>
<!—
document.write(‘A sua resolução é de ‘ + screen.width + ‘ X ‘ + screen.height + ‘
pixels.’)
//—>
</script>
</BODY>
Exercício 8 - Abre uma hiperligação sem clicar
clicar,, apenas com a passagem do
cursor
cursor..
<!— Inserir este script em qualquer parte da pagina, dentro de (body) —>
<BODY>
<a href=”” onmouseover=”parent.location=’http://1211.page.vu’”>Turma 12 do
11º Ano (passe aqui o cursor)</A><SCRIPT LANGUAGE=”JavaScript”>
</BODY>
Exercício 9 - Menu de navegação
<!— Inserir este script em qualquer parte da pagina, dentro de (body) —>
<BODY>
<form name=”c937">
<p><select name=”c614" size=”1">
<option selected value=”http://1112.page.vu”>Turma 11 12</option>
<option value=”http://www.malhatlantica.pt/grupoinfsje/”>Página Grupo de
Informática</option>
<option value=”http://www.essje.pt”>Página da Escola
</option>
Escola Secundária S. João do Estoril
<option value=”http://www.eusou.com/informatico/”>Eu sou Informático
</option>
</select>
<input type=”button” value=”Ver”
onClick=”location=document.c937.c614.options[document.c937.c614.selectedIndex].value”>
</p>
</form>
</BODY>
Paula Cardoso Alcobia
- 83 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
Exercício 10 - TTipo
ipo de tipo de browser
<!— Inserir este script em qualquer parte da pagina, dentro de (body) —>
<BODY>
<SCRIPT Language=”JavaScript”> document.write(navigator.appName +
navigator.appVersion) </script>
</BODY>
Exercício 11 - TTexto
exto colorido
Escola Secundária S. João do Estoril
<!— Inserir este script em qualquer parte da pagina, dentro de (body) —>
<BODY>
<h2>
<script language=”JavaScript1.2">
var message=” Página da Turma 12 do 12º Ano. Recomende está pagina a um
amigo!! “
var neonbasecolor=”blue”
var neontextcolor=”red”
var flashspeed=100 //in milliseconds
///Nao modificar o resto de script/////
var n=0
if (document.all){
document.write(‘<font color=”’+neonbasecolor+’”>’)
for (m=0;m<message.length;m++)
document.write(‘<span id=”neonlight”>’+message.charAt(m)+’</span>’)
document.write(‘</font>’)
//cache reference to neonlight array
var tempref=document.all.neonlight
}
else
document.write(message)
function neon(){
//Change all letters to base color
if (n==0){
for (m=0;m<message.length;m++)
tempref[m].style.color=neonbasecolor
}
//cycle through and change individual letters to neon color
tempref[n].style.color=neontextcolor
if (n<tempref.length-1)
n++
else
Paula Cardoso Alcobia
- 84 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
{
n=0
clearInterval(flashing)
setTimeout(“beginneon()”,1500)
return
}
}
function beginneon(){
if (document.all)
flashing=setInterval(“neon()”,flashspeed)
}
beginneon()
</script>
</h2>
</BODY>
Escola Secundária S. João do Estoril
Exercício 12 - TTexto
exto no status bar
bar..
<!— Inserir este script em qualquer parte da pagina, dentro de (body) —>
<BODY>
<SCRIPT>
<!— Hide from old browsers
message = “Página Principal da Escola Secundária S. João do Estoril ^” +
”Excelente^” + ”Magnífica ^” + ”Optima^” + ”Mude estas mensagens ...^” +
”^”
scrollSpeed = 25
lineDelay = 1500
// Nao modificar o resto de script //
txt = “”
function scrollText(pos) {
if (message.charAt(pos) != ‘^’) {
txt = txt + message.charAt(pos)
status = txt
pauze = scrollSpeed
}
else {
pauze = lineDelay
txt = “”
if (pos == message.length-1) pos = -1
}
pos++
setTimeout(“scrollText(‘“+pos+”’)”,pauze)
}
// Unhide —>
scrollText(0)
</SCRIPT>
</BODY>
Paula Cardoso Alcobia
- 85 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
Exercício 13 - Definir como homepage.
<!— Inserir este script em qualquer parte da pagina, dentro de (body) —>
<BODY>
<!—[if IE]>
<a class=”chlnk” style=”cursor:hand;font-weight:bold;color:#004080;fontfamily:Verdana” HREF
onClick=”this.style.behavior=’url(#default#homepage)’;this.setHomePage(‘http://
1112.page.vu’);”> Defenir a página 1112 como homepage! </a>
<![endif]—>
</BODY>
Exercício 14 - Efeito de destaque nas ligações.
<HEAD>
<script>
function highlight(which,color){
if (document.all||document.getElementById)
which.style.backgroundColor=color
}
</script>
</HEAD>
Escola Secundária S. João do Estoril
<!— Inserir a primeira parte do script entre os <HEAD></HEAD> tags. Depois
para inserir os links é o resto do script.(Um para cada um dos links.) —>
<BODY>
<p><a href=”http://1112.page.vu” onMouseover=highlight(this,’yellow ’)
onMouseout=”highlight(this,document.bgColor)”>Página da Turma 1112 </a>
<p><a href=” http://www.malhatlantica.pt/grupoinfsje/”
onMouseover=highlight(this,’yellow’)
onMouseout=”highlight(this,document.bgColor)”> Página do Grupo de Informática
</a>
<p><a href=” http://www.essje.pt” onMouseover=highlight(this,’yellow’)
onMouseout=”highlight(this,document.bgColor)”>Escola</a>
<p><a href=” http://www.eusou.com/informatico/”
onMouseover=highlight(this,’yellow’)
onMouseout=”highlight(this,document.bgColor)”> Informático </a>
</BODY>
Paula Cardoso Alcobia
- 86 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
Exercício 15 - TTexto
exto animado tipo ondas.
Escola Secundária S. João do Estoril
<HEAD>
<script language=”JavaScript1.2">
/*
Texto animado tipo ondas
*/
//configure message
message=” Página da Turma 12 12!! Recomende esta página a um amigo.”
//animate text in NS6? (0 will turn it off)
ns6switch=1
var ns6=document.getElementById&&!document.all
mes=new Array();
mes[0]=-1;
mes[1]=-4;
mes[2]=-7;mes[3]=-10;
mes[4]=-7;
mes[5]=-4;
mes[6]=-1;
num=0;
num2=0;
txt=””;
function jump0(){
if (ns6&&!ns6switch){
jump.innerHTML=message
return
}
if(message.length > 6){
for(i=0; i != message.length;i++){
txt=txt+”<span style=’position:relative;’ id=’n”+i+”’>”+message.charAt(i)+”</
span>”};
jump.innerHTML=txt;
txt=””;
jump1a()
}
else{
alert(“Your message is to short”)
}
}
function jump1a(){
nfinal=(document.getElementById)? document.getElementById(“n0”) :
document.all.n0
nfinal.style.left=-num2;
if(num2 != 9){
num2=num2+3;
setTimeout(“jump1a()”,50)
}
Paula Cardoso Alcobia
- 87 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
else{
jump1b()
}
}
function jump1b(){
nfinal.style.left=-num2;
if(num2 != 0){num2=num2-3;
setTimeout(“jump1b()”,50)
}
else{
jump2()
}
}
function jump2(){
txt=””;
for(i=0;i != message.length;i++){
if(i+num > -1 && i+num <7){
txt=txt+”<span
style=’position:relative;top:”+mes[i+num]+”’>”+message.charAt(i)+”</span>”
}
else{txt=txt+”<span>”+message.charAt(i)+”</span>”}
}
jump.innerHTML=txt;
txt=””;
if(num != (-message.length)){
num—;
setTimeout(“jump2()”,50)}
else{num=0;
setTimeout(“jump0()”,50)}}
</script>
</HEAD>
Escola Secundária S. João do Estoril
<!— Inserir a primeira parte do script entre os <HEAD></HEAD> tags . E o
resto do script em qualquer parte da pagina, dentro de (body) —>
<BODY>
<h2><div id=”jumpx” style=”color:blue”></div></h2>
<script>
if (document.all||document.getElementById){
jump=(document.getElementById)? document.getElementById(“jumpx”) :
document.all.jumpx
jump0()
} else
document.write(message)
</script>
</BODY>
Paula Cardoso Alcobia
- 88 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
Exercício 16 - TTexto
exto no cursor
<HEAD>
<STYLE>
.spanstyle {
position:absolute;
visibility:visible;
top:-50px;
font-size:12pt;
font-family:Verdana;
font-weight:bold;
color:steelblue;
}
</STYLE>
</HEAD>
<!— Inserir a primeira parte do script entre os <HEAD></HEAD> tags . E o
resto do script em qualquer parte da pagina, dentro de (body) —>
<BODY>
<script>
var message=”Paula Cardoso Alcobia!!!”.split(“”);
var x;
var y;
var step=15;
var xpos=new Array();
var ypos=new Array();
Escola Secundária S. João do Estoril
function mouseMoved(e){
x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX;
y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY;
}
function makesnake() {
var thisspan;
for (var i=message.length-1; i>=0; i—) {
xpos[i]=xpos[i-1]+step;
ypos[i]=ypos[i-1];
}
xpos[0]=x+step;
ypos[0]=y;
Paula Cardoso Alcobia
- 89 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
for (var i in message) {
if (document.all) {
thisspan = eval(“span”+(i)+”.style”);
thisspan.posLeft=xpos[i];
thisspan.posTop=ypos[i];
} else if (document.layers) {
thisspan = eval(“document.span”+i);
thisspan.left=xpos[i];
thisspan.top=ypos[i];
}
}
}
var timer = null;
function startSnake() {
for (var i in message) {
xpos[i]=-50;
ypos[i]=-50;
}
setTimeout(‘timer=setInterval(“makesnake()”,30);’,1000);
}
startSnake();
for (var i in message) {
document.write(“<span id=’span”+i+”’ class=’spanstyle’>”)
document.write(message[i]);
document.write(“</span>”);
}
if (document.layers) { document.captureEvents(Event.MOUSEMOVE); }
document.onmousemove = mouseMoved;
</script>
Escola Secundária S. João do Estoril
</BODY>
Paula Cardoso Alcobia
- 90 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
Exercício 17 - TTexto
exto no cursor (outra versão).
<HEAD>
<STYLE>
.spanstyle {
position:absolute;
visibility:visible;
top:-50px;
font-size:12pt;
font-family:Verdana;
font-weight:bold;
color:steelblue;
}
</STYLE>
</HEAD>
<!— Inserir a primeira parte do script entre os <HEAD></HEAD> tags . E o
resto do script em qualquer parte da pagina, dentro de (body) —>
Escola Secundária S. João do Estoril
<BODY>
<script>
var message=” LOLLLLLLLLLLLLLL”.split(“”);
var x;
var y;
var step=-15;
var xpos=new Array();
var ypos=new Array();
function mouseMoved(e){
x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX;
y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY;
}
function makesnake() {
var thisspan;
for (var i=message.length-1; i>=0; i—) {
xpos[i]=xpos[i-1]+step;
ypos[i]=ypos[i-1];
}
xpos[0]=x+step;
ypos[0]=y;
for (var i in message) {
if (document.all) {
thisspan = eval(“span”+(i)+”.style”);
thisspan.posLeft=xpos[i];
thisspan.posTop=ypos[i];
Paula Cardoso Alcobia
- 91 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
} else if (document.layers) {
thisspan = eval(“document.span”+i);
thisspan.left=xpos[i];
thisspan.top=ypos[i];
}
}
}
var timer = null;
function startSnake() {
for (var i in message) {
xpos[i]=-50;
ypos[i]=-50;
}
setTimeout(‘timer=setInterval(“makesnake()”,30);’,1000);
}
startSnake();
for (var i in message) {
document.write(“<span id=’span”+i+”’ class=’spanstyle’>”)
document.write(message[i]);
document.write(“</span>”);
}
if (document.layers) { document.captureEvents(Event.MOUSEMOVE); }
document.onmousemove = mouseMoved;
Escola Secundária S. João do Estoril
</script>
Paula Cardoso Alcobia
- 92 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
Exercício 18 - As coordenadas do rato
<HEAD>
<form name=”Show”>
X <input type=”text” name=”MouseX” value=”0" size=”4"><br>
Y <input type=”text” name=”MouseY” value=”0" size=”4"><br>
</form>
</HEAD>
<!— Inserir a primeira parte do script entre os <HEAD></HEAD> tags . E o
resto do script em qualquer parte da pagina, dentro de (body) —>
Escola Secundária S. João do Estoril
<BODY>
<script language=”JavaScript1.2">
<!— Begin
var IE = document.all?true:false;
if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = getMouseXY;
var tempX = 0;
var tempY = 0;
function getMouseXY(e) {
if (IE) { // grab the x-y pos.s if browser is IE
tempX = event.clientX + document.body.scrollLeft;
tempY = event.clientY + document.body.scrollTop;
}
else { // grab the x-y pos.s if browser is NS
tempX = e.pageX;
tempY = e.pageY;
}
if (tempX < 0){tempX = 0;}
if (tempY < 0){tempY = 0;}
document.Show.MouseX.value = tempX;
document.Show.MouseY.value = tempY;
return true;
}
// End —>
</script>
</BODY>
Paula Cardoso Alcobia
- 93 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
Exercício 19 – R
elógio com data e hora do sistema
Relógio
<SCRIPT language=JavaScript>
dCol=’000000';//date colour.
fCol=’000000';//face colour.
sCol=’000000';//seconds colour.
mCol=’000000';//minutes colour.
hCol=’000000';//hours colour.
ClockHeight=50;
ClockWidth=50;
ClockFromMouseY=0;
ClockFromMouseX=100;
d=new
Array(“DOMINGO”,”SEGUNDA”,”TERCA”,”QUARTA”,”QUINTA”,”SEXTA”,”SABADO”);
m=new Array(“JANEIRO”,”FEVEREIRO”,”MARCO”,”ABRIL”,”MAIO”,
”JUNHO”,”JULHO”,”AGOSTO”,”SETEMBRO”,”OUTUBRO”,”NOVEMBRO”,”DEZEMBRO”);
date=new Date();
day=date.getDate();
year=date.getYear();
if (year < 2000) year=year+1900;
TodaysDate=” “+d[date.getDay()]+” “+day+” “+m[date.getMonth()]+” “+year;
D=TodaysDate.split(‘’);
H=’...’;
H=H.split(‘’);
M=’....’;
M=M.split(‘’);
Escola Secundária S. João do Estoril
S=’.....’;
S=S.split(‘’);
Face=’1 2 3 4 5 6 7 8 9 10 11 12';
font=’Arial’;
size=1;
speed=0.6;
ns=(document.layers);
Paula Cardoso Alcobia
- 94 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
ie=(document.all);
Face=Face.split(‘ ‘);
n=Face.length;
a=size*10;
ymouse=0;
xmouse=0;
scrll=0;
props=”<font face=”+font+” size=”+size+” color=”+fCol+”><B>”;
props2=”<font face=”+font+” size=”+size+” color=”+dCol+”><B>”;
Split=360/n;
Dsplit=360/D.length;
HandHeight=ClockHeight/4.5
HandWidth=ClockWidth/4.5
HandY=-7;
HandX=-2.5;
scrll=0;
step=0.06;
currStep=0;
y=new Array();x=new Array();Y=new Array();X=new Array();
for (i=0; i < n; i++){y[i]=0;x[i]=0;Y[i]=0;X[i]=0}
Dy=new Array();Dx=new Array();DY=new Array();DX=new Array();
for (i=0; i < D.length; i++){Dy[i]=0;Dx[i]=0;DY[i]=0;DX[i]=0}
if (ns){
for (i=0; i < D.length; i++)
document.write(‘<layer name=”nsDate’+i+’” top=0 left=0 height=’+a+’
width=’+a+’><center>’+props2+D[i]+’</font></center></layer>’);
Escola Secundária S. João do Estoril
for (i=0; i < n; i++)
document.write(‘<layer name=”nsFace’+i+’” top=0 left=0 height=’+a+’
width=’+a+’><center>’+props+Face[i]+’</font></center></layer>’);
for (i=0; i < S.length; i++)
document.write(‘<layer name=nsSeconds’+i+’ top=0 left=0 width=15
height=15><font face=Arial size=3 color=’+sCol+’><center><b>’+S[i]+’</
b></center></font></layer>’);
Paula Cardoso Alcobia
- 95 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
for (i=0; i < M.length; i++)
document.write(‘<layer name=nsMinutes’+i+’ top=0 left=0 width=15
height=15><font face=Arial size=3 color=’+mCol+’><center><b>’+M[i]+’</
b></center></font></layer>’);
for (i=0; i < H.length; i++)
document.write(‘<layer name=nsHours’+i+’ top=0 left=0 width=15
height=15><font face=Arial size=3 color=’+hCol+’><center><b>’+H[i]+’</
b></center></font></layer>’);
}
if (ie){
document.write(‘<div id=”Od” style=”position:absolute;top:0px;left:0px”><div
style=”position:relative”>’);
for (i=0; i < D.length; i++)
document.write(‘<div
id=”ieDate”
style=”position:absolute;top:0px;left:0;height:’+a+’;width:’+a+’;textalign:center”>’+props2+D[i]+’</B></font></div>’);
document.write(‘</div></div>’);
document.write(‘<div id=”Of ” style=”position:absolute;top:0px;left:0px”><div
style=”position:relative”>’);
for (i=0; i < n; i++)
document.write(‘<div
i d = ” i e Fa c e ”
style=”position:absolute;top:0px;left:0;height:’+a+’;width:’+a+’;textalign:center”>’+props+Face[i]+’</B></font></div>’);
document.write(‘</div></div>’);
document.write(‘<div id=”Oh” style=”position:absolute;top:0px;left:0px”><div
style=”position:relative”>’);
for (i=0; i < H.length; i++)
Escola Secundária S. João do Estoril
document.write(‘<div
id=”ieHours”
style=”position:absolute;width:16px;height:16px;font-family:Arial;fontsize:16px;color:’+hCol+’;text-align:center;font-weight:bold”>’+H[i]+’</div>’);
document.write(‘</div></div>’);
document.write(‘<div id=”Om” style=”position:absolute;top:0px;left:0px”><div
style=”position:relative”>’);
for (i=0; i < M.length; i++)
document.write(‘<div
id=”ieMinutes”
style=”position:absolute;width:16px;height:16px;font-family:Arial;fontsize:16px;color:’+mCol+’;text-align:center;font-weight:bold”>’+M[i]+’</div>’);
Paula Cardoso Alcobia
- 96 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
document.write(‘</div></div>’)
document.write(‘<div id=”Os” style=”position:absolute;top:0px;left:0px”><div
style=”position:relative”>’);
for (i=0; i < S.length; i++)
document.write(‘<div
id=”ieSeconds”
style=”position:absolute;width:16px;height:16px;font-family:Arial;fontsize:16px;color:’+sCol+’;text-align:center;font-weight:bold”>’+S[i]+’</div>’);
document.write(‘</div></div>’)
}
(ns)?window.captureEvents(Event.MOUSEMOVE):0;
function Mouse(evnt){
ymouse
=
( n s ) ? e v n t . p a g e Y + C l o c k Fr o m M o u s e Y(window.pageYOffset):event.y+ClockFromMouseY;
xmouse = (ns)?evnt.pageX+ClockFromMouseX:event.x+ClockFromMouseX;
}
(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
function ClockAndAssign(){
time = new Date ();
secs = time.getSeconds();
sec = -1.57 + Math.PI * secs/30;
mins = time.getMinutes();
min = -1.57 + Math.PI * mins/30;
hr = time.getHours();
hrs = -1.575 + Math.PI * hr/6+Math.PI*parseInt(time.getMinutes())/360;
if (ie){
Od.style.top=window.document.body.scrollTop;
Escola Secundária S. João do Estoril
Of.style.top=window.document.body.scrollTop;
Oh.style.top=window.document.body.scrollTop;
Om.style.top=window.document.body.scrollTop;
Os.style.top=window.document.body.scrollTop;
}
Paula Cardoso Alcobia
- 97 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
for (i=0; i < n; i++){
var F=(ns)?document.layers[‘nsFace’+i]:ieFace[i].style;
F.top=y[i] + ClockHeight*Math.sin(-1.0471 + i*Split*Math.PI/180)+scrll;
F.left=x[i] + ClockWidth*Math.cos(-1.0471 + i*Split*Math.PI/180);
}
for (i=0; i < H.length; i++){
var HL=(ns)?document.layers[‘nsHours’+i]:ieHours[i].style;
HL.top=y[i]+HandY+(i*HandHeight)*Math.sin(hrs)+scrll;
HL.left=x[i]+HandX+(i*HandWidth)*Math.cos(hrs);
}
for (i=0; i < M.length; i++){
var ML=(ns)?document.layers[‘nsMinutes’+i]:ieMinutes[i].style;
ML.top=y[i]+HandY+(i*HandHeight)*Math.sin(min)+scrll;
ML.left=x[i]+HandX+(i*HandWidth)*Math.cos(min);
}
for (i=0; i < S.length; i++){
var SL=(ns)?document.layers[‘nsSeconds’+i]:ieSeconds[i].style;
SL.top=y[i]+HandY+(i*HandHeight)*Math.sin(sec)+scrll;
SL.left=x[i]+HandX+(i*HandWidth)*Math.cos(sec);
}
for (i=0; i < D.length; i++){
Escola Secundária S. João do Estoril
var DL=(ns)?document.layers[‘nsDate’+i]:ieDate[i].style;
DL.top=Dy[i] + ClockHeight*1.5*Math.sin(currStep+i*Dsplit*Math.PI/180)+scrll;
DL.left=Dx[i] + ClockWidth*1.5*Math.cos(currStep+i*Dsplit*Math.PI/180);
}
currStep-=step;
}
Paula Cardoso Alcobia
- 98 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
function Delay(){
scrll=(ns)?window.pageYOffset:0;
Dy[0]=Math.round(DY[0]+=((ymouse)-DY[0])*speed);
Dx[0]=Math.round(DX[0]+=((xmouse)-DX[0])*speed);
for (i=1; i < D.length; i++){
Dy[i]=Math.round(DY[i]+=(Dy[i-1]-DY[i])*speed);
Dx[i]=Math.round(DX[i]+=(Dx[i-1]-DX[i])*speed);
}
y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);
x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);
for (i=1; i < n; i++){
y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);
x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);
}
ClockAndAssign();
setTimeout(‘Delay()’,20);
}
if (ns||ie)window.onload=Delay;
</SCRIPT>
Escola Secundária S. João do Estoril
</BODY>
Paula Cardoso Alcobia
- 99 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
Exercício 20 - Colocar a data actual
<script> <!—
var now = new Date();
var days = new Array(‘Domingo’,’Segunda-Feira’,’Terça-Feira’,’Quarta-feira’,’QuintaFeira’,’Sexta-Feira’,’Sábado’);
var
months
=
new
Array(‘Janeiro’,’Fevereiro’,’Março’,’Abril’,’Maio’,’Junho’,’Julho’,’Agosto’,’Setembro’,’Outubro’,’Novembro’,’Dezembro’);
var date = ((now.getDate()<10) ? “0” : “”)+ now.getDate();
function fourdigits(number)
{
return (number < 1000) ? number + 1900 : number;
}
today = days[now.getDay()] + “,” + date+ “ de “+
months[now.getMonth()] + “,” +(fourdigits(now.getYear())) ;
document.write(“” +today);
Escola Secundária S. João do Estoril
//—></script>
Paula Cardoso Alcobia
- 100 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
Exercício 21 - desactiva o uso do botão direito do rato, impedindo assim
algumas das funcionalidades que no IE ou no Netscape permitem (copiar
imagens ou páginas)
<SCRIPT language=JavaScript>
<!— Hide from old browsers
document.onmousedown = checkClick
if (document.layers){
document.captureEvents(Event.MOUSEDOWN)
}
function checkClick(ev) {
if (navigator.appName == “Netscape”){
i f ( e v.which != 1) {
alert(“Botão direito do rato desactivado.”)
return false }
}
else{
if (event.button != 1){
alert(“Botão direito do rato desactivado.”)
return false }
}
}
// —>
</SCRIPT>
Sites com vários scripts em Javascript:
http://www.w3schools.com/js/default.asp
Escola Secundária S. João do Estoril
http://www.scriptfacil.com/
Paula Cardoso Alcobia
- 101 -
Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
Bibliografia
Livros:
- Fonseca, Dalila. Pacheco, Deolinda. Marques, Fernandes e Soares, Ricardo.
Curso Tecnológico de Informática - 11º Ano- Aplicações Informáticas A.
Porto Editora.
Páginas da web:
http://www.cm-braganca.pt/document/448112/503209.pdf-truque e dicas
http://www.deetc.isel.ipl.pt/programacao/TI/Documentacao/JavaScript/
ClientGuideJS13/index.htm
http://pt.wikipedia.org/
http://www.w3schools.com/js/default.asp
Escola Secundária S. João do Estoril
http://www.scriptfacil.com/
Paula Cardoso Alcobia
- 102 -