4 Unidade 3subunidade Javascript

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
o Bibliografia
Escola Secundária S. João do Estoril
Paula Cardoso Alcobia -1-

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

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

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 JavaScript permite inserir texto dinâmico nas páginas HTML
-O
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.
O JavaScript pode ler e escrever elementos HTML
-O
O JavaScript pode ler e alterar o conteúdo de elementos HTML.

O JavaScript pode ser usado para validar dados
-O
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.

♦ 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
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.
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, poder-
se-í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, diz-
se 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.
O javascript é uma linguagem

baseada em objectos
Professora Aluna
Realizar teste Paula Cláudia Responder teste
sim
Classe Professora Aluna

Instância da classe ou objecto Professora Paula Aluna Cláudia
Método Realizar Teste Responder Teste

Mensagem O javascript é uma linguagem Sim
baseada em objectos

♦ 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 programador-
que 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
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.

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

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.
♦ Comentários e blocos de código

Os comentários permitem-nos descrever o código JavaScript que produzimos tornando-
o 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.

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
internos São escritos no mesmo ficheiro
São executados quando são

Na secção head despoletados
Na secção boby São executados quando a página é

carregada
externos São escritos noutro ficheiro

Quando o script é usado em várias páginas
Paula Cardoso Alcobia - 10 -

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>
sequência de instruções
</script>
</head>
Exemplo:
<html>
<head>

</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
Sintaxe:
<head> </head>
<body>
</script>
</body>

Exemplo:
<html>
<head>
<title></title>
</head>
<body>

</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>
</head>
<body>
</script>
</body>

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>
<p>
<script type="text/javascript" src="ext.js">
</script>
</p>
</body>
</html>

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" >
<!—
//—>
</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>
<p> Olá </p>
</body>
</html>

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
Tipo De scr i çã o
representa os números inteiros (decimal, octal ou hexadecimal) ou reais de
numérico
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
Representa um valor nulo, ou seja, a inexistência de um valor associado a
null uma variável. Uma variável inicializada com null não assume qualquer valor,
ou seja, está vazia.
Representa o conteúdo de variáveis não inicializadas ou indefinidas, ou seja,
undefined
armazenam o valor especial undefined.
Representa um objecto que é uma colecção de valores (propriedades) e
objecto
métodos (funções). As propriedades podem assumir valores de qualquer tipo.
Representa um tipo de objectos da linguagem JavaScript. Um array é uma
array 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.

♦ Declaração de Variáveis - V
Variáveis ariáveis locais e globais
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.
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>

♦ 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 Variá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:
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.

♦ 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 Exe m p l o
54 Inteiro decimal
Inteiro hexadecimal( número que
0xA 153
começa por 0x)
0671 Inteiro Octal (número que começa por 0)
5,41
- 2E8 Real ou vírgula flutuante
numérico
3E- 10
Infinity Infinito positivo (x/0)
- Infinity Infinito negativo (- x/0)
Indeterminação
Na N (0/0)
(Not a Number)
"Isto é uma string"
string "50"
"amarelo"
true
booleano
false
null null
undefined undefined
array ["aluno, "professor", funcionário"]

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
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 (\\).

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

E spaços em branco
\u000C Form Feed <FF>
\u0020 S pace ( espaço) <S P >
V alores de fim de linha \u000A Line Feed <LF>
\u000D C arriage R eturn <C R >
\u000b B ackspace <B S >

V alores adicionais de \u0009 H orizontalTab <H T>
S equencias de escape
\u0022 D ouble Q uote ( aspas) "
\u0027 S ingle Q uote( plicas) '
\u005C B ackslash ( barra) \
Para obter mais informações sobre Unicode, consulte o site Unicode Consortium Web
site:http://www.unicode.org/.

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
Os operadores mais conhecidos
-= x-=y x=x-y são as quatro operações
aritméticas básicas (adição
*= x*=y x=x*y subtracção, multiplicação e
divisão.) Para estes a linguagem
/= x/=y x=x/y
JavaScript define as seguintes
%= x% =y x=x% y 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”
txt3=txt1+” “+txt2
O resultado da variável txt3 seria: O meu nome é Paula Cardoso Alcobia

Outro exemplo:
Quando um do operandos não
a= 6 é do tipo string (variável a)é
b=Dto feita a conversão automática
desse operando para o tipo
c= a+b string.
O resultado da variável c seria 6Dto

