Introdução à Linguagem JavaScript

Rodolfo Riyoei Goya

Introdução a linguagem JavaScript

1 Índice
1 Índice .................................................................................................................... 2
2 Introdução ............................................................................................................. 4
2.1 Pré-requisitos ................................................................................................ 4
2.2 Como funciona um script em JavaScript ...................................................... 4
2.3 Um script simples em JavaScript.................................................................. 5
3 Tipos de Dados Básicos ........................................................................................ 7
3.1 Números (Number) ....................................................................................... 7
3.2 String............................................................................................................. 7
3.3 Caracteres de Controle Especiais.................................................................. 7
3.4 Boolean ......................................................................................................... 7
3.5 Criando Variáveis ......................................................................................... 8
4 Comandos ............................................................................................................. 9
4.1 Operadores Aritméticos ................................................................................ 9
4.2 Atribuição ..................................................................................................... 9
4.3 Atribuição Aritmética ................................................................................... 9
4.4 Incremento e decremento............................................................................ 10
4.5 Operador para troca de sinal ....................................................................... 10
4.6 Operadores ‘+’ e ‘+=’ aplicados a String.................................................... 11
4.7 Operadores Relacionais .............................................................................. 12
4.8 Operadores Lógicos .................................................................................... 13
4.9 Precedência de operadores.......................................................................... 14
5 Entrada/Saída em JavaScript .............................................................................. 15
5.1 Função write ............................................................................................... 15
5.2 Mensagens .................................................................................................. 16
5.2.1 Alert .................................................................................................... 16
5.2.2 Confirm ............................................................................................... 17
5.2.3 Prompt................................................................................................. 18
6 Comandos de Controle........................................................................................ 19
6.1 Comando if ................................................................................................. 20
6.2 Comando if-else .......................................................................................... 21
6.3 Comando switch-case ................................................................................. 22
6.4 Atribuição Condicional............................................................................... 24
6.5 Comando for ............................................................................................... 25
6.6 Comando while ........................................................................................... 29
6.7 Comando do-while...................................................................................... 30
6.8 Comandos break e continue ........................................................................ 31
7 Funções ............................................................................................................... 32
7.1 Variáveis em funções.................................................................................. 32
7.2 Funções sem parâmetros ............................................................................. 33
7.3 Funções que retornam valores .................................................................... 34
7.4 Funções Intrínsecas..................................................................................... 35
7.5 Funções Matemáticas.................................................................................. 36
7.6 Funções de manipulação de Strings............................................................ 37
8 Classes, Objetos e Arrays em Javascript ............................................................ 38
8.1 Criando Objetos .......................................................................................... 38
8.2 Criando Funções para Classes .................................................................... 39
8.3 Criando Atributos Dinamicamente ............................................................. 40
8.4 Manipulando Arrays ................................................................................... 41

Autor: Rodolfo Riyoei Goya.

2 de 61
Introdução a linguagem JavaScript

8.5 Objeto para Manipulação de Datas ............................................................. 43

9 Interface com o Usuário...................................................................................... 45
9.1 Objeto Input: Text....................................................................................... 45
9.2 Objeto Input Password................................................................................ 46
9.3 Objeto Input: Hidden .................................................................................. 46
9.4 Objeto Input: Checkbox.............................................................................. 47
9.5 Objeto Input: Radio .................................................................................... 48
9.6 Objeto Input: Button ................................................................................... 49
9.7 Objeto Input: Reset ..................................................................................... 49
9.8 Objeto Input: Submit .................................................................................. 50
9.9 Objeto TextArea ......................................................................................... 51
9.10 Objeto Select............................................................................................... 52
9.11 Objeto Link ................................................................................................. 54
10 Eventos............................................................................................................ 55
11 Focando um Objeto......................................................................................... 56
12 Classe Timer ................................................................................................... 58
13 Abrindo Novas Janelas ................................................................................... 60
13.1 Abrindo a Janela ......................................................................................... 60
13.2 Abrindo um Documento ............................................................................. 61
13.3 Escrevendo no Documento ......................................................................... 61
13.4 Fechando a Janela ....................................................................................... 61
13.5 Fechando o Documento .............................................................................. 61
13.6 Propriedades de um Documento ................................................................. 61

Autor: Rodolfo Riyoei Goya.

3 de 61
 Introdução a linguagem JavaScript

2 Introdução
Este texto se destina a aqueles que desejam aprender o uso de JavaScript.

O JavaScript é uma linguagem criada pela Netscape para introduzir capacidade de

processamento dentro da linguagem HTML. Por ser baseado em Java é, em muitos
aspectos, uma boa linguagem para o aprendizado inicial de Java.

2.1 Pré-requisitos

Nenhum pré-requisito é necessário para acompanhar este texto. É recomendável que

o leitor tenha algum conhecimento de HTML. Noções básicas de CGI, particularmente
sobre a construção de formulários, e conhecimentos de Programação Orientada a
Objetos podem ser habilidades adicionais desejáveis para o melhor proveito deste
material.

2.2 Como funciona um script em JavaScript

Um script em JavaScript é um programa que pode ser introduzido em uma página

HTML, o que permite que seja executado através da Internet. Um script pode ser
configurado para ser executado do lado do servidor (no provedor onde a página está –
neste caso, é dito “server-side script”) ou do lado do cliente (no programa navegador –
“browser” – de quem está acessando a página que contém o script – neste caso, é dito
“client-side script”).

Neste texto, serão abordados, apenas, os conceitos ligados a scripts do lado do

cliente. Nestes scripts, o programa é transmitido através da Internet, do provedor onde
está armazenado para o programa de navegação (por exemplo, o Netscape
Communicator ou Microsoft Internet Explorer) do usuário e executado por este
programa.

Scripts são interpretados, ou seja, são executados diretamente na linguagem em que

são escritos (diferente do que ocorre com as linguagens compiladas, em que o programa
é traduzido para a linguagem nativa do processador onde será executado – linguagem de
máquina). Por esta razão, necessita-se apenas de um editor de texto e de um programa
de navegação para se aprender e desenvolver programas escritos em JavaScript (como o
Notepad e o Internet Explorer – existentes em qualquer computador com o Microsoft
Windows instalado).

Programas são produzidos pela criação de variáveis (definição dos dados) e pela
aplicação de comandos sobre elas (produção do algoritmo). Comandos podem ser
agrupados estruturados para formar blocos de comandos denominados de funções. A
linguagem oferece um conjunto de funções já elaboradas (biblioteca) que simplifica a
tarefa de quem está escrevendo programas.

Autor: Rodolfo Riyoei Goya.

4 de 61
 Introdução a linguagem JavaScript

2.3 Um script simples em JavaScript

Abaixo, é exibido um script em JavaScript bastante simples:

<HTML>
<BODY>
<SCRIPT LANGUAGE=JAVASCRIPT>

/* Primeiro programa em JavaScript.

Autor: Rodolfo Goya */

[Link]( "Alo Mundo" ); // Escreve alo mundo.

</SCRIPT>
</BODY>
</HTML>

Para poder-se descrever o que cada comando faz, vamos numerar as linhas (em um
script em JavaScript não se deve numerar as linhas).

1 <HTML>
2 <BODY>
3 <SCRIPT LANGUAGE=JAVASCRIPT>
4
5 /* Primeiro programa em JavaScript.
6 Autor: Rodolfo Goya */
7
8 [Link]( "Alo Mundo" ); // Escreve alo mundo.
9
10 </SCRIPT>
11 </BODY>
12 </HTML>

Todo script em JavaScript é um programa inserido em uma página HTML. Por isso,
existem os comandos das linhas 1, 2, 11 e 12. O comando <HTML> (linha 1) diz que o
arquivo tem conteúdo em HTML e marca o início dos comandos. O comando
</HTML> (linha 12) delimita o final dos comandos HTML.

Um arquivo HTML tem duas seções, uma denominada HEAD, delimitada entre os
comandos <HEAD> e </HEAD> (inexistentes neste exemplo), e uma denominada
BODY, delimitada entre os comandos <BODY> (linha 2) e </BODY> (linha 11). O
Script deste exemplo está todo na seção BODY.

Autor: Rodolfo Riyoei Goya.

5 de 61
 Introdução a linguagem JavaScript

Um script em JavaScript fica delimitado entre os comandos <SCRIPT> (linha 3) e

</SCRIPT> (linha 10). A especificação LANGUAGE=JAVASCRIPT (linha 10) diz
qual a linguagem usada no script. Este programa só tem um comando que faz algo, no
caso o comando [Link]( "Alo Mundo" ); (linha 8) que imprime a
mensagem:

Alo Mundo

Na tela do programa navegador (note-se não foram impressas as aspas). O comando

usa a função write do objeto document. A função recebe parâmetros especificados entre
parênteses – no caso uma cadeia de caracteres entre aspas. Estes conceitos serão
abordados detalhadamente mais adiante.

O comando é delimitado com um ponto e vírgula no final (;). Este delimitador é

opcional em JavaScript, porém é recomendável o seu uso para melhorar a clareza do
programa.

