introducao_javascript

Prévia do material em texto

Alfamídia Programação: 
Introdução ao Javascript 
 
 
 
 
Alfamídia Programação: Introdução ao Javascript 
 
 2 
 
Todos os direitos reservados para Alfamídia LTDA. 
 
AVISO DE RESPONSABILIDADE 
As informações contidas neste material de treinamento são distribuídas “NO ESTADO EM 
QUE SE ENCONTRAM”, sem qualquer garantia, expressa ou implícita. Embora todas as 
precauções tenham sido tomadas na preparação deste material, a Alfamídia LTDA. não 
tem qualquer responsabilidade sobre qualquer pessoa ou entidade com respeito à 
responsabilidade, perda ou danos causados, ou alegadamente causados, direta ou 
indiretamente, pelas instruções contidas neste material ou pelo software de computador e 
produtos de hardware aqui descritos. 
 
 
01/ 2013 
 
Alfamídia Prow 
www.alfamidia.com.br 
 
 
 
 
 
 
 
 
Alfamídia Programação: Introdução ao Javascript 
 
 3 
 
 
UNIDADE 1 ..................................................................................................................................................................... 6 
UNIDADE 2 INTRODUÇÃO AO JAVASCRIPT ............................................................................................................ 7 
2.1 O QUE É JAVASCRIPT? .......................................................................................................................... 7 
2.2 ONDE OS SCRIPT PODEM SER EXECUTADOS ? ....................................................................................... 7 
2.3 VERSÕES DE NAVEGADORES E DE JAVASCRIPT .................................................................................... 7 
UNIDADE 3 NOÇÕES BÁSICAS DE JAVASCRIPT .................................................................................................... 9 
3.1 CRIANDO UM SCRIPT EM UMA PÁGINA HTML ..................................................................................... 9 
3.2 UTILIZANDO COMENTÁRIOS ................................................................................................................ 9 
3.3 A ESTRUTURA DE UM SCRIPT JAVASCRIPT .......................................................................................... 10 
3.4 VARIÁVEIS ......................................................................................................................................... 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 referência) ............................................................................ 12 
3.6 CAIXAS DE DIÁLOGO OU DE MENSAGEM ........................................................................................... 13 
3.6.1 O método alert() ...................................................................................................................... 13 
3.6.2 O método prompt() .................................................................................................................. 14 
3.6.3 O método confirm() ................................................................................................................. 15 
3.6.4 O método document.write() ..................................................................................................... 15 
3.7 OPERADORES ..................................................................................................................................... 16 
UNIDADE 4 UTILIZANDO FUNÇÕES ........................................................................................................................ 18 
4.1 O QUE É FUNÇÃO ............................................................................................................................... 18 
4.2 UTILIZANDO FUNÇÕES NO JAVASCRIPT ............................................................................................. 18 
4.3 AS FUNÇÕES INTRÍNSECAS DO JAVASCRIPT ........................................................................................ 18 
4.3.1 A função parseInt() e parseFloat() .......................................................................................... 18 
4.3.2 Função escape() e unescape() ................................................................................................. 19 
4.3.3 A função isNaN() ..................................................................................................................... 19 
4.4 FUNÇÕES CRIADAS PELO USUÁRIO ..................................................................................................... 20 
4.5 LABORATÓRIO ................................................................................................................................... 21 
4.5.1 Exercício 4 ............................................................................................................................... 21 
4.5.2 Exercício 5 ............................................................................................................................... 21 
4.5.3 Exercício 6 ............................................................................................................................... 21 
4.5.4 Exercício 7 ............................................................................................................................... 21 
4.5.5 Exercício 8 ............................................................................................................................... 21 
UNIDADE 5 EXPRESSÕES ........................................................................................................................................ 22 
5.1 EXPRESSÕES CONDICIONAIS – ESTRUTURAS DE TESTE ....................................................................... 22 
5.1.1 if... else..................................................................................................................................... 22 
5.2 EXPRESSÕES SELETORAS ................................................................................................................... 23 
5.2.1 switch ....................................................................................................................................... 23 
5.3 LABORATÓRIO ................................................................................................................................... 24 
5.3.1 Exercício 9 ............................................................................................................................... 24 
5.3.2 Exercício 10 ............................................................................................................................. 24 
5.3.3 Exercício 11 ............................................................................................................................. 24 
5.3.4 Exercício 12 ............................................................................................................................. 24 
5.3.5 Exercício 13 ............................................................................................................................. 25 
5.4 EXPRESSÕES DE LOOP - ESTRUTURAS DE REPETIÇÃO ......................................................................... 25 
5.4.1 While ........................................................................................................................................ 25 
5.4.2 Do While .................................................................................................................................. 26 
Alfamídia Programação: Introdução ao Javascript 
 
 4 
 
5.4.3 For ...........................................................................................................................................26 
5.5 LABORATÓRIO ................................................................................................................................... 27 
5.5.1 Exercício 14 ............................................................................................................................. 27 
5.5.2 Exercício 15 ............................................................................................................................. 27 
5.5.3 Exercício 16 ............................................................................................................................. 27 
5.5.4 Exercício 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 USUÁRIO ...................................................................................................... 33 
6.6 MÉTODOS .......................................................................................................................................... 34 
6.6.1 Métodos estáticos .................................................................................................................... 34 
6.6.2 A declaração this ................................................................................................................. 34 
6.6.3 A declaração with ................................................................................................................. 34 
6.6.4 A função eval() ........................................................................................................................ 35 
6.7 LABORATÓRIO ................................................................................................................................... 36 
6.7.1 Exercício 18 ............................................................................................................................. 36 
6.7.2 Exercício 19 ............................................................................................................................. 36 
6.7.3 Exercício 20 ............................................................................................................................. 36 
6.7.4 Exercício 21 ............................................................................................................................. 37 
6.7.5 Exercício 22 ............................................................................................................................. 37 
6.7.6 Exercício 23 ............................................................................................................................. 37 
6.7.7 Exercício 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 GESTÕES DE EVENTOS DISPONÍVEIS 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 INTRODUÇÃO A DOM: ....................................................................................................................... 43 
8.2 O QUE É HTML DOM? ...................................................................................................................... 43 
8.3 QUANDO DEVEMOS USAR JAVASCRIPT ............................................................................................... 43 
8.4 AS DIVISÕES DE DOM ....................................................................................................................... 43 
8.5 ALTERAR CONTEÚDO 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 Métodos de um FORM ............................................................................................................. 46 
8.8.3 Eventos de um form ................................................................................................................. 46 
Alfamídia Programação: Introdução ao Javascript 
 
 5 
 