♦ 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
x=2
+ adição 4
x+2
x=2
- subtracção 3
5-x
x=4
* m ultiplicação 20
x*5
15/5 3
/ divisão
5/2 2.5
5% 2 1
m ódulo ( obtém o resto de um a divisão
% 10% 8 2
inteira)
10% 2 0
increm ento x=5

++ 6
x++
x=5
-- decrem ento 4
x--
x=3
- m enos unário -3
-x
O seguinte quadro mostra as formas de incrementar e decrementar um determinado

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

♦ 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 Exe m p l o

x==y dá true se x
Igualdade Verifica se os dois 5==8 Devolve
igualar y
(==) operandos são iguais Falso
x!=y dá true se x não

Desigualdade Verifica se os operandos 5!=8 Devolve
for igual a y
(!=) são desiguais verdadeiro
Verifica se o operando da x>y dá true se x for

Maior do que 5>8 Devolve
esquerda é maior do que o maior do que y
(>) Falso
da direita
Verifica se o operando da x>=y dá true se x for
Maior ou igual 5>=8 Devolve
esquerda é maior ou igual maior ou igual a y
(>=) falso
ao da direita
Verifica se o operando da x<y dá true se x for
Menor do que 5<8 Devolve
esquerda é menor do que o menor do que y
(<) verdadeiro
da direita
verifica se o operando da
Menor ou igual x<=y dá true se x for 5<=8 Devolve
esquerda é menor ou igual
(<=) menor ou igual a y verdadeiro
ao da direita
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;
- 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
Numérica- o"12" é convertido

"12"<5 falso
em12
Numérica- "doze" não pode ser
"doze"<5 convertido em número e a falso
conversão resulta em NaN.

♦ 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 U t i l i za çã o De scr i çã o Exe m p l o

Dá true se b for true e c x=6
e (&&) b && c for true. y=3
(x<10 && y>1) devolve verdadeiro
Dá false se b for false e
x=6
c for false. Dá true nos
ou (||) b || c y=3
casos restantes.
(x==5 ||==5) devolve falso
x=6
Dá true se b for false e
negação (!) !b y=3
dá false se b for true.
!(x==y) devolve verdadeiro
Exp r e ssã o EX P1 EX P2 Re s ul t a d o
V V V
V F F
EX P 1 && EX P 2
F V F
F F F
V V V
V F V
EX P1 || EX P2
F V V
F F F
V F
!EX P1
F V

♦ 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:
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.

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

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

♦ 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

Acesso a propriedade, indexação em
1 .[]() array, chamada a função e agrupamento
de expressões
- ! ~ ++ --
2 Peradores unários e de objectos
new delete void typeof
3 */% Multiplicação, divisão e resto
4 +- Adição/ concatenação e subtracção
5 >> << >>> Deslocamentos
6 > >= < <= in Comparação
=
7 Igualdade e desigualdade
== != === !==
8 & E sobre Bits
9 ^ Ou exclusivo sobre Bits
10 | Ou sobre Bits
11 && E lógico
12 || OU lógico
Condicional ou decisão binária com
13 ?:
operador ternário
= += -= *= /= %=
Atribuição e atribuição com operação
14 <<= >>= >>>= &=
associada
^=
15 , Avaliação múltipla

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”
var d=new Date()
var tempo=d.getHours()
if (tempo<10)
{
document.write(“<b>Bom dia</b>”)
}
</script>

♦ 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
{
Se a condição for verdadeira o
bloco 2 bloco 1 é executado. Caso
contrário, o bloco 2 é executado.
}
Exemplo:
//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!”)
}
else
{
document.write(“Boa tarde!”)
}
</script>

♦ 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
}
Se a condição 1 for verdadeira o bloco 1 é

else executado. Caso contrario, a condição 2 é
{ avaliada. Se a condição 2 for verdadeira o
bloco 2 é executado. Caso contrario, a
bloco P condição 3 é avaliada e assim
} sucessivamente. Se nenhuma condição é
verdadeira bloco P é executado. Observe
que apenas um dos blocos é executado.

♦ 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
}
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.

- 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
break
break
break
default: s += " não pertence "
}
s += "ao conjunto {6, 12, 32, 66}"
document.write(s)

♦ 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.
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
}

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

♦ 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.
Exemplos:
do while (1) for ( ; ; )

instrução instrução instrução
while (1)

♦ 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:
function factorial(n) {
if ((n == 0) || (n == 1))
return 1
else {
result = (n * factorial(n-1) )
return result }
}

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.
Para tal usa-se as instruções try...catch, que têm a sintaxe seguinte:
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:
try
{
s = a[1].substring(0,4)
}
catch(e)
{
s = “Ocorreu um erro no script: “+e
}

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

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

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]

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