O programa também contém alguns comentários, ou seja, textos que são ignorados
pelo computador inseridos para tornar mais claro para o programador o significado dos
comandos usados no programa.

Pode-se inserir um comentário de duas maneiras:

a) // Linha de comentário até o final da linha.

ou
b) /* Delimitadores para início de comentário.
*/ Delimitadores para final de comentário.

Pelo primeiro modo, tudo entre o // e o final da linha é ignorado pelo computador.
Um exemplo deste tipo de comentário está na linha 8 do programa.

No segundo modo, tudo entre o /* e o */ é ignorado pelo computador. Um exemplo

deste tipo de comentário está nas linhas 5 e 6 do programa.

Arquivos em HTML e JavaScript normalmente não exigem que se coloque um

comando em cada linha. Contudo, colocar um comando por linha e incluir linhas em
branco separando áreas do programa aumentam bastante a clareza do programa. O
programa abaixo faz a mesma coisa que o primeiro exemplo:

<HTML><BODY><SCRIPT
LANGUAGE=JAVASCRIPT> [Link]( "Alo Mundo" );
</SCRIPT></BODY>
</HTML>

Autor: Rodolfo Riyoei Goya.

6 de 61
 Introdução a linguagem JavaScript

3 Tipos de Dados Básicos

3.1 Números (Number)

Dados de tipo Number se destinam a armazenar valores numéricos.

3.2 String

Dados de tipo String se destinam a armazenar cadeias de caracteres (letras

maiúsculas e minúsculas, dígitos numéricos, símbolos, sinais de pontuação ou mesmo
espaços em branco).

Por exemplo:
‘Nome’
“Universidade de São Paulo”
“Símbolos como: !@#$% e dígitos como: 13579 podem estar em strings”

Os delimitadores naturais para strings são " ou ' . Caso seja necessária a utilização
destes caracteres como parte do string, deve-se utilizar o caracter \ precedendo " ou ', ou
seja \” codifica “ e \’ codifica ‘ (também deve-se usar \\ para o próprio caracter \).

Por exemplo:
‘Para colocar \” em um texto deve-se usar o caracter \\ seguido de \”.’
“Coloque o arquivo no diretório C:\\tmp”

3.3 Caracteres de Controle Especiais

\b – backspace
\n – próxima linha (new line)
\r – retorno de carro (carriage return)
\t – character de tabulação (tab)
\” – caracter “
\’ – caracter ‘
\\ – caracter \

3.4 Boolean

Dados de tipo boolean se destinam a armazenar valores que são verdadeiro (true) ou
falso (false).

Autor: Rodolfo Riyoei Goya.

7 de 61
 Introdução a linguagem JavaScript

3.5 Criando Variáveis

Uma variável pode ser definida com o uso do comando var. Por exemplo:
var minhaVariavel;

Cria uma variável de nome minhaVariavel.

Pode-se inicializar o valor de uma variável no momento de sua criação. Para isso,
basta acrescentar o comando “=” seguido do valor desejado para a variável. Por
exemplo:
var minhaVariavel = "Teste";

Cria uma variável de nome minhaVariavel contendo o string “Teste”.

Variáveis podem ser criadas automaticamente, pela simples associação de valores a

mesma. Por exemplo, o comando:
novaVariavel = "Jose";

Cria uma variável de nome novaVariavel contendo o string “Jose”.

O tipo de dado armazenado em variáveis pode ser alterado dinamicamente. Por

exemplo, os comandos:
var novaVariavel = "Jose";
novaVariavel = 1;

Criam uma variável de nome novaVariavel contendo o string “Jose” que depois
passa a conter o número 1 (ou seja muda de tipo String para tipo Number).

Autor: Rodolfo Riyoei Goya.

8 de 61
 Introdução a linguagem JavaScript

4 Comandos
4.1 Operadores Aritméticos

São operadores a serem utilizados em cálculos aritméticos. Os operadores estão

relacionados abaixo:

+ adição de valores.
- subtração de valores.
* multiplicação de valores.
/ divisão de valores.
% resto de divisão.

Por exemplo:
29 + 10 resultará em 39
29 - 10 resultará em 19
29 * 10 resultará em 290
29 / 10 resultará em 2.9
29 % 10 resultará em 9

4.2 Atribuição

O operador “=” pode ser utilizado para designar valores para variáveis. Por exemplo:
a = 29; // colocará 29 na variável a.
x = a – 10; // colocará 19 na variável x.

4.3 Atribuição Aritmética

O operador “=” pode combinado com os operadores aritméticos pra produzir os

operadores relacionados abaixo:

x += y é o mesmo que x = x + y
x -= y é o mesmo que x = x - y
x *= y é o mesmo que x = x * y
x /= y é o mesmo que x = x / y
x %= y é o mesmo que x = x % y

Por exemplo:
a = 29; // colocará 29 na variável a.
a += 20; // colocará 49 na variável a.
a -= 10; // colocará 39 na variável a.
a *= 2; // colocará 78 na variável a.
a /= 3; // colocará 26 na variável a.
a %= 7; // colocará 5 na variável a.

Autor: Rodolfo Riyoei Goya.

9 de 61
 Introdução a linguagem JavaScript

4.4 Incremento e decremento

Pode-se somar um (incrementar) ou subtrair um (decrementar) de uma variável

através dos operadores “++” e “--“.Quando o operador é colocado à esquerda da
variável (pré) a operação de incremento/decremento é feita antes de todas as demais na
expressão. Quando o operador é colocado à direita da variável (pós) a operação de
incremento/decremento é feita depois de todas as demais na expressão.

x++ é o mesmo que x = x + 1 (pós-incremento).

++x é o mesmo que x = x + 1 (pré-incremento).
x-- é o mesmo que x = x - 1 (pós-decremento).
--x é o mesmo que x = x - 1 (pré-decremento).

Por exemplo:
a = 29; // colocará 29 na variável a.
a++; // colocará 30 na variável a.
a--; // colocará 29 na variável a.
b = ++a; // colocará 31 na variável a e 31 na variável b.
b = a--; // colocará 30 na variável a e 31 na variável b.
b = --a; // colocará 29 na variável a e 29 na variável b.

As operações de incremento ou decremento só se aplicam a variáveis. Não faz

sentido aplicarem-se a valores ou expressões:

Por exemplo:
29++; // Não faz sentido!
( a + b )++;// Não faz sentido!

4.5 Operador para troca de sinal

Para inverter sinal de um valor numérico, usa-se o operador “–“.

Por exemplo:
a = 29; // colocará 29 na variável a.
a = -a; // colocará -29 na variável a.

Autor: Rodolfo Riyoei Goya.

10 de 61
 Introdução a linguagem JavaScript

4.6 Operadores ‘+’ e ‘+=’ aplicados a String

O operador ‘+’ pode também ser usado para concatenação de string.

Por exemplo:
a = "Bom "; // colocará "Bom " na variável a.
b = "Dia"; // colocará "Dia" na variável b.
c = a + b; // colocará "Bom Dia" na variável c.

Quando se usa o operador ‘+’ com variáveis de tipos diferentes que incluem strings,
tais variáveis são convertidas para strings e concatenadas.

Por exemplo:
a = "abc "; // colocará "abc " na variável a.
b = 4; // colocará o valor 4 na variável b.
c = a + b; // colocará "abc 4" na variável c.

O operador ‘+=’ concatena um string a outro string já existente em uma variável. Ou

seja, x += y é o mesmo que x = x + y.

Por exemplo:
a = "Bom "; // colocará "Bom " na variável a.
a += "Dia"; // colocará "Bom Dia" na variável a.

Autor: Rodolfo Riyoei Goya.

11 de 61
 Introdução a linguagem JavaScript

4.7 Operadores Relacionais

São operadores que expressam relação de ordem entre valores numéricos, resultando
em valores verdadeiro ou falso. Os operadores estão relacionados abaixo:

== Igual
=== Igualdade de valor e de tipo
!= Diferente
> Maior
>= Maior ou Igual
< Menor
<= Menor ou Igual

Por exemplo:
a = 5 > 3; // colocará true na variável a.
a = 5 < 3; // colocará false na variável a.
a = 5 >= 3; // colocará true na variável a.
a = 5 <= 3; // colocará false na variável a.
a = 5 == 3; // colocará false na variável a.
a = 5 != 3; // colocará true na variável a.
a = 5 >= 5; // colocará true na variável a.
a = 5 <= 5; // colocará true na variável a.
a = 5 == 5; // colocará true na variável a.
a = 5 != 5; // colocará false na variável a.

No caso do operador ===, uma comparação só resulta em valores verdadeiro se as

variáveis comparadas tem o mesmo valor e são do mesmo tipo.

Por exemplo:
a = ( 1 == "1" ); // colocará true na variável a.
a = ( 1 === "1" ); // colocará false na variável a.

Esta diferença ocorre porque pode haver conversão de tipos no momento de se

comparar dados de tipos diferentes.

Autor: Rodolfo Riyoei Goya.

12 de 61
 Introdução a linguagem JavaScript

4.8 Operadores Lógicos

São operadores que lidam com valores de tipo boolean (verdadeiro ou falso) e que
resultam em valores boolean (verdadeiro ou falso). Os operadores estão relacionados
abaixo:

