Introducao Javascript

Alfamdia Programao:
Introduo ao Javascript

Alfamdia Programao: Introduo ao Javascript

2

Todos os direitos reservados para Alfamdia LTDA.

AVISO DE RESPONSABILIDADE
As informaes contidas neste material de treinamento so distribudas NO ESTADO EM
QUE SE ENCONTRAM, sem qualquer garantia, expressa ou implcita. Embora todas as
precaues tenham sido tomadas na preparao deste material, a Alfamdia LTDA. no
tem qualquer responsabilidade sobre qualquer pessoa ou entidade com respeito
responsabilidade, perda ou danos causados, ou alegadamente causados, direta ou
indiretamente, pelas instrues contidas neste material ou pelo software de computador e
produtos de hardware aqui descritos.

01/ 2013

Alfamdia Prow
www.alfamidia.com.br


3

UNIDADE 1 ..................................................................................................................................................................... 6
UNIDADE 2 INTRODUO AO JAVASCRIPT ............................................................................................................ 7
2.1 O QUE JAVASCRIPT? .......................................................................................................................... 7
2.2 ONDE OS SCRIPT PODEM SER EXECUTADOS ? ....................................................................................... 7
2.3 VERSES DE NAVEGADORES E DE JAVASCRIPT .................................................................................... 7
UNIDADE 3 NOES BSICAS DE JAVASCRIPT .................................................................................................... 9
3.1 CRIANDO UM SCRIPT EM UMA PGINA HTML ..................................................................................... 9
3.2 UTILIZANDO COMENTRIOS ................................................................................................................ 9
3.3 A ESTRUTURA DE UM SCRIPT JAVASCRIPT .......................................................................................... 10
3.4 VARIVEIS ......................................................................................................................................... 11
3.5 TIPOS DE DADOS ................................................................................................................................ 11
3.5.1 Tipos de dados Primitivos (por valor) ..................................................................................... 11
3.5.2 Tipos de dados especiais (undefined e Null) ........................................................................... 12
3.5.3 Tipos de dados Compostos (por referncia) ............................................................................ 12
3.6 CAIXAS DE DILOGO OU DE MENSAGEM ........................................................................................... 13
3.6.1 O mtodo alert() ...................................................................................................................... 13
3.6.2 O mtodo prompt() .................................................................................................................. 14
3.6.3 O mtodo confirm() ................................................................................................................. 15
3.6.4 O mtodo document.write() ..................................................................................................... 15
3.7 OPERADORES ..................................................................................................................................... 16
UNIDADE 4 UTILIZANDO FUNES ........................................................................................................................ 18
4.1 O QUE FUNO ............................................................................................................................... 18
4.2 UTILIZANDO FUNES NO JAVASCRIPT ............................................................................................. 18
4.3 AS FUNES INTRNSECAS DO JAVASCRIPT ........................................................................................ 18
4.3.1 A funo parseInt() e parseFloat() .......................................................................................... 18
4.3.2 Funo escape() e unescape() ................................................................................................. 19
4.3.3 A funo isNaN() ..................................................................................................................... 19
4.4 FUNES CRIADAS PELO USURIO ..................................................................................................... 20
4.5 LABORATRIO ................................................................................................................................... 21
4.5.1 Exerccio 4 ............................................................................................................................... 21
4.5.2 Exerccio 5 ............................................................................................................................... 21
4.5.3 Exerccio 6 ............................................................................................................................... 21
4.5.4 Exerccio 7 ............................................................................................................................... 21
4.5.5 Exerccio 8 ............................................................................................................................... 21
UNIDADE 5 EXPRESSES ........................................................................................................................................ 22
5.1 EXPRESSES CONDICIONAIS ESTRUTURAS DE TESTE ....................................................................... 22
5.1.1 if... else..................................................................................................................................... 22
5.2 EXPRESSES SELETORAS ................................................................................................................... 23
5.2.1 switch ....................................................................................................................................... 23
5.3 LABORATRIO ................................................................................................................................... 24
5.3.1 Exerccio 9 ............................................................................................................................... 24
5.3.2 Exerccio 10 ............................................................................................................................. 24
5.3.3 Exerccio 11 ............................................................................................................................. 24
5.3.4 Exerccio 12 ............................................................................................................................. 24
5.3.5 Exerccio 13 ............................................................................................................................. 25
5.4 EXPRESSES DE LOOP - ESTRUTURAS DE REPETIO ......................................................................... 25
5.4.1 While ........................................................................................................................................ 25
5.4.2 Do While .................................................................................................................................. 26

4

5.4.3 For ........................................................................................................................................... 26
5.5 LABORATRIO ................................................................................................................................... 27
5.5.1 Exerccio 14 ............................................................................................................................. 27
5.5.2 Exerccio 15 ............................................................................................................................. 27
5.5.3 Exerccio 16 ............................................................................................................................. 27
5.5.4 Exerccio 17 ............................................................................................................................. 27
UNIDADE 6 OBJETOS ............................................................................................................................................... 28
6.1 O OBJETO ARRAY .............................................................................................................................. 28
6.2 O OBJETO DATE ................................................................................................................................ 30
6.3 O OBJETO MATH ............................................................................................................................... 31
6.4 O OBJETO STRING .............................................................................................................................. 32
6.5 OBJETOS CRIADOS PELO USURIO ...................................................................................................... 33
6.6 MTODOS .......................................................................................................................................... 34
6.6.1 Mtodos estticos .................................................................................................................... 34
6.6.2 A declarao this ................................................................................................................. 34
6.6.3 A declarao with ................................................................................................................. 34
6.6.4 A funo eval() ........................................................................................................................ 35
6.7 LABORATRIO ................................................................................................................................... 36
6.7.1 Exerccio 18 ............................................................................................................................. 36
6.7.2 Exerccio 19 ............................................................................................................................. 36
6.7.3 Exerccio 20 ............................................................................................................................. 36
6.7.4 Exerccio 21 ............................................................................................................................. 37
6.7.5 Exerccio 22 ............................................................................................................................. 37
6.7.6 Exerccio 23 ............................................................................................................................. 37
6.7.7 Exerccio 24 ............................................................................................................................. 37
UNIDADE 7 EVENTOS ............................................................................................................................................... 38
7.1 O QUE ............................................................................................................................................. 38
7.2 EVENTOS IMPLEMENTADOS PELO JAVASCRIPT .................................................................................. 38
7.3 COMO SE DEFINE UM EVENTO ............................................................................................................ 39
7.4 GESTES DE EVENTOS DISPONVEIS EM JAVASCRIPT ......................................................................... 39
7.4.1 onclick ..................................................................................................................................... 40
7.4.2 onload ...................................................................................................................................... 40
7.4.3 onunload .................................................................................................................................. 40
7.4.4 onmouseover ............................................................................................................................ 40
7.4.5 onmouseout .............................................................................................................................. 40
7.4.6 onfocus..................................................................................................................................... 41
7.4.7 onblur ...................................................................................................................................... 41
7.4.8 onchange ................................................................................................................................. 42
7.4.9 onselect .................................................................................................................................... 42
UNIDADE 8 CONHECENDO OBJECTS DOM ........................................................................................................... 43
8.1 INTRODUO A DOM: ....................................................................................................................... 43
8.2 O QUE HTML DOM? ...................................................................................................................... 43
8.3 QUANDO DEVEMOS USAR JAVASCRIPT ............................................................................................... 43
8.4 AS DIVISES DE DOM ....................................................................................................................... 43
8.5 ALTERAR CONTEDO COM HTML DOM ........................................................................................... 43
8.6 DOCUMENT OBJECTS ......................................................................................................................... 44
8.7 PROPRIEDADES DO OBJETO BODY....................................................................................................... 44
8.8 OBJETO FORM .................................................................................................................................... 45
8.8.1 Atributos do Form ................................................................................................................... 45
8.8.2 Mtodos de um FORM ............................................................................................................. 46
8.8.3 Eventos de um form ................................................................................................................. 46

5

8.8.4 Elements de um FORM ....................................................................................................... 46
8.9 MTODO GETELEMENTBYID ............................................................................................................. 47
UNIDADE 9 MANIPULANDO FORMS COM DOM ..................................................................................................... 48
9.1 TUTORIAL .......................................................................................................................................... 48
9.2 EXTRAINDO INFORMAES DOS FORMULRIOS HTML ..................................................................... 50
9.2.1 Buscando informaes de formulrios no nomeados ............................................................ 51
9.2.2 Buscando informaes de formulrios nomeados ................................................................... 52
9.3 VALIDANDO INFORMAES NO FORMULRIO .................................................................................... 52
9.3.1 Validando informaes de caixas de texto .............................................................................. 53
9.3.2 Validando listas de seleo simples e mltipla (Combo e ListBox) ........................................ 54
9.3.3 Validando caixas de escolha simples e mltipla (RadioButton e CheckBox) .......................... 56
9.3.4 Controle de elementos do Textearea ....................................................................................... 58
9.3.5 Criando uma funo para mascaras de campos ..................................................................... 58
9.4 VALIDAO COM EXPRESSES REGULARES (REGEX) ....................................................................... 59
9.5 LABORATRIO ................................................................................................................................... 60
9.5.1 Exerccio 25 ............................................................................................................................. 60
9.5.2 Exerccio 26 ............................................................................................................................. 60
9.5.3 Exerccio 27 ............................................................................................................................. 61
UNIDADE 10 OBJETO WINDOW ................................................................................................................................. 63
10.1 MTODOS DO OBJETO WINDOW ..................................................................................................... 63
UNIDADE 11 INTRODUO AO DHTML .................................................................................................................... 67
11.1 O QUE DHTML .......................................................................................................................... 67
11.2 TROCANDO O LAYOUT DOS ELEMENTOS DO HTML ...................................................................... 67
11.3 ESCONDENDO E MOSTRANDO ELEMENTOS DINAMICAMENTE ........................................................ 68

6

Unidade 1

7

Unidade 2 Introduo ao Javascript
2.1 O que Javascript?
O que Javascript?
O Javascript uma linguagem de script que, incorporado nas tags HTML, permite
incrementar a apresentao e interatividade das pginas Web. Funes escritas em
Javascript podem ser embutidas dentro de seu documento HTML, a fim de
permitir maior interatividade com as pginas HTML.
Com Javascript voc tem muitas possibilidades para "incrementar" seu documento
HTML com elementos interessantes. Por exemplo, voc ser capaz de responder
facilmente a eventos iniciados pelo usurio. Existem, atualmente, muitos
exemplos sobre Javascript na Internet.
Javascript uma linguagem de script interpretada de forma just-in-time, sendo
utilizado apenas para operaes mais simples. Podemos entender uma linguagem
de script como uma espcie de roteiro simples para execuo de tarefas. As
linguagens de script, como o Javascript, so compostas apenas por um conjunto
de instrues em formato texto que so interpretadas pelo computador no
momento da sua execuo.
A linguagem Javascript Case sensitive, que significa que um programa ou um
compilador faz a diferena entre letras maisculas e minsculas. O termo vem do
ingls e significa sensvel ao tamanho da letra, ou seja, Aluno e aluno so duas
coisas diferentes.
2.2 Onde os Script podem ser executados?
Os scripts escritos em Javascript podem hoje ser executados na maior parte dos
browsers. Desde a introduo da linguagem Javascript no desenvolvimento Web,
que se iniciou a partir do lanamento do Netscape 2.0, a linguagem sofreu uma
srie de atualizaes e hoje possuem um conjunto enorme de recursos suportados
pelos mais utilizados browsers do mercado.

2.3 Verses de navegadores e de Javascript
apropriado introduzir as distintas verses de Javascript que existem e que
evolucionaram em conjunto com as verses de navegadores. A linguagem foi
avanando durante seus anos de vida e incrementando suas capacidades. A
princpio podia realizar muitas coisas na pgina web, mas tinha poucas instrues

8