♦ 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.
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.
- Funções que aceitam um número variável de argumentos-

argumentos Há casos em que o
nú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:
{
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
}
♦ 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.

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>
</head>
<body>
<p>
O valor devolvido pela função é:

</script>
</body>
</html>

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

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:
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
}

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

♦ 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 encontra-
se associado a um índice.
Propriedades do objecto Array

Sintaxe
Sintaxe: objecto.nome_da_propriedade
Pr o p r i e d a d e De scr i çã o
Fornece o número de elementos que estão no Array. O valor desta

length 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 De scr i çã o S i nt a xe
Permite truncar o último caracter de um

chop() array.chop()
array
Concatena 2 ou mais arrays e devolve

array.concat(nome_array2,nome_array3,...,-
concat() um novo array.
nome_arrayN)
Coloca todos os elementos de um array

em strings separadas para um caracter
join() array.join(separator)
(por defeito é a vírgula).
pop() 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

push() array.push(elemento1,...,elementoN)
comprimento.
Devolve um novo Array em que a

ordem dos elementos está invertida (em
reverse() aprticular temos que o elemento que array.reverse()
tinha o índice zero passa a ter o índice
mais alto e vice versa).

Método do objecto Array(continuação)
Remove e devolve o primeiro elemento

de um array, alterando o seu
shift() array.shift()
comprimento.
Cria um novo array a partir de uma

secção seleccionada de um array já
slice() array.slice(begin[,end])
existente
Devolve um novo array em que os

sort() elementos estão ordenados (geralmente array.sort(compara function)
por ordem crescente)
Adiciona e/ou remove os elementos de

splice() array.splice(index,howmany[,el1,el2])
um array.
split() divide uma string e devolve um array. array.split(separator)
Devolve uma string que representa o

toSource() código fonte do array array.toSource()
Converte um array numa string e

toString() array.toString()
devolve o resultado.
Adiciona um ou mais elementos ao

início de um array e devolve o novo
unshift() array.unshift(elemento1,...,elementoN)
comprimento.
valueOf() Devolve o primeiro valor de um array. array.valueOf()

Exemplo de um array que inverte a ordem dos elementos:

<html>
<head>
<title></title>
</head>
<body>


</script>
<table>
<tr>
<td width="140"><b>Ordem alfabética</b></td>
<td><b>Ordem inversa</b></td>
</tr>
<td>

</script>
</td>
<td>

</script>
</td>
</tr>
</table>
</body>
</html>

♦ 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
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étodo do objecto Boolean
Mé t o d o De scr i çã o
Converte um valor Boolean numa string. Este método é chamado

toString()
automaticamente pelo JavaScript sempre que um objecto Boolean é usado
numa situação que requere uma string.
valueOf() Devolve o valor "true" ou "false" de um objecto Boolean
Exemplo:
<html>
<body>
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/>”)
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>

♦ Objecto Date
O objecto Date permite-nos ler, construir e realizar operações com datas e horas.
Propriedades do objecto Date

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

Devolve o dia do mês (de 1 a 31) que está

getDate() guardado no objecto Date object.getDate()
Devolve o dia da semana (de 0=Domingo

getDay() até 6=Sábado) guardado no objecto Date object.getDay()
Devolve o mês (de 0=Janeiro até

getMonth() 11=Dezembro) guardado no objecto Date object.getMonth()
Devolve o valor completo do ano (quatro

getFullYear() dígitos) guardado no objecto Date object.getFullYear()
Devolve o valor incompleto do ano

(apenas dois dígitos) guardado no objecto
getYear() object.getYear()
Date. Não use este método, use antes o
getFullYear.
Devolve o valor da hora (de 0 a 23)

getHours() guardada no objecto Date. object.getHours()

Métodos do objecto Date(continuação)
Devolve o valor dos minutos (de 0 a 59)

getMinutes() guardados no objecto Date. object.getMinutes()
Devolve o valor dos segundos (de 0 a 59)

getSeconds() guardados no objecto Date object.getSeconds()
Devolve o valor dos milisegundos (de 0 a

getMilliseconds() 999) guardados no objecto Date object.getMilliseconds()
Devolve a quantidade de milisegundos

decorridos desde as zero horas do dia 1 de
getTime() 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
getTimezoneOffset() usado e o Tempo Médio de Greenwich object.getTimezoneOffset()
("Greenwich Mean Time", ou GMT)
Devolve o dia do mês (de 1 a 31)