&& Operação Lógica E

|| Operação Lógica Ou

A operação lógica E entre dois valores só resulta verdadeira se os dois valores

forem verdadeiros. Caso contrário, o resultado é falso.

A operação lógica Ou entre dois valores resulta verdadeira se pelo menos um

dos dois valores forem verdadeiros. Caso contrário, o resultado é falso.

Por exemplo:
a = true && true; // colocará true na variável a.
b = true && false; // colocará false na variável b.
c = false && true; // colocará false na variável c.
d = false && false; // colocará false na variável d.
a = true || true; // colocará true na variável a.
b = true || false; // colocará true na variável b.
c = false || true; // colocará true na variável c.
d = false || false; // colocará false na variável d.

Autor: Rodolfo Riyoei Goya.

13 de 61
 Introdução a linguagem JavaScript

4.9 Precedência de operadores

A precedência de operadores é a regra que define qual a ordem com que as operações
são realizadas em uma expressão que reuna diversos operadores.

Por exemplo, a expressão abaixo:

x = 3 + y * 4;

Possui dois operadores: + e *. A precedência permite que se resolva qual será

avaliado primeiro: se primeiro fazemos a soma e em seguida multiplicamos o resultado
por 4 ou se fazemos primeiro o produto e depois somamos 3 ao resultado.

Na expressão em questão, a multiplicação será feita primeiro e depois a soma. Caso

se quisesse fazer primeiro a soma deve-se usados os parênteses:

x = ( 3 + y ) * 4;

Deste modo, a ordem de precedência dos operadores na linguagem JavaScript está

tabelada abaixo:

Operador Associatividade
() Esquerda para direita.
++ -- (pré) Esquerda para direita.
- (unário) Esquerda para direita.
* / % Esquerda para direita.
+ - (binário) Esquerda para direita.
> >= < <= Direita para esquerda.
== != === Direita para esquerda.
&& Direita para esquerda.
|| Direita para esquerda.
+= -= *= /= %= Direita para esquerda.
= Direita para esquerda.
++ -- (pós) Esquerda para direita.

Autor: Rodolfo Riyoei Goya.

14 de 61
 Introdução a linguagem JavaScript

5 Entrada/Saída em JavaScript
5.1 Função write

A linguagem JavaScript permite que o programador escreva dentro de uma página

(documento), através da função write. As linhas escritas desta forma, podem conter
textos, expressões JavaScript e comandos HTML. As linhas escritas através desta
função aparecerão no ponto da tela onde o comando for inserido.

Por exemplo:
<script>
valor = 30;
[Link]( "Minha primeira linha." );
[Link]( "Nesta linha aparecerá o resultado de: " + ( 10 * 10 +
valor) );
</script>

A execução deste script resultará na saída:

Minha primeira [Link] linha aparecerá o resultado de: 150

Pode-se notar que, apesar se usar dois comandos para a escrita, a saída foi feita em
apenas uma linha. Isto ocorre porque a função write não insere mudança de linha.
Contudo, comandos HTML podem ser inseridos na função write.

Por exemplo, (usando os comandos HTML <p>e </p>):

<script>
valor = 30;
[Link]( "<p>Minha primeira linha</p>" );
[Link]( "<p>Nesta linha aparecerá o resultado de: " + (10 * 10
+ valor) + "</p>" );
</script>

Cuja execução resultará na saída:

Minha primeira linha.

Nesta linha aparecerá o resultado de: 150

Ou, por exemplo, (usando o comando HTML <br>):

<script>
valor = 30;
[Link]( "<br>Minha primeira linha" );
[Link]( "<br>Nesta linha aparecerá o resultado de : " + (10 *
10 + valor) );
</script>

Cuja execução resultará na saída:

Minha primeira linha.

Nesta linha aparecerá o resultado de: 150

Autor: Rodolfo Riyoei Goya.

15 de 61
 Introdução a linguagem JavaScript

5.2 Mensagens

Existem três formas de comunicação com o usuário através de mensagens.

5.2.1 Alert
O comando alert() coloca uma janela com uma mensagem na tela e aguarda que o
usuário pressione o botão para prosseguir.

Formato do comando:
alert( mensagem )

Onde:
mensagem: String contendo a mensagem a ser exibida. Mensagens de várias linhas
podem ser obtidas com o uso de ‘\n’ no String.

Por exemplo:
alert( "Certifique-se de que as informações estão corretas" );

Figura 1 – Mensagem produzida pelo comando alert().

Autor: Rodolfo Riyoei Goya.

16 de 61
 Introdução a linguagem JavaScript

5.2.2 Confirm

O comando confirm() coloca uma janela com uma mensagem na tela e aguarda que o
usuário pressione um botão de confirmação para prosseguir. A confirmação pode ser
OK ou Cancelar.

Formato do comando:
confirm( mensagem )

Onde:
mensagem: String contendo a mensagem a ser exibida. Mensagens de várias linhas
podem ser obtidas com o uso de ‘\n’ no String.

Por exemplo:
teste = confirm( "Algo está errado...devo continuar??" );

Figura 2 – Mensagem produzida pelo comando confirm().

Neste caso, a variável teste, de tipo boolean, receberá o valor true, se o usuário
teclar o botão OK e false se teclar o botão Cancelar.

Autor: Rodolfo Riyoei Goya.

17 de 61
 Introdução a linguagem JavaScript

5.2.3 Prompt

O comando prompt() coloca uma janela com uma mensagem na tela e aguarda que o
usuário pressione um botão para prosseguir. A confirmação pode ser OK ou Cancelar.

Formato do comando:
receptor = prompt ( mensagem, texto )

Onde:
receptor: é uma variável de tipo String que vai receber a informação digitada.
mensagem: é a mensagem que vai aparecer na janela.
texto: é um texto que aparecerá na linha de digitação do usuário.

Por exemplo:
entrada = prompt( "Qual seu time favorito ?", "São Paulo" );

Figura 3 – Mensagem produzida pelo comando prompt().

Neste caso, a variável entrada, de tipo String, receberá o valor “São Paulo” (ou
outro String que o usuário digite), se o usuário teclar o botão OK e null se teclar o botão
Cancelar.

Autor: Rodolfo Riyoei Goya.

18 de 61
 Introdução a linguagem JavaScript

6 Comandos de Controle
São comandos usados para controlar a execução dos comandos do programa, seja
condicionando sua execução ao atendimento de uma determinada condição, seja
permitindo a formação de estruturas para repetição de comandos.

Os comandos de controle são:

• if
• if-else
• switch-case
• atribuição condicional
• for
• while
• do-while

Autor: Rodolfo Riyoei Goya.

19 de 61
 Introdução a linguagem JavaScript

6.1 Comando if

O comando if executa um comando se uma condição dada for verdadeira (true). A.

sintaxe do comando if é a seguinte:

if( condição )
comando;

O comando é executado se a condição for verdadeira. Note que não se usa “;” entre o
if e o comando (o “;” delimita o final do comando. Se houvesse um “;” seria
interpretado como um comando vazio – que não faz nada – condicionado ao if).

Por exemplo:
if( idade < 18 )
categoria = "Menor";

Caso se queira condicionar a execução de mais de um comando à condição, deve-se

agrupar os comandos com o uso de chaves:

if( condição )
{
comando1;
comando2;
comando3;
}

Os comandos comando1, comando2 e comando3 são executados se a condição for

verdadeira. Se não for, nenhum dos comandos é executado.

Autor: Rodolfo Riyoei Goya.

20 de 61
 Introdução a linguagem JavaScript

6.2 Comando if-else

O comando if-else executa um comando se uma condição dada for verdadeira (true).
Caso a condição seja false um outro comando é executado A. sintaxe do comando if é a
seguinte:
if( condição )
comando1;
else
comando2;

O comando1 é executado se a condição for verdadeira. O comando2 é executado se a

condição for falsa (Note que não se usa “;” entre o else e o comando2).

Por exemplo:
if( idade < 18 )
categoria = "Menor";
else
categoria = "Maior";

Caso se queira condicionar a execução de mais de um comando à condição, deve-se

agrupar os comandos com o uso de chaves:

if( condição )
{
comando1;
comando2;
comando3;
}
else
{
comando4;
comando5;
comando6;
}

Os comandos comando1, comando2 e comando3 são executados se a condição for

verdadeira. Se não for, os comandos comando4, comando5 e comando6 são executados.

Também são possíveis as construções abaixo:

if( condição ) e if( condição )
{ comando1;
comando1; else
comando2; {
comando3; comando2;
} comando3;
else comando4;
comando4; }

Autor: Rodolfo Riyoei Goya.

21 de 61
 Introdução a linguagem JavaScript

6.3 Comando switch-case

Nos comandos de controle if e if-else a decisão tomada permitia a escolha dentre

duas possíveis alternativas. Com o comando de controle switch pode-se escolher um
comando a ser executado dentre diversos possíveis valores de uma expressão. A
estrutura de um comando de controle switch é descrita abaixo:
switch( variável )
{
case x1: comando_x1;
break;
case x2: comando_x2;
break;
case x3: comando_x3;
break;
case x4: comando_x4;
break;
default: comando_x5;
}