para criar efeitos especiais. Com o tempo tambm o HTML foi avanando e
foram criadas novas caractersticas como as camadas, que permitem tratar e
planificar os documentos de maneira distinta. Javascript tambm avanou e para
manejar todas estas novas caractersticas foram criadas novas instrues e
recursos. Para resumir vamos comentar as distintas verses de Javascript:
Javascript 1: nasceu com o Netscape 2.0 e suportava grande quantidade de
instrues e funes, quase todas as que existem agora j se introduziram no
primeiro padro.
Javascript 1.1: a verso de Javascript que foi desenhado com a chegada
dos navegadores 3.0. Implementava pouco mais que sua verso anterior,
como por exemplo, o tratamento de imagens dinamicamente e a criao de
arrays.
Javascript 1.2: A verso dos navegadores 4.0. Esta tem como desvantagem
que um pouco distinta em plataformas Microsoft e Mozila, j que ambos
navegadores cresceram de distinto modo e estavam em plena luta no
mercado.
Javascript 1.3: Verso que implementam os navegadores 5.0. Nesta verso
foram limitadas algumas diferenas e asperezas entre os dois navegadores.
Javascript 1.5: Verso atual. Para navegadores atualizados.


9

Unidade 3 Noes bsicas de Javascript

3.1 Criando um script em uma pgina HTML
Para utilizar o Javascript, necessrio criar uma pgina HTML e dentro desta
pgina inserir uma tag delimitadora de script, a fim de executar o script na
abertura da pgina HTML. Um bloco javascript delimitado utilizando a tag
<script> nas pginas HTML. Todo o cdigo colocado dentro destas tags
considerado como um bloco de script pelo browser.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language=" javascript1.1" type="text/javascript">