guardado no objecto Date medido no
getUTCDate() object.getUTCDate()
padrão de tempo universal (UTC)
Devolve o dia da semana (de 0 a 6)

getUTCDay() object.getUTCDay()
Devolve o valor do mês (de 0 a 11)

getUTCMonth() object.getUTCMonth()
Devolve o valor completo do ano (com

quatro dígitos) guardado no objecto Date
getUTCFullYear() medido no padrão de tempo universal object.getUTCFullYear()
(UTC)
Devolve a hora (de 0 a 23) guardada no

getUTCHours() objecto Date medida no padrão de tempo object.getUTCHours()
universal (UTC)

Devolve o valor dos minutos (de 0 a 59)

guardados no objecto Date medidos no
getUTCMinutes() object.getUTCMinutes()
Devolve o valor dos segundos (de 0 a 59)

guardados no objecto Date medidos no
getUTCSeconds() object.getUTCSeconds()
Devolve o valor dos milisegundos (de 0 a

getUTCMilliseconds() 999) guardados no objecto Date medidos object.getUTCMilliseconds()
no padrão de tempo universal (UTC)
Acerta o valor do dia (de 1 a 31) do mês

setDate(valor) guardado no objecto Date object.setDate(valor)
Acerta o valor do ano (com quatro dígitos)

setFullYear(valor) guardado no objecto Date object.setFullYear(ano[,mês,dia])
Acerta o valor da hora (de 0 a 23)

object.setHours(horas[,minutos,seg-
setHours(valor) guardada no objecto Date
undos,milissegundos])
Acerta o valor dos milisegundos (de 0 a

setMilliseconds(milisegundos) 999) guardados no objecto Date object.setMilliseconds(milisegundos)
Acerta o valor dos minutos (de 0 a 59)

object.setMinutes(minutos[,segundo-
setMinutes(valor) guardados no objecto Date
s,milissegundos])
Acerta o valor do mês (de 0=Janeiro a

setMonth(valor) 11=Dezembro) guardado no objecto Date object.setMonth(mês[,dia])
Acerta o valor dos segundos (de 0 a 59) object.setSeconds(segundos[,miliss-

setSeconds(valor)
guardados no objecto Date egundos])
Acerta a data e a hora guardadas no

objecto Date para o valor correspondente
às zero horas do dia 1 de Janeiro de 1970
setTime(valor) object.setTime(data_numérica)
mais o número de milisegundos que é
fornecido como argumento do método

Acerta o valor do ano guardado

no objecto Date. Não use este
setYear(ano) método, use antes o método object.setYear(ano)
setFullYear.
Acerta o valor do dia (de 1 a 31)

do mês guardado no objecto Date
setUTCDate(dia_mês) 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
setUTCDay(dia_semana) object.setUTCDay(dia_semana)
o padrão de tempo universal
(UTC)
Acerta o valor do mês (de

0=Janeiro a 11=Dezembro)
setUTCMonth(mês) guardado no objecto Date usando object.setUTCMonth(mês)
o padrão de tempo universal
(UTC)
Acerta o valor do ano (com quatro

setUTCFullYear(ano) dígitos) guardado no objecto Date object.setUTCFullYear(ano)
Acerta o valor da hora (de 0 a 23)

guardada no objecto Date usando
setUTCHour(horas) o padrão de tempo universal object.setUTCHour(horas)
(UTC)
Acerta o valor dos minutos (de 0 a

59) guardados no objecto Date
setUTCMinutes(minutos) usando o padrão de tempo object.setUTCMinutes(minutos)
universal (UTC)
Acerta o valor dos segundos (de 0

a 59) guardados no objecto Date

object.setUTCSeconds(segund-
setUTCSeconds(segundos) usando o padrão de tempo
os)
universal (UTC)
Acerta o valor dos milisegundos

(de 0 a 999) guardados no object.setUTCMilliseconds(mili-
setUTCMilliseconds(milisegundos)
objecto Date usando o padrão de segundos)
tempo universal (UTC)

Devolve uma representação textual (a

data e a hora escritas por extenso)
toGMTString() usando como referência o fuso horário object.toGMTString()
do Tempo Médio de Greenwich (GMT)
Devolve uma representação textual (a

data e a hora escritas por extenso) no
toLocaleString() object.toLocaleString()
fuso horário do computador local.
Fornece uma representação textual (a

data e a hora escritas por extenso) da
toUTCString() object.toUTCString()
data contida no objecto Date medida
no padrão UTC.
Métodos estáticos do objecto Date
Devolve o número de milisegundos decorridos entre as zero