O comando switch mostrado é equivalente ao comando abaixo:

if( variável == x1 )
comando_x1;
else
if( variável == x2 )
comando_x2;
else
if( variável == x3 )
comando_x3;
else
if( variável == x4 )
comando_x4;
else
comando_x5;

Se a variável for igual a x1, então comando_x1 é executado. Se a variável for igual a
x2, então comando_x2 é executado. Se a variável for igual a x3, então comando_x3 é
executado. Se a variável for igual a x4, então comando_x4 é executado. Se a variável
for diferente de todos eles, então comando_x5 é executado.

Não há limites para o número de cases que podem ser usados em um comando
switch. Os valores x1, x2, x3 e x4 usados no comando são constantes, normalmente
números inteiros ou Strings. Caso haja valores iguais em dois ou mais diferentes cases
será executado o comando ligado ao primeiro case.

Autor: Rodolfo Riyoei Goya.

22 de 61
 Introdução a linguagem JavaScript

Um case em particular recebe o nome de default e é colocado no final do comando

switch. O comando associado ao default é executado sempre que nenhum case
corresponda ao valor associado à expressão do switch.

Um comando adicional associado ao comando de switch é o comando break que

determina o término da seqüência de comandos associados ao case. Assim, na ausência
de um break, a execução de um case pode prosseguir no case seguinte.

Por exemplo:
switch( letra )
{
case 'a':
case 'e':
case 'i':
case 'o':
case 'u': [Link]( " A letra é uma vogal.<BR>" );
break;
default: [Link]( "A letra é uma consoante. <BR>" );
}

Autor: Rodolfo Riyoei Goya.

23 de 61
 Introdução a linguagem JavaScript

6.4 Atribuição Condicional

O operador de atribuição condicional é um modo abreviado para um comando if-else

com uso para comando de atribuição. A estrutura para o operador condicional é descrita
abaixo:
variavel = ( exp1 ) ? exp2 : exp3;

Se a expressão exp1 for verdadeira, a variável recebe o valor da expressão exp2. Se

for falso da expressão exp3.

A expressão acima é equivalente ao comando abaixo:

if( exp1 )
variavel = exp2;
else
variavel = exp3;

Por exemplo, o comando abaixo atribui à variável x o valor absoluto da variável y:

x = ( y > 0 ) ? y : -y;

Autor: Rodolfo Riyoei Goya.

24 de 61
 Introdução a linguagem JavaScript

6.5 Comando for

Um loop do tipo for apresenta a estrutura abaixo:

for( exp1; exp2; exp3 )
comando;

A expressão exp1 é uma inicialização. É executada apenas uma vez, exatamente no

momento em que se vai iniciar o processamento do loop. A segunda expressão (exp2) é
uma condição de teste. É avaliada antes de cada possível passagem do loop. Quando
esta expressão resultar em valor falso o loop é terminado. A terceira expressão é
avaliada ao final de cada loop. A cada passagem do loop o comando é executado uma
vez.

O loop for é próprio para quando se deseja executar o loop um número determinado
de vezes.

<script>
var n;

for( n = 0; n < 10; n++ )

[Link]( " Impressão número " + n + "<BR>" );

</script>

Cuja execução resultará na saída:

Impressão número 0
Impressão número 1
Impressão número 2
Impressão número 3
Impressão número 4
Impressão número 5
Impressão número 6
Impressão número 7
Impressão número 8
Impressão número 9

Autor: Rodolfo Riyoei Goya.

25 de 61
 Introdução a linguagem JavaScript

Caso seja executado mais de um comando dentro do loop, estes ficam delimitados
por chaves {}:

<script>
var i, ano;
var atual, taxa;

[Link]( "Estima a populacao nos proximos anos..<BR>" );

atual = 170000000; // 170 milhões.
taxa = 1.02; // 2% ao ano.
ano = 2000;

for( i = 1; i <= 10; i++ ) // repete 10 vezes.

{
ano++;
atual *= taxa;
[Link]( "ano " + ano + " populacao= " + atual + "<BR>" );
}
</script>

Cuja execução resultará na saída:

Estima a populacao nos proximos anos..

ano 2001 populacao= 173400000
ano 2002 populacao= 176868000
ano 2003 populacao= 180405360
ano 2004 populacao= 184013467
ano 2005 populacao= 187693736
ano 2006 populacao= 191447611
ano 2007 populacao= 195276563
ano 2008 populacao= 199182094
ano 2009 populacao= 203165736
ano 2010 populacao= 207229051

Os loops for podem ser aninhados:

<script>
var i, j;

[Link]("Tabuada do 1 ao 10:<BR>");
for( i = 1; i <= 10; i++ )
{
for( j = 1; j <= 10; j++ )
[Link](" " + i * j );

[Link]("<BR>");
}
</script>

Autor: Rodolfo Riyoei Goya.

26 de 61
 Introdução a linguagem JavaScript

Cuja execução resultará na saída:

Tabuada do 1 ao 10:
1 2 3 4 5 6 7 8 9 10
2 4 6 8 10 12 14 16 18 20
3 6 9 12 15 18 21 24 27 30
4 8 12 16 20 24 28 32 36 40
5 10 15 20 25 30 35 40 45 50
6 12 18 24 30 36 42 48 54 60
7 14 21 28 35 42 49 56 63 70
8 16 24 32 40 48 56 64 72 80
9 18 27 36 45 54 63 72 81 90
10 20 30 40 50 60 70 80 90 100

O loop for é muito flexível. Pode-se decrementar a contagem ao invés de

incrementar:

<script>

var n;
[Link]( "Contagem regressiva...<BR>" );
for( n = 10; n > 0; n-- )
[Link]( n + " segundos<BR>" );

</script>

Cuja execução resultará na saída:

Contagem regressiva...
10 segundos
9 segundos
8 segundos
7 segundos
6 segundos
5 segundos
4 segundos
3 segundos
2 segundos
1 segundos

Autor: Rodolfo Riyoei Goya.

27 de 61
 Introdução a linguagem JavaScript

Pode-se ter a contagem em qualquer passo:

<script>

var n;
for( n = 10; n < 230; n = n + 15 )
[Link]( n + "<BR>" );

</script>

Cuja execução resultará na saída:

10
25
40
55
70
85
100
115
130
145
160
175
190
205
220

Autor: Rodolfo Riyoei Goya.

28 de 61
 Introdução a linguagem JavaScript

6.6 Comando while

Os loops do tipo while apresentam a forma abaixo:

while( expresão )
comando;

No comando while a expressão é avaliada ao início do loop. Se esta resultar

verdadeira, então o comando é efetuado e, então, a expressão é reavaliada reiterando o
processo que só terminará quando a expressão for avaliada e se tornar falsa.

O loop while é próprio para quando se deseja executar o loop um número

indeterminado à priori de vezes.

Por exemplo:
<script>
var entrada;
var n;

n = 1;
while( ( entrada = prompt( "Tecle uma frase.", "" ) ) != null )
{
[Link]("Frase " + n + ": " + entrada );
[Link](" (" + [Link] + " Caracteres. )<br>" );
n++;
}
</script>

Autor: Rodolfo Riyoei Goya.

29 de 61
 Introdução a linguagem JavaScript

6.7 Comando do-while

Os loops do tipo do-while apresentam a forma abaixo:

do
comando;
while (expresão);

A principal diferença entre um loop while e um do-while é que, no segundo caso, o

comando é sempre executado pelo menos uma vez independentemente da possibilidade
da expressão ser avaliada como falsa já ao início do loop.

O loop do tipo do-while é próprio para quando se deseja executar o loop um número
indeterminado de vezes porém pelo menos uma vez.

Por exemplo:

<script>
var entrada;
var n;

n = 1;

do
{
entrada = prompt( "Tecle uma frase.", "" );
[Link]("Frase " + n + ": " + entrada );
[Link](" (" + [Link] + " Caracteres. )<br>" );
n++;
}
while( entrada != null );
</script>

Autor: Rodolfo Riyoei Goya.

30 de 61
 Introdução a linguagem JavaScript

6.8 Comandos break e continue

Nos comandos for, while e do-while a diretiva break pode ser utilizada para
interromper a condição principal e sair do loop. Da mesma forma, a diretiva continue
interrompe uma ação (se determinada condição ocorrer) mas volta para o início do loop.

Autor: Rodolfo Riyoei Goya.

31 de 61
 Introdução a linguagem JavaScript

7 Funções
Uma função é um conjunto de comandos, que podem ser executadas quando a função
for chamada. Sua sintaxe é a seguinte:
function nomeDaFunção( Parâmetros )
{
Comandos
}

Por exemplo:
function imprimeBarra( n ) // Imprime ‘n’ caracteres ‘=’.
{
var i;

for( i = 0; i < n; i++ )

[Link]( ‘=‘ );
}
Para chamar esta função (supondo o script abaixo na mesma página que a da função),
devemos usar o nome da função para que a função seja acionada.

var pontos = 10;