</script>
</head>
<body>
</body>
</html>
3.2 Utilizando Comentrios
A estrutura de comentrios da linguagem Javascript extremamente semelhante
estrutura da linguagem C++ e da linguagem Java. O Javascript permite
comentrios em linha nica ou em bloco.
Os comentrios em linha nica so representados pelos caracteres ( // ) e
transformam todo e qualquer texto colocado na mesma linha aps este smbolo
em comentrio, conforme exemplo a seguir:
// Este texto comentrio

Os comentrios tambm podem ser criados em blocos no Javascript, utilizando a
notao /* e */. Atravs desta notao, todo o texto colocado dentro destes dois
delimitadores considerado como comentrio para a linguagem de script,
conforme o exemplo a seguir:
<script language="javascript" type="text/javascript">
/* Aqui iniciamos um comentrio em bloco
note que mesmo estando em outra linha, este texto continua sendo comentrio

10

at que seja colocado o delimitador de fim de comentrio */
// Este texto em linha
</script>
3.3 A estrutura de um script Javascript
Assim como outras linguagens de script, o Javascript criado a partir de um
cdigo escrito em texto simples, composto por uma srie de instrues de script,
conjuntos ou blocos de instrues e comentrios. Dentro de um script, voc pode
utilizar variveis para armazenar informaes ou mesmo realizar clculos.
Uma instruo escrita em Javascript pode ser representada por uma ou mais
expresses, palavras-chave, comandos, ou operadores, e em geral so escritos em
uma linha de cdigo no arquivo que contm o script. No javascript, cada instruo
contendo comandos separada por um smbolo ; (ponto e vrgula), o que
permite escrever uma instruo em mais uma linha, desde que ao final do
comando seja colocado o caractere ;.
Em alguns casos, ainda importante colocar todo os comandos JavaScript em
comentrio, caso for visualizado num navegador que no o reconhea.
Abaixo podemos ver um exemplo de duas linhas de comando escritas em
Javascript.

sAlfamidia = "Este o curso de JavaScript da Alfamdia!"; // Atribui um
texto varivel
alert(sAlfamidia);
</script>

O javascript permite ainda que conjuntos de instrues sejam agrupados em
blocos, utilizando como delimitadores chaves ({ }). Instrues agrupadas em
blocos so consideradas como um nico comando na linguagem javascript, e so
utilizados, em geral, onde a linguagem necessita de comando nicos, como em
instrues de teste, estruturas de repetio e funes.
A seguir podemos ver um exemplo de um cdigo Javascript que utiliza
delimitadores de bloco de instrues.

// exemplo usando chaves
function mensagem()
{
alert("Ol");
alert("Seja bem-vindo ao curso de JavaScript");
}
mensagem(); // funo sendo chamada

11

3.4 Variveis
Assim como qualquer linguagem de programao, o Javascript permite a criao
de variveis dentro dos scripts. As variveis em Javascript possuem dois escopos,
um escopo global, que so variveis declaradas fora de funes, e um escopo
local, que so variveis declaradas dentro de funes.
As variveis so declaradas utilizando a instruo var, onde deve ser informado o
nome das variveis que devem ser declaradas. possvel declarar mais de uma
varivel em um mesmo comando var, conforme o exemplo a seguir:

var Valor1, Valor2, Valor3; //Varivel global
Valor1 = 45;
Valor2 = 65;
Valor3 = 85; //Atribuindo valor as variveis
</script>

Como podemos ver no exemplo acima, a atribuio de variveis feita atravs do
operador de atribuio =, e pode ser feita tanto na declarao da varivel como
posteriormente ao longo do cdigo de script.
3.5 Tipos de dados
No javascript no existe uma tipagem explicita de dados na declarao de
variveis. Isto ocorre porque o Javascript no possui tipos explcitos de dados
(relacionados declarao das variveis), toda e qualquer varivel dentro de um
cdigo Javascript pode receber qualquer tipo de dado. A tipagem dos dados ocorre
no momento da atribuio de valores as variveis, ou seja, ao atribuir um valor
nmero a uma varivel, esta assume um tipo de dado numrico, ao atribuir um
valor string a uma varivel, esta assume o valor string.
Apesar de no existir uma tipagem explcita de dados no Javascript, a linguagem
interpreta alguns tipos de dados, divididos em trs categorias:
3.5.1 Tipos de dados Primitivos (por valor)
Nos tipos de dados primitivos podemos encontrar os tipos Numricos (que
representam nmeros inteiros ou fracionados), Strings (que representam
caracteres ou um conjunto de caracteres), e Boolean (que representam valores
booleanos True/False).


12

var nNumber, String, bBoolean; //As variveis ainda no assumiram um tipo
especfico
nNumber = 10; //nNumber assume tipo numrico
sString = "Exemplo"; //sString assume tipo string - texto
bBoolean = true; //bBoolean assume tipo booleano
alert(nNumber + "-" + sString + "-" + bBoolean);
</script>
3.5.2 Tipos de dados especiais (undefined e Null)
Os tipos de dados especiais so utilizados geralmente em expresses de teste em
conjunto com os tipos de dados compostos.
O tipo undefined representa uma propriedade inexistente em um objeto criado
dentro de um cdigo javascript. O tipo null representa uma varivel ou objeto sem
valor, ou seja, uma varivel ou objeto sem contedo.

dtDate = new Date();
/* typeOf devolve como resultado o tipo da varivel,
neste caso ele vai disparar no alert o tipo de dados que este mtodo
apresenta o valor que aparecer na tela "undefined" pois no existe
buscaDia dentro do objeto Date */
alert(typeof(dtDate.buscaDia));
dtDate = null; // Define a varivel como null / nula
</script>
3.5.3 Tipos de dados Compostos (por referncia)
Dentre os tipos de dados compostos, podemos encontrar tipos mais complexos
como o objeto do tipo Date (utilizado para representar datas e horas), o tipo Array
(utilizado para representar um conjunto de dados), e objetos utilizados para
quaisquer outros objetos disponveis na linguagem.

var dtDate, aArray, i;
dtDate = new Date(); //Varivel do tipo objeto date
aArray = new Array();//Varivel do tipo objeto array
alert(dtDate.getDate() + "/" + (dtDate.getMonth()+1) + "/" +
dtDate.getYear());
aArray[0] = "Joao";
aArray[1] = "Paulo";
aArray[2] = "Pedro";
aArray[3] = "Antnio";
aArray.sort();
for(i=0;i<aArray.length;i++)
{
document.write(aArray[i] + "<br>");

13

}
</script>
3.6 Caixas de Dilogo ou de Mensagem
Precisamos mostrar mensagens de um script para o usurio no navegador. Isso
ser feito utilizando mtodos do objeto window. O Javascript possui 3 caixas de
mensagens.
3.6.1 O mtodo alert()
O mtodo alert() cria uma caixa de dilogo na qual reproduzido o valor (varivel
e/ou cadeia de caracteres) do argumento que lhe foi fornecido. Esta caixa bloqueia
o programa at que o usurio clique em "OK".
Sua sintaxe :

alert(varivel);
alert("cadeia de caracteres");
alert(varivel + "cadeia de caracteres");
Alert no ie:

Alert no FireFox

Para escrever em vrias linhas, deves usar: \n.
alert("Bom dia!\nSeja bem-vindo ao meu site");


14

3.6.2 O mtodo prompt()
No mesmo estilo do que o mtodo alert(), Javascript dispe de outra caixa de
dilogo, chamada caixa de convite, que composto por um campo que contm
uma entrada a ser completada pelo usurio. Esta entrada contm um valor por
default.
A sintaxe :
prompt("texto da caixa","valor por default");

Prompt no I E:

Prompt no FireFox:

Ao clicar no OK, o mtodo reenvia o valor escrito pelo usurio ou a resposta
default. Se o usurio clicar em Cancel, o valor nulo ento reenviado.
O prompt() utilizado para incrementar dados fornecidos pelo usurio.

15

3.6.3 O mtodo confirm()
Este mtodo mostra 2 botes o "OK" e "Cancel". Ao clicar no OK, confirm()
reenvia o valor true e false caso clicar em Cancel. Este mtodo utilizado
sobretudo para confirmar uma opo.
A sintaxe :
confirm("Deseja continuar ?");
Confirm no I E:

Confirm no FireFox:

3.6.4 O mtodo document.write()
O JavaScript permite que o programador escreva linhas dentro de uma pgina
(documento), atravs do mtodo write. As linhas escritas desta forma, podem
conter textos, expresses JavaScript e comandos Html. As linhas escritas atravs
deste mtodo aparecero no ponto da tela onde o comando for inserido.
A sintaxe :
var nome="Alfamdia";
document.write("Esta minha primeira linha!");
document.write("Esta o valor da varivel nome:" + nome);
</script>

A ideia do exemplo acima escrever duas linhas. Entretanto o mtodo write no
insere mudana de linha, o que provocar o aparecimento de apenas uma linha
com os dois textos emendados.
Uma alternativa para que isso no acontece utilizarmos a concatenao com a
tag <BR> do HTML que quebra linha:

16

A sintaxe :
document.write("Esta minha primeira linha!"+"<br>");
document.write("Esta a segunda linha!");
</script>
3.7 Operadores
A linguagem Javascript possui um conjunto de operadores muito semelhantes a
qualquer linguagem de programao convencional, que permitem tanto realizar
operaes aritmticas como operaes booleanas (verdadeiro ou falso). Os
operadores esto divididos em trs grupos principais: Computacionais, Lgicos e
de Atribuio.
Dentre os operadores computacionais, podemos encontrar os operadores que
realizam operaes aritmticas, bem como operadores utilizados para realizar
concatenaes de strings. A lista dos operadores computacionais pode ser
visualizada abaixo:

Operador Smbolo
Incremento ++
Decremento --
Multiplicao *
Diviso /
Mdulo (Resto da diviso) %
Adio/Concatenao +
Subtrao -

Dentre os operadores lgicos, encontramos os operadores para testes lgicos
convencionais, como equalidade e inequalidade. importante ressaltar a diferena
entre o operador de atribuio = e o operador lgico de igualdade ==. Muitas
vezes os desenvolvedores tendem a utilizar o operador de atribuio para realizar
testes de igualdade, o que acarreta em erros de lgico nos scripts. Operadores
lgicos podem ser visualizados a seguir.

Operador Smbolo
No Lgico (Negao) !
Menor que <
Maior que >
Menor ou igual a <=
Maior ou igual a >=
Igual ==
Diferente (no igual) !=
E Lgico (AND) &&
OU Lgico (OR) ||

17

Alm destes dois conjuntos de operadores, ainda temos os operadores de
atribuio. O operador de atribuio representado pelo smbolo =, que pode ser
combinado com qualquer operador computacional a fim de combinar o valor atual
da varivel com o valor que est sendo atribudo. Para utilizar esta funcionalidade,
basta inserir o operador computacional na frente do operador de atribuio (Ex.:
+=, -=, *=, /=).
A seguir podemos ver uma srie de exemplos para utilizao de operadores:

var nNumero1, nNumero2, nResultado;

// Atribuio de 0 ao nmero
nNumero1 = 1;
nNumero2 = 2;

// Atribui uma soma ao resultado
nResultado = nNumero1 + nNumero2;

// Incrementa o resulta em 1
nResultado++;

// Soma 10 ao valor atual do resultado
nResultado+=10;

/*
Dispara o alert true caso a varivel nResultado seja igual a 25
ou false caso no seja.
Neste caso, o resultado ser false porque nResultado no igual a 25
*/
alert(nResultado == 25);
</script>

18

Unidade 4 Utilizando Funes
4.1 O que Funo
Uma funo um grupo de linha(s) de cdigo de programao destinado uma
tarefa bem especfica e que podemos de necessrio, utilizar vrias vezes. A
utilizao de funes melhora bastante a leitura do script.
4.2 Utilizando Funes no Javascript
Como j podemos perceber, o Javascript possui inmeros recursos e funes
disponveis para tornar as pginas mais interativas possveis. Alm de toda a
estrutura de programao j apresentada, o javascript ainda permite ao
desenvolvedor utilizar funes prprias do Javascript e criar suas prprias
funes.
4.3 As funes intrnsecas do Javascript
O Javascript possui uma srie de funes intrnsecas que podem ser chamadas em
qualquer ponto do cdigo JavaScript. As funes intrnsecas mais comuns so
apresentadas a seguir.
4.3.1 A funo parseInt() e parseFloat()
As funes parseInt e parseFloat so utilizadas para converter valor do formato
string (texto) para o formato numrico. A funo parseInt utilizada para
converter valores inteiros. A funo parseFloat utilizada para converter valores
fracionados. Estas funes so extremamente teis quando se faz necessria a
converso de um valor textual, informado pelo usurio ou no, para um tipo
nmero. A partir da converso possvel utilizar os valores para clculos
numricos.

Podemos ver exemplos destas duas funes no script a seguir:

var nContador;
var sValor1, sValor2;
var sResultado, nResultado;

sValor1 = "10"; //Valor String

19

sValor2 = "1.5"; // Valor Fracionado

sResultado = sValor1 + sValor2;
nResultado = parseInt(sValor1) + parseFloat(sValor2);

// Concatenao
alert(sResultado + + nResultado);

// Soma numrica
alert(nResultado);
</script>
4.3.2 Funo escape() e unescape()
Estas funes so utilizadas para converter uma string em um formato legvel em
qualquer computador, ou seja, remove caracteres que podem ser considerados
invlidos para um formato padro. Este formato padro representado por um
smbolo % e um valor hexadecimal (podemos observar esta converso
comumente em barras de navegao de browsers).
Podemos ver um exemplo de utilizao das funes escape e unescape no
exemplo a seguir.
Podemos ver exemplos destas duas funes no script a seguir:
<script language="javascript1.1" type="text/javascript">
var sURL;
sURL = "http://www.processor.com.br/jscript?Param1=Curso de Java
Script&Param2=";
sURL = escape(sURL);
alert(sURL);
sURL = unescape(sURL);
alert(sURL);
</script>
4.3.3 A funo isNaN()
A funo isNaN (Is Not a Number) utilizada para verificar se uma varivel
contm um valor especial NaN. O valor representa uma converso numrica mal
sucedida (NaN = Not a Numeric). Quando tentamos converter uma string (Ex.:
ABC) para um valor numrico utilizando as funes parseInt e parseFloat, o
resultado da funo um valor NaN.
Exemplo:
var sTelefone = "1234XDFRT";
//validar telefone (verificao se contem apenas nmeros)
if (isNaN(sTelefone)){
alert ("O seu telefone " + sTelefone + " deve conter apenas nmeros!");
}

20

</script>
4.4 Funes criadas pelo usurio
Alm das funes disponveis, por padro no Javascript, a linguagem nos permite
criar nossas prprias funes, chamadas funes definidas pelo usurio. Para criar
funes devemos utilizar a clusula function, que utilizada para criar as funes
no Javascript.
A sintaxe para a criao das funes no Javascript :

function <Nome da Funo> ([param1], [param2], ... , [paramn])
{
...
}

Como podemos ver a funo pode conter diversos parmetros de entrada que
podem ser utilizados para clculos ou algum processamento especial dentro do
corpo da funo. Para definir os parmetros, basta informar os nomes das
variveis que iro representar os parmetros na funo. Podemos ver um exemplo
de funo no cdigo abaixo:

function Soma(nNumero1, nNumero2)
{
var nSoma;
nSoma = nNumero1+nNumero2;
alert("Soma= " + nSoma);
}
Soma(10,5);
</script>

As funes do Javascript ainda permitem que o usurio retorne valores. Para
retornar um valor em uma funo, basta criar a funo da mesma forma como
apresentado no exemplo anterior, porm com a utilizao do comando return. O
comando return serve para interromper o processamento de uma funo ou um
bloco de script, com a opo de retornar um valor no caso de estar dentro de uma
funo. Podemos ver um exemplo de utilizao do comando return a seguir.
function Soma(nNumero1, nNumero2)
{
return nNumero1+nNumero2;
}
alert("Soma= " + Soma(10,5));
</script>

21

4.5 Laboratrio
Crie um diretrio chamado Laboratrios dentro de sua pasta de arquivos. Dentro deste
diretrio, voc colocar os arquivos HTML que sero criados para realizar estes exerccios.
4.5.1 Exerccio 4
Faa um programa que 4 valores, calcule o quadrado de cada um, some todos os resultados
e mostre o resultado final.
4.5.2 Exerccio 5
Faa um algoritmo que leia 4 notas e informe a mdia deles.
4.5.3 Exerccio 6
Faa um programa para calcular o estoque mdio de uma pea, sendo informado o estoque
mnimo e o estoque mximo.
4.5.4 Exerccio 7
Construa um algoritmo com uma funo que leia a cotao do dlar, leia os valores em
dlar, converta esse valor para real e mostre o resultado.
4.5.5 Exerccio 8
Construa um algoritmo para pagamento de comisso de vendedores de peas, levando em
considerao que sua comisso ser de 5% do total da venda e que voc tem os seguintes
dados: preo unitrio da pea e quantidade vendida.
Unidade 5 Expresses
5.1 Expresses Condicionais estruturas de teste
Para uma utilizao eficaz dos operadores disponveis no Javascript, necessrio
entender como funcionam as estruturas de teste utilizadas pela linguagem. Dentro
do Javascript possumos o if else.
5.1.1 if... else
No comando if, necessrio informar dentro de parnteses a expresso a ser
testada, e caso ela seja verdadeira, o comando ou bloco de comandos subseqente
ao comando if ser executado. Este comando ainda possui uma clusula else
opcional, que pode conter uma expresso ou conjunto de expresses a serem
executadas caso a condio testada no comando if no seja verdadeira.
A seguir podemos verificar um exemplo do comando if:
Exemplo 1 if simples:
var sTelefone;
sTelefone = prompt("Informe o nmero do telefone","");
//validar telefone (verificao se contem apenas nmeros)
if (isNaN(sTelefone))
alert ("O seu telefone deve conter apenas nmeros!");
</script>
Exemplo 2 if else:
var nNum;
nNum = parseInt(prompt("Informe um nmero inteiro:",""));
if(nNum > 0)
alert("Nmero positivo");
else
alert("Nmero negativo");
</script>
Para aqueles que gostam da escrita enxuta, tambm h:
(expresso)?instruoA:instruoB;
Se a expresso entre parntese verdadeira, a instruo A ser executada. Se a
expresso entre parntese falsa, a instruo B ser executada.
var nNum;
alert((nNum>0)? "Nmero positivo":"Nmero negativo");
</script>

Exemplo 3 if elseencadeado:

23

var nNum;
if(nNum == 0)
alert("Nmero neutro");
else if(nNum > 0)
alert("Nmero positivo");
else
alert("Nmero negativo");
</script>
Se o comando if possuir mais de uma instruo, obrigatrio a utilizao dos
delimitadores de { }.
if(condio verdadeira)
{
instruo 1;
instruo 2;
instruo 3;
}
5.2 Expresses Seletoras
5.2.1 switch
Alm do comando if, o comando switch pode ser utilizado para realizar testes
lgicos na linguagem Javascript. O comando switch um comando de teste de
seleo mltipla, ou seja, no testa a expresso lgica apenas por um valor
especfico, mas sim por uma srie de valores informados no cdigo de script. O
comando script requer um bloco de comando(s) inserido(s) logo aps a expresso
lgica, que ir conter os comandos executados no caso de cada uma das
expresses. Ao final de cada conjunto de instrues de uma condio swicth,
necessrio informar o comando break, para que o javascript no execute as
condies posteriores ao teste, conforme o exemplo a seguir:
var farol;
farol = prompt("Informe a cor do semforo","");
switch (farol) {
case "vermelho":
alert("Pare")
break
case "amarelo":
alert("Atenco")
break
case "verde":
alert("Prossiga")
break
default:
alert("Cor ilegal")
}

24

</script>
5.3 Laboratrio
5.3.1 Exerccio 9
Joo comprou um computador para controlar o rendimento dirio de seu trabalho. Toda
vez que ele traz um peso de peixes maior que o estabelecido pelo regulamento de pesca do
Estado (50 quilos), ele deve pagar uma multa de R$ 4,00 por quilo excedente. Joo precisa
que voc faa um programa que leia o peso do peixe e verifique se h excesso. Se houver,
exibir o valor de excesso e o valor total da multa que Joo dever pagar. Caso contrrio,
exibir apenas a quantidade de quilos pescados.
5.3.2 Exerccio 10
Elabore um programa que leia o cdigo e o nmero de horas trabalhadas de um operrio.
Aps, calcule o salrio sabendo-se que ele ganha R$ 10,00 por hora. Quando o nmero de
horas excederem a 50, calcule o excesso de pagamento. O valor da hora excedente de R$
20,00. Deve ser exibido no final do programa o salrio total e o valor excedente.
5.3.3 Exerccio 11
Faa uma funo que verifique se o numero par ou impar. Mostre a mensagem no final.
5.3.4 Exerccio 12
Faa um programa com funes que calcule o peso ideal homens: 72,7 * Altura 58.
Mulheres: 62,1 * altura -44,7. Informe no final se a pessoa est com o peso ideal, se
precisa emagrecer quando estiver 3kg acima do ideal ou se precisa engordar quando estiver
com 3kg abaixo do peso ideal.

25

5.3.5 Exerccio 13
Elabore um programa que, dada a idade de um nadador, classifique-o em uma das
seguintes categorias, sabendo que crianas com idade inferior a 5 anos ainda no podem
competir oficialmente:
Infantil A: 5 a 7 anos
Infantil B: 8 a 11 anos
Juvenil A: 12 a 13 anos
Juvenil B: 14 a 17 anos
Adultos: Maiores de 18 anos
5.4 Expresses de Loop - Estruturas de repetio
5.4.1 While
O comando while utilizado para repetir um determinado conjunto de instrues
de acordo com uma expresso lgica definida no cdigo de script.
while (condio verdadeira){
continuar a fazer alguma coisa
}
Enquanto que a condio verdadeira, o Javascript continua a executar as
instrues entre as chaves. Uma vez que a condio no mais verdadeira, o ciclo
interrompe-se e continua-se o script.
Podemos ver um exemplo de utilizao do comando while no cdigo abaixo:
var sNome, nCont;
nCont = 1;
while(nCont <=5)
{
sNome = prompt("Informe o nome: ","");
//Incrementa o contador
nCont++;
}

26

5.4.2 Do While
Utiliza-se geralmente quando no sabemos quantas vezes haver de se executar o
loop, assim como o comando while, com a diferena de que sabemos ao certo que
o loop ser executado pelo menos.
do{
sentenas do loop
}while(condio)
Se a condio verdadeira, o Javascript continua a executar as instrues entre as
chaves. Uma vez que a condio no mais verdadeira, o ciclo interrompe-se e
continua-se o script.
Podemos ver um exemplo de utilizao do comando do while no cdigo abaixo:
var nNumi, nNumf;
nNumi = parseInt(prompt("Informe o nmero inicial: ",""));
do{
nNumf = parseInt(prompt("Informe o nmero final: ",""));
if(nNumf <= nNumi)
alert("O nmero final deve ser maior que o nmero inicial");
}while(nNumf<=nNumi);
alert("Nmero inicial: " + nNumi + "\nNmero final: " + nNumf );
</script>
5.4.3 For
Alm do comando while, temos o comando for, que pode ser utilizado para repetir
um determinado conjunto de instrues de acordo com um ndice nmero
especificado no prprio comando for. No comando for necessrio informar a
varivel que servir como ndice, a condio para execuo do for, e o incremento
utilizado para execuo da estrutura de repetio.
for(valor inicial ; condio ; progresso)
{
instrues;
}
Podemos ver um exemplo de utilizao do comando for a seguir.
var sNome, nCont;
for(nCont=1;nCont<=5;nCont++)
{
sNome = prompt("Informe o nome: ","");
}
</script>
O comando for ainda pode ser utilizado com a clusula in para realizar
enumeraes de propriedades em objetos ou mesmo itens contidos em arrays.
Para a utilizao da clusula in, necessrio definir uma varivel que ir receber o
valor de cada membro solicitado dentro de cada iterao da estrutura de repetio.

27

Com a clusula in podemos, por exemplo, buscar todas as propriedades
disponveis de um determinado objeto criado no JavaScript. No exemplo a seguir
podemos visualizar todas as propriedades disponveis no objeto window, que
representa a janela do browser.
var prop;
for(prop in window)
{
var sMensagem;
sMensagem = "Propriedade da janela do Browser: ";
sMensagem += prop;
alert(sMensagem);
}
</script>
5.5 Laboratrio
5.5.1 Exerccio 14
Faa um programa que leia as notas finais dos alunos de uma disciplina, calcule e informe
a mdia da turma e informe o aluno com a nota maior.
5.5.2 Exerccio 15
Escreva um programa que leia o nome, sexo, altura e peso de um grupo de 3 pessoas e
informe:
Nome do homem mais pesado
Mdia de altura das mulheres
5.5.3 Exerccio 16
Leia dois nmeros (inicial e final) e mostre os nmeros pares deste intervalo. Alm disso,
deve mostrar tambm quantos so e qual a soma desses nmeros
5.5.4 Exerccio 17
Crie um programa que leia vrios nmeros (quantos o usurio quiser). Aps mostre os
nmeros pares desses nmeros e multiplique por 2 mostrando tambm o resultado.


28

Unidade 6 Objetos
Alm da utilizao de funes intrnsecas e funes de usurio, o Javascript
possui uma srie de objetos intrnsecos que permitem o uso de nmeros de
recursos dentro da linguagem. As prprias funes intrnsecas que vimos no
mdulo anterior esto colocadas dentro de um objeto intrnseco chamado Global,
mas por estarem colocadas dentro deste objeto elas tem um escopo global,
permitindo sua utilizao sem a chamada explcita ao objeto.
Os objetos so compostos por mtodos, que funcionam exatamente da mesma
forma que as funes em uma linguagem de programao e so utilizadas para de
alguma forma executar alguma ao sobre o objeto. Alm dos mtodos, os objetos
possuem propriedades que do caractersticas especficas as instncias dos objetos
utilizados.
Para utilizarmos um objeto no Javascript necessrio instanci-lo inicialmente.
Para iniciarmos um objeto precisamos criar uma varivel que ir armazenar a
instncia do objeto. Para criar uma nova instancia de um objeto, devemos utilizar
o comando new.
A seguir veremos os objetos intrnsecos do javascript mais utilizados.
6.1 O Objeto Array
O objeto Array (tambm conhecido como matriz) a representao de um
conjunto de valores dentro do Javascript. Para criarmos um array dentro do
Javascript, utilizamos a mesma sintaxe que utilizamos at o momento com as
datas, atravs do comando new. Deve-se lembrar que a primeira posio de um
array 0, ento um array de tamanho 6, comea na posio 0 e acaba na posio
5. A seguir vemos uma srie de exemplos de criao de arrays.
var sNomes = new Array();
var sValores = new Array(5)// Array de 6 posies;
</script>
Como mostrado no exemplo anterior, os array podem ser criados com um
tamanho inicial ou no. Caso no seja informado o tamanho inicial, podemos
aumentar seu tamanho medida que criamos os elementos dentro do array.
Para criar e acessar elementos em um array em Javascript devemos utilizar
colchetes [ ] para informar qual o incio do array que queremos gravar ou ler.
Caso o incio no exista e no foi atribudo um tamanho para ele, o array ser
redimensionado automaticamente. Caso contrrio, o script exibir um erro.
PROPRIEDADE DESCRIO
length Devolve o nmero de elementos (tamanho) do array.

29

MTODOS DESCRIO
join() Junta todos os elementos do array numa nica cadeia. Os
diferentes elementos so separados por um caracter
separador especificado no argumento. Por default, este
separador uma vrgula.
sort() Devolve os elementos em ordem alfabtica ou crescente.
reverse() Devolve os elementos em ordem inversa ou decrescente.
Um exemplo de utilizao de variveis dentro do array pode ser visto abaixo:
var sValores = new Array(6);

sNomes[0] = "Andr";
sNomes[1] = "Bruno";
sNomes[2] = "Carlos";

sValores[0] = 1;
sValores[1] = 2;
sValores[2] = 3;
sValores[3] = 4;

document.write("Vetor sNomes<br />");
for(var i=0;i<sNomes.length;i++)
{
document.write(sNomes[i] + "<br>");
}
document.writeln("<br>Vetor sValores<br>");
for(var i=0;i<sValores.length;i++)
{
document.write(sValores[i] + "<br>");
}
sNomes.join();
alert(sNomes);
</script>

Caso o array esteja sendo preenchido de forma dinmica, sem informar um
nmero de elementos, podemos a qualquer momento consultar a propriedade
length para verificar quantos elementos esto contidos dentro do array.
Alm da armazenagem de objetos, os array podem ser utilizados para outras
finalidades como ordenao de dados. Para isto devemos utilizar os mtodos
disponveis dentro do array, como o mtodo sort para ordenar por ordem
alfabtica e o mtodo reverse para ordenar por ordem decrescente.
Um exemplo de utilizao de um array para ordenao pode ser visto abaixo:


30


sNomes[0] = "Carlos";
sNomes[1] = "Bruno";
sNomes[2] = "Mauricio";
sNomes[3] = "Jos";
sNomes[4] = "Andr";

sNomes.sort();

var nCount;
alert("Ordem Crescente");
for(nCount=0;nCount<sNomes.length;nCount++)
{
alert(sNomes[nCount]);
}

sNomes.reverse();
alert("Ordem Decrescente");
for(nCount=0;nCount<sNomes.length;nCount++)
{
alert(sNomes[nCount]);
}
</script>
6.2 O Objeto Date
O objeto Date um dos objetos intrnsecos do Javascript, utilizado para o
gerenciamento de datas. Para criar uma nova instancia do objeto, basta criar uma
nova varivel e atribuir uma nova instancia do objeto Date. O objeto date
sempre inicializado com a Data e Hora atuais. Um exemplo de criao de um
objeto Date pode ser visto a seguir.
var dtData, nDia, nMes, nAno

dtData = new Date(); //atribui a varivel dtData, a data do sistema
nDia = dtData.getDate(); // atribui o dia
nMes = dtData.getMonth(); /* atribui o ms. Retorna um valor de 0 a 11, onde o 0
igual a Janeiro */
nAno = dtData.getFullYear(); // atribui o ano com 4 dgitos
alert(nDia + "/" + (nMes+1) + "/" + nAno);

nHora = dtData.getHours(); // atribui a hora
nMinutos = dtData.getMinutes(); // atribui os minutos
nSegundos = dtData.getSeconds(); // atribui os segundos
alert(nHora + ":" + nMinutos + ":" + nSegundos);

nDiaSemana = dtData.getDay(); /* atribui o dia da semana. Retorna um valor de 0
a 6, onde 0 igual a domingo */

31

alert("Dia da semana: " + nDiaSemana);
</script>

MTODOS DESCRIO
getDate() Devolve o dia do ms.
getMonth() Devolve o ms (comea por 0).
getFullYear() Retorna o ano com todos os dgitos.
getDay() Devolve o dia da semana (comea por domingo e vale 0).
getHours() Retorna a hora.
getMinutes() Devolve os minutos.
getSeconds() Devolve os segundos.
6.3 O Objeto Math
O objeto Math um objeto com um comportamento um pouco diferente dos
demais. Para utilizarmos o objeto Math, no necessrio criar um nova instncia
deste em uma varivel, basta chamarmos seus mtodos e propriedades
diretamente.
Este objeto utilizado para realizar clculos matemticos mais avanados, que
no podem ser realizados utilizando os operadores mais simples do JavaScript.

MTODOS SINTAXE DESCRIO
abs() Math.abs(x);
Devolve o valor absoluto (valor positivo) de x,
isto , elimina o smbolo negativo de um nmero.
Ex.: num = Math.abs(-3);
Resultado: num = 3
ceil() Math.ceil(x);
Devolve o inteiro superior ou igual ao x.
Este mtodo no arredonda o nmero.
Ex.: num = Math.ceil(1.01);
Resultado: num = 2
floor() Math.floor(x)
Devolve o inteiro inferior ou igual ao x.
Este mtodo no arredonda o nmero.
Ex.: num = Math.floor(1.01);
Resultado: num = 1
round() Math.round(x) Arredonda o nmero ao inteiro mais prximo.
Ex.: num = Math.round(1.81);
Resultado: num = 2

32

max() Math.max(x,y)
Devolve o maior de 2 nmeros x e y.
Ex.: num = Math.max(4,8);
Resultado: num = 8
min() Math.min(x,y)
Devolve o menor de 2 nmeros x e y.
Ex.: num = Math.min(4,8);
Resultado: num = 4
pow() Math.pow(x,y)
Calcula o valor de um nmero x elevado na
potncia y.
Ex.: num = Math.pow(2,4);
Resultado: num = 16
random() Math.random()
Devolve o valor de um nmero aleatrio
escolhido entre 0 e 1.
Ex.: num = Math.random();
Resultado: qualquer nmero entre 0 e 1
sqrt() Math.sqrt(x)
Devolve a raiz quadrada de x.
Ex.: num = Math.sqrt(25);
Resultado: num = 5
Podemos ver um exemplo de utilizao do objeto Math no exemplo a seguir.
var nNumero1 = 10.5;
var nNumero2 = -10.5;
var nNumero3 = 4;
var nNumero4 = 12;

alert("Mtodo ABS(10.5): " + Math.abs(nNumero1));
alert("Mtodo ABS(-10.5): " + Math.abs(nNumero2));
alert("Mtodo SQRT(Raiz Quadrada 4): " + Math.sqrt(nNumero3));
alert("Mtodo Maximo(4,12): " + Math.max(nNumero3, nNumero4));
</script>
6.4 O Objeto String
O objeto string representa variveis de texto dentro do Javascript. Os objetos
string so criados atravs do comando String() ou atravs da atribuio direta de
um valor para uma varivel. O objeto string possui uma srie de mtodos que
permitem manipular as strings no Javascript.
PROPRIEDADE DESCRIO
Length Devolve um inteiro que indica o comprimento da cadeia de
caracteres.
MTODOS DESCRIO
charAt() Mostra o caracter na posio pedida.

33

indexOf() Devolve a posio de um caracter ou cadeia de caracteres
(pesquisa feita da esquerda para a direita).
lastIndexOf() Devolve a posio de um caracter ou cadeia de caracteres
(pesquisa feita da direita para a esquerda).
substring(x,y) Devolve uma string parcial situada entre a posio x e a
posio y-1.
toLowerCase() Transforma todas as letras em minsculas.
toUpperCase() Transforma todas as letras em Maisculas.

Podemos ver a implementao de alguns desses mtodos no exemplo abaixo:
var sString1 = "string criada diretamente pela varivel";
var sString2 = new String("STRING CRIADA PELO NEW");
sString1 = sString1.toUpperCase();
sString2 = sString2.toLowerCase();
alert(sString1);
alert(sString2);
alert(sString1.substring(0,6));
alert("O tamanho da String1 : " + sString1.length);
</script>
6.5 Objetos criados pelo usurio
Alm dos objetos intrnsecos, o Javascript tambm nos permite criar objetos
definidos pelo usurio, com propriedades prprias definidas no prprio script.
Para criarmos um objeto definido pelo usurio no Javascript, devemos criar uma
varivel e atribuir uma nova instancia de um objeto do tipo Object. Aps criar esta
varivel, basta atribuir as propriedades ao objeto que elas sero criadas de forma
automtica. Podemos visualizar a utilizao de objetos definidos pelo usurio no
exemplo abaixo:
<script language="JavaScript">
var oContato = new Object();

oContato.Nome = "Sr. Teste";
oContato.Telefone = "(51) 1234-56789";
oContato.Endereco = "Rua Q Sobe e Desce 1000";

for(prop in oContato)
{
var sMsg;
sMsg = "O objeto contm a propriedade ";
sMsg += prop;
sMsg += " com o valor de " + oContato[prop];

34

alert(sMsg);
}
</script>
6.6 Mtodos
Os mtodos de um objeto so funes que pertencem a um objeto. Repare que
enquanto que as propriedades correspondem a variveis, os mtodos
correspondem a funes.
6.6.1 Mtodos estticos
Alguns objetos oferecem mtodos estticos. Esses mtodos diferem dos mtodos
normais pelo fato de no pertencerem a um objeto criado com a instruo new.
6.6.2 A declarao this
A declarao this representa o prprio objeto em que usada. Esse objeto pode
ser uma funo, uma ligao de hipertexto, uma imagem, etc. Esta declarao
bastante til em HTML Dinmico porque nos ajuda muito a construir funes que
respondem a eventos sabendo sempre qual foi o objeto que originou o evento e
funcionam corretamente em todos os browsers.

function AlunoUniversitario(nome, idade){
this.nome = nome;
this.idade = idade ;
}
6.6.3 A declarao with
Esta declarao estabelece o objeto ao qual se aplica uma srie de instrues. Os
dois exemplos seguintes usam o objeto Math para ilustrar o uso desta declarao e
so totalmente equivalentes.
Verso 1:
x = Math.pow(3,2) + Math.sqrt(100);
y = Math.floor(Math.random()* 100);
alert(x + " - " + y);
</script>

35

Verso 2: (equivalente anterior.) Repare que no foi preciso replicar o comando
Math. antes dos nomes dos mtodos pow(), sqrt(), floor() ou
random().
with (Math) {
x = pow(3,2) + sqrt(100);
y = floor(random()* 100);
}
alert(x + " - " + y);
</script>

Quando o nmero de instrues pequeno no vale a pena usar a declarao with, mas se
esse nmero crescer muito o cdigo ser mais compacto e fcil de ler se usarmos esta
declarao.

6.6.4 A funo eval()
A funo eval() serve para executar um bloco de script criado dinamicamente.
Com o comando Eval possvel criar comandos em tempo de execuo do script
e execut-los no mesmo escopo do script em que o comando Eval est rodando.
Podemos ver um exemplo disso no cdigo a seguir:
Exemplo 1:

var nContador;
for(nContador=0;nContador<5;nContador++)
{
eval("var sTeste" + nContador + ";");
eval("sTeste" + nContador + "=" + nContador + ";");
}

for(nContador=0;nContador<5;nContador++)
{
eval("alert(sTeste" + nContador + ");");
}
</script>

Exemplo 2:

<html>
function compute(f)
{

36

f.result.value = eval(f.expr.value);
}
</script>
<body>
<form name="teste">
Digite uma expresso matemtica (exemplo: 2+2 ou 3*5):
<input type="text" name="expr" Size="15">
<input type="button" value="Calcula" onclick="javascript:compute(this.form)">
<br>
Resultado:
<input type="text" name="result" size="15">
</form>
</body>
</html>

6.7 Laboratrio

6.7.1 Exerccio 18
Faa uma funo que informe se a pessoa pode votar de acordo com a idade,
conforme as leis do pas.
6.7.2 Exerccio 19
Construa um programa que leia 5 nmeros, exiba os nmeros em ordem crescente e
decrescente, e encontre o maior valor, o menor e a mdia dos nmeros lidos.
6.7.3 Exerccio 20
Desenvolva um algoritmo que mostre uma mensagem com a data completa do dia, dia da
semana, hora completa e um texto conforme situao abaixo:
Das 05:00 -11:59 = Bom Dia;
Das 12:00 17:59 = Boa Tarde;
Das 18:00 23:59 e 00:00 04:59 = Boa Noite;
Ex.: 31 de julho de 2008 Quinta-feira - 16:04:05 Boa Tarde

37

6.7.4 Exerccio 21
Crie uma varivel chamada sNomes e atribua ela uma nova instancia de um Array, com 10
elementos.
Preencha o array com 10 nomes diferentes, colocados fora de ordem.
Utilize o mtodo sort do array para ordenar os itens do array.
Crie uma nova varivel chamada sListaDeNomes.
Crie uma estrutura de repetio e utilize a varivel sListaDeNomes para criar uma lista de
nomes contidos no array de forma ordenada. Separe a lista com o caracter \n.
Utilize o comando alert para visualizar o resultado.
6.7.5 Exerccio 22
Crie um vetor de 10 posies e armazene 10 valores. Pea ao usurio um nmero qualquer
e verifique quantos nmeros do vetor so inferiores a esse nmero e quantos so
superiores.
6.7.6 Exerccio 23
Escreva um programa que leia quatro nmeros, calcule o quadrado de cada um e some
todos. Se o quadrado do terceiro for maior que mil (1000), mostre o nmero original e
finalize o programa. Caso contrrio, mostre o resultado de todos.
6.7.7 Exerccio 24
Escreva um programa que gere aleatoriamente 6 nmeros para a Mega Sena. Lembrando
que estes nmeros devem ser maior ou igual a 1 e menor ou igual a 60.


38

Unidade 7 Eventos
7.1 O que
Os eventos so a maneira que temos em Javascript de controlar as aes dos
visitantes e definir um comportamento da pgina quando se produzam. Quando
um usurio visita uma pgina web e interage com ela, se produzem os eventos e
com Javascript podemos definir o que queremos que ocorra quando se produzam.
Por exemplo, podemos definir o que acontece quando o usurio clica sobre um
boto, edita um campo de texto ou abandona a pgina.
7.2 Eventos implementados pelo JavaScript
EVENTOS DESCRIO
Clik Quando o usurio clica sobre um boto, um link ou outros
elementos.
Load Quando a pgina carregada pelo browser.
Unload Quando o usurio saia da pgina
MouseOver Quando o usurio coloca o ponteiro do mouse sobre um
link ou outro elemento.
MouseOut Quando o ponteiro do mouse sai de um link ou outro
elemento.
Focus Quando um elemento de formulrio tem o foco, isto , est
ativo.
Blur Quando um elemento de formulrio perde o foco, isto ,
quando deixa de estar ativo.
Change Quando o valor de um campo de formulrio modificado.
Select Quando o usurio seleciona um campo dentro de elemento
de formulrio.
Submit Quando o usurio clica sobre o boto Submit para enviar
um formulrio.
Keydown Quando o usurio pressiona uma tecla, independentemente
que a solte ou no.
Keypress Quando o usurio deixa uma tecla clicada por um tempo
determinado.

39

Keyup Quando o usurio deixa de apertar uma tecla. produzido
no momento que se libera a tecla.
7.3 Como se define um evento
Para definir as aes que queremos realizar ao produzir um evento utilizamos os
manipuladores de eventos. Existem muitos tipos de manipuladores de eventos,
para muitos tipos de aes do usurio. O manipulador de eventos se coloca na
etiqueta HTML do elemento da pgina que queremos que responda s aes do
usurio.
Por exemplo, temos o manipulador de eventos onclick, que serve para descrever
aes que queremos que se executem quando se clique. Se quisermos que ao
clicar sobre um boto acontea alguma coisa, escrevemos o manipulador onclick
na etiqueta <input type=button> desse boto. Algo parecido a isto.

<input type=button value="Enviar" onclick="sentencas_javascript...">
Coloca-se um atributo novo na etiqueta que tem o mesmo nome que o evento,
neste caso onclick. O atributo se iguala s sentenas Javascript que queremos que
se executem ao se produzir o evento.
7.4 Gestes de eventos disponveis em JavaScript
Cada elemento da pgina tem sua prpria lista de eventos suportados.

OBJETO GESTO DE EVENTO DISPONVEIS
Janela onload, onlnload.
Link hypertexto onclick, onmouseover, on mouseout.
Elemento de texto onblur, onchange, onfocus, onselect.
Elemento de rea
de texto
onblur, onchange, onfocus, onselect.
Elemento boto onclick.
Boto Radio onclick
Lista de seleo onblur, onchange, onfocus
Boto Submit onclick
Boto Reset onclick

40

7.4.1 onclick
O onclick mais clssico, o clique do mouse.
<body>
<form id="form1" name="form1">
<input type="button" name="botao1" id="botao1" value="Enviar"
onclick="alert('Voc clicou no boto')" />
</form>
</body>
7.4.2 onload
O onload aparece quando a pgina acaba de se carregar. No exemplo abaixo,
vamos mostrar qual o navegador utilizado pelo usurio.
<body onload="alert(navigator.appName)">
7.4.3 onunload
O onunload aparece quando o usurio sai da pgina.
<body onunload="alert('Tchau')">
7.4.4 onmouseover
O onmouseover executa-se quando o cursor passa por cima (sem clicar) de um
link ou de uma imagem.
function mensagem()
{
alert("Voc est utilizando o onmouseover");
}
</script>
</head>
<body>
<a href="#" onmouseover="mensagem()"> Passe o mouse </a>
</body>
7.4.5 onmouseout
O onmouseout executa-se quando o cursor sai da zona sensvel (link ou imagem).
function mensagem()
{
alert("Voc esta utilizando o onmouseout");
}
</script>

41

</head>
<body>
<a href="#" onmouseout="mensagem()"> Passe o mouse </a>
</body>
7.4.6 onfocus
O onfocus quando um objeto se torna ativo, isto , sempre que ativamos uma
janela ou um campo de texto. Os objetos podem tornar-se ativos com o clique do
mouse ou com o uso da tecla "Tab".
function mensagem()
{
alert("Isto o onfocus");
}
</script>
</head>
<body>
<form name="form1" id="form1">
Nome: <input type="text" name="texto1" id="texto1" size="20"
onfocus="mensagem()"/>
</form>
</body>
7.4.7 onblur
O onblur executa-se quando por exemplo um campo de texto de um formulrio
perde o foco. Isto acontea quando o usurio desativa o campo de texto clicando
fora dele ou utilizando a tecla "Tab".
Se depois de clicar e/ou escrever na rea de texto, clica-se fora do documento,
produza-se o evento blur.
function mensagem()
{
alert("Isto o onblur");
}
</script>
</head>
<body>
Nome: <input type="text" name="texto1" id="texto1" size="20"
onblur="mensagem()"/>
</form>

42

7.4.8 onchange
O onchange bastante semelhante ao onblur, mas com uma pequena diferena.
No s a rea de texto deve ter perdido o foco, mas tambm o seu contedo deve
ter sido alterado pelo usurio.
function mensagem()
{
alert("Isto o onchange");
}
</script>
</head>
<body>
Nome: <input type="text" name="texto1" id="texto1" size="20" value="Digite
seu nome aqui" onchange="mensagem()"/>
</form>
</body>
7.4.9 onselect
O onselect executa-se quando o usurio selecionou toda ou parte de um texto num
campo de texto.
function mensagem()
{
alert("Isto o onselect");
}
</script>
</head>
<body>
Nome: <input type="text" name="texto1" id="texto1" size="30" value="tenta
selecionar este texto" onselect="mensagem()"/>
</form>


43

Unidade 8 Conhecendo Objects DOM
8.1 Introduo a DOM:
O W3C (World Wide Web Consortium) desenvolveu o padro DOM para
padronizar a forma de acesso a XML e suas estruturas e como os browsers e as
aplicaes da Web manipulam e interagem com as pginas da Web. Todos os
browsers modernos implementam estes padres. Apesar de essas implementaes
serem geralmente incompletas, elas so suficientes para que possamos programar
quase tudo numa forma que funciona em todos os browsers dominantes.
8.2 O que HTML DOM?
Dom significa Document Object Model.
E HTML DOM Document Object Model para HTML.
O HTML DOM define objetos padres para HTML, e para acessar componentes
padres das estruturas do HTML representadas como marcaes.
8.3 Quando devemos usar Javascript
A DOM HTML uma plataforma e linguagem independente, pode ser usada com
varias linguagens de programao como Java, Javascript, e Vbscript. Este mdulo
trata o uso de DOM com Javascript.
8.4 As divises de DOM
DOM esta dividida em trs partes:
DOM
XML DOM
(X)HTML DOM
8.5 Alterar contedo com HTML DOM
Este exemplo de script mostra como pode ser alterado, o atributo background para
cor amarela com JAVASCRIPT e DOM.


44

<head>
<title>Troca cor de fundo</title>
</head>
<body>
<input type="button" onclick="document.body.bgColor='yellow'" value="Amarelo" />
<input type="button" onclick="document.body.bgColor='blue'" value="Azul" />
<input type="button" onclick="document.body.bgColor='white'" value="Branco" />
<input type="button" onclick="document.body.bgColor='red'" value="Vermelho" />
</body>
</html>
8.6 Document Objects
HTML DOM define documentos HTML como uma coleo de Objetos. O Objeto
document, o pai de todos os outros objetos de um documento HTML. O
Objeto document.body, representa o elemento <body> em um documento
HTML. O objeto document, o pai de body, por isso devemos sempre acessar
body pelo pai.
Exemplo:
document.body
8.7 Propriedades do objeto body
Objeto document tem vrias propriedades, tambm chamado de atributos. A
propriedade document.body.bgColor define a cor de fundo de corpo de um
documento HTML, como visto no exemplo anterior, onde definiu a cor de fundo
como amarelo.
Exemplo de utilizao: body.nomePropriedade
atributos Descrio
accessKey Seta ou retorna o comando chave para acessar o comando
chave do objeto body
aLink Seta ou retorna a cor dos links ativados no documento html.
background Seta ou retorna a imagem que ficara no plano de fundo do
documento Html

45

bgColor Seta ou retorna a cor de fundo do documento HTML
id Seta ou retorna o id do objeto Body (no IE 4 este atributo
read-only)
link Seta a cor dos links no documento html
text Seta ou retorna o cor dos textos no documento HTML
vLink Seta ou retorna a cor dos links visitados no documento HTML
8.8 Objeto Form
Form usado para o usurio inserir informaes no documento HTML. Todas as
vezes que se deseja inserir informaes de input, a utilizao da TAG form
obrigatria. Podemos utilizar elementos form com text fields, radio buttons,
checkbox e listas de seleo. O contedo inserido normalmente postado para o
servidor para processar as informaes.
8.8.1 Atributos do Form

atributos descrio
Action Seta ou retorna a url para onde vai ser submetido o FORM
Encoding Seta ou retorna o MIME encoding para o Form
Enctype Seta ou retorna o MIME encoding para o Form
Id Seta ou retorna o id do objeto Body
Length Seta ou Retorna o numero de elementos de um form
Method Seta ou retorna a forma em que vai ser submetido o form ("get"
ou "post")
Name Seta ou retorna o nome do form
tabIndex Seta ou retorna o ndice que foi definido o ordem de tabulao
para o form
Target Seta ou retorna o alvo em que o response vai processar apos a

46

submisso, normalmente um frame ou iframe.
8.8.2 Mtodos de um FORM
Mtodo Descrio
reset() Coloca o valor inicial nos elementos do form
submit() Submete o form
8.8.3 Eventos de um form

Event Description
onReset Executa quando o evento reset ocorrer
onSubmit Executa quando o evento submit ocorrer
8.8.4 Elements de um FORM
Um form constitudo de vrios objetos para interagir um usurio, neste caso
DOM disponibiliza um vetor de elementos. Para facilitar na validao dos objetos.
Exemplo:

function validaIdade(){
if(document.forms[0].elements[0].value < 0)
{
alert("Digite a idade vlida");
}
}
</script>
</head>
<body>
<form name="Form1">
Idade: <input type="text" name="idade" size="20" /><br />
<input type="button" value="Entrar" onclick="validaIdade()" /><br />
</form>
</body>

47

Esta funo valida o primeiro campo, do primeiro form do documento HTML.

Colees descrio
elements[] Retorna um array contendo cada elemento de um FORM
8.9 Mtodo getElementById
Este mtodo retorna qualquer objeto que foi encontrado em toda rvore no
documento, com o ID correspondente (como DIVs, Tabelas, etc). Ele pode ser
usado em qualquer posio dos nodos da rvore de objetos da API DOM.
A melhor forma de localizar objetos de formulrio utilizando seu caminho
completo, como document.nomeFormulario.nomeCampo.value.
Confira os Exemplos:

function Formulario()
{
valor1 = document.form1.telefone.value;
alert(valor1);
}
function changeColor(newColor)
{
var elem = document.getElementById("para1");
elem.style.color = newColor;
}
</script>
</head>
<body>
<form name="form1">
Telefone: <input type="text" name="telefone" size="20" /><br />
<input type="button" value="Entrar" onclick="Formulario();" /><br />
<br /><hr />
<p id="para1">Alfamdia</p>
<button onclick="changeColor('blue');">Azul</button>
<button onclick="changeColor('red');">Vermelho</button>
</form>


48

Unidade 9
Manipulando forms com DOM
9.1 Tutorial
Para tirarmos o mximo de proveito dos recursos da linguagem Javascript
devemos saber como a linguagem interage com as pginas HTML. O Javascript
tem acesso a diversos objetos disponveis em uma pgina HTML, visto que o
prprio cdigo Javascript colocado dentro da pgina HTML.
O Javascript consegue acessar os elementos da pgina HTML de forma
hierrquica, ou seja, temos um objeto chamado document que acessvel a
qualquer script colocado na pgina. A partir do objeto document, possvel
acessar todos os elementos das pginas, desde os frames at os prprios elementos
de um formulrio contido dentro da pgina.
Abaixo podemos ver um exemplo de como funciona esta hierarquia.

A partir do objeto document podemos ter acesso a quaisquer elementos contidos
dentro da pgina HTML, como, por exemplo, uma caixa de texto de um
formulrio.
O prprio objeto document possui uma srie de propriedades e mtodos que
podem ser utilizadas pelo Javascript para interagir ou modificar a aparncia do
documento.
Alm de poder visualizar as informaes referentes ao documento, o Javascript
ainda pode interagir com diversos elementos contidos no HTML. Tomemos como
exemplo o HTML abaixo:

function populaImagens()
{
alert("Note que somente a primeira imagem est carregada!");
document.images[1].src = document.images[0].src
document
Forms[]
Formulrios
HTML)
Frames[]
Frames
Elementos[]
Elementos

49

document.images[2].src = document.images[0].src;
document.images[1].width = document.images[0].width;
document.images[2].width = document.images[0].width;
alert("Agora as imagens esto carregadas!");
}
</script>
</head>
<body>
<img src="mmc.jpg" width="150" />
<img />
<img />
<br>
<input type="button" value="Carregar Imagens" onClick="populaImagens();" />
</body>