Date.parse(data_texto) horas do dia 1 de Janeiro de 1970 e a data indicada por
data_texto (formato de texto)
Date.UTC(ano, mês, Devolve o número de milisegundos que separam a data
dia, horas, minutos, fornecida como argumento das 0 horas do dia 1 de Janeiro de
segundos, 1970. É obrigatório indicar o ano, o mês e o dia. As horas, os
milisegundos) minutos, os segundos e os milisegundos são facultativos.
Exemplo:
Exemplo:<html>
<body>
var d= new Date()
document.write(d.getHours() + “.”)
document.write(d.getMinutes() + 1+ “.” )
document.write(d.getSeconds())
</script>
</body>
</html>

♦ 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

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

Sintaxe: objecto.nome_do_método()
String.fromCharCode() 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.

Métodos do objecto String
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()
Devolve o caracter que se

charAt() encontra numa determinada object.charAt(index)
posição
Devolve o Unicode de um caracter

charCodeAt() object.charCodeAt(index)
numa determinada posição
concat() Concatena 2 ou mais strings object.concat(nome1,nome2,...nome[n])
Escreve uma string como as texto

fixed() object.fixed()
teletype
Escreve uma string numa

fontcolor() object.fontcolor(color)
determinada cor
Escreve uma string num

fontsize() object.fontsize("fontsize")
determinado tamanho
Tendo em conta o valor do

fromCharCode() Unicode especificado, devolve a
string
Devolve a posição da 1ª
indexOf() object.indexOf(nome,[index])
ocorrência de uma string noutra
italics() Escreve uma string em itálico object.italics()
Devolve a posição da útima

lastIndexOf()
ocorrência de uma determinada object.lastindexOf(nome,[index])
string noutra.
Escreve uma string como um

link() object.link("url_destino")
hyperlink
match() Procura por uma string noutra object.match(expressão_regular)

Substitui alguns caracteres por object.replace(expressão_regular,nova_strin-

replace()
outros, numa string g)
search() Procura uma string object.replace(expressão_regular)
Extrai uma parte de uma string e

slice()
devolve a parte extraída, como object.slice(inicio_secção,fim_secção)
uma nova string
small() Escreve uma string em fonte small object.small()

Métodos do objecto String (continuação)
Divide uma string num array de

split() object.split([separator][,número_limite])
strings
Escreve uma string com um a

strike() object.strike()
strikethrough
sub() Escreve uma string subscrita object.sub()

Extrai um determinado número de
substr() caracteres de uma string, a partir
object.substr()
de um determinado índice de
início
Extrai os caracteres de uma string

substring() object.substring()
entre 2 índices especificados
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()
Representa o código fonte de um

toSource() object.toSource()
objecto
Devolve o valor primitivo de um

valueOf() object.valueOf()
objecto String
Exemplo: <html>
<body>
var str=”Olá mundo”
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..

♦ 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

Contém a base dos logaritmos naturais (número de Euler)

E
Contém o logaritmo natural de 2 (base E)

L N2
Contém o logaritmo natural de 10 (base E)

LN10
Contém o logaritmo de E na base 2

LOG2E
Contém o logaritmo de E na base 10

LOG10E
Contém o número PI (3.1415927...)

PI
Contém 1 a dividir pela raiz quadrada de 2

SQRT1_2
SQRT2 Contém a raiz quadrada de 2
Métodos do objecto Math

Todos os métodos do objecto Math aceitam um, dois ou nenhum números como
argumentos e devolvem um número como resultado.

Métodos do objecto Math (continuação)
abs(x) Devolve o valor absoluto de x math.abs(x)

Devolve o valor do arco (radianos) cujo
acos(x) math.acos(x)
cosseno é x
Devolve o valor do arco (radianos) cujo

asin(x) math.asin(x)
seno é x
Devolve o valor do arco (radianos) cuja

atan(x) math.atan(x)
tangente é x
Devolve o valor do ângulo formado

pelo eixo dos xx com a linha que une a
atan2(x, y) math.atan2(x, y)
origem dos eixos ao ponto de
coordenadas (x, y)
Devolve o número inteiro mais próximo

ceil(x) math.ceil(x)
de x e não inferior a x
cos(x) Devolve o cosseno de x math.cos(x)

Devolve o valor da exponencial de x (E
exp(x) math.exp(x)
elevado à potência x)

floor(x) 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)
Devolve o valor x elevado à potência y
pow(x,y) math.pow(x,y)
Devolve um número aleatório situado