[Link]( "<BR>Alice\t" );
imprimeBarra( pontos );
[Link]( "<BR>Beatriz\t" );
imprimeBarra( pontos + 5 );
[Link]( "<BR>Carol\t" );
imprimeBarra( 12 );

Resultam na saída descrita abaixo:

Alice ==========
Beatriz ===============
Carol ============

É importante notar que não existe relação entre o nome da variável passada como
parâmetro e a variável de recepção na função. Apenas o valor conteúdo é passado para a
função.

7.1 Variáveis em funções

Variáveis podem ser de dois tipos: locais ou [Link]áveis criadas dentro de uma
função são locais e referenciáveis apenas dentro da função. Variáveis criadas fora das
funções são globais e podem ser referenciadas em qualquer parte do documento (desta
forma, variáveis a serem referenciadas por diferentes funções, devem ser definidas
como globais).

Em uma função, pode-se definir variáveis locais com o mesmo nome de variáveis
globais (a variável local é criada, dentro da função, com o comando var).

Por exemplo:
var x = 0; // Variável global.

Autor: Rodolfo Riyoei Goya.

32 de 61
 Introdução a linguagem JavaScript

function funcaoQualquer()
{
var x; // Variável local.

x = 1; // A variável afetada é a local (a criada dentro da função).

}

7.2 Funções sem parâmetros

Uma função não precisa, necessariamente, receber parâmetros. A função abaixo não
tem:

function imprimeSeparacao()
{
var i;

for( i = 0; i < 80; i++ )

[Link]( '-' );

[Link]( "<br>" );
}

Contudo, sua chamada exige o uso dos parênteses:

imprimeSeparacao();

Autor: Rodolfo Riyoei Goya.

33 de 61
 Introdução a linguagem JavaScript

7.3 Funções que retornam valores

Uma função pode retornar um valor (que pode ser de qualquer tipo que possa ser
armazenado em uma variável). O valor retornado pela função deve ser enviado através
do comando return. A função abaixo exemplifica a idéia:

function leVogal()
{
var c;
var msg;

msg = "Tecle uma vogal";

do
{
c = prompt( msg, "" );
if( c != 'a' && c != 'e' && c != 'i' && c != 'o' && c != 'u' )
msg = "Você não teclou uma vogal.\nTecle uma vogal";
}
while( c != 'a' && c != 'e' && c != 'i' && c != 'o' && c != 'u' );

return c; // Comando que faz com que a função retorne valor.

}

Na chamada, é necessário que se coloque o dado retornado em uma variável:

var x;
x = leVogal();
[Link]("Vogal teclada: " + x + "<br>" );

Autor: Rodolfo Riyoei Goya.

34 de 61
 Introdução a linguagem JavaScript

7.4 Funções Intrínsecas

São funções embutidas na própria linguagem. Sua sintaxe é a seguinte:

variavel = função( Parâmetros )

Abaixo, são apresentadas algumas das funções intrínsecas disponíveis.

Função Descrição
eval() Calcula o conteúdo da string.
parseInt() Transforma string em inteiro.
parseFloat() Transforma string em número com ponto flutuante.

Result = eval( "( 10 * 20 ) + 2 - 8" );

Result = parseInt( "1234" );

No primeiro exemplo, Result recebe o valor 194. No segundo, 1234.

Autor: Rodolfo Riyoei Goya.

35 de 61
Introdução a linguagem JavaScript

7.5 Funções Matemáticas

Função Retorna
[Link]( número ) Valor absoluto do número (ponto flutuante).
[Link]( número ) Valor absoluto do número.
[Link]( número ) Arco cosseno de um número (em radianos).
[Link]( número ) Arco seno de um número (em radianos).
[Link]( número ) Arco tangente de um número (em radianos).
[Link]( número ) Próximo valor inteiro maior que o número.
[Link]( número ) Cosseno de um número (ângulo em radianos).
[Link]( número ) Cálculo do exponencial do número.
[Link]( número ) Próximo valor inteiro menor que o número.
[Link]( número ) Logarítmo de um número.
[Link]( número1, número2 ) Maior número dos dois fornecidos.
[Link]( número1, número2 ) Menor número dos dois fornecidos.
[Link]( base, expoente ) Cálculo do exponencial.
[Link]() Número aleatório entre 0 e 1.
[Link]( número ) Valor inteiro, arredondado, do número.
[Link]( número ) Seno de um número (ângulo em radianos)
[Link]( número ) Raiz quadrada do número.
[Link]( número ) Tangente de um número (ângulo em radianos).
Math.SQRT2 Raiz quadrada de 2 (21/2: aprox. 1,4142135624).
Math.SQRT_2 Raiz quadrada de ½ (2-1/2: aprox. 0,7071067812).
Math.E Base dos logarítmos naturais (e: aprox. 2,7182818285).
[Link] Valor de PI (π: aprox. 3,1415926536).
Math.LN2 Logarítmo neperiano de 2 ( ln(2): aprox. 0,6931471806).
Math.LOG2E Logarítmo de e na base 2 (log2e: aprox. 1,4426950409).
Math.LN10 Logarítmo neperiano de 10 (ln(10): aprox. 2,3025850930).
Math.LOG10E Logarítmo de e na base 10 (log10(e): aprox. 0,4342944819).

Autor: Rodolfo Riyoei Goya.

36 de 61
 Introdução a linguagem JavaScript

7.6 Funções de manipulação de Strings

A linguagem JavaScript é bastante poderosa no manuseio de Strings, fornecendo ao

programador uma grande flexibilidade para manuseio.

Abaixo, são apresentadas as funções disponíveis para manuseio de strings.

Função Descrição
[Link] Tamanho da string (quantidade de bytes).
[Link]( posição ) Caracter na posição especificada (inicia em 0).
[Link]( String ) Número da posição onde começa a primeira string.
[Link]( String ) Número da posição onde começa a última string.
[Link]( index1, index2 ) Conteúdo da string que corresponde ao intervalo
especificado. Começando no caracter posicionado em
index1 e terminando no caracter imediatamente anterior ao
valor especificado em index2.
[Link]() Transforma o conteúdo da string para maiúsculo.
[Link]() Transforma o conteúdo da string para minúsculo.
Escape( String ) Valor ASCII da string (vem precedido de %).
Unscape( String ) Caracter a partir de um valor ASCII (precedido de %).

Por exemplo:
todo = "JavaScript";
parte = [Link]( 0, 4 );

A variável Parte receberá a string “Java”.

Autor: Rodolfo Riyoei Goya.

37 de 61
 Introdução a linguagem JavaScript

8 Classes, Objetos e Arrays em Javascript

Pode-se criar classes em JavaScript com a mesma sintaxe para criar funções. Por
exemplo, pode-se criar uma classe para pessoas como no exemplo abaixo:

function Pessoa( nome, idade, sexo )

{
[Link] = nome;
[Link] = idade;
[Link] = sexo;
}

Neste caso, a classe criada tem, como atributos, nome, idade e sexo. Os atributos são
definidos em JavaScript pelo uso da palavra reservada this.

8.1 Criando Objetos

Através do operador new pode-se criar novas instâncias de objetos de classes já

existentes, mudando o seu conteúdo, porém, mantendo suas propriedades.

A sintaxe geral é a seguinte:

NovoObjeto = new ObjetoExistente( parâmetros )

Por exemplo:
professor = new Pessoa( "Goya", 38, ‘M’ );
presidente = new Pessoa( "Cardoso", 68, ‘M’ );

De modo que professor é um objeto da classe Pessoa, com os atributos nome, idade e
sexo correspondentes a, respectivamente, “Goya”, 38, ‘M’ e presidente também é um
objeto da classe Pessoa, com os atributos nome, idade e sexo correspondentes a,
respectivamente, “Cardoso”, 68, ‘M’.

Os atributos de um objeto podem ser acessados e modificados usando-se o nome do

objeto junto do atributo (separados por um ‘.’), do seguinte modo:
[Link]( [Link] ); // ‘.’ entre presidente e nome.
[Link]++; // ‘.’ entre professor e idade.

No primeiro caso, foi impresso na tela o String “Cardoso”. No segundo caso, o

atributo idade foi alterado de 38 para 39.

Autor: Rodolfo Riyoei Goya.

38 de 61
 Introdução a linguagem JavaScript

8.2 Criando Funções para Classes

Funções podem ser ligadas a classes. Para tanto, pode-se definir a função e associá-la
a classe do mesmo modo que se faz com um atributo. O modo como isto pode ser feito é
ilustrado abaixo:
function exibeDados()
{
return "Nome: " + nome + "Idade: " + idade + "Sexo: " + sexo;
}

function Pessoa( nome, idade, sexo )

{
[Link] = nome;
[Link] = idade;
[Link] = sexo;
[Link] = exibeDados(); // Inclui a função na classe.
}

Os parênteses são importantes para definir exibeDados como uma função (e não um
atributo) mesmo que a função a ser criada e chamada não tenha parâ[Link]-se
criar objetos de classe pessoa e usar a função associada a esta classe. Funções podem ser
ligadas a classes. O modo como isto pode ser feito é ilustrado abaixo:

var p;
var s;

p = new Pessoa( "Goya", 38, ‘M’ );