8.8.4 “Elements” de um FORM ....................................................................................................... 46 
8.9 MÉTODO GETELEMENTBYID ............................................................................................................. 47 
UNIDADE 9 MANIPULANDO FORMS COM DOM ..................................................................................................... 48 
9.1 TUTORIAL .......................................................................................................................................... 48 
9.2 EXTRAINDO INFORMAÇÕESDOS FORMULÁRIOS HTML ..................................................................... 50 
9.2.1 Buscando informações de formulários não nomeados ............................................................ 51 
9.2.2 Buscando informações de formulários nomeados ................................................................... 52 
9.3 VALIDANDO INFORMAÇÕES NO FORMULÁRIO .................................................................................... 52 
9.3.1 Validando informações de caixas de texto .............................................................................. 53 
9.3.2 Validando listas de seleção simples e múltipla (Combo e ListBox) ........................................ 54 
9.3.3 Validando caixas de escolha simples e múltipla (RadioButton e CheckBox) .......................... 56 
9.3.4 Controle de elementos do Textearea ....................................................................................... 58 
9.3.5 Criando uma função para mascaras de campos ..................................................................... 58 
9.4 VALIDAÇÃO COM EXPRESSÕES REGULARES (REGEX) ....................................................................... 59 
9.5 LABORATÓRIO ................................................................................................................................... 60 
9.5.1 Exercício 25 ............................................................................................................................. 60 
9.5.2 Exercício 26 ............................................................................................................................. 60 
9.5.3 Exercício 27 ............................................................................................................................. 61 
UNIDADE 10 OBJETO WINDOW ................................................................................................................................. 63 
10.1 MÉTODOS DO OBJETO WINDOW ..................................................................................................... 63 
UNIDADE 11 INTRODUÇÃO 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 
Alfamídia Programação: Introdução ao Javascript 
 
 6 
 
Unidade 1 
Alfamídia Programação: Introdução ao Javascript 
 
 7 
 
Unidade 2 Introdução ao Javascript 
2.1 O que é Javascript? 
O que é Javascript? 
O Javascript é uma linguagem de script que, incorporado nas tags HTML, permite 
incrementar a apresentação e interatividade das páginas Web. Funções escritas em 
Javascript podem ser embutidas dentro de seu documento HTML, a fim de 
permitir maior interatividade com as páginas 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 usuário. Existem, atualmente, muitos 
exemplos sobre Javascript na Internet. 
Javascript é uma linguagem de script interpretada de forma “just-in-time”, sendo 
utilizado apenas para operações mais simples. Podemos entender uma linguagem 
de “script” como uma espécie de “roteiro” simples para execução de tarefas. As 
linguagens de script, como o Javascript, são compostas apenas por um conjunto 
de instruções em formato texto que são interpretadas pelo computador no 
momento da sua execução. 
A linguagem Javascript é Case sensitive, que significa que um programa ou um 
compilador faz a diferença entre letras maiúsculas e minúsculas. O termo vem do 
inglês e significa sensível ao tamanho da letra, ou seja, Aluno e aluno são 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 introdução da linguagem Javascript no desenvolvimento Web, 
que se iniciou a partir do lançamento do Netscape 2.0, a linguagem sofreu uma 
série de atualizações e hoje possuem um conjunto enorme de recursos suportados 
pelos mais utilizados browsers do mercado. 
 
2.3 Versões de navegadores e de Javascript 
É apropriado introduzir as distintas versões de Javascript que existem e que 
evolucionaram em conjunto com as versões de navegadores. A linguagem foi 
avançando durante seus anos de vida e incrementando suas capacidades. A 
princípio podia realizar muitas coisas na página web, mas tinha poucas instruções 
http://www.criarweb.com/artigos/168.php
Alfamídia Programação: Introdução ao Javascript 
 
 8 
 
para criar efeitos especiais. Com o tempo também o HTML foi avançando e 
foram criadas novas características como as camadas, que permitem tratar e 
planificar os documentos de maneira distinta. Javascript também avançou e para 
manejar todas estas novas características foram criadas novas instruções e 
recursos. Para resumir vamos comentar as distintas versões de Javascript: 
 Javascript 1: nasceu com o Netscape 2.0 e suportava grande quantidade de 
instruções e funções, quase todas as que existem agora já se introduziram no 
primeiro padrão. 
 Javascript 1.1: É a versão de Javascript que foi desenhado com a chegada 
dos navegadores 3.0. Implementava pouco mais que sua versão anterior, 
como por exemplo, o tratamento de imagens dinamicamente e a criação de 
arrays. 
 Javascript 1.2: A versão 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: Versão que implementam os navegadores 5.0. Nesta versão 
foram limitadas algumas diferenças e asperezas entre os dois navegadores. 
 Javascript 1.5: Versão atual. Para navegadores atualizados. 
 
http://www.criarweb.com/artigos/168.php
Alfamídia Programação: Introdução ao Javascript 
 
 9 
 
Unidade 3 Noções básicas de Javascript 
 