random() math.random()
entre 0 e 1 (não aceita argumentos)

round(x) 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)

Exemplo:
<html>
<body>
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
ainda a potência de um número.

♦ 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
Gestor d o
Ev e nt o A p l i ca d o a : De scr i çã o
Ev e nt o
Abort Quando o carregamento de uma
onAbort i m a g es
imagem é interrompida.
Blur windows e todos os Quando se retira o focus de uma
onBlur
elementos de formulário janela ou de um elemento.
Change text fields, textareas, Quando o conteúdo de um campo é
onChange
select lists modificado.
buttons, radio buttons,
Click Quando se clica num objecto como
onClick checkboxes, submit
buttons, reset buttons, links
um botão, um link ou outro elemento.
Quando se efectua um duplo clique

DblClick onDblClick documents, links num objecto como um botão, um link
ou outro elemento.
Error
onError images, windows Quando ocorre um erro.

Lista de eventos(continuação)
Gestor d o
Ev e nt o A p l i ca d o a : De scr i çã o
Ev e nt o
Focus windows e todos os
onFocus Quando o elemento obtém o foco.
elementos de formulário
KeyDown documents, images, links,
onKeyDown Quando é pressionada uma tecla.
text areas
KeyPress documents, images, links, Quando é pressionada e libertada

onKeyPress
text areas uma tecla.
KeyUp documents, images, links,
onKeyUp Quando é libertada uma tecla.
text areas
corpo do
L oa d
onLoad documento(document Quando o objecto é carregado.
body)
MouseDown Quando o botão do rato é
onMouseDown documents, buttons, links
pressionado.
MouseMove nada por defeito (nothing
onMouseMove Quando é movido o cursor do rato.
by default)
MouseOut Quando o cursor do rato está parado

onMouseOut areas, links
ou sai de uma ligação.
MouseOver Quando o cursor do rato está sobre
onMouseOver links
uma ligação ou outro elemento.
MouseUp
onMouseUp documents, buttons, links Quando é libertado o botão do rato.
Move
onMove windows Quando se move uma janela
Quando é efectuado um clique sobre

Reset
onReset forms um botão reset, restaurando-se um
objecto.
Resize Quando a janela ou frame são
onResize windows
redimensionadas.
Select
onSelect text fields, textareas Quando é seleccionado algum texto.
Quando é efectuado um clique sobre

Submit
onSubmit forms um botão submit, enviando-se um
objecto.
corpo do
Unload
onUnload documento(document Quando se sai de uma página.
body)

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 G e s t o r d e Ev e nt o
Á rea onmouseover
<á r e a > onmouseout
ondblclick
onclick
ondblclick
Body onkeydown
<b o d y> onkeyup
onkeypress
onmousedown
onmouseup
onblur
B ut t o n onclick
<i np ut t yp e = "b ut t o n"> onfocus
onmousedown
onmouseup
onclick
ondblclick
onkeydown
d o cum e nt onkeyup
onkeypress
onmousedown
onmouseup
che ckb o x onblur
<i np ut t yp e = "che ckb o x"> onclick
onfocus
onblur
Fi l e U p l o a d onchange
onfocus
onblur
onerror
Fr a m e
onfocus
Fr a m e s e t
onload
Wi nd o w
onresize
onunload

Os eventos são associados a tags do HTML(continuação)
El e m e nt o G e s t o r d e Ev e nt o
onreset
Wi nd o w
onsubmit
onabort
onerror
onkeydown
img
onkeyup
onkeypress
onload
onblur
Ra d i o
onclick
<i np ut t yp e = " r a d i o ">
onfocus
onclick
ondblclick
onkeydown
L i nk
onkeyup
<a >
onkeypress
onmousedown
onmouseup
onmouseout
onblur
Pa s s w o r d
onfocus
onblur
Re s e t
onclick
<i np ut t yp e = " r e s e t "> onfocus
onblur
S e l e ct
onchange
<i np ut t yp e = " s e l e ct ">
onfocus
onblur
S ub m i t
onclick
<i np ut t yp e = " s ub m i t "> onfocus
onblur
Te x t onchange
<i np ut t yp e = " t e xt "> onfocus
onselect
onblur
onchange
onfocus
Te x t A r e a onselect
onkeydown
onkeyup
onkeypress

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

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

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

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

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.
Submit – representa um botão de envio de um formulário HTML.