Como podemos ver o HTML possui trs elementos do tipo img, que representam
imagens dentro do documento. Tambm podemos notar que somente a primeira
imagem possui a propriedade src definida. Atravs do Javascript, podemos
perfeitamente acessar a coleo de imagens de um documento atravs da
propriedade images. A propriedade images contm uma coleo de todas as
imagens disponveis dentro de um documento. No script acima, vemos um
exemplo onde utilizamos a propriedade src e width da primeira imagem para
carregar as demais imagens do document.
Alm de poder acessar as imagens de um documento, podemos tambm acessar a
coleo de links disponveis. O objeto document possui acesso a coleo de links
disponveis na pgina atravs da propriedade links. Atravs desta propriedade
podemos acessar e at modificar cada um dos links da pgina. Para isso, o
elemento href tem que estar definido no HTML.
Atravs de um bloco de javascript podemos perfeitamente alterar as caractersticas
dos links disponveis na pgina, acessando a propriedade links do objeto
document. Ao acessar cada um dos links podemos perfeitamente alterar o
caminho para o qual o link est apontando, bem como o texto contido dentro do
link. O exemplo abaixo mostra como alterar os links.

function populaLinks()
{
var sAlunos = new Array();
sAlunos[0] = "Andre";
sAlunos[1] = "Joao";
sAlunos[2] = "Maria";
sAlunos[3] = "Jose";
sAlunos[4] = "Carlos";
sAlunos.sort();
for(nCount=0;nCount<sAlunos.length;nCount++)
{

50

document.links[nCount].href = "http://www.empresa.com.br/alunos/" +
sAlunos[nCount];
document.links[nCount].innerHTML = sAlunos[nCount] + "<br />";
}
}
</script>
</head>
<body>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<input type="button" value="Carregar Links" onClick="populaLinks();" />
</body>
Alm de alterar propriedades dos elementos podemos criar contedo dinmico no
documento atravs do JavaScript. Isto pode ser obtido atravs da utilizao do
mtodo write do objeto document. Com o mtodo write podemos escrever
contedo dentro do HTML no mesmo ponto onde se encontra o cdigo script de
forma dinmica. Um exemplo de implementao do mtodo write pode ser
observado abaixo.
function write()
{
var sAlunos = new Array();
sAlunos[0] = "Andre";
sAlunos[1] = "Joao";
sAlunos[2] = "Maria";
sAlunos[3] = "Jose";
sAlunos[4] = "Carlos";
sAlunos.sort();
for(nCount=0;nCount<sAlunos.length;nCount++)
{
document.write(sAlunos[nCount] + "<br>");
}
}
</script>
</head>
<body onload="write();">
</body>
9.2 Extraindo informaes dos formulrios HTML
Agora que j sabemos como mapear os eventos dos elementos de um formulrio,
iremos buscar informaes deste formulrio, a fim de realizar validaes e
alteraes nas caractersticas deste formulrio.
A extrao de dados de um formulrio comea pela busca da referencia do
formulrio que contm o elemento com os dados que queremos utilizar. Esta