s = [Link]();

Autor: Rodolfo Riyoei Goya.

39 de 61
 Introdução a linguagem JavaScript

8.3 Criando Atributos Dinamicamente

Novos atributos para um objeto podem ser criados na medida que o programa é
executado. O modo como isto pode ser feito é ilustrado abaixo:
function exibeDados()
{
return "Nome: " + nome + "Idade: " + idade + "Sexo: " + sexo;
}

function Pessoa( nome, idade, sexo )

{
[Link] = nome;
[Link] = idade;
[Link] = sexo;
[Link] = exibeDados(); // Inclui a função na classe.
}

var p;

p = new Pessoa( "Goya", 38, ‘M’ );

[Link] = 1.76;

Neste exemplo, o objeto p adquiriu o atributo adicional altura. Somente este objeto
foi alterado. Todos os demais objetos da classe Pessoa permanecem inalterados. Pode-se
incluir um novo atributo para todos os objetos da classe:
[Link] = 1.7;

Neste exemplo, todos os objetos da classe Pessoa passam a ter um novo atributo
(altura) e todos eles recebem o mesmo valor (1.7).

Por permitir definir o conjunto de atributos que a classe tem dinamicamente, pode-se
tornar problemático resolver qual objeto tem quais atributos. A linguagem oferece uma
construção que permite percorrer todos os atributos do objeto: for-in
for( i in p )
[Link]( "Atributo: " + i + “ valor: " + p.i ) + "<BR>" );

Neste exemplo, a variável i recebe todos os valores possíveis de atributos que o

objeto p tenha.

Autor: Rodolfo Riyoei Goya.

40 de 61
 Introdução a linguagem JavaScript

8.4 Manipulando Arrays

Arrays são conjuntos de variáveis do mesmo tipo e chamados coletivamente de um

mesmo nome. A diferenciação entre os elementos de um array é feita através de um
índice. Normalmente o primeiro elemento do array tem índice 0.

Em JavaScript não há um tipo de dado ou objeto para manipular arrays. Por isso,
para trabalhar com arrays, é necessário criar um objeto com a propriedade de criação de
um array.

No exemplo abaixo, é criado um objeto tipo array de tamanho definido por uma
variável e limpando o conteúdo inicial das variáveis cada vez que uma nova instância
seja criada a partir dele.
function CriaArray( n )
{
[Link] = n;
for( var i = 0 ; i < n; i++ )
this[i] = "";
}

Agora, pode-se criar arrays pela criação de novas instâncias do objeto da classe
CriaArray.

nomeDia = new CriaArray( 7 );

nomeDia[0] = "Domingo";
nomeDia[1] = "Segunda";
nomeDia[2] = "Terça";
nomeDia[3] = "Quarta";
nomeDia[4] = "Quinta";
nomeDia[5] = "Sexta";
nomeDia[6] = "Sábado";

atividade = new CriaArray( 5 );

atividade[0] = "Analista";
atividade[1] = "Programador";
atividade[2] = "Operador";
atividade[3] = "Conferente";
atividade[4] = "Digitador";

Agora pode-se obter os dados diretamente dos arrays.

diaSemana = nomeDia[4];
ocupacao = atividade[1];

Neste caso, a variável diaSemana passaria a conter Quinta e ocupacao conteria

Programador.

Autor: Rodolfo Riyoei Goya.

41 de 61
 Introdução a linguagem JavaScript

Pode-se criar arrays de objetos:

function Pessoa( nome, idade, sexo )
{
[Link] = nome;
[Link] = idade;
[Link] = sexo;
}
turma =new Pessoa[];
turma[0] = new Pessoa( "Alice" , 5, ‘F’ );
turma[1] = new Pessoa( "Beatriz", 7, ‘F’ );
turma[2] = new Pessoa( "Carol" , 5, ‘F’ );

Assim, pode-se obter o nome do elemento número 2 da turma, cuja resposta seria
Carol, da seguinte forma:

nome = turma[2].nome;

Autor: Rodolfo Riyoei Goya.

42 de 61
 Introdução a linguagem JavaScript

8.5 Objeto para Manipulação de Datas

Existe uma função para que se possa obter a data e a hora. É a função Date(). Esta
função devolve data e hora no formato: Dia da semana, Nome do mês, Dia do mês,
Hora:Minuto:Segundo e Ano

Por exemplo:
[Link]( Date() );

Que resulta na saída (o resultado é sempre em inglês):

Fri Sep 08 16:58:02 2000

Para se obter os dados separadamente, existem as seguintes funções:

Função Descrição
getDate() Obtém o dia do mês (numérico de 1 a 31)
getDay() Obtém o dia da semana (de 0 a 6)
getMonth() Obtém o mês (numérico de 0 a 11)
getYear() Obtém o ano
getHours() Obtém a hora (numérico de 0 a 23)
getMinutes() Obtém os minutos (numérico de 0 a 59)
getSeconds() Obtém os segundos (numérico de 0 a 59)

No exemplo abaixo, obtém-se o dia da semana. Para tal, utiliza-se a variável dia para
armazenar data/hora e a variável hoje para armazenar o número do dia da semana.
dia = new Date();
hoje = [Link]();

Para se obter o dia da semana na forma de string, deve-se construir uma tabela com
os dias da semana e utilizar a variável hoje como indexador.

function CriaTab( n )
{
[Link] = n;
for( var x = 1; x <= n; x++ )
this[x] = "";
}
nomeDia = new CriaTab( 7 );
nomeDia[0] = "Domingo";
nomeDia[1] = "Segunda";
nomeDia[2] = "Terça";
nomeDia[3] = "Quarta";
nomeDia[4] = "Quinta";
nomeDia[5] = "Sexta";
nomeDia[6] = "Sábado";

diaSemana = nomeDia[ hoje ];

Autor: Rodolfo Riyoei Goya.

43 de 61
 Introdução a linguagem JavaScript

Uma variável da classe Date pode ter seu conteúdo modificado. Para isso, existem as
funções: setDate(), setDay(), setMonth(), setYear(), setHours(), setMinutes() e
setSeconds().

Por exemplo acima, pode-se mudar o mês do objeto dia para novembro, através do
comando:
[Link](10);

Autor: Rodolfo Riyoei Goya.

44 de 61
 Introdução a linguagem JavaScript

9 Interface com o Usuário

Um script pode interagir com o usuário através de objetos para entrada de dados
(textos), seleção de opções (radio, checkbox e combo), botões ou links. Estes objetos
são os mesmos usados pela linguagem HTML para a construção de formulários e são
inseridos no script do mesmo modo. Os objetos existentes para interação com o usuário
são quatro: Input, Textarea, Select e Link.

Os objetos Input são de oito tipos (podem ser identificados pela propriedade type):

• Text
• Password
• Hidden
• Checkbox
• Radio
• Button
• Reset
• Submit

9.1 Objeto Input: Text

É o principal objeto para entrada de dados. Por este objeto, o usuário pode teclar um
string de uma linha.

Suas propriedades são: type, size, maxlength, name e value:

• type=text: Especifica um campo para entrada de dados normal.
• size: Especifica o tamanho do campo na tela.
• maxlength: Especifica a quantidade máxima de caracteres permitidos.
• name: Especifica o nome do objeto.
• value: Armazena o conteúdo do campo.

Por exemplo:
<form method="POST" name="TestText">
<p>
Entrada de Texto
<input type=text size=20 maxlength=30 name="CxTexto" value="">
</p>
</form>

O resultado do exemplo aparece na figura abaixo:

Figura 4 – Objeto Input:Text

Autor: Rodolfo Riyoei Goya.

45 de 61
 Introdução a linguagem JavaScript

9.2 Objeto Input Password

É um objeto para entrada usado tipicamente para digitação de senhas (password). São
semelhantes ao Text. A diferença é que os dados digitados são exibidos na tela como
"*".

Suas propriedades são: type, size, maxlength, name e value.

• type=password: Especifica um campo para entrada de senha.
• size: Especifica o tamanho do campo na tela.
• maxlength: Especifica a quantidade máxima de caracteres permitidos.
• name: Especifica o nome do objeto.
• value: Armazena o conteúdo digitado no campo.

Por exemplo:
<form method="POST" name="TPassword">
<p>
Entrada de Senha
<input type=password size=10 maxlength=10 name="Senha" value="">
</p>
</form>

O resultado do exemplo aparece na figura abaixo:

Figura 5 – Objeto Input:Password

9.3 Objeto Input: Hidden

É semelhante ao input text, porém, invisível para o usuário. Este objeto deve ser
utilizado para passar informações ao "server" (quando o formulário for submetido) sem
que o usuário tome conhecimento.

Suas propriedades são: name e value.

!"name : Especifica o nome do objeto.
!"value : Armazena o conteúdo do objeto.

Por exemplo:
<form method="POST" name="THidden">
<input type=hidden size=20 maxlength=30 name="HdTexto" value="">
</form>
</p>

Autor: Rodolfo Riyoei Goya.

46 de 61
 Introdução a linguagem JavaScript

9.4 Objeto Input: Checkbox

São objetos que permitem ao usuário ligar ou desligar uma determinada opção.

Suas principais propriedades são: name, value e checked.

!"name: Especifica o nome do objeto.
!"value: Especifica o valor a ser enviado ao server se o objeto estiver marcado
(checked).

Caso seja omitido, será enviado o valor default "on". Esta propriedade também serve
para ativar comandos lógicos, testando-se a condição de "checked".

checked : Especifica que o objeto inicialmente estará ligado

No exemplo abaixo, são criados três objetos checkbox.

<form method="POST" name="TCheck">
Passatempos:<p>
Leitura<input type=checkbox name="Opt1" value="1" checked>
Musica<input type=checkbox name="Opt2" value="2">
Cinema<input type=checkbox name="Opt3" value="3">
Esportes<input type=checkbox name="Opt4" value="4">
</p>
</form>

O resultado do exemplo aparece na figura abaixo:

Figura 6 – Objeto Input:Checkbox

Autor: Rodolfo Riyoei Goya.

47 de 61
 Introdução a linguagem JavaScript

9.5 Objeto Input: Radio

São objetos que permitem ao usuário a escolha de apenas uma alternativa, diante de
uma série de opções.

Suas principais propriedades são: name, value e checked.

!"name : Especifica o nome do objeto. Para caracterizar o objeto como membro de
um mesmo conjunto de opções, todos os objetos de um conjunto têm o mesmo
"name".
!"value : Especifica o valor que será enviado ao "server" se o objeto estiver ligado
(checked). Caso seja omitido, será enviado o valor default "on". Esta propriedade
também serve para ativar comandos lógicos, testando-se a condição de "checked".
!"checked : Especifica que o objeto inicialmente estará ligado.

Para utilização deste objeto é importante o conhecimento de outras propriedades

associadas:

[Link]: Retorna a quantidade de opções existentes na lista.

Objeto.[index].value: Retorna o texto (value) associado a cada opção.
Objeto.[index].checked: Retorna verdadeiro ou falso.

Por exemplo:
<form method="POST" name="TesteRadio>
Time favorito:<BR>
<input type=radio name="Rad" value="1"> Corinthians
<input type=radio name="Rad" value="2"> Palmeiras
<input type=radio name="Rad" value="3"> Portuguesa
<input type=radio name="Rad" value="4"> Santos
<input type=radio checked name="Rad" value="5"> Sao Paulo
</form>

O resultado do exemplo aparece na figura abaixo:

Figura 7 – Objeto Input:Radio

Autor: Rodolfo Riyoei Goya.

48 de 61
 Introdução a linguagem JavaScript

9.6 Objeto Input: Button

Este objeto um botão na página que permite criar, quando o mesmo for ativado pelo
mouse, programas associados a ele.

Suas propriedades são: name e value.

!"name: Especifica o nome do objeto.
!"value: Especifica o nome que aparecerá sobre o botão.

Por exemplo:
<form method="POST" name="TstButton">
Aperte o Botão
<input type=button name="Bteste" value="Botão de teste">
</form>

O resultado do exemplo aparece na figura abaixo:

Figura 8 – Objeto Input: Button

9.7 Objeto Input: Reset

Este objeto é um botão que tem por única finalidade limpar os campos digitados pelo
usuário, restaurando o conteúdo do formulário para os valores iniciais.

Suas propriedades são: name e value.

!"name: Especifica o nome do objeto.
!"value: Especifica o nome que aparecerá sobre o botão

Por exemplo:
<p>
<form method="POST" name="TesteRes">
Restaura defaults
<input type=reset name="Bres" value="Reset">
</form>
</p>

O resultado do exemplo aparece na figura abaixo:

Figura 9 – Objeto Input: Reset

Autor: Rodolfo Riyoei Goya.

49 de 61
 Introdução a linguagem JavaScript

9.8 Objeto Input: Submit

Este objeto é um botão que tem por finalidade submeter (enviar) o conteúdo dos
objetos do formulário ao "server". O formulário será submetido à URL especificada na
propriedade "action" do formulário. Todos os dados do formulário são enviados para
que uma aplicação do lado do servidor possa processá-los (isto é feito através do
protocolo CGI, que não é abordado neste texto).

Suas propriedades são: name e value.

!"name: Especifica o nome do objeto.
!"value: Especifica o nome que aparecerá sobre o botão.

Por exemplo:
<script>
<form method="POST" name="TesteSub">
Envia Formulário
<input type=submit name="Bsub" value="Envia">
</form>

O resultado do exemplo aparece na figura abaixo:

Figura 10 – Objeto Input: Submit

Autor: Rodolfo Riyoei Goya.

50 de 61
 Introdução a linguagem JavaScript

9.9 Objeto TextArea

É um objeto para entrada de dados em um campo de múltiplas linhas. Suas principais

propriedades são: name, rows e cols.
!"name: Especifica o nome do objeto.
!"rows: Número de linhas que aparecerão na tela.
!"cols: Número de colunas que aparecerão em cada linha.
!"value: Acessa o conteúdo do campo via programação.

Por exemplo:
<form name="TesteTextarea">
<p>
Area de Texto
<textarea name="MultText" rows=4 cols=40>
Primeira linha do texto inicial
segunda linha do texto inicial
</textarea>
</p>

O resultado do exemplo aparece na figura abaixo:

Figura 11 – Objeto TextArea

Autor: Rodolfo Riyoei Goya.

51 de 61
 Introdução a linguagem JavaScript

9.10 Objeto Select

É um objeto para entrada de opções, onde o usuário, a partir de uma lista de

alternativas, seleciona uma ou mais opções.

Suas principais propriedades são: name, size, value e multiple.

• name: Especifica o nome do objeto.
• size: Número de opções que aparecerão na tela simultaneamente.
• value: Associa um valor ou string para cada opção (opcional).
• multiple: Especifica a condição de múltipla escolha.

Para utilização deste objeto é importante o conhecimento de outras propriedades

associadas:
!"[Link] : Retorna a quantidade de opções existentes na lista.
!"[Link]: Retorna o indice do objeto selecionado (primeiro = 0).
!"[Link][index].text: retorna o texto externo associado a cada opção.
!"[Link][index].selected: retorna verdadeiro ou falso.
!"[Link][index].value: retorna o texto interno (value) associado a
cada opção.

Exemplo a:
Nesta lista:
1. Permite-se apenas uma seleção.
2. A quarta opção aparecerá inicialmente selecionada (propriedade "selected").
3. Não é utilizada a propriedade "value". Assim, a propriedade "text" e a
propriedade "value" passam a ter o mesmo valor, ou seja, o valor externo que
aparece na tela.

<form>
Objeto Select <select name="Combo1" size=1>
<option>Opcao 1
<option>Opcao 2
<option>Opcao 3
<option selected>Opcao 4 (recomendada)
<option>Opcao 5
<option>Opcao 6
</select>
</form>

Figura 12 – Objeto Select

Autor: Rodolfo Riyoei Goya.

52 de 61
 Introdução a linguagem JavaScript

Exemplo b:
Nesta lista:
1. Permitem-se múltiplas seleções. Para o usuário escolher mais de uma, deve
usar as teclas Shift ou Ctrl ao dar o Click do mouse.
2. Utiliza-se a propriedade "value". Assim as propriedades "text" e "value"
têm valores diferentes: text retornará Escolha 1 a Escolha 6 e value
retornará List1 a List6.
3. A lista exibe 4 itens de uma lista de 6 seleções possíveis.

<p>
<form>
<select name="Combo2" size=4 multiple>
<option value="List1">Escolha 1</option>
<option value="List2" selected >Escolha 2</option>
<option value="List3">Escolha 3</option>
<option value="List4" selected >Escolha 4</option>
<option value="List5">Escolha 5</option>
<option value="List6">Escolha 6</option>
</select>
</form>
</p>

Figura 13 – Objeto Select

Autor: Rodolfo Riyoei Goya.

53 de 61
 Introdução a linguagem JavaScript

9.11 Objeto Link

É um objeto que identifica um link para uma outra página. Ao clickar-se o mouse
sobre ele o navegador carrega a página referenciada pelo objeto.

Por exemplo:
<p>
<a href="[Link]
Link para [Link]
</a>
</p>

Figura 14 – Objeto Link

No caso do objeto do exemplo, o link aponta para a página [Link]. Ao

clickar-se o mouse sobre ele o navegador carrega a página deste site.

O objeto link pode usar uma imagem. Por exemplo:

<p>
<a href="[Link]
<img SRC="[Link]" );
</a>
</p>