♦ 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>
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)">
<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>

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 />
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>
function changeSize()
{
document.getElementById("compman").height="250"
document.getElementById("compman").width="300"
}
</script>
</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>

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>
<input type=button value= “Eu vou para a página da PPaula
aula - LLOL
OL
OL””
’http://1212.page.vu
’http://1212.page.vu’’ ;”>
onClick=”moveWin();window.location.href=’http://1212.page.vu
</form>
Ou então
http://1212.page.vu
<a href=”http://1212.page.vu Eu vou para a página da
http://1212.page.vu”; onClick=”moveWin()”>Eu
Paula - LLOL
OL </a>
</BODY>

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>

resto do script em qualquer parte da pagina, dentro de (body) —>
<BODY>
<layer name=”a0" left=10 top=10 visibility=show bgcolor=”#ff0000"
clip=”0,0,2,2"></layer>
<layer name=”a1" left=10 top=10 visibility=show bgcolor=”#ff8000"
clip=”0,0,2,2"></layer>
<layer name=”a2" left=10 top=10 visibility=show bgcolor=”#ffff00"
clip=”0,0,2,2"></layer>
<layer name=”a3" left=10 top=10 visibility=show bgcolor=”#00ff00"
clip=”0,0,2,2"></layer>
<layer name=”a4" left=10 top=10 visibility=show bgcolor=”#0000ff ”
clip=”0,0,2,2"></layer>
<layer name=”a5" left=10 top=10 visibility=show bgcolor=”#ff00ff ”
clip=”0,0,2,2"></layer>
<layer name=”a6" left=10 top=10 visibility=show bgcolor=”#ffffff ”
clip=”0,0,2,2"></layer>
<div id=”starsDiv” style=”position:absolute;top:0px;left:0px”>

<div style=”position:relative;width:2px;height:2px;background:#ffffff;font-
size:2px;visibility:visible”></div>
<div style=”position:relative;width:2px;height:2px;background:#ffff00;font-
<div style=”position:relative;width:2px;height:2px;background:#ffa000;font-

<div style=”position:relative;width:2px;height:2px;background:#ff0000;font-
<div style=”position:relative;width:2px;height:2px;background:#00ff00;font-
<div style=”position:relative;width:2px;height:2px;background:#0000ff;font-
<div style=”position:relative;width:2px;height:2px;background:#FF00FF;font-
</div>
<!— Original: freeware.de —>

<!— Web Site: http://freeware.de —>
<!— MSIE Fix by: Kurt Grigg (kurt.grigg@virgin.net) —>
<!— 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;
}

function animateLogo() {
if (document.all) {
yBase = window.document.body.offsetHeight / 4;
xBase = window.document.body.offsetWidth / 4;
}
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);
}
}
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>
</BODY>

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”>
<!—
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>

Exercício 5 - Um simples relógio.

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

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[12-
i]+’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>
<BODY>
<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>

Exercício 7 - Mostrar a resolução do ecrã

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

Exercício 10 - TTipo
ipo de tipo de browser
<BODY>
<SCRIPT Language=”JavaScript”> document.write(navigator.appName +
navigator.appVersion) </script>
</BODY>
Exercício 11 - TTexto
exto colorido
<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

{
n=0
clearInterval(flashing)
setTimeout(“beginneon()”,1500)
return
}
}
function beginneon(){
if (document.all)
flashing=setInterval(“neon()”,flashspeed)
}
beginneon()
</script>
</h2>
</BODY>
exto no status bar
bar..
<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>
Exercício 13 - Definir como homepage.

<BODY>
<!—[if IE]>
<a class=”chlnk” style=”cursor:hand;font-weight:bold;color:#004080;font-
family: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>
<!— 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>

exto animado tipo ondas.
<HEAD>
/*
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)
}

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>

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

<BODY>
<script>
var message=”Paula Cardoso Alcobia!!!”.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];
} else if (document.layers) {
thisspan = eval(“document.span”+i);
thisspan.left=xpos[i];
thisspan.top=ypos[i];
}
}
var timer = null;
function startSnake() {
xpos[i]=-50;
ypos[i]=-50;
}
setTimeout(‘timer=setInterval(“makesnake()”,30);’,1000);
}
startSnake();
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>
</BODY>

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>

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

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() {
xpos[i]=-50;
ypos[i]=-50;
}
setTimeout(‘timer=setInterval(“makesnake()”,30);’,1000);
}
startSnake();
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>

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>

<BODY>
<!— 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>

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(‘’);
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);

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

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]+’</
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]+’</
}
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+’;text-
align:center”>’+props2+D[i]+’</B></font></div>’);
document.write(‘</div></div>’);
document.write(‘<div id=”Of ” style=”position:absolute;top:0px;left:0px”><div
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+’;text-
align:center”>’+props+Face[i]+’</B></font></div>’);
document.write(‘<div id=”Oh” style=”position:absolute;top:0px;left:0px”><div
for (i=0; i < H.length; i++)
document.write(‘<div id=”ieHours”
style=”position:absolute;width:16px;height:16px;font-family:Arial;font-
size:16px;color:’+hCol+’;text-align:center;font-weight:bold”>’+H[i]+’</div>’);
document.write(‘<div id=”Om” style=”position:absolute;top:0px;left:0px”><div

for (i=0; i < M.length; i++)
document.write(‘<div id=”ieMinutes”
size:16px;color:’+mCol+’;text-align:center;font-weight:bold”>’+M[i]+’</div>’);

document.write(‘</div></div>’)
document.write(‘<div id=”Os” style=”position:absolute;top:0px;left:0px”><div
for (i=0; i < S.length; i++)
document.write(‘<div id=”ieSeconds”
size: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;
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;
}

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++){

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

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>
</BODY>

Exercício 20 - Colocar a data actual
<script> <!—
var now = new Date();
var days = new Array(‘Domingo’,’Segunda-Feira’,’Terça-Feira’,’Quarta-feira’,’Quinta-

Feira’,’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);
//—></script>

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
http://www.scriptfacil.com/

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
http://www.scriptfacil.com/

4 Unidade 3subunidade Javascript

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

4 Unidade 3subunidade Javascript

Uploaded by

Copyright:

Available Formats

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

Paula Cardoso Alcobia -1-

♦ O que são linguagens de scripting

Paula Cardoso Alcobia -2-

Quando se utiliza a designação server-side scripting, fala-se de códigos de programas

Os servidores actuais alojam diferentes tipos de páginas web: dinâmicas, estáticas e

O JavaScript é uma linguagem de programação simples criada para dar mais

A linguagem JavaScript acabou por dar origem à especificação técnica ECMAScript

Paula Cardoso Alcobia -3-

♦ Compatibilidade com os browsers

♦ O que posso fazer com o Javascript?

O JavaScript pode ler e alterar o conteúdo de elementos HTML.

Paula Cardoso Alcobia -4-

♦ JavaScript é a mesma coisa que Java?

Noções elementares sobre programação por objectos

Com a classe automóvel (matriz) são produzidos dois

O javascript é uma linguagem

Classe Professora Aluna

Método Realizar Teste Responder Teste

Paula Cardoso Alcobia -6-

♦ Mecanismos em que se fundamenta

Paula Cardoso Alcobia -7-

As classes pesado e desportivo são construídas a partir da classe automóvel herdando

Paula Cardoso Alcobia -8-

A tag <noscript> é utilizada para mostrar um conteúdo alternativo quando o browser

♦ Terminar as instruções com ponto

♦ Os comandos JavaScript são sensíveis ao tipo de letra (maiúsculas e minúsculas)

♦ Comentários e blocos de código

o mais legível e mais fácil de manter.

Paula Cardoso Alcobia -9-

Blocos de código - Um bloco de código é uma sequência de instruções compostas

♦ Colocação dos Scripts

internos São escritos no mesmo ficheiro

São executados quando são

Na secção head despoletados

Na secção boby São executados quando a página é

externos São escritos noutro ficheiro

Paula Cardoso Alcobia - 10 -

Scripts na secção head

Scripts na secção body

Paula Cardoso Alcobia - 11 -

Scripts em ambas as secções head e body

Paula Cardoso Alcobia - 12 -

Paula Cardoso Alcobia - 13 -

Prevenção com a compatibilidade com os browser-mensagem de erro

Paula Cardoso Alcobia - 14 -

Variáveis e tipos de Dados

♦ O que são as V ariáveis?

Paula Cardoso Alcobia - 15 -

Paula Cardoso Alcobia - 16 -

♦ Variáveis locais e globais

var nome= “Paula Alcobia” - declara a variável nome e inicializa-a com o

Paula Cardoso Alcobia - 17 -

// Estas declarações estão incorrectas

Paula Cardoso Alcobia - 18 -

Números com vírgula flutuante

Cada um destes caracteres produz o mesmo resultado que se obtém carregando na

Paula Cardoso Alcobia - 19 -

O uso de caracteres Unicode permite que os computadores processem caracteres de

Lista de alguns caracteres de sequência de escape