3.1 Criando um script em uma página HTML 
Para utilizar o Javascript, é necessário criar uma página HTML e dentro desta 
página inserir uma tag delimitadora de script, a fim de executar o script na 
abertura da página HTML. Um bloco javascript é delimitado utilizando a tag 
<script> nas páginas HTML. Todo o código 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 Comentários 
A estrutura de comentários da linguagem Javascript é extremamente semelhante à 
estrutura da linguagem C++ e da linguagem Java. O Javascript permite 
comentários em linha única ou em bloco. 
Os comentários em linha única são representados pelos caracteres ( // ) e 
transformam todo e qualquer texto colocado na mesma linha após este símbolo 
em comentário, conforme exemplo a seguir: 
// Este texto é comentário 
 
Os comentários também podem ser criados em blocos no Javascript, utilizando a 
notação /* e */. Através desta notação, todo o texto colocado dentro destes dois 
delimitadores é considerado como comentário para a linguagem de script, 
conforme o exemplo a seguir: 
<script language="javascript" type="text/javascript"> 
/* Aqui iniciamos um comentário em bloco 
 note que mesmo estando em outra linha,este texto continua sendo comentário 
Alfamídia Programação: Introdução ao Javascript 
 
 10 
 
 até que seja colocado o delimitador de fim de comentário */ 
// 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 
código escrito em texto simples, composto por uma série de instruções de script, 
conjuntos ou blocos de instruções e comentários. Dentro de um script, você pode 
utilizar variáveis para armazenar informações ou mesmo realizar cálculos. 
Uma instrução escrita em Javascript pode ser representada por uma ou mais 
expressões, palavras-chave, comandos, ou operadores, e em geral são escritos em 
uma linha de código no arquivo que contém o script. No javascript, cada instrução 
contendo comandos é separada por um símbolo “;” (ponto e vírgula), o que 
permite escrever uma instrução 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 
comentário, caso for visualizado num navegador que não o reconheça. 
Abaixo podemos ver um exemplo de duas linhas de comando escritas em 
Javascript. 
 
<script language=" javascript1.1" type="text/javascript"> 
 sAlfamidia = "Este é o curso de JavaScript da Alfamídia!"; // Atribui um 
texto à variável 
 alert(sAlfamidia); 
</script> 
 
O javascript permite ainda que conjuntos de instruções sejam agrupados em 
blocos, utilizando como delimitadores chaves ({ }). Instruções agrupadas em 
blocos são consideradas como um único comando na linguagem javascript, e são 
utilizados, em geral, onde a linguagem necessita de “comando únicos”, como em 
instruções de teste, estruturas de repetição e funções. 
A seguir podemos ver um exemplo de um código Javascript que utiliza 
delimitadores de bloco de instruções. 
 
<script language=" javascript1.1" type="text/javascript"> 
// exemplo usando chaves 
function mensagem() 
{ 
 alert("Olá"); 
 alert("Seja bem-vindo ao curso de JavaScript"); 
} 
mensagem(); // função sendo chamada 
Alfamídia Programação: Introdução ao Javascript 
 
 11 
 
3.4 Variáveis 
Assim como qualquer linguagem de programação, o Javascript permite a criação 
de variáveis dentro dos scripts. As variáveis em Javascript possuem dois escopos, 
um escopo global, que são variáveis declaradas fora de funções, e um escopo 
local, que são variáveis declaradas dentro de funções. 
As variáveis são declaradas utilizando a instrução var, onde deve ser informado o 
nome das variáveis que devem ser declaradas. É possível declarar mais de uma 
variável em um mesmo comando var, conforme o exemplo a seguir: 
 
<script language=" javascript1.1" type="text/javascript"> 
var Valor1, Valor2, Valor3; //Variável global 
Valor1 = 45; 
Valor2 = 65; 
Valor3 = 85; //Atribuindo valor as variáveis 
</script> 
 
Como podemos ver no exemplo acima, a atribuição de variáveis é feita através do 
operador de atribuição =, e pode ser feita tanto na declaração da variável como 
posteriormente ao longo do código de script. 
3.5 Tipos de dados 
No javascript não existe uma tipagem explicita de dados na declaração de 
variáveis. Isto ocorre porque o Javascript não possui tipos explícitos de dados 
(relacionados à declaração das variáveis), toda e qualquer variável dentro de um 
código Javascript pode receber qualquer tipo de dado. A tipagem dos dados ocorre 
no momento da atribuição de valores as variáveis, ou seja, ao atribuir um valor 
número a uma variável, esta assume um tipo de dado “numérico”, ao atribuir um 
valor string a uma variável, esta assume o valor string. 
Apesar de não existir uma tipagem explícita de dados no Javascript, a linguagem 
interpreta alguns tipos de dados, divididos em três categorias: 
3.5.1 Tipos de dados Primitivos (por valor) 
Nos tipos de dados primitivos podemos encontrar os tipos Numéricos (que 
representam números inteiros ou fracionados), Strings (que representam 
caracteres ou um conjunto de caracteres), e Boolean (que representam valores 
booleanos True/False). 
 
<script language=" javascript1.1" type="text/javascript"> 
Alfamídia Programação: Introdução ao Javascript 
 
 12 
 
 var nNumber, String, bBoolean; //As variáveis ainda não assumiram um tipo 
específico 
 nNumber = 10; //nNumber assume tipo numérico 
 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 são utilizados geralmente em expressões de teste em 
conjunto com os tipos de dados compostos. 
O tipo undefined representa uma propriedade inexistente em um objeto criado 
dentro de um código javascript. O tipo null representa uma variável ou objeto sem 
valor, ou seja, uma variável ou objeto sem conteúdo. 
 
<script language=" javascript1.1" type="text/javascript"> 
 dtDate = new Date(); 
 /* typeOf devolve como resultado o tipo da variável, 
 neste caso ele vai disparar no alert o tipo de dados que este método 
 apresenta o valor que aparecerá na tela é "undefined" pois não existe 
 buscaDia dentro do objeto Date */ 
 alert(typeof(dtDate.buscaDia)); 
 dtDate = null; // Define a variável como null / nula 
</script> 
3.5.3 Tipos de dados Compostos (por referência) 
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 disponíveis na linguagem. 
 
<script language=" javascript1.1" type="text/javascript"> 
 var dtDate, aArray, i; 
 dtDate = new Date(); //Variável do tipo objeto date 
 aArray = new Array();//Variável do tipo objeto array 
 alert(dtDate.getDate() + "/" + (dtDate.getMonth()+1) + "/" + 
dtDate.getYear()); 
 aArray[0] = "Joao"; 
 aArray[1] = "Paulo"; 
 aArray[2] = "Pedro"; 
 aArray[3] = "Antônio"; 
 aArray.sort(); 
 for(i=0;i<aArray.length;i++) 
 { 
 document.write(aArray[i] + "<br>"); 
Alfamídia Programação: Introdução ao Javascript 
 
 13 
 
 } 
</script> 
3.6 Caixas de Diálogo ou de Mensagem 
Precisamos mostrar mensagens de um script para o usuário no navegador. Isso 
será feito utilizando métodos do objeto window. O Javascript possui 3 caixas de 
mensagens. 
3.6.1 O método alert() 
O método alert() cria uma caixa de diálogo na qual é reproduzido o valor (variável 
e/ou cadeia de caracteres) do argumento que lhe foi fornecido. Esta caixa bloqueia 
o programa até que o usuário clique em "OK". 
Sua sintaxe é: 
 
alert(variável); 
alert("cadeia de caracteres"); 
alert(variável + "cadeia de caracteres"); 
Alert no ie: 
 
 
Alert no FireFox 
 
Para escrever em várias linhas, deves usar: \n. 
alert("Bom dia!\nSeja bem-vindo ao meu site"); 
 
Alfamídia Programação: Introdução ao Javascript 
 
 14 
 
 
3.6.2 O método prompt() 
No mesmo estilo do que o método alert(), Javascript dispõe de outra caixa de 
diálogo, chamada caixa de convite, que é composto por um campo que contém 
uma entrada a ser completada pelo usuário. Esta entrada contém um valor por 
default. 
A sintaxe é: 
prompt("texto da caixa","valor por default"); 
 
Prompt no IE: 
 
Prompt no FireFox: 
 
Ao clicar no OK, o método reenvia o valor escrito pelo usuário ou a resposta 
default. Se o usuário clicar em Cancel, o valor nulo é então reenviado. 
O prompt() é utilizado para incrementar dados fornecidos pelo usuário. 
Alfamídia Programação: Introdução ao Javascript 
 
 15 
 
3.6.3 O método confirm() 
Este método mostra 2 botões o "OK" e "Cancel". Ao clicar no OK, confirm() 
reenvia o valor true e false caso clicar em Cancel. Este método é utilizado 
sobretudo para confirmar uma opção. 
A sintaxe é: 
confirm("Deseja continuar ?");Confirm no IE: 
 
Confirm no FireFox: 
 
3.6.4 O método document.write() 
O JavaScript permite que o programador escreva linhas dentro de uma página 
(documento), através do método write. As linhas escritas desta forma, podem 
conter textos, expressões JavaScript e comandos Html. As linhas escritas através 
deste método aparecerão no ponto da tela onde o comando for inserido. 
A sintaxe é: 
<script language="javascript" type="text/javascript"> 
var nome="Alfamídia"; 
document.write("Esta é minha primeira linha!"); 
document.write("Esta é o valor da variável nome:" + nome); 
</script> 
 
A ideia do exemplo acima é escrever duas linhas. Entretanto o método write não 
insere mudança de linha, o que provocará o aparecimento de apenas uma linha 
com os dois textos emendados. 
Uma alternativa para que isso não acontece é utilizarmos a concatenação com a 
tag <BR> do HTML que quebra linha: 
Alfamídia Programação: Introdução ao Javascript 
 
 16 
 
A sintaxe é: 
<script language="javascript" type="text/javascript"> 
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 programação convencional, que permitem tanto realizar 
operações aritméticas como operações booleanas (verdadeiro ou falso). Os 
operadores estão divididos em três grupos principais: Computacionais, Lógicos e 
de Atribuição. 
Dentre os operadores computacionais, podemos encontrar os operadores que 
realizam operações aritméticas, bem como operadores utilizados para realizar 
concatenações de strings. A lista dos operadores computacionais pode ser 
visualizada abaixo: 
 
Operador Símbolo 
Incremento ++ 
Decremento -- 
Multiplicação * 
Divisão / 
Módulo (Resto da divisão) % 
Adição/Concatenação + 
Subtração - 
 
Dentre os operadores lógicos, encontramos os operadores para testes lógicos 
convencionais, como equalidade e inequalidade. É importante ressaltar a diferença 
entre o operador de atribuição = e o operador lógico de igualdade ==. Muitas 
vezes os desenvolvedores tendem a utilizar o operador de atribuição para realizar 
testes de igualdade, o que acarreta em erros de lógico nos scripts. Operadores 
lógicos podem ser visualizados a seguir. 
 
Operador Símbolo 
Não Lógico (Negação) ! 
Menor que < 
Maior que > 
Menor ou igual a <= 
Maior ou igual a >= 
Igual == 
Diferente (não igual) != 
E Lógico (AND) && 
OU Lógico (OR) || 
Alfamídia Programação: Introdução ao Javascript 
 
 17 
 
Além destes dois conjuntos de operadores, ainda temos os operadores de 
atribuição. O operador de atribuição é representado pelo símbolo =, que pode ser 
combinado com qualquer operador computacional a fim de combinar o valor atual 
da variável com o valor que está sendo atribuído. Para utilizar esta funcionalidade, 
basta inserir o operador computacional na frente do operador de atribuição (Ex.: 
+=, -=, *=, /=). 
A seguir podemos ver uma série de exemplos para utilização de operadores: 
 
<script language=" javascript1.1" type="text/javascript"> 
 var nNumero1, nNumero2, nResultado; 
 
 // Atribuição de 0 ao número 
 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 variável nResultado seja igual a 25 
 ou false caso não seja. 
 Neste caso, o resultado será false porque nResultado não é igual a 25 
 */ 
 alert(nResultado == 25); 
</script> 
Alfamídia Programação: Introdução ao Javascript 
 
 18 
 
Unidade 4 Utilizando Funções 
4.1 O que é Função 
Uma função é um grupo de linha(s) de código de programação destinado uma 
tarefa bem específica e que podemos de necessário, utilizar várias vezes. A 
utilização de funções melhora bastante a leitura do script. 
4.2 Utilizando Funções no Javascript 
Como já podemos perceber, o Javascript possui inúmeros recursos e funções 
disponíveis para tornar as páginas mais interativas possíveis. Além de toda a 
estrutura de programação já apresentada, o javascript ainda permite ao 
desenvolvedor utilizar funções próprias do Javascript e criar suas próprias 
funções. 
4.3 As funções intrínsecas do Javascript 
O Javascript possui uma série de funções intrínsecas que podem ser chamadas em 
qualquer ponto do código JavaScript. As funções intrínsecas mais comuns são 
apresentadas a seguir. 
4.3.1 A função parseInt() e parseFloat() 
As funções parseInt e parseFloat são utilizadas para converter valor do formato 
string (texto) para o formato numérico. A função parseInt é utilizada para 
converter valores inteiros. A função parseFloat é utilizada para converter valores 
fracionados. Estas funções são extremamente úteis quando se faz necessária a 
conversão de um valor textual, informado pelo usuário ou não, para um tipo 
número. A partir da conversão é possível utilizar os valores para cálculos 
numéricos. 
 
Podemos ver exemplos destas duas funções no script a seguir: 
 
<script language=" javascript1.1" type="text/javascript"> 
 var nContador; 
 var sValor1, sValor2; 
 var sResultado, nResultado; 
 
 sValor1 = "10"; //Valor String 
Alfamídia Programação: Introdução ao Javascript 
 
 19 
 
 sValor2 = "1.5"; // Valor Fracionado 
 
 sResultado = sValor1 + sValor2; 
 nResultado = parseInt(sValor1) + parseFloat(sValor2); 
 
 // Concatenação 
 alert(sResultado + “ ”+ nResultado); 
 
 // Soma numérica 
 alert(nResultado); 
</script> 
4.3.2 Função escape() e unescape() 
Estas funções são utilizadas para converter uma string em um formato legível em 
qualquer computador, ou seja, remove caracteres que podem ser considerados 
inválidos para um formato padrão. Este formato padrão é representado por um 
símbolo % e um valor hexadecimal (podemos observar esta conversão 
comumente em barras de navegação de browsers). 
Podemos ver um exemplo de utilização das funções escape e unescape no 
exemplo a seguir. 
Podemos ver exemplos destas duas funções 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 função isNaN() 
A função isNaN (Is Not a Number) é utilizada para verificar se uma variável 
contém um valor especial NaN. O valor representa uma conversão numérica mal 
sucedida (NaN = Not a Numeric). Quando tentamos converter uma string (Ex.: 
ABC) para um valor numérico utilizando as funções parseInt e parseFloat, o 
resultado da função é um valor NaN. 
Exemplo: 
<script language="javascript1.1" type="text/javascript"> 
var sTelefone = "1234XDFRT"; 
//validar telefone (verificação se contem apenas números) 
if (isNaN(sTelefone)){ 
 alert ("O seu telefone " + sTelefone + " deve conter apenas números!"); 
} 
Alfamídia Programação: Introdução ao Javascript 
 
 20 
 
</script> 
4.4 Funções criadas pelo usuário 
Além das funções disponíveis, por padrão no Javascript, a linguagem nos permite 
criar nossas próprias funções, chamadas funções definidas pelo usuário. Para criar 
funções devemos utilizar a cláusula function, que é utilizada para criar as funções 
no Javascript. 
A sintaxe para a criação das funções no Javascript é: 
 
function <Nome da Função> ([param1], [param2], ... , [paramn]) 
{ 
 ... 
} 
 
Como podemos ver a função pode conter diversos parâmetros de entrada que 
podem ser utilizados para cálculos ou algum processamento especial dentro do 
corpo da função. Para definir os parâmetros, basta informar os nomes das 
variáveis que irão representar os parâmetros na função. Podemos ver um exemplo 
de função no código abaixo: 
 
<scriptlanguage="javascript1.1" type="text/javascript"> 
function Soma(nNumero1, nNumero2) 
{ 
 var nSoma; 
nSoma = nNumero1+nNumero2; 
 alert("Soma= " + nSoma); 
} 
Soma(10,5); 
</script> 
 
As funções do Javascript ainda permitem que o usuário retorne valores. Para 
retornar um valor em uma função, basta criar a função da mesma forma como 
apresentado no exemplo anterior, porém com a utilização do comando return. O 
comando return serve para interromper o processamento de uma função ou um 
bloco de script, com a opção de retornar um valor no caso de estar dentro de uma 
função. Podemos ver um exemplo de utilização do comando return a seguir. 
<script language="javascript1.1" type="text/javascript"> 
function Soma(nNumero1, nNumero2) 
{ 
 return nNumero1+nNumero2; 
} 
alert("Soma= " + Soma(10,5)); 
</script> 
Alfamídia Programação: Introdução ao Javascript 
 
 21 
 
4.5 Laboratório 
Crie um diretório chamado Laboratórios dentro de sua pasta de arquivos. Dentro deste 
diretório, você colocará os arquivos HTML que serão criados para realizar estes exercícios. 
4.5.1 Exercício 4 
Faça um programa que 4 valores, calcule o quadrado de cada um, some todos os resultados 
e mostre o resultado final. 
4.5.2 Exercício 5 
Faça um algoritmo que leia 4 notas e informe a média deles. 
4.5.3 Exercício 6 
Faça um programa para calcular o estoque médio de uma peça, sendo informado o estoque 
mínimo e o estoque máximo. 
4.5.4 Exercício 7 
Construa um algoritmo com uma função que leia a cotação do dólar, leia os valores em 
dólar, converta esse valor para real e mostre o resultado. 
4.5.5 Exercício 8 
Construa um algoritmo para pagamento de comissão de vendedores de peças, levando em 
consideração que sua comissão será de 5% do total da venda e que você tem os seguintes 
dados: preço unitário da peça e quantidade vendida. 
Unidade 5 Expressões 
5.1 Expressões Condicionais – estruturas de teste 
Para uma utilização eficaz dos operadores disponíveis no Javascript, é necessário 
entender como funcionam as estruturas de teste utilizadas pela linguagem. Dentro 
do Javascript possuímos o if else. 
5.1.1 if... else 
No comando if, é necessário informar dentro de parênteses a expressão a ser 
testada, e caso ela seja verdadeira, o comando ou bloco de comandos subseqüente 
ao comando if será executado. Este comando ainda possui uma cláusula else 
opcional, que pode conter uma expressão ou conjunto de expressões a serem 
executadas caso a condição testada no comando if não seja verdadeira. 
A seguir podemos verificar um exemplo do comando if: 
Exemplo 1 – if simples: 
<script language="javascript1.1" type="text/javascript"> 
var sTelefone; 
sTelefone = prompt("Informe o número do telefone",""); 
//validar telefone (verificação se contem apenas números) 
if (isNaN(sTelefone)) 
 alert ("O seu telefone deve conter apenas números!"); 
</script> 
Exemplo 2 – if else: 
<script language="javascript1.1" type="text/javascript"> 
var nNum; 
nNum = parseInt(prompt("Informe um número inteiro:","")); 
if(nNum > 0) 
 alert("Número positivo"); 
else 
 alert("Número negativo"); 
</script> 
Para aqueles que gostam da escrita enxuta, também há: 
(expressão)?instruçãoA:instruçãoB; 
Se a expressão entre parêntese é verdadeira, a instrução A será executada. Se a 
expressão entre parêntese é falsa, é a instrução B será executada. 
<script language="javascript1.1" type="text/javascript"> 
var nNum; 
nNum = parseInt(prompt("Informe um número inteiro:","")); 
alert((nNum>0)? "Número positivo":"Número negativo"); 
</script> 
 
Exemplo 3 – if else encadeado: 
<script language="javascript1.1" type="text/javascript"> 
Alfamídia Programação: Introdução ao Javascript 
 
 23 
 
var nNum; 
nNum = parseInt(prompt("Informe um número inteiro:","")); 
if(nNum == 0) 
 alert("Número neutro"); 
else if(nNum > 0) 
 alert("Número positivo"); 
else 
 alert("Número negativo"); 
</script> 
Se o comando if possuir mais de uma instrução, é obrigatório a utilização dos 
delimitadores de “{ }“. 
if(condição verdadeira) 
{ 
instrução 1; 
instrução 2; 
instrução 3; 
} 
5.2 Expressões Seletoras 
5.2.1 switch 
Além do comando if, o comando switch pode ser utilizado para realizar testes 
lógicos na linguagem Javascript. O comando switch é um comando de teste de 
seleção múltipla, ou seja, não testa a expressão lógica apenas por um valor 
específico, mas sim por uma série de valores informados no código de script. O 
comando script requer um bloco de comando(s) inserido(s) logo após a expressão 
lógica, que irá conter os comandos executados no caso de cada uma das 
expressões. Ao final de cada conjunto de instruções de uma condição swicth, é 
necessário informar o comando break, para que o javascript não execute as 
condições posteriores ao teste, conforme o exemplo a seguir: 
<script language="javascript1.1" type="text/javascript"> 
var farol; 
farol = prompt("Informe a cor do semáforo",""); 
switch (farol) { 
 case "vermelho": 
 alert("Pare") 
 break 
 case "amarelo": 
 alert("Atencão") 
 break 
 case "verde": 
 alert("Prossiga") 
 break 
 default: 
 alert("Cor ilegal") 
} 
Alfamídia Programação: Introdução ao Javascript 
 
 24 
 
</script> 
5.3 Laboratório 
5.3.1 Exercício 9 
João comprou um computador para controlar o rendimento diário 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. João precisa 
que você faça 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 João deverá pagar. Caso contrário, 
exibir apenas a quantidade de quilos pescados. 
5.3.2 Exercício 10 
Elabore um programa que leia o código e o número de horas trabalhadas de um operário. 
Após, calcule o salário sabendo-se que ele ganha R$ 10,00 por hora. Quando o número 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 salário total e o valor excedente. 
5.3.3 Exercício 11 
Faça uma função que verifique se o numero é par ou impar. Mostre a mensagem no final. 
5.3.4 Exercício 12 
Faça um programa com funções 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. 
Alfamídia Programação: Introdução ao Javascript 
 
 25 
 
 
5.3.5 Exercício 13 
Elabore um programa que, dada a idade de um nadador, classifique-o em uma das 
seguintes categorias, sabendo que crianças com idade inferior a 5 anos ainda não 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 Expressões de Loop - Estruturas de repetição 
5.4.1 While 
O comando while é utilizado para repetir um determinado conjunto de instruções 
de acordo com uma expressão lógica definida no código de script. 
while (condição verdadeira){ 
continuar a fazer alguma coisa 
} 
Enquanto que a condição é verdadeira, o Javascript continua a executar as 
instruções entre as chaves. Uma vez que a condição não é mais verdadeira, o ciclo 
interrompe-se e continua-se o script. 
Podemos ver um exemplo de utilização do comando while no código abaixo: 
<script language="javascript1.1" type="text/javascript"> 
var sNome, nCont; 
nCont = 1; 
while(nCont <=5) 
{ 
 sNome = prompt("Informe o nome: ",""); 
 //Incrementa o contador 
nCont++; 
} 
Alfamídia Programação: Introdução ao Javascript 
 
 26 
 
5.4.2 Do While 
Utiliza-se geralmente quando não sabemos quantas vezes haverá de se executar o 
loop, assim como o comando while, com a diferença de quesabemos ao certo que 
o loop será executado pelo menos. 
do{ 
 sentenças do loop 
}while(condição) 
Se a condição é verdadeira, o Javascript continua a executar as instruções entre as 
chaves. Uma vez que a condição não é mais verdadeira, o ciclo interrompe-se e 
continua-se o script. 
Podemos ver um exemplo de utilização do comando do while no código abaixo: 
<script language="javascript1.1" type="text/javascript"> 
var nNumi, nNumf; 
nNumi = parseInt(prompt("Informe o número inicial: ","")); 
do{ 
 nNumf = parseInt(prompt("Informe o número final: ","")); 
 if(nNumf <= nNumi) 
 alert("O número final deve ser maior que o número inicial"); 
}while(nNumf<=nNumi); 
alert("Número inicial: " + nNumi + "\nNúmero final: " + nNumf ); 
</script> 
5.4.3 For 
Além do comando while, temos o comando for, que pode ser utilizado para repetir 
um determinado conjunto de instruções de acordo com um índice número 
especificado no próprio comando for. No comando for é necessário informar a 
variável que servirá como índice, a condição para execução do for, e o incremento 
utilizado para execução da estrutura de repetição. 
for(valor inicial ; condição ; progressão) 
{ 
instruções; 
} 
Podemos ver um exemplo de utilização do comando for a seguir. 
<script language="javascript1.1" type="text/javascript"> 
var sNome, nCont; 
for(nCont=1;nCont<=5;nCont++) 
{ 
 sNome = prompt("Informe o nome: ",""); 
} 
</script> 
O comando for ainda pode ser utilizado com a cláusula in para realizar 
enumerações de propriedades em objetos ou mesmo itens contidos em arrays. 
Para a utilização da cláusula in, é necessário definir uma variável que irá receber o 
valor de cada membro solicitado dentro de cada iteração da estrutura de repetição. 
Alfamídia Programação: Introdução ao Javascript 
 
 27 
 
Com a cláusula in podemos, por exemplo, buscar todas as propriedades 
disponíveis de um determinado objeto criado no JavaScript. No exemplo a seguir 
podemos visualizar todas as propriedades disponíveis no objeto window, que 
representa a janela do browser. 
<script language="javascript1.1" type="text/javascript"> 
 var prop; 
 for(prop in window) 
 { 
 var sMensagem; 
 sMensagem = "Propriedade da janela do Browser: "; 
 sMensagem += prop; 
 alert(sMensagem); 
 } 
</script> 
5.5 Laboratório 
5.5.1 Exercício 14 
Faça um programa que leia as notas finais dos alunos de uma disciplina, calcule e informe 
a média da turma e informe o aluno com a nota maior. 
5.5.2 Exercício 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 
 Média de altura das mulheres 
5.5.3 Exercício 16 
Leia dois números (inicial e final) e mostre os números pares deste intervalo. Além disso, 
deve mostrar também quantos são e qual é a soma desses números 
5.5.4 Exercício 17 
Crie um programa que leia vários números (quantos o usuário quiser). Após mostre os 
números pares desses números e multiplique por 2 mostrando também o resultado. 
 
Alfamídia Programação: Introdução ao Javascript 
 
 28 
 
Unidade 6 Objetos 
Além da utilização de funções intrínsecas e funções de usuário, o Javascript 
possui uma série de objetos intrínsecos que permitem o uso de números de 
recursos dentro da linguagem. As próprias funções intrínsecas que vimos no 
módulo anterior estão colocadas dentro de um objeto intrínseco chamado Global, 
mas por estarem colocadas dentro deste objeto elas tem um escopo global, 
permitindo sua utilização sem a chamada explícita ao objeto. 
Os objetos são compostos por métodos, que funcionam exatamente da mesma 
forma que as funções em uma linguagem de programação e são utilizadas para de 
alguma forma executar alguma ação sobre o objeto. Além dos métodos, os objetos 
possuem propriedades que dão características específicas as instâncias dos objetos 
utilizados. 
Para utilizarmos um objeto no Javascript é necessário instanciá-lo inicialmente. 
Para iniciarmos um objeto precisamos criar uma variável que irá armazenar a 
instância do objeto. Para criar uma nova instancia de um objeto, devemos utilizar 
o comando new. 
A seguir veremos os objetos intrínsecos do javascript mais utilizados. 
6.1 O Objeto Array 
O objeto Array (também conhecido como matriz) é a representação 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, através do comando new. Deve-se lembrar que a primeira posição de um 
array é 0, então um array de tamanho 6, começa na posição 0 e acaba na posição 
5. A seguir vemos uma série de exemplos de criação de arrays. 
<script language="javascript1.1" type="text/javascript"> 
var sNomes = new Array(); 
var sValores = new Array(5)// Array de 6 posições; 
</script> 
Como mostrado no exemplo anterior, os array podem ser criados com um 
tamanho inicial ou não. Caso não 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 início do array que queremos gravar ou ler. 
Caso o início não exista e não foi atribuído um tamanho para ele, o array será 
redimensionado automaticamente. Caso contrário, o script exibirá um erro. 
PROPRIEDADE DESCRIÇÃO 
length Devolve o número de elementos (tamanho) do array. 
Alfamídia Programação: Introdução ao Javascript 
 
 29 
 
MÉTODOS DESCRIÇÃO 
join() Junta todos os elementos do array numa única cadeia. Os 
diferentes elementos são separados por um caracter 
separador especificado no argumento. Por default, este 
separador é uma vírgula. 
sort() Devolve os elementos em ordem alfabética ou crescente. 
reverse() Devolve os elementos em ordem inversa ou decrescente. 
Um exemplo de utilização de variáveis dentro do array pode ser visto abaixo: 
<script language="javascript1.1" type="text/javascript"> 
var sNomes = new Array(); 
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 dinâmica, sem informar um 
número de elementos, podemos a qualquer momento consultar a propriedade 
length para verificar quantos elementos estão contidos dentro do array. 
Além da armazenagem de objetos, os array podem ser utilizados para outras 
finalidades como ordenação de dados. Para isto devemos utilizar os métodos 
disponíveis dentro do array, como o método sort para ordenar por ordem 
alfabética e o método reverse para ordenar por ordem decrescente. 
Um exemplo de utilização de um array para ordenação pode ser visto abaixo: 
 
Alfamídia Programação: Introdução ao Javascript 
 
 30 
 
<script language="javascript1.1" type="text/javascript"> 
var sNomes = new Array(); 
 
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 intrínsecos do Javascript, utilizado para o 
gerenciamento de datas. Para criar uma nova instancia do objeto, basta criar uma 
nova variável e atribuir uma nova instancia do objeto Date. O objeto date é 
sempre inicializado coma Data e Hora atuais. Um exemplo de criação de um 
objeto Date pode ser visto a seguir. 
<script language="javascript1.1" type="text/javascript"> 
var dtData, nDia, nMes, nAno 
 
dtData = new Date(); //atribui a variável dtData, a data do sistema 
nDia = dtData.getDate(); // atribui o dia 
nMes = dtData.getMonth(); /* atribui o mês. Retorna um valor de 0 a 11, onde o 0 
é igual a Janeiro */ 
nAno = dtData.getFullYear(); // atribui o ano com 4 dígitos 
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 */ 
Alfamídia Programação: Introdução ao Javascript 
 
 31 
 
alert("Dia da semana: " + nDiaSemana); 
</script> 
 
MÉTODOS DESCRIÇÃO 
getDate() Devolve o dia do mês. 
getMonth() Devolve o mês (começa por 0). 
getFullYear() Retorna o ano com todos os dígitos. 
getDay() Devolve o dia da semana (começa 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, não é necessário criar um nova instância 
deste em uma variável, basta chamarmos seus métodos e propriedades 
diretamente. 
Este objeto é utilizado para realizar cálculos matemáticos mais avançados, que 
não podem ser realizados utilizando os operadores mais simples do JavaScript. 
 
MÉTODOS SINTAXE DESCRIÇÃO 
abs() Math.abs(x); 
Devolve o valor absoluto (valor positivo) de x, 
isto é, elimina o símbolo negativo de um número. 
Ex.: num = Math.abs(-3); 
Resultado: num = 3 
ceil() Math.ceil(x); 
Devolve o inteiro superior ou igual ao x. 
Este método não arredonda o número. 
Ex.: num = Math.ceil(1.01); 
Resultado: num = 2 
floor() Math.floor(x) 
Devolve o inteiro inferior ou igual ao x. 
Este método não arredonda o número. 
Ex.: num = Math.floor(1.01); 
Resultado: num = 1 
round() Math.round(x) Arredonda o número ao inteiro mais próximo. 
Ex.: num = Math.round(1.81); 
Resultado: num = 2 
Alfamídia Programação: Introdução ao Javascript 
 
 32 
 
max() Math.max(x,y) 
Devolve o maior de 2 números x e y. 
Ex.: num = Math.max(4,8); 
Resultado: num = 8 
min() Math.min(x,y) 
Devolve o menor de 2 números x e y. 
Ex.: num = Math.min(4,8); 
Resultado: num = 4 
pow() Math.pow(x,y) 
Calcula o valor de um número x elevado na 
potência y. 
Ex.: num = Math.pow(2,4); 
Resultado: num = 16 
random() Math.random() 
Devolve o valor de um número aleatório 
escolhido entre 0 e 1. 
Ex.: num = Math.random(); 
Resultado: qualquer número 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 utilização do objeto Math no exemplo a seguir. 
<script language="javascript1.1" type="text/javascript"> 
var sNomes = new Array(); 
var nNumero1 = 10.5; 
var nNumero2 = -10.5; 
var nNumero3 = 4; 
var nNumero4 = 12; 
 
alert("Método ABS(10.5): " + Math.abs(nNumero1)); 
alert("Método ABS(-10.5): " + Math.abs(nNumero2)); 
alert("Método SQRT(Raiz Quadrada 4): " + Math.sqrt(nNumero3)); 
alert("Método Maximo(4,12): " + Math.max(nNumero3, nNumero4)); 
</script> 
6.4 O Objeto String 
O objeto string representa variáveis de texto dentro do Javascript. Os objetos 
string são criados através do comando String() ou através da atribuição direta de 
um valor para uma variável. O objeto string possui uma série de métodos que 
permitem manipular as strings no Javascript. 
PROPRIEDADE DESCRIÇÃO 
Length Devolve um inteiro que indica o comprimento da cadeia de 
caracteres. 
MÉTODOS DESCRIÇÃO 
charAt() Mostra o caracter na posição pedida. 
Alfamídia Programação: Introdução ao Javascript 
 
 33 
 
indexOf() Devolve a posição de um caracter ou cadeia de caracteres 
(pesquisa feita da esquerda para a direita). 
lastIndexOf() Devolve a posição de um caracter ou cadeia de caracteres 
(pesquisa feita da direita para a esquerda). 
substring(x,y) Devolve uma string parcial situada entre a posição x e a 
posição y-1. 
toLowerCase() Transforma todas as letras em minúsculas. 
toUpperCase() Transforma todas as letras em Maiúsculas. 
 
Podemos ver a implementação de alguns desses métodos no exemplo abaixo: 
<script language="javascript1.1" type="text/javascript"> 
var sString1 = "string criada diretamente pela variável"; 
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 usuário 
Além dos objetos intrínsecos, o Javascript também nos permite criar objetos 
definidos pelo usuário, com propriedades próprias definidas no próprio script. 
Para criarmos um objeto definido pelo usuário no Javascript, devemos criar uma 
variável e atribuir uma nova instancia de um objeto do tipo Object. Após criar esta 
variável, basta atribuir as propriedades ao objeto que elas serão criadas de forma 
automática. Podemos visualizar a utilização de objetos definidos pelo usuário 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 contém a propriedade "; 
 sMsg += prop; 
 sMsg += " com o valor de " + oContato[prop]; 
Alfamídia Programação: Introdução ao Javascript 
 
 34 
 
 alert(sMsg); 
} 
</script> 
6.6 Métodos 
Os métodos de um objeto são funções que pertencem a um objeto. Repare que 
enquanto que as propriedades correspondem a variáveis, os métodos 
correspondem a funções. 
6.6.1 Métodos estáticos 
Alguns objetos oferecem métodos estáticos. Esses métodos diferem dos métodos 
normais pelo fato de não pertencerem a um objeto criado com a instrução new. 
6.6.2 A declaração this 
A declaração this representa o próprio objeto em que é usada. Esse objeto pode 
ser uma função, uma ligação de hipertexto, uma imagem, etc. Esta declaração é 
bastante útil em HTML Dinâmico porque nos ajuda muito a construir funções que 
respondem a eventos sabendo sempre qual foi o 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 declaração with 
Esta declaração estabelece o objeto ao qual se aplica uma série de instruções. Os 
dois exemplos seguintes usam o objeto Math para ilustrar o uso desta declaração e 
são totalmente equivalentes. 
Versão 1: 
<script language="javascript1.1" type="text/javascript"> 
x = Math.pow(3,2) + Math.sqrt(100); 
y = Math.floor(Math.random()* 100); 
alert(x + " - " + y); 
</script> 
Alfamídia Programação: Introdução ao Javascript 
 
 35 
 
Versão 2: (equivalente à anterior.) Repare que não foi preciso replicar o comando 
Math. antes dos nomes dos métodos pow(), sqrt(), floor() ou 
random(). 
<script language="javascript1.1" type="text/javascript"> 
with (Math) { 
 x = pow(3,2) + sqrt(100); 
 y = floor(random()* 100); 
} 
alert(x + " - " + y); 
</script> 
 
Quando o número de instruções é pequeno não vale a pena usar a declaração with, mas se 
esse número crescer muito o código será mais compacto e fácil de ler se usarmos esta 
declaração. 
 
6.6.4 A função eval() 
A função eval() serve para executar um bloco de script criado dinamicamente. 
Com o comando Eval é possível criar comandos em tempo de execução do script 
e executá-los no mesmo escopo do script em que o comandoEval está rodando. 
Podemos ver um exemplo disso no código a seguir: 
Exemplo 1: 
 
<script language=" javascript1.1" type="text/javascript"> 
 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> 
<script language="javascript1.1" type="text/javascript"> 
function compute(f) 
{ 
Alfamídia Programação: Introdução ao Javascript 
 
 36 
 
 f.result.value = eval(f.expr.value); 
} 
</script> 
<body> 
<form name="teste"> 
Digite uma expressáo matemática (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 Laboratório 
 
6.7.1 Exercício 18 
Faça uma função que informe se a pessoa pode votar de acordo com a idade, 
conforme as leis do país. 
6.7.2 Exercício 19 
Construa um programa que leia 5 números, exiba os números em ordem crescente e 
decrescente, e encontre o maior valor, o menor e a média dos números lidos. 
6.7.3 Exercício 20 
Desenvolva um algoritmo que mostre uma mensagem com a data completa do dia, dia da 
semana, hora completa e um texto conforme situação 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 
Alfamídia Programação: Introdução ao Javascript 
 
 37 
 
6.7.4 Exercício 21 
Crie uma variável 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 método sort do array para ordenar os itens do array. 
Crie uma nova variável chamada sListaDeNomes. 
Crie uma estrutura de repetição e utilize a variável 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 Exercício 22 
Crie um vetor de 10 posições e armazene 10 valores. Peça ao usuário um número qualquer 
e verifique quantos números do vetor são inferiores a esse número e quantos são 
superiores. 
6.7.6 Exercício 23 
Escreva um programa que leia quatro números, calcule o quadrado de cada um e some 
todos. Se o quadrado do terceiro for maior que mil (1000), mostre o número original e 
finalize o programa. Caso contrário, mostre o resultado de todos. 
6.7.7 Exercício 24 
Escreva um programa que gere aleatoriamente 6 números para a Mega Sena. Lembrando 
que estes números devem ser maior ou igual a 1 e menor ou igual a 60. 
 
Alfamídia Programação: Introdução ao Javascript 
 
 38 
 
Unidade 7 Eventos 
7.1 O que é 
Os eventos são a maneira que temos em Javascript de controlar as ações dos 
visitantes e definir um comportamento da página quando se produzam. Quando 
um usuário visita uma página 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 usuário clica sobre um 
botão, edita um campo de texto ou abandona a página. 
7.2 Eventos implementados pelo JavaScript 
EVENTOS DESCRIÇÃO 
Clik Quando o usuário clica sobre um botão, um link ou outros 
elementos. 
Load Quando a página é carregada pelo browser. 
Unload Quando o usuário saia da página 
MouseOver Quando o usuário 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 formulário tem o foco, isto é, está 
ativo. 
Blur Quando um elemento de formulário perde o foco, isto é, 
quando deixa de estar ativo. 
Change Quando o valor de um campo de formulário é modificado. 
Select Quando o usuário seleciona um campo dentro de elemento 
de formulário. 
Submit Quando o usuário clica sobre o botão Submit para enviar 
um formulário. 
Keydown Quando o usuário pressiona uma tecla, independentemente 
que a solte ou não. 
Keypress Quando o usuário deixa uma tecla clicada por um tempo 
determinado. 
Alfamídia Programação: Introdução ao Javascript 
 
 39 
 
Keyup Quando o usuário deixa de apertar uma tecla. É produzido 
no momento que se libera a tecla. 
7.3 Como se define um evento 
Para definir as ações que queremos realizar ao produzir um evento utilizamos os 
manipuladores de eventos. Existem muitos tipos de manipuladores de eventos, 
para muitos tipos de ações do usuário. O manipulador de eventos se coloca na 
etiqueta HTML do elemento da página que queremos que responda às ações do 
usuário. 
Por exemplo, temos o manipulador de eventos onclick, que serve para descrever 
ações que queremos que se executem quando se clique. Se quisermos que ao 
clicar sobre um botão aconteça alguma coisa, escrevemos o manipulador onclick 
na etiqueta <input type=button> desse botão. 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 sentenças Javascript que queremos que 
se executem ao se produzir o evento. 
7.4 Gestões de eventos disponíveis em JavaScript 
Cada elemento da página tem sua própria lista de eventos suportados. 
 
OBJETO GESTÃO DE EVENTO DISPONÍVEIS 
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 botão onclick. 
Botão Radio onclick 
Lista de seleção onblur, onchange, onfocus 
Botão Submit onclick 
Botão Reset onclick 
Alfamídia Programação: Introdução ao Javascript 
 
 40 
 
7.4.1 onclick 
O onclick é mais clássico, o clique do mouse. 
<body> 
<form id="form1" name="form1"> 
 <input type="button" name="botao1" id="botao1" value="Enviar" 
onclick="alert('Você clicou no botão')" /> 
</form> 
</body> 
7.4.2 onload 
O onload aparece quando a página acaba de se carregar. No exemplo abaixo, 
vamos mostrar qual é o navegador utilizado pelo usuário. 
<body onload="alert(navigator.appName)"> 
7.4.3 onunload 
O onunload aparece quando o usuário sai da página. 
<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. 
<script language="javascript1.1" type="text/javascript"> 
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 sensível (link ou imagem). 
<script language="javascript1.1" type="text/javascript"> 
function mensagem() 
{ 
 alert("Você esta utilizando o onmouseout"); 
} 
</script> 
Alfamídia Programação: Introdução ao Javascript 
 
 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". 
<script language="javascript1.1" type="text/javascript"> 
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 formulário 
perde o foco. Isto aconteça quando o usuário desativa o campo de texto clicandofora 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. 
<script language="javascript1.1" type="text/javascript"> 
function mensagem() 
{ 
 alert("Isto é o onblur"); 
} 
</script> 
</head> 
<body> 
<form name="form1" id="form1"> 
 Nome: <input type="text" name="texto1" id="texto1" size="20" 
onblur="mensagem()"/> 
</form> 
Alfamídia Programação: Introdução ao Javascript 
 
 42 
 
7.4.8 onchange 
O onchange é bastante semelhante ao onblur, mas com uma pequena diferença. 
Não só a área de texto deve ter perdido o foco, mas também o seu conteúdo deve 
ter sido alterado pelo usuário. 
<script language="javascript1.1" type="text/javascript"> 
function mensagem() 
{ 
 alert("Isto é o onchange"); 
} 
</script> 
</head> 
<body> 
<form name="form1" id="form1"> 
 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 usuário selecionou toda ou parte de um texto num 
campo de texto. 
<script language="javascript1.1" type="text/javascript"> 
function mensagem() 
{ 
 alert("Isto é o onselect"); 
} 
</script> 
</head> 
<body> 
<form name="form1" id="form1"> 
 Nome: <input type="text" name="texto1" id="texto1" size="30" value="tenta 
selecionar este texto" onselect="mensagem()"/> 
</form> 
 
 
Alfamídia Programação: Introdução ao Javascript 
 
 43 
 
Unidade 8 Conhecendo Objects DOM 
8.1 Introdução a DOM: 
O W3C (World Wide Web Consortium) desenvolveu o padrão DOM para 
padronizar a forma de acesso a XML e suas estruturas e como os browsers e as 
aplicações da Web manipulam e interagem com as páginas da Web. Todos os 
browsers modernos implementam estes padrões. Apesar de essas implementações 
serem geralmente incompletas, elas são 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 padrões para HTML, e para acessar componentes 
padrões das estruturas do HTML representadas como marcações. 
8.3 Quando devemos usar Javascript 
A DOM HTML é uma plataforma e linguagem independente, pode ser usada com 
varias linguagens de programação como Java, Javascript, e Vbscript. Este módulo 
trata o uso de DOM com Javascript. 
8.4 As divisões de DOM 
DOM esta dividida em três partes: 
 DOM 
 XML DOM 
 (X)HTML DOM 
8.5 Alterar conteúdo com HTML DOM 
Este exemplo de script mostra como pode ser alterado, o atributo background para 
cor amarela com JAVASCRIPT e DOM. 
 
Alfamídia Programação: Introdução ao Javascript 
 
 44 
 
<!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>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 coleção 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 várias propriedades, também 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 utilização: body.nomePropriedade 
atributos Descrição 
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 
Alfamídia Programação: Introdução ao Javascript 
 
 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 usuário inserir informações no documento HTML. Todas as 
vezes que se deseja inserir informações de input, a utilização da TAG form é 
obrigatória. Podemos utilizar elementos form com text fields, radio buttons, 
checkbox e listas de seleção. O conteúdo inserido normalmente é postado para o 
servidor para processar as informações. 
8.8.1 Atributos do Form 
 
atributos descrição 
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 tabulação 
para o form 
Target Seta ou retorna o alvo em que o response vai processar apos a 
Alfamídia Programação: Introdução ao Javascript 
 
 46 
 
submissão, normalmente é um frame ou iframe. 
8.8.2 Métodos de um FORM 
Método Descrição 
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 é constituído de vários objetos para interagir um usuário, neste caso 
DOM disponibiliza um vetor de elementos. Para facilitar na validação dos objetos. 
Exemplo: 
 
<script language="javascript1.1" type="text/javascript"> 
function validaIdade(){ 
 if(document.forms[0].elements[0].value < 0) 
 { 
 alert("Digite a idade válida"); 
 } 
} 
</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> 
Alfamídia Programação: Introdução ao Javascript 
 
 47 
 
 
Esta função valida o primeiro campo, do primeiro form do documento HTML. 
 
Coleções descrição 
elements[] Retorna um array contendo cada elemento de um FORM 
8.9 Método getElementById 
Este método 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 posição dos nodos da árvore de objetos da API DOM. 
A melhor forma de localizar objetos de formulário é utilizando seu caminho 
completo, como document.nomeFormulario.nomeCampo.value. 
Confira os Exemplos: 
 
<script language="javascript1.1" type="text/javascript"> 
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">Alfamídia</p> 
<button onclick="changeColor('blue');">Azul</button> 
<button onclick="changeColor('red');">Vermelho</button> 
</form>