51

referencia ao formulrio pode ser feita de diversas formas, que vo variar de
acordo com o formato do formulrio
9.2.1 Buscando informaes de formulrios no nomeados
A maior parte dos elementos em um formulrio HTML possui um atributo
chamado NAME, que utilizado para buscar a referencia a este elemento dentro
de um cdigo de script ou no destino final da pgina (web server). O prprio
formulrio HTML, na maioria dos casos, possui um nome associado.
O problema que o atributo nome no um atributo obrigatrio, nem para os
elementos do formulrio, nem para o formulrio em si. No caso de o formulrio
no possuir um nome, devemos acess-lo atravs da coleo forms, contida no
objeto document. Cada formulrio possui como propriedades cada um dos
elementos contidos dentro dele. Se um formulrio contm um elemento caixa de
texto, com o nome de txtNome, para o cdigo javascript este formulrio ter uma
propriedade chamada txtNome, que representara o elemento caixa de texto do
formulrio.
Tomemos como exemplo o HTML abaixo:

<head>
</head>
<body>
<form>
Nome: <input type="text" name="txtNome" /><br />
<input type="button" name="btnok" value="clique aqui !"
onclick="btnOk_click()" />
</form>
Como este formulrio no possui um nome associado, precisamos acess-lo
atravs da coleo forms do objeto document. A coleo forms possui um
conjunto completo com todos os formulrios disponveis dentro do document
HTML. Como s temos um formulrio dentro de nosso documento, o formulrio
que queremos o formulrio de ndice 0, conforme apresentado no bloco de script
abaixo:
function btnOk_click()
{
alert(document.forms[0].txtNome.value);
}
</script>


52

O cdigo de script acima busca uma referncia a caixa de texto contida dentro do
formulrio do documento e exibe a propriedade value da mesma, que representa o
contedo textual da caixa de texto.
9.2.2 Buscando informaes de formulrios nomeados
Quando os formulrios so nomeados, o processo de busca de informaes fica
mais fcil, pois possvel referenciar diretamente o formulrio que contm o
controle que queremos buscar as informaes. Se utilizarmos o mesmo HTML
utilizado anteriormente, porm com um formulrio com a propriedade name,
podemos alterar nosso cdigo de script para utilizar este nome associado ao
formulrio.
<head>
</head>
<body>
<form name="frmDados">
Nome: <input type="text" name="txtNome" /><br />
<input type="button" name="btnok" value="clique aqui !"
onclick="btnOk_click()" />
</form>
</body>
</html>
Como temos a propriedade NAME associado ao FORM, podemos utilizar nosso
script desta forma:

<script language=Javascript>
function btnOk_click()
{
alert(document.frmDados.txtNome.value);
}
</script>

9.3 Validando informaes no formulrio
Agora que sabemos como buscar as informaes do formulrio HTML, devemos
verificar como extrair as informaes dos elementos do formulrio. Para isso,
devemos conhecer um pouco mais dos principais tipos de elementos disponveis
nos formulrios HTML

53

9.3.1 Validando informaes de caixas de texto
As caixas de texto so os elementos mais simples de um formulrio HTML,
porm so tambm os elementos mais flexveis. As caixas de texto possuem como
propriedade principal a propriedade value, que devolve o contedo da caixa de
texto. A propriedade value nada mais do que um objeto String do JavaScript que
j vimos anteriormente, contendo todas as suas propriedades e caractersticas.
No exemplo abaixo podemos ver um formulrio que solicita informaes de
usurio e senha em um formulrio HTML.
<head>
</head>
<body>
<form name="frmDados" action="">
usurio: <input type="text" name="txtUsuario" /><br />
senha: <input type="password" name="txtSenha" /><br /><br />
<input type="button" name="btnok" value="efetuar logon"
onclick="btnok_click()" />
</form>
</body></html>

Para criarmos uma funo que faa a validao deste formulrio, basta criarmos o
mapeamento para o evento onclick do boto efetuar logon e apenas submeter o
formulrio no caso de as informaes solicitadas estarem corretas. O cdigo de
script abaixo realiza esta validao.

function btnok_click()
{
if(document.frmDados.txtUsuario.value.length == 0)
{
alert("Informe o usurio !");
document.frmDados.txtUsuario.focus();
return;
}
if(document.frmDados.txtSenha.value.length < 6)
{
alert("A senha deve ter no mnimo 6 dgitos !");
document.frmDados.txtSenha.focus();
return;
}
document.frmDados.submit();
}
</script>

54

No bloco de script acima, utilizamos a propriedade value do objeto txtUsuario
para verificarmos se o campo est ou no preenchido. Note que estamos
utilizando a propriedade length para fazermos esta verificao. A propriedade
length pertence ao objeto String, que representa o contedo textual da caixa de
texto.
Note que caso o usurio no tenha entrado com as informaes no campo usurio,
apresentado um alerta ao usurio e o foco do campo posicionado no campo
que est com erro no formulrio. O foco trocado atravs do mtodo focus, que
est presente em todos os controles de interao com usurio dos formulrios
HTML. Aps a troca do foco, chamado o comando return, para que a execuo
da funo seja interrompida.
A validao do controle de senha feita de forma semelhante a validao do
campo de usurio, porm neste caso estamos verificando se o usurio digitou no
mnimo 6 dgitos para a senha.
Caso as condies estejam satisfeitas, o formulrio HTML submetido para o
WebServer.
9.3.2 Validando listas de seleo simples e mltipla (Combo e
ListBox)
As listas de seleo simples mltiplas possuem o mesmo comportamento dentro
de um formulrio HTML. Em ambos os casos possvel verificar se o usurio
selecionou algum item na lista ou se est com algum item da lista selecionado.
Tomemos o HTML abaixo como exemplo

<head>
</head>
<body>
<form name="frmDados" action="">
pesquisa vagas<br />
<br />
cidade:
<select size=1 name="cmbCidade">
<option value="">-- selecione a cidade --</option>
<option value="1">Belo Horizonte</option>
<option value="2">Porto Alegre</option>
<option value="3">Rio de Janeiro</option>
<option value="4">So Paulo</option>
</select><br />
<br />

55

cargos:<br />
<select size="5" name="lstCargo" multiple="multiple">
<option value="1">Analista de sistemas</option>
<option value="2">DBA</option>
<option value="3">Programador</option>
<option value="4">Programador/Analista</option>
<option value="5">Web-designer</option>
</select><br /><br />
<input type="button" name="btnok" value="pesquisar" onclick="btnok_click()">
</form>
</body>
</html>

Neste HTML temos uma caixa de seleo simples e uma caixa de seleo
mltipla. Para testarmos se o usurio selecionou ou no as informaes destes
controles, utilizaremos o cdigo de script a seguir.

function btnok_click()
{
if(document.frmDados.cmbCidade.options[0].selected==true)
{
alert("Selecione a cidade !");
document.frmDados.cmbCidade.focus();
return;
}

if(document.frmDados.lstCargo.value == "")
{
alert("Selecione o cargo !");
document.frmDados.lstCargo.value = "";
return;
}

}
</script>

Para a validao do primeiro campo utilizamos a coleo options do controle
cmbCidade. A coleo options contm uma referencia a cada um dos itens
existentes dentro da caixa de seleo. Os itens podem ser acessados da mesma
forma que um array simples em JavaScript. Cada item das caixas de seleo,
representados na coleo options, possuem uma srie de propriedades, dentre elas
a propriedade selected. A propriedade selected devolve um valor verdadeiro caso
o item esteja selecionado, e falso caso no esteja selecionado. No caso de caixas
de seleo mltipla, possvel testar se mais de um item foi selecionado atravs
da coleo options, testando cada um dos valores da propriedade selected de cada
item.

56

document.frmDados.lstCargo.options[0].value;
document.frmDados.lstCargo.options[0].innerHTML;
document.frmDados.lstCargo.options[0].selected;

As caixas de seleo tambm possuem, assim como as caixas de texto, a
propriedade value, que indica o valor do item selecionado. No caso da segunda
caixa de seleo, estamos fazendo um teste para verificar se o valor da caixa de
seleo branco ou no, o que indica que o usurio no selecionou nenhum item.
Caso as condies sejam satisfeitas, o formulrio submetido ao servidor para o
processamento.
9.3.3 Validando caixas de escolha simples e mltipla
(RadioButton e CheckBox)
Para finalizarmos o mdulo de validao de dados em formulrios HTML,
devemos verificar a validao das caixas de escolha simples e mltipla. Estas
caixas permitem ao usurio selecionar itens de forma mltipla ou simples em um
formulrio.
Tomemos o HTML que segue como exemplo:

<html>
<head>
</head>
<body>
<form name="frmDados">
Selecione o grau de escolaridade:<br>
<input type="radio" name="optEscolaridade" value="1" />Analfabeto<br />
<input type="radio" name="optEscolaridade" value="2" />1 grau<br />
<input type="radio" name="optEscolaridade" value="3" />2 grau<br />
<input type="radio" name="optEscolaridade" value="4" />Superior incompleto<br />
<input type="radio" name="optEscolaridade" value="5" />Superior completo<br />
<input type="radio" name="optEscolaridade" value="6" />Ps, mestrado<br />
<br />
<input type="checkbox" name="chkAtividadefisica" value="a" />Pratica atividade
fsica
<input type="checkbox" name="chkFumante" value="f" />Fumante
<br /><br />
<input type=button value="enviar" onclick="Validar()" />
</form>
</body>
</html>

Para validarmos o formulrio HTML acima utilizaremos a funo Validar, que
est mapeada para o clique do boto Enviar, apresentada no bloco de script abaixo

57

function Validar()
{
var nCount;
var bSelecionou = false;
for(nCount=0; nCount<document.frmDados.optEscolaridade.length; nCount++)
{
if(document.frmDados.optEscolaridade[nCount].checked)
{
bSelecionou = true;
break;
}
}
if(bSelecionou == false)
{
alert("Selecione o grau de escolaridade !");
return;
}
if(document.frmDados.optEscolaridade.value=="")
{
alert("Selecione o grau de escolaridade !");
return;
}
if(document.frmDados.chkFumante.checked == true)
{
alert("O Ministrio da sade adverte. Fumar faz mal a sade !");
}
}
</script>
Note que para validarmos ambos os controles estamos utilizando a propriedade
checked. A propriedade checked utilizada para verificar se um controle de
seleo est marcado ou desmarcado, e serve tanto para radiobuttons como para
checkbox.
Na primeira validao, note que temos um conjunto de options com o mesmo
nome. Isto faz com que o script interprete os controles como um array de
controles, nos obrigando a informar o ndice de cada um dos controles antes de
acess-los. Criamos uma varivel bSelecionou para verificarmos se o usurio
selecionou pelo menos um option button. Caso ele encontre um option button com
a propriedade checked igual a true, a varivel bSelecionou ser definida para true,
validando o formulrio.
Para os outros dois campos, apenas estamos testando a propriedade checked para
dar um alerta para o usurio.

58

9.3.4 Controle de elementos do Textearea
Os elementos textarea so os campos que permitem introduzir vrias linhas de
texto.
Vamos ver um exemplo a seguir que apresenta um formulrio que tem um
textarea e um boto. Ao apertar o boto conta-se o nmero de caracteres e coloca-
se em um campo de texto.
Para acessar ao nmero de caracteres fazemos a partir da propriedade value do
objeto textarea. Como value contm um string podemos acessar propriedade
length que tm todos os strings para averiguar sua longitude.
function conta()
{
numCaracteres = document.form1.comentario.value.length ;
document.form1.numCaracteres.value = numCaracteres ;
}

function limpa(campo)
{
document.getElementById(campo).value = "";
document.getElementById(campo).focus();
}
</script>
</head>
<body>
<form name="form1">
<textarea name="comentario" id="comentario" cols="40" rows="3"
onfocus="limpa('comentario')">Este o texto padro</textarea>
<br />
<br />
Nmero de caracteres <input type="Text" name="numCaracteres" id="numCaracteres"
size="4" />
<br />
<input type="button" value="Conta caracteres" onclick="conta()" />
</form>
9.3.5 Criando uma funo para mascaras de campos
O contedo desenvolvido abaixo para demonstrar a aplicao de alguns
comandos em javascript, desenvolva o script e veja o resultado.

/*----------------------------------------------------------------------
Formatao para qualquer mascara
----------------------------------------------------------------------*/
function formatar(src, mask)
{
var i = src.value.length;

59

var saida = mask.substring(0,1);
var texto = mask.substring(i)
if (texto.substring(0,1) != saida)
{
src.value += texto.substring(0,1);
}
}
</script>
</head>
<body>
Data: <input type="text" name="data" size="10" maxlength="10"
OnKeyPress="formatar(this, '##/##/####')" /><br />
Hora: <input type="text" name="hora" size="5" maxlength="5"
OnKeyPress="formatar(this, '##:##')" /> <br />
CEP: <input type="text" name="cep" size="9" maxlength="9"
OnKeyPress="formatar(this, '#####-###')" /> <br />
Telefone: <input type="text" name="tel" maxlength="12" size="12"
OnKeyPress="formatar(this, '##-####-####')"/><br />
CPF: <input type="text" name="cpf" size="14" maxlength="14"
OnKeyPress="formatar(this, '###.###.###-##')"
/>
</form>
</html>
9.4 Validao com Expresses Regulares (RegEx)
Uma Expresso Regular, REGEX ou REGEXP , basicamente, uma seqncia de
Caracteres dispostos sob uma determinada regra, de modo a coincidir com um
fragmento padro de texto particular - presente em um determinado documento.
Abaixo usamos esta lgica para validao de um campo email.
Modelos de Expresses Regulares:

Testa valor String filtro utilizada
CEP /^[0-9]{5}-[0-9]{3}$/
CPF /^([0-9]{3}\.){2}[0-9]{3}-[0-9]{2}$/
Datas at 2099 formato
(YYYYMMDD)
/^20[0-9][0-9]([012][0-9]|[3][01])([0][0-
9]|[1][012])$/
MacAddress /^(([0-9a-f]{2}):){5}([0-9a-f]{2})$/

60

IP 1]?[0-9]{1,2}|2([0-4][0-9]|5[0-5]))\.){3}([1]?[0-
9]{1,2}|2([0-4][0-9]|5[0-5]))$/
Email /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-
zA-Z0-9]{2,4})+$/
HTML (substitui tags por nada) <[^>]*>,

function checkMail()
{
// atribui a varivel x o valor do campo email do formulrio
var x = document.forms[0].email.value;
/* cria uma varivel com o filtro para fazer a pesquisa na string (neste caso
para validar um emaill) */
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-
9]{2,4})+$/;
//Faz consistncia com o mtodo test da varivel x
if (filter.test(x)) alert(Email vlido!');
else alert('Email invlido!');
}
9.5 Laboratrio
9.5.1 Exerccio 25
No documento HTML crie duas caixas de texto, com os nome de txtNum1 e
txtNum2
Crie um combobox permitindo que o usurio selecione a operao que deseja
realizar, entre os dois textboxes
Crie um novo boto com o nome de calcular, e mapeio o evento clique para a
funo Calcular
Declare duas variveis na funo Calcular
Na funo calcular crie um cdigo para a validao dos dois textboxes para
algarismos numricos. Caso o valor seja vlido, atribui o valor conferido para
nmero com a funo parseInt para as respectivas variveis nNum1 e nNum2
Na funo calcular, utilize o operador selecionado no combo para apresentar o
resultado ao usurio, utilizando o comando alert (dica, utilize a funo eval)
9.5.2 Exerccio 26
Crie um novo documento HTML conforme as instrues dos exerccios anteriores
Crie um novo formulrio HTML com os seguintes campos

61

Campo Tipo
txtNome TextBox
txtNumCartao TextBox
chkNovoEndereco Chechbox
txtEndereco TextBox
txtCEP TextBox

Crie um boto para a submisso do formulrio
Crie uma funo para validar o formulrio antes da submisso, que deve seguir as
seguintes regras:
- O campo txtNome obrigatrio
- O campo txtNumCartao obrigatrio e deve ser numrico
- Os campos txtEndereco e txtCEP so de preenchimento obrigatrio SOMENTE
se o usurio selecionar a caixa chkNovoEndereco
- Se o preenchimento do CEP for necessrio, ele deve ser numrico
9.5.3 Exerccio 27
Crie um novo documento HTML conforme as instrues dos exerccios anteriores
Crie um novo formulrio HTML com os seguintes campos

Campo Tipo Valores
txtNome TextBox
cmbEstadoCivil SELECT (ComboBox) Solteiro, Casado, Divorciado
txtNomeConjuje TextBox
txtNumDependentes TextBox
txtNomesDosDependentes TextBox ou TEXTAREA

Crie um boto para a submisso do formulrio

62

Crie uma funo para validar o formulrio antes da submisso, que deve seguir as
seguintes regras:
- O campo txtNome obrigatrio
- O campo txtNomeConjuje de preenchimento obrigatrio somente se a opo do
combo selecionada for Casado
- O campo txtNumDependetes deve ser numrico
- Se o valor no campo txtNumDependentes for maior que zero, o campo
txtNomesDosDependentes deve ser diferente de branco


63

Unidade 10 Objeto Window
10.1 Mtodos do objeto window
o objeto principal na hierarquia e contm as propriedades e mtodos para
controlar a janela do navegador. Dele dependem todos os demais objetos da
hierarquia. Vamos ver a lista de suas propriedades e mtodos.

Mtodo Descrio
alert(texto) Apresenta uma janela de alerta onde se pode ler o
texto que recebe por parmetro.
back() Ir uma pgina atrs no histrico de pginas
visitadas. Funciona como o boto de voltar da barra
de ferramentas. (Javascript 1.2)
blur() Tirar o foco da janela atual. (Javascript 1.1)
captureEvents(eventos) Captura os eventos que se indiquem por parmetro
(Javascript 1.2).
clearInterval() Elimina a execuo de sentenas associadas a um
intervalo indicadas com o mtodo
setInterval().(Javascript 1.2)
clearTimeout()

Elimina a execuo de sentenas associadas a um
tempo de espera indicadas com o mtodo
setTimeout().
close() Fecha a janela. (Javascript 1.1)
confirm(texto)

Mostra uma janela de confirmao e permite aceitar
ou rejeitar
find()

Mostra uma janelinha de busca. (Javascript 1.2 para
Netscape)
focus() Coloca o foco da aplicao na janela. (Javascript
1.1)
forward() Ir uma pgina adiante no histrico de pginas
visitadas. Como se clicssemos o boto de adiante
do navegador. (Javascript 1.2)
home() Ir pgina de incio o explorador que tenha
configurado. (Javascript 1.2)

64

moveBy(pixelsX, pixelsY) Move a janela do navegador os pixels que se
indicam por parmetro para a direita e para baixo.
(Javascript 1.2)
moveTo(pixelsX, pixelsY) Move a janela do navegador posio indicada nas
coordenadas que recebe por parmetro. (Javascript
1.2)
open() Abre uma janela secundria do navegador.
print()

Como se clicssemos o boto de imprimir do
navegador. (Javascript 1.2)
prompt(pergunta,valor_default) Mostra uma caixa de dilogo para pedir um dado.
Devolve o dado que se escreveu.
releaseEvents(eventos) Deixa de capturar eventos do tipo que se indique por
parmetro. (Javascript 1.2)
resizeBy(pixelslargo,pixelsAlto) Redimensiona o tamanho da janela, acrescentando
ao seu tamanho atual os valores indicados nos
parmetros. O primeiro para a altura e o segundo
para a largura. Admite valores negativos se deseja
reduzir a janela. (Javascript 1.2)
resizeTo(pixelslargo,pixelsAlto) Redimensiona a janela do navegador para que
ocupe o espao em pixels que se indica por
parmetro (Javascript 1.2)
routeEvent() Encaminha um evento pela hierarquia de eventos.
(Javascript 1.2)
scroll(pixelsX,pixelsY)

Faz um scroll da janela para a coordenada indicada
por parmetro. Este mtodo est desaconselhado,
pois agora se deveria utilizar scrollTo()(Javascript
1.1)
scrollBy(pixelsX,pixelsY) Faz um scroll do contedo da janela relativo
posio atual. (Javascript 1.2)
scrollTo(pixelsX,pixelsY) Faz um scroll da janela posio indicada pelo
parmetro. Este mtodo tem que ser utilizado ao
invs do scroll. (Javascript 1.2)

setInterval() Define um script para que seja executado
indefinidamente em cada intervalo de tempo.
(Javascript 1.2)
setTimeout(sentena,segundos) Define um script para que seja executado uma vez
depois de um tempo de espera determinado.

65

stop()
Como clicar o boto de stop da janela do navegador.
(Javascript 1.2)

Exemplo do uso de algumas funes da propriedade window:
Exemplo 01 J anela Nova: clicando num boto
Arquvio abrir_ janela.html

<body>
<input type="button" value="Abrir janela" onclick="window.open('pop-
up.html','nova','width=300,height=150,toolbar=no,location=no,directories=no,stat
us=no,menubar=no,scrollbars=no,resizable=no')" />
</body>
Arquvio pop_up.html
<body>
<input type="button" value="fechar" onclick="self.close()" />
</body>

Exemplo 02 J anela Nova: Passando o mouse em imagem
Arquvio abrir_ janela_imagem.html

function abre()
{
open('pop_up_imagem.html','imagem','width=350,height=350,toolbar=no,location
=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no');
}
</script>
</head>
<body>
<a href="#" onmouseover="abre()">
<img src="iceage.jpg" alt="ice age" width="100" border="0"/> </a>
</body>
Arquvio pop_up_imagem.html
<body>
<img src="iceage.jpg" width="350" height="330" alt="ice age" />
</body>

Exemplo 03 J anela Nova: automtica
Arquvio abrir_ janela_automatica.html

function abre()
{

66

open('pop_up_automatico.html','popup','width=350,height=350,toolbar=no,locat
ion=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no');
}
</script>
</head>
<body onload="abre()">
Janela Principal
</body>

Arquvio pop_up_automatica.html

<body onload="setTimeout('self.close();',4000)">
aguarde...
</body>

67

Unidade 11 Introduo ao DHTML
11.1 O que DHTML
Com a introduo de browsers mais avanados, e com mais recursos surgiu um
novo recurso para criao de pginas Web mais interativas, o DHTML. O
DHTML composto por um conjunto de tecnologias que permite ao
desenvolvedor Web a manipulao de diversos elementos na pgina Web. As
tecnologias necessrias para se trabalhar com o DHTML so o HTML, o CSS e o
JavaScript.
O DHTML consiste em alterar o contedo e exibio de diversos elementos da
pgina HTML de uma forma totalmente dinmica, com a utilizao de cdigos de
script. Nos prximos tpicos veremos as operaes mais comuns que podemos
fazer com o DHTML.
11.2 Trocando o layout dos elementos do HTML
Uma das caractersticas do DHTML a de alterar as caractersticas de exibio de
uma determinada pgina web de forma dinmica. Para alterar estas caractersticas,
o DHTML se utiliza do CSS, um conceito de formao de elementos nas pginas
Web introduzido a partir do Internet Explorer 4.0.
Para criarmos elementos DHTML em uma pgina HTML necessrio informar
um atributo adicional ao elemento que queremos acessar, este atributo chamado
de ID. Ao informar o ID a um elemento, ele passa a ter automaticamente uma
referncia nos cdigos de script da pgina HTML.
Cada elemento dinmico utilizado no DHTML possui algumas propriedades como
innerHTML, que setam o contedo HTML do elemento e a propriedade STYLE
que define o formato de apresentao do elemento. A propriedade style possui
uma srie de sub-propriedades que podem ser acessadas a fim de alterar o layout
do document HTML.
Para exemplificar o uso de DHTML para trocar o layout de um documento HTML
utilizaremos o HTML apresentado a seguir:

<style type="text/css">

</style>
function mostra(objeto)
{
if(document.getElementById(objeto).style.display != "none")
document.getElementById(objeto).style.display = 'none';
else
document.getElementById(objeto).style.display = '';
}
/*tudo o que CSS procura por STYLE
se (dentro do documento, div TEXTO, style CSS, parametro display NEGA o none
vai ocultar seno no recebe nada */
</script>
</head>
<body>
<div id="imagem" onmouseover="mostra('texto')" onmouseout="mostra('texto')">
<img src="flores.jpg" alt="Foto 01" width="130" height="97" />
</div>
<div id="texto" style="display:none;">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis tempus
vulputate nisi. Vivamus ultrices porta eros. Sed vitae purus sit amet nisi
ornare cursus. Nam eu nisi. Quisque at nulla a ligula pretium mattis. Nullam
sem. Donec cursus tristique tellus. Vestibulum laoreet, turpis et vulputate
ultrices, ligula elit hendrerit sapien, sollicitudin molestie leo leo accumsan
dui. Quisque venenatis urna in enim. Aliquam erat volutpat. Donec nec quam quis
elit posuere commodo. Curabitur justo nulla, suscipit vitae, elementum id,
molestie ac, dolor. Aliquam id arcu. Praesent ac metus. Fusce tortor enim,
molestie id, iaculis sed, elementum eget, dolor. </p>
</div> </body>

No exemplo, ao passar o mouse sobre uma imagem, uma div (anteriormente
oculta) aparece. Ao retirar o mouse, a div volta a ficar oculta.
11.3 Escondendo e mostrando elementos dinamicamente
Atravs do uso de DHTML tambm possvel esconder e mostrar elementos do
documento HTML dinamicamente. No HTML abaixo temos o exemplo de um
menu desenvolvido utilizando elementos <A HREF> e <DIV>.

69

<head>
</head>
<body>
<a href="javascript:MostraMenu(subMenu1)">Menu 1</a><br />
<div id="subMenu1" style="display: none;">
   <A HREF="#">Sub Menu 1</a><br />
</div>
<a href="javascript:MostraMenu(subMenu2)">Menu 2</a><br>
<div id=subMenu2 style="display: none;">
   <a href="#">Sub Menu 1</a><br />
</div>
<A HREF="javascript:MostraMenu(subMenu3)">Menu 3</a><br />
<div id=subMenu3 style="display: none;">
</div>
</body>
</html>

Note que os links de cada um dos menus apontam para uma funo JavaScript
chamada MostraMenu. Para chamarmos funes javascript atravs de links, basta
informarmos a instruo javascript: na propriedade HREF do link e especificar a
funo que desejamos chamar. A funo chamada com um parmetro, que
representa o menu que desejamos mostrar ou esconder.
Os submenus ficam inicialmente escondidos, utilizando-se a propriedade display
de cada um dos DIV utilizados para mont-los.
O cdigo de Script a seguir demonstra como a funo MostraMenu gera os menus
dinamicamente e faz com que os links fiquem visveis ou invisveis conforme os
cliques do usurio.

function MostraMenu(divSubMenu)
{
if(divSubMenu.style.display=="none")

70

divSubMenu.style.display="inline";
else
divSubMenu.style.display="none";
}
</script>

Note que o cdigo de script utilizado para mostrar e esconder os menus
extramente simples. Utilizando o menu div do submenu recebido como
parmetro, a funo verifica se o submenu est sendo mostrado ou no,
verificando a propriedade style.display. A propriedade display indica a
visibilidade ou no de um elemento HTML, e pode ser utilizado por qualquer
elemento que contenha uma propriedade ID. Ao verificar a visibilidade do
submenu, a funo esconde ou mostra o menu conforme o estado atual do mesmo.

Introducao Javascript

Caricato da

Informazioni sul documento

Descrizione originale:

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Introducao Javascript

Caricato da

Copyright:

Formati disponibili

Alfamdia Programao:

Potrebbero piacerti anche