Autor: Rodolfo Riyoei Goya.

54 de 61
 Introdução a linguagem JavaScript

10 Eventos
São fatos que ocorrem durante a execução do sistema, a partir dos quais o
programador pode definir ações a serem realizadas pelo programa. Abaixo, é
apresentada a lista dos eventos possíveis, indicando os momentos em que os mesmos
podem ocorrer, bem como, os objetos passíveis de sua ocorrência.

Evento Descrição Objeto

Onblur O objeto perde o foco, independente Text, Select e Textarea
de ter havido mudança.
Onchange O objeto perde o foco e houve Text, Select e Textarea
mudança de conteúdo.
Onclick O objeto recebe um Click do Mouse. Buton, Checkbox, Radio,
Link, Reset e Submit
Onfocus Ocorre quando o objeto recebe o Text, Select e Textarea
focus.
Onload Ocorre na carga do documento. Body

Onmouseover O ponteiro do mouse passa por sobre Link

o objeto.
Onselect Ocorre quando o objeto é Text e Textarea
selecionado.
Onsubmit O botão Submit recebe um click do Form
mouse.
Onunload Ocorre na saída do documento. Body

Por exemplo:
<form name="TestText">
<p>
Entrada de Texto
<input type=text size=20 maxlength=30 name="CxTexto"
value="" onchange="alert( 'Voce digitou ' + [Link] )">
</p>
</form>

No exemplo, foi criado um objeto input text com nome CxTexto. O evento usado
(onchange) faz com que, no caso do objeto perder o foco e ter seu valor alterado o
comando alert() inserido nele seja executado. Deve-se notar que se pode acessar o
atributo do objeto CxTexto através de [Link].

Embora se possa associar lógica ao evento onClick no objeto Submit, esta não pode
evitar que o formulário seja submetido. Caso se deseje tal possibilidade, deve-se utilizar
o evento onSubmit do formulário. Este permite que a lógica associada a ele submeta o
formulário ou não.

Autor: Rodolfo Riyoei Goya.

55 de 61
 Introdução a linguagem JavaScript

11 Focando um Objeto
Esta função permite que o cursor seja ativado em um determinado objeto (focado).
Isso pode ser feito na carga do documento, a partir da ocorrência de um evento ou
mesmo dentro de uma função (sem este recurso, o único modo para definir o objeto que
tem o foco é através de um "Click" dado pelo usuário sobre o objeto desejado).

De forma semelhante existe a função "Select". Esta função marca o conteúdo do

objeto, permitindo ao usuário, em caso de substituição do conteúdo do campo, não ter
que deletar o conteúdo anterior, pois, com esta função, a deleção se dá de forma
automática quando da digitação do novo conteúdo.

As funções "Focus" e "Select" podem ser utilizados nos seguintes objetos:

password, select, text e textarea

No exemplo abaixo, é utilizado o evento onload para definir o foco para o primeiro
objeto do formulário e as funções focus e select para, na rotina de crítica dos dados,
focar o objeto que contiver erro de preenchimento.

Por exemplo:
<body onload="[Link]()">
<script>
function Criticar()
{
DataAtual = new Date();
MesAtual = [Link]() + 1;
AnoAtual = [Link]() + 1900;
Nome = [Link];
Mes = parseInt( [Link] );
Ano = parseInt( [Link] );

if( Ano < 1900 )

Ano = Ano + 1900;

if( Nome == "" )

{
alert( "Informe o seu Nome, Não deixe em branco" );
[Link]();
return;
}

if( Mes < 1 || Mes > 12 )

{
alert( "O Mês informado não é válido, informe corretamente" );
[Link]();
[Link]();
return;
}

Autor: Rodolfo Riyoei Goya.

56 de 61
 Introdução a linguagem JavaScript

if( Ano == AnoAtual && Mes > MesAtual )

{
alert( "O período informado é superior a data atual" );
[Link]();
[Link]();
return;
}

if( Ano < 1996 || Ano > AnoAtual )

{
alert( "O Ano informado não é válido, informe corretamente" );
[Link]();
[Link]();
return;
}
alert( "Todos os Dados estão Corretos" )
}
</script>

<form name="TstFocus" method="POST">

<p>
Informe o seu Nome
<input type=text size=30 maxlength=30 name="Nome">
</p>
<p>
Informe o mês desejado
<input type=text size=2 maxlength=2 name="Mes">
</p>
<p>
Informe o ano desejado
<input type=text size=4 maxlength=4 name="Ano">
</p>
<p>
<input type=button name="Testa" value="Testar Validade"
onclick="Criticar();">
</p>
</form>
</body>

Autor: Rodolfo Riyoei Goya.

57 de 61
 Introdução a linguagem JavaScript

12 Classe Timer
É uma função que permite a programação para que uma ação ocorra após o um
determinado intervalo de tempo. A sintaxe de seu uso é descrita abaixo:

variavel = setTimeout( "ação", tempo );

Onde:
• variavel é uma variável apenas para controle do timer.
• ação é a ação que se quer realizar.
• tempo é o tempo de espera para que a ação ocorra, em milisegundos.

Por exemplo, o comando:

temporizador = setTimeout( "alert( ‘Acorde !’ );", 30000 );

Faz com que uma janela de alert apareça 30 segundos após o comando ser executado.

Para desativar a ação prevista pelo timer deve-se utilizar a seguinte função:
clearTimeout( variavel )

Onde:
• variavel é o nome da variável de controle do timer.

A ação só ocorrerá uma vez. Para fazer com que a ação ocorra periodicamente, basta
repetir o comando quando a ação for executada.

No exemplo seguinte, encontra-se um formulário que apresenta a data e hora atual,

atualizando os dados a cada um segundo, tendo dois botões de rádio que tem a função
de ativar e desativar a atualização dos dados. Neste exemplo, a chamada a função hoje()
dentro da própria função hoje() faz com que a função hoje seja chamada
periodicamente.

Autor: Rodolfo Riyoei Goya.

58 de 61
 Introdução a linguagem JavaScript

<script>
function hoje()
{
var data, dia, mês, ano, hor, min, seg, strDia, strHor;

Relogio = setTimeout( "hoje()", 1000 ); // reativa em 1 segundo.

data = new Date();
dia = [Link]();
mes = [Link]() + 1;
ano = [Link]() + 1900;
hor = [Link]();
min = [Link]();
seg = [Link]();

if( dia < 10 )

strDia = "0";
else
strDia = "";

strDia += dia + "/";

if( mes < 10 )

strDia += "0";

strDia += mes + "/" + ano;

if( hor < 10 )

strHor = "0";
else
strHor = "";

strHor += hor + ":";

if( min < 10 )

strHor += "0";

strHor += min + ":";

if( seg < 10 )

strHor += "0";

strHor += seg;

[Link] = strDia;
[Link] = strHor;
}
</script>

<form name="DataHora">
Data : <input type=text size=10 maxlength=10 name="Data">
Hora : <input type=text size=10 maxlength=10 name="Hora">
<input type=radio name="Botao" value="Para Relogio" checked
onclick="clearTimeout( Relogio )">Desativa
<input type=radio name="Botao" value="Ativa Relogio"
onclick="Relogio = setTimeout( 'Hoje()', 1000 )">Ativa
</form>

Autor: Rodolfo Riyoei Goya.

59 de 61
 Introdução a linguagem JavaScript

13 Abrindo Novas Janelas

Neste capítulo é mostrado como se pode abrir novas janelas sobre uma janela
contendo o documento principal. A linguagem JavaScript dispõe de comandos que
permitem:

!"Abrir uma nova janela.

!"Abrir um documento dentro desta janela.
!"Escrever o conteúdo da janela.
!"Fechar a janela.
!"Fechar o documento.

13.1 Abrindo a Janela

A sintaxe geral desta função é a seguinte:

variavel = [Link]( "Url", "Nome da janela", "Opções" )

Onde:
• Variável Nome que será atribuido como propriedade da janela.
• Url Endereço Internet onde a janela será aberta. Quando se
utiliza a própria Url preenche-se com "".
• Nome da Janela É o nome que aparecerá no top da janela (Título).
• Opções São as opções que definem as características da janela:
• toolbar Cria uma barra de ferramentas.
• location Abre a barra de location do browser.
• directories Abre a barra de ferramentas.
• status Abre uma barra de status no rodapé da janela.
• scrollbar Abre barras de rolamento vertical e horizontal.
• menubar Cria uma barra de menu tipo "File", "Edit", etc.
• resizable Permite ao usuário redimensionar a janela.
• width Especifica a largura da janela, em pixels.
• height Especifica a altura da janela, em pixels.

Autor: Rodolfo Riyoei Goya.

60 de 61
 Introdução a linguagem JavaScript

13.2 Abrindo um Documento

Para abrir um documento dentro da janela, deve ser utilizada a seguinte função:
[Link]();

Onde "Variavel" é o nome da variável associada a função [Link]

13.3 Escrevendo no Documento

Para escrever a tela no documento, deve ser utilizada a seguinte função:

[Link]( "Comandos html ou JavaScript ou textos" );

13.4 Fechando a Janela

Para fechar a janela, usa-se a função:

[Link] ("[Link]()");

13.5 Fechando o Documento

Para fechar o documento, usa-se a função:

[Link]();

13.6 Propriedades de um Documento

<p>Radio</p>
<p>
<input type=radio name="Rad"
value="1" onclick="[Link]='green'">
Fundo Verde
<input type=radio name="Rad"
value="2" onclick="[Link]='blueviolet'">
Fundo Violeta
<input type=radio name="Rad"
value="3" onclick="[Link]='#FFFF00'">
Fundo Amarelo
</p>

Autor: Rodolfo Riyoei Goya.

61 de 61