Você está na página 1de 10

1

Aula 9: Elementos da Linguagem JavaScript



Bem-vindo ao segundo mdulo do nosso curso! Nele voc aprender como incluir
programas, ou scripts, em suas pginas Web. Este mdulo ser todo dedicado
linguagem JavaScript. E nessa aula voc aprender o que JavaScript, o que pode
fazer com ela, e como inclui-la nas suas pginas HTML.


Objetivos:
Nesta aula voc aprender os fundamentos de JavaScript e ver:
- os tipos e as verses do JavaScript;
- como incluir cdigo na pgina HTML (tag script);
- a estrutura da linguagem;
- suas constantes e variveis;
- a concatenao de strings.


Pr-requisitos:
As aulas 1 a 3 e a aula 7 do mdulo anterior.


1. Introduo JavaScript
JavaScript, que aprenderemos neste mdulo, como HTML, uma linguagem
interpretada, mas, diferentemente de HTML, uma linguagem de programao
que inclusive tem caractersticas rudimentares de Orientao a Objetos, O.O. , e
programao dirigida por eventos (no decorrer do mdulo, voc entender
melhor o que estas caractersticas acrescentam linguagem).
Esta linguagem foi desenvolvida (por Bredan Eich da Netscape) num convnio
entre a Netscape e a Sun. Inicialmente, chamava-se LiveScript, mas mudou de
nome s vsperas do lanamento por questes de marketing. O cdigo fonte fica
embutido na pgina HTML e interpretado pelo navegador.
Apesar da expectativa criada pelo nome, esta linguagem tem muito pouco a ver
com Java. Alm de alguma semelhana sinttica e do fato de que, tanto Java
quanto JavaScript, podem fornecer um contedo executvel pelos navegadores
Web, a principal relao entre as duas linguagens vem de sua origem comum: as
linguagens C e C++.
Na linguagem Java, o cdigo fonte compilado para um cdigo intermedirio,
que pode ser executado em qualquer mquina que possua um interpretador Java
(no necessariamente o interpretador embutido no navegador). Alm desta
diferena, h muitas outras diferenas em termos de sintaxe, abrangncias e
objetivos das duas linguagens.

Com JavaScript possvel manipular imagens embutidas na pgina; ler e escrever
o estado do cliente em Cookies; interagir com o usurio; alterar caractersticas do
documento; e controlar o comportamento do navegador fazendo este:
carregar um novo documento;
Bibliografia auxiliar
para o segundo
mdulo:

Goodman, Danny
JavaScript, a Bblia ,
Rio de Janeiro:
Editora Campus,
2001.

Moncur, Michael,
Aprenda em 24
horas JavaScript 1.3,
Rio de Janeiro:
Editora Campus,
1999.

Flanagan, David ,
JavaScript the
definitive guide,
Cambridge:
OReilly, 1988.

Negrino, T. e
Smith,D., Java-
Script para a WWW,
Rio de Janeiro:
Editora
Campus,2000.

Osmar Sila, Java
Script, Guia Prtico,
Editora Erica, 2000.

Documentao da
Netscape:
http://developer.
netscape.com/docs/
manuals/
communicator/jsref/
index.htm .

Documentao da
Microsoft:
http://msdn.
microsoft.com/
scripting/JScript/doc/
Jstoc.htm.


2
retornar para a pgina anteriormente visitada;
abrir/fechar janelas;
exibir pginas diferentes de acordo com o browser do usurio;
controlar o contedo de formulrios HTML.

JavaScript, no entanto, no possibilita escrever ou ler arquivos; no possui
capacidade de desenho, no suporta estabelecer conexes em rede, nem oferece
possibilidades de processamento em segundo plano ou multitarefa
(multithreading).

2. Tipos e Verses de JavaScript
Existem variantes da linguagem dependendo do contexto onde se embute o
JavaScript. Algumas destas so as chamadas Client-Side JavaScript ou "no lado
do cliente" e Server-Side JavaScript ou "no lado do servidor".

Em nosso curso abordaremos apenas a forma executada no cliente (client-side).
Nesta forma, que a variante mais comum, quando a maioria das pessoas se
referem JavaScript est se referindo a esta forma, o interpretador se encontra
embutido no navegador Web. A forma no lado do servidor (server-side)
utilizada nos servidores Netscape como uma alternativa aos scripts CGI. Nesta
forma, diferente da client-side, possvel ler e escrever arquivos e bancos de
dados no servidor.

Como em HTML, h diferenas na linguagem JavaScript em funo do tipo de
navegador onde o programa ser interpretado. O nome JavaScript propriedade
da Netscape, a implementao da Microsoft da linguagem oficialmente
denominada JScript. Verses de JScript so mais ou menos compatveis com as
verses equivalentes do JavaScript. A tabela 9.1 mostra essas verses.
Tabela 9.1 - Verses de JavaScript e navegadores
Verses no Netscape Verses no Explorer
Browser Javascript Browser JScript
Netscape 2.0 Javascript 1.0
Netscape 3.0 Javascript 1.1 Explorer 3.0 JScript 1.0
Netscape 4.0 Javascript 1.2 Explorer 4.0 JScript 3.0
Netscape 4.5 Javascript 1.3 Explorer 5.0 JScript 5.0
Netscape 6.0 Javascript 1.5

3. Execuo de Programas JavaScript
Os programas JavaScript so executados na ordem em que aparecem na pgina e
no possvel fazer referncia a elementos HTML que ainda no foram definidos.

H trs formas de incluir um cdigo JavaScript em uma pgina:
atravs da tag <SCRIPT> ... </SCRIPT>.
atravs da seleo de um link.
atravs da associao a um evento.

Cookie o termo
usado (inicialmente
pelo Netscape) para
descrever uma
pequena quantidade de
dados armazenados
pelo cliente de forma
temporria ou
permanente. Cookies
so transmitidos de e
para o servidor e
permitem que a pgina
ou o site lembre de
coisas sobre o cliente,
como por exemplo:
que o usurio j visitou
antes o site, j se
registrou ou expressou
anteriormente alguma
preferncia sobre o
layout da pgina.
JavaScript permite ler
e escrever valores nos
cookies, podendo gerar
HTML baseado nos
valores descritos neles.

3
Na primeira forma, a tag <script> pode aparecer em qualquer lugar da pgina,
inclusive na rea de cabealho (dentro da tag <HEAD> ... </HEAD>).
Quando includa na rea de cabealho, o programa executado antes que a pgina
seja totalmente carregada. As linhas abaixo exemplificam esta forma:
<script language=Javascript>
<!--
...//codigo Javascript ...
-->
</script>

Quando esta forma de JavaScript for usada possvel utilizar a tag <NOSCRIPT>
... </NOSCRIPT> para exibir uma alternativa ao cdigo JavaScript em
navegadores que no saibam execut-lo.

A incluso do cdigo entre comentrios (tag <!-- .... -->)
recomendvel para que os navegadores que no conheam JavaScript no tentem
exibir o cdigo.

possvel tambm no escrever o cdigo diretamente na pgina, colocando-o em
um arquivo separado. Neste caso se usa o atributo SRC para indicar o nome do
arquivo de onde vir o cdigo. Por exemplo:
<script language=Javascript src=arquivo.js>
</script>

Na segunda forma, o link ao ser selecionado promove a execuo do programa:
<a href=javascript: > .... </a>

Quando associada a um evento a sintaxe usada :
<tag-html onEvento= >

No exemplo atividade do final da aula, voc ter a oportunidade de ver com mais
detalhes estas formas.


4. Estrutura Lxica da Linguagem

JavaScript uma linguagem case sensitivity (como C e diferente de HTML): as
letras minsculas (lowercase) so diferenciadas das maisculas (uppercase). Isso
significa que as palavras-chave da linguagem, as variveis, os nomes de funes
ou qualquer outro identificador deve sempre ser escrito da mesma forma. A
palavra-chave break, por exemplo, se for escrita Break ou BREAK representar
outra coisa e no mais a palavra-chave.

Algumas excees a esta regra so, entretanto, encontradas na forma executada no
cliente (client-side). No Explorer 3, por exemplo, todos os objetos e propriedades
executados no cliente so case-insensitive. Outro exemplo so as folhas de estilo
JavaScript executadas no cliente no Navigator 4, que permitem a especificao de
estilos por tag HTML (projetadas com o propsito de serem case-insensitive).

Os espaos em branco, as tabulaes (tabs) e as mudanas de linha (newlines)
entre os comandos so ignorados. Voc pode assim usar os espaos e as mudanas
A estrutura lxica de
uma linguagem de
programao o
conjunto de regras
elementares que
especificam como
voc escreve
programas com ela.
Definindo coisas
como a aparncia dos
nomes, as formas
usadas para
comentrios, e como
os comandos so
separados uns dos
outros.

4
de linha livremente ou de uma maneira consistente em seu programa de modo a
torn-lo fcil de entender.

O caracter ponto e vrgula (;) deve ser usado como limitadores, aps cada
comando. Esta a mesma forma de limitar comandos de C, C++ e Java. Mas em
JavaScript voc pode omiti-los se os comandos se encontrarem em linhas
diferentes. Por exemplo, nas linhas abaixo voc, poderia t-los omitido.
a=3;
b=5;

Mas o primeiro ";" no poderia ser omitido se voc escrevesse ambas as
atribuies na mesma linhas, como:
a=3;b=5;

No um bom hbito deixar por conta da linguagem, onde os comandos devem
ser separados. O melhor voc se acostumar a sempre us-los. Saber que a
linguagem JavaScript permite que dois comandos sejam separados por linhas,
automaticamente inserindo ponto e vrgula por voc, evita alguns mal-entendidos.

A linguagem JavaScript possui duas formas de incluir comentrios em meio s
instrues (herdadas das linguagens C e C++):
//
o conjunto: /* ... */

As barras duplas, //, em qualquer ponto da linha fazem com que o interpretador
ignore todos os demais caracteres at o fim da linha.

A seqncia /* (barra seguida do asterisco) faz com que o interpretador ignore
todos os caracteres (inclusive o de mudana de linha) at encontrar a seqncia
*/ (asterisco seguido da barra). Este tipo, no entanto, no pode ser aninhado, isto
, no se pode ter outro comentrio do mesmo estilo no interior. As linhas que
seguem mostram isso.

// essa linha e comentario
/* esta tambem
/* e esta
por enquanto tambem */
mas o final da linha anterior
confundiu tudo e as tres ultimas
nao sao mais comentarios */

Alm do estilo C e C++, a forma client-side reconhece a seqncia de abertura de
comentrios de HTML: <!--. Mas esta forma tratada como se fosse um
comentrio de linha nica, // pois JavaScript no reconhece a seqncia de
fechamento HTML: -->. H uma razo para isso: em programas JavaScript, se
a primeira linha comear com <!-- e a ltima terminar com //-->, todo o
programa contido dentro de um comentrio HTML e ignorado pelo browser
que no suportar JavaScript. Desde que a primeira linha comece com <!-- e a
ltima linha com //, JavaScript ignora ambas, mas no as linhas entre elas.
Desta maneira possvel esconder o cdigo de um navegador que no pode
entend-lo e "no esconder" se ele puder ser entendido pelo browser. Devido a
este propsito especial do comentrio <!--, voc deve us-lo apenas na primeira
linha de seus scripts, j que outra forma poderia causar confuso.

5
5. Tipos de Dados
Os tipos de dados utilizveis por uma linguagem um dos seus aspectos mais
fundamentais. JavaScript tem 3 tipos primitivos de dados: nmeros, strings e
booleanos.

Um literal um dado que aparece diretamente no programa. A tabela a seguir
mostra formas de representar literais na linguagem JavaScript:

Tabela 9.2 - Exemplos de literais
Tipo Constante
Lanchonete Bob's, "Pi = 3.14", "A"
string
'vi o filme Central do Brasil','Pi=3.14','A'
inteiro na base 10
8, -12, -9007199254740992, 9007199254740992
inteiro octal
056, -0123, 0377,
inteiro
hexadecimal
0x7A, -0x10, 0xCAFE911, 0xff, 0377
real
3.14, -10.28, .3333333, 6.02e+23, 1.4738E-32
booleano
true , false


Uma varivel um nome associado a um dado ou valor, diz-se que uma varivel
"armazena" ou "contm" um valor. Elas permitem que se armazene e manipule
dados no programa, assumindo ou recebendo valores diferentes. Por exemplo, na
linha abaixo se atribui varivel denominada inicio o valor 2, e depois
adiciona-se a inicio o valor 3, e atribui-se o resultado a uma nova varivel.
soma:
inicio = 2;
soma = inicio + 2;
Os nomes de variveis podem conter letras, dgitos (desde que no seja o primeiro
caracter do nome), o caracter _ e o caracter $. Algumas palavras no podem
ser usadas como nome de varivel, pois so reservadas para comandos e
expresses da linguagem, como por exemplo: true, var, if, while etc.
Diferente de uma linguagem como Pascal, no preciso declarar previamente
uma varivel nem definir explicitamente o seu tipo. Para declarar varivel, usa-se
a palavra-chave: var. Assim, so exemplos de declaraes e usos de variveis:
var i; // Cria a variavel i
i = 10; // Guarda o valor 10 em i
var i = 2; // Cria e armazena 2
i = 2; /*idem a linha anterior: a palavra "var" e
opcional, a principio */
i = onze; /* agora o tipo da variavel passou a ser
string. */

Se uma varivel criada no momento em que utilizada pela primeira vez, o seu
tipo definido pelo tipo do valor que ela recebe. Se uma varivel utilizada sem
que antes tenha um valor atribudo, o seu valor undefined.

6
Embora no seja muito recomendvel, possvel modificar o tipo de uma varivel
que j tenha sido criada simplesmente atribuindo um valor de outro tipo. Isso
ocorre porque JavaScript, diferente de C, Java, Pascal e de muitas outras uma
linguagem no-tipada (untyped). Ela automaticamente converte valores de um
tipo para outro se necessrio. Ns veremos mais sobre isso quando falarmos de
Converso de tipos de dados, na prxima aula. A mudana do tipo de uma
varivel , entretanto, uma fonte potencial de erros de execuo e deve ser no
mnimo usada com conscincia.


5.1 - Nmeros

Nmero o tipo mais bsico possvel e no requer explicao, a no ser pela
observao de que (diferente de C e Java) JavaScript no faz distino entre
valores inteiros e reais (pontos flutuantes). Todos os nmeros em JavaScript so
representados como valores de ponto flutuante em 8 bytes.

Quando um nmero aparece diretamente em um programa JavaScript, ns o
chamamos literal numrico. Os formatos de literais numricos suportados pela
linguagem so:
Inteiros na base 10.
Inteiros octais.
Inteiros hexadecimais.
Pontos flutuantes.

Inteiros na base 10 so representados como seqncia de dgitos que no
comeam com o dgito zero, exceo feita ao prprio zero. Como todos os
nmeros so representados como valores de ponto flutuante possvel especificar
literais inteiros extremamente grandes. Todos os inteiros entre -2
53
(= -
9007199254740992) e 2
53
(= 9007199254740992), inclusive estes, podem ser
representados exatamente.

Um valor literal octal (nmero na base 8) comea com o dgito zero, seguido por
uma seqncia de nmeros entre 0 e 7. Como em C e C++ , um literal
hexadecimal comea com 0x ou )X, seguido de dgitos de 0 a 9 ou letras a (ou A)
a f (ou F), as quais representam os nmeros 10 a 15.

Os literais de ponto flutuante podem ter um ponto decimal, uma parte inteira do
nmero e uma parte fracionria (depois do ponto decimal). Tambm podem ser
representados na notao exponencial: onde a letra e (ou E) seguida de um sinal +
ou - introduz expoentes inteiros que representam potncias de 10. De modo que
100.10=1.001e+2, ou 0.01=1E-2.

A linguagem tem alguns valores numricos especiais. Quando um ponto
flutuante se torna maior que o valor mximo representvel, o resultado um valor
especial que JavaScript imprime como Infinity. De maneira semelhante
quando um valor negativo se torna mais negativo que o maior negativo possvel
de ser representado, o resultado impresso -Infinity.

Outro valor numrico especial aparece quando uma operao matemtica resulta
um valor indefinido (por exemplo em uma diviso de zero por zero). Neste caso, o

7
resultado um valor especial denominado "not-a-number" que impresso como
NaN. Este valor tem uma propriedade especial: em uma operao de comparao
(veremos estas operaes na prxima aula) no igual a nenhum nmero nem a
ele prprio. Por este motivo existe uma funo especial isNaN() para testar
este valor.

Existem constantes definidas para cada um dos valores numricos especiais. Estas
so listadas na tabela 9.3. O exemplo atividade no final da aula, mostra como elas
so vistas na pgina gerada pelo script.

Tabela 9.3 - Constantes numricas especiais
Constante Significado
Number.MIN_VALUE
o maior valor possvel
Number.MAX_VALUE
o menor (mais prximo a zero) possvel
Number.POSITIVE_INFINITY
representao especial de infinito
Number.NEGATIVE_INFINITY
representao especial de infinito
negativo
Number.NaN
o valor especial not-a-number
5.2. Strings

Strings uma seqncia de letras, dgitos, caracteres de pontuao e outros, que
so representados pela linguagem como texto. Strings literais podem ser includas
nos programas delimitando algo por pares de '...' ou "... ". JavaScript
no tem um tipo de dado especial para um caracter isolado, como o char de C ou
Java. Para representar um nico caracter, voc simplesmente o representa como
uma string de tamanho 1.

Assim possvel criar strings entre aspas ou entre plicas. A utilizao de um ou
de outro caracter como delimitador da string uma questo de convenincia do
programador. Por exemplo, caso se deseje incluir uma plica em uma string, deve-
se utilizar aspas como delimitador. Ou seja, uma " pode estar contida dentro de
strings delimitada por ' , e ' pode aparecer dentro de strings delimitada por ".

O caracter \ (barra invertida) tem um significado especial, combinado com o
caracter que o segue, ele pode representar um caracter que de outra maneira no
poderia ser representado dentro da string. Como em C e C++, a barra invertida e
o caracter seguinte so chamados "escape sequence".

Estas seqncias tm diversos usos. Permitem a representao de caracteres que
no tm um smbolo grfico associado, como tabulaes (\t) e de mudana de
linha (\n). Diversas seqncias podem representar smbolos especiais como
\251 que permite imprimir o smbolo de copyright. possvel utilizar este
caracter tambm para indicar que uma aspa (ou plica) no est sendo utilizada
como fim de string (por exemplo, assim pode-se inserir um caracter \ numa
string delimitada por aspas). Finalmente, se \ precede um caracter que no tem
significado especial, como \a , ela simplesmente ignorada, e tem o mesmo
sentido de apenas a.

Voc percebeu por
que chamado de
escape sequence (o
que seria ao p da
letra: seqncia de
escape)? Porque
uma forma de
escapar da
interpretao usual
do caracter!

8
Como JavaScript usada para produzir pginas Web, voc provavelmente usar
muitas strings literais em seus scripts. Uma das propriedades embutidas na
linguagem a possibilidade de concatenar strings. Se voc usar o smbolo +
(mais) com nmeros, ter como resultado uma operao de adio. Mas se voc
usar este smbolo com strings, voc as juntar simplesmente acrescentando a
segunda primeira, o que chamado de concatenao. Por exemplo:
"2 dividido por " + "0" + " = " + "matematicamente
indefinido !"
5.3. Booleanos

O tipo booleano de dados pode ter apenas 2 valores: true (verdadeiro) ou false
(falso). Valores booleanos so geralmente o resultado de comparaes feitas no
programa.

Por exemplo, o cdigo abaixo testa se a varivel a 4:
a==4
Se a for 4, o resultado desta comparao ser true, se no for o resultado false.

Valores booleanos so tipicamente usados nas estruturas de controle (como
veremos nas prximas aulas) do fluxo dos programas.

A melhor maneira de aprender fazendo! Por isso estamos propondo um exemplo
atividade que alm de resumir o que vimos nesta aula, servir para voc exercitar
o contedo.


Exemplo Atividade:

Neste exemplo, as linhas de cdigo mostram um programa JavaScript, ou script ,
embutido em uma pgina HTML.

<HTML>

<HEAD>
<TITLE>Curso de Constru&ccedil;&atilde;o de
P&aacute;ginas WEB- Mod. 2
</TITLE>
</HEAD>

<BODY>
<H1 align=center >
Primeiro Exemplo de JavaScript
</H1>
<H2>
Usando os tipos de dados para calcular
pot&ecirc;ncias de 2.
</H2>
<script language=Javascript>

for(i=1,pot=2; i<=10; i++,pot*=2)

9
{
document.write("2 elevado a "+ i + " = "+ pot);
document.write("<br>");
}
document.write("<br><h2>Tipos especiais:</h2>");
document.write(" 2 dividido por 0 = " + 2/0 );
//Infinity
document.write('<br>');
document.write("-2 dividido por "+ 0 +' = '+ -2/0);
//-Infinity
document.write('<br>');
document.write("0 dividido por "+ 0 + ' = '+ 0/0 );
//NaN
</script>

</BODY>

</HTML>

Bata estas linhas e carregue-as em uma pgina Web. Quando voc carregar esta
pgina em um navegador que interpreta JavaScript ver a tela mostrada a seguir,
na figura 9.1. Neste exemplo, voc usou a tag <script> para embutir o cdigo
JavaScript dentro da pgina. Voc certamente ficou sem entender alguns detalhes.
Sublinhe no cdigo acima as linhas em que no entendeu alguma coisa.

Voc merece parabns se a primeira linha que voc no entendeu foi:
document.write("2 elevado a "+ i + " = "+ pot);
Ela exemplifica o mtodo document.write( ); . Este mtodo usado
para escrever textos, dinamicamente, na pgina HTML, e ns o usaremos muito
ao longo do curso. Falaremos sobre ele detalhadamente nas prximas aulas. Mas
agora, olhando para o resultado obtido na pgina, e, em todas as vezes que este
mtodo foi usado, tente entender todas as outras linhas em que ele aparece.

Antes de passar aos exerccios, tente tambm adivinhar o que o comando
for ( ...;...;...) deve estar fazendo no script.


Exerccios:

1. Utilize, no exemplo atividade, uma varivel em substituio ao texto:
"2 elevado a "
de modo que a pgina gerada no se altere. Alm disso, faa a tabela iniciar com a
potncia de 1 e terminar com potncia de 20, e esconda o texto que segue a tabela.
Visualize o novo aspecto que o exemplo ter agora!

10
Figura 9.1 - Pgina gerada pelo cdigo do exemplo atividade

2. Mude o programa de modo a atribuir ttulos s linhas da tabela, utilizando
<H3> </H3>. Compare como fica a pgina agora.

3. No exerccio 2, ao final do arquivo, antes da tag </body> inclua as linhas de
formulrio que seguem:
<form>
<input type="button" value="Aperte aqui"
onClick="alert('clicaram-me!')">
</form>
Veja o resultado e depois de reler a seo 3 desta aula responda: qual a forma de
incluir JavaScript usada agora?


Resumo:
Nesta aula, voc aprendeu a incluir programas nas pginas HTML. O que e
como a estrutura bsica da linguagem JavaScript. Fez uso desta ferramenta
escrevendo pginas com programas embutidos e testou seus novos
conhecimentos nos exerccios.


Auto-avaliao:
Voc concluiu com sucesso os exerccios? Se no entendeu bem apenas os
mtodos que apareceram no exemplo atividade e nos exerccios ( isto :
document.write( ); for(....), onClick="alert('clicaram-
me!')" > ) no se preocupe, estes pontos so para estimular sua curiosidade e
lhe mostrar as potencialidades de JavaScript, e ficaro bem claros nos assuntos
das prximas aulas. Mas se teve outras dvidas, talvez seja melhor ler novamente
a aula, antes de passar para os Comandos que sero apresentados na prxima.