eBook

Curso Básico de JavaScript

Fábio Rodrigo Brandão

<JAVASCRIPT>
Versão do Documento: 1.0

As informações contidas neste documento estão sujeitas à alteração sem aviso prévio.
Nenhuma parte deste documento pode ser reproduzida ou transmitida por qualquer meio,
eletrônico ou mecânico, para qualquer propósito, sem permissão expressa, por escrito do
autor.
Várias marcas registradas aparecem ao longo deste documento. Mais do que simples-
mente listá-las e informar quem possui seus direitos de exploração ou então utilizar os
símbolos “TM” ou “®” após seus nomes, o autor declara estar utilizando tais nomes ape-
nas para fins editoriais, em benefício exclusivo do dono da marca registrada, sem inten-
ção de infringir as regras e as leis de sua utilização.

Escreva para o autor: [email protected]

Elaborada por Fábio Rodrigo Brandão
Visite meu website: fabiobrandao.net.br
 Curso Básico de JavaScript

Requisitos de Hardware e Software

Antes de começar a estudar de forma prática o nosso material, verifique se seu equipa-
mento atende aos requisitos mínimos relacionados:

Hardware
 Processador Pentium® 100Mhz;
 Memória RAM: 24 MB, recomendado 32 MB;
 Espaço livre em disco: 30 MB;
 Monitor SVGA.

Software
 Windows 95,98, ME ou 2000;
 Internet Explorer 4.0 ou superior;
 Matrix Y2K (incluso no cd);
 PDThumbs (incluso no cd).

Pré-requisitos
Para que você possa compreender bem todas as informações contidas neste material, é
fundamental que você tenha feito um treinamento ou lido nosso material sobre Windows,
Internet e HTML.

FÁBIO RODRIGO BRANDÃO PÁG. 2

 Curso Básico de JavaScript

Sumário
Capítulo I – Introdução ................................................................... 5
1.1 – Introdução ................................................................................................................... 5
1.2 - O que você pode fazer com JavaScript ....................................................................... 5
1.3 - JavaScript e Java ........................................................................................................ 5
1.4 - Programação orientada a objetos ................................................................................ 5
1.5 - Nomeando Objetos ...................................................................................................... 6
1.6 - Propriedades ............................................................................................................... 6
1.7 - Métodos ....................................................................................................................... 6
1.8 - Eventos........................................................................................................................ 6
1.9 - Inserindo Scripts JavaScript ........................................................................................ 7
Capítulo II – Escrevendo Scripts ................................................... 8
2.1 - Escrevendo o primeiro Script ....................................................................................... 8
2.2 - Comentário de uma linha........................................................................................... 10
2.3 - Comentário com várias linhas ................................................................................... 10
Capítulo III – Trabalhando com Janelas de Alerta ..................... 12
3.1 - Criando Janelas de Alerta ......................................................................................... 12
Capítulo IV – Variáveis, Strings e Matrizes ................................ 13
4.1 - Variáveis .................................................................................................................... 13
4.2 - Criando variáveis ....................................................................................................... 13
4.3 - Nomeando Variáveis ................................................................................................. 14
4.4 - Armazenando dados em variáveis............................................................................. 15
4.5 - Convertendo Tipos de Dados .................................................................................... 17
4.6 - Manipulando Strings .................................................................................................. 19
4.6.1 - O objeto String .................................................................................................. 20
4.6.2 - Convertendo caixas de texto ............................................................................. 20
4.6.3 - Comprimento de Strings .................................................................................... 21
4.6.4 - Substrings ......................................................................................................... 22
4.7 - Matrizes ..................................................................................................................... 22
Capítulo V - Operações Condicionais e Loops .......................... 26
5.1 - Instrução IF ................................................................................................................ 26
5.2 - Instrução ELSE .......................................................................................................... 27
5.3 - Operadores condicionais e lógicos ............................................................................ 27
5.4 - Loops ......................................................................................................................... 29

FÁBIO RODRIGO BRANDÃO PÁG. 3

 Curso Básico de JavaScript

Capítulo VI - Eventos em JavaScript .......................................... 32

6.1 - OnClick ...................................................................................................................... 32
Capítulo VII - Funções .................................................................. 34
7.1 - Trabalhando com janelas .......................................................................................... 34
Capítulo VIII - Trabalhando com Imagens .................................. 39
8.1 - Criando rollovers........................................................................................................ 39
Capítulo IX - Validando Formulários ........................................... 43
Conclusão .......................................................................................................................... 44
Referências Bibliográficas: ................................................................................................ 44

FÁBIO RODRIGO BRANDÃO PÁG. 4

 Curso Básico de JavaScript

Capítulo I – Introdução
1.1 – Introdução
É importante saber que o JavaScript não é a única linguagem de programação que pode
ser utilizada em documentos HTML. Existem atualmente outras linguagens como o VBS-
cript, JScript (ambas da Microsoft) e várias outras.
Os scripts elaborados com as linguagens JavaScript e VBScript são executados do lado
do cliente, ou seja, no navegador.
O VBScript foi implementado pela Microsoft para ser executada em seu navegador a partir
da geração 3 e posteriores, mais deixa de lado o Netscape.
Já o JavaScript, foi desenvolvido pela Nestcape Communications Corporation, o mesmo
criador do navegador, e pode ser interpretado por ambos os navegadores, fazendo com
que sua popularidade seja maior.
Em 1997, foi criado o primeiro padrão para o JavaScript , denominado ECMA-262.

1.2 - O que você pode fazer com JavaScript

Muitas coisas podem ser feitas com o uso de scripts JavaScript, como:
 Exibir janelas popup para usuário em seu site;
 Validar campos de formulários;
 Mudar uma imagem quando o ponteiro do mouse passa sobre ela;
 Detectar o navegador e plug-ins no pc do visitante;
 Manipular datas;
 Inserir textos na barra de status do navegador, além de várias outras atividades.

1.3 - JavaScript e Java

É comum algumas pessoas confundirem JavaScript com Java, mas na verdade JavaS-
cript nada tem a ver com Java. A linguagem Java, desenvolvida pela Sun Microsystems,
foi criada para o desenvolvimento de mini aplicativos conhecidos com applets. Os applets
são programas pequenos que são enviados pela Internet para funcionar em conjunto com
o navegador.
O JavaScript é uma linguagem de script com pequenos códigos que são inseridos dentro
dos documentos HTML que são interpretados e executados pelo navegador.
Resumindo, os scripts JavaScript necessitam do navegador para serem executados, en-
quanto o Java cria aplicativos compilados.

1.4 - Programação orientada a objetos

A programação convencional levava o programador a pensar em todo o fluxo do progra-
ma, da primeira até a última linha, antes de escrevê-lo. Entretanto, a programação orien-
tada por objetos, revolucionou o sistema de programação.
Na programação orientada a objetos, você pensa somente na criação de componentes
independentes de um aplicativo que possuem uma funcionalidade em particular.

FÁBIO RODRIGO BRANDÃO PÁG. 5

 Curso Básico de JavaScript
Os objetos são como pacotes prontos inseridos nos aplicativos para executar uma deter-
minada tarefa.
Agora mesmo, ao seu redor, você tem uma série de objetos como o seu computador, a
cadeira, a mesa, o telefone e vários outros.
Para o JavaScript, estes elementos são janelas, formulários, caixas de texto e seleção e
vários outros. Você não precisa se preocupar como aquele objeto funciona. Você sim-
plesmente usa o objeto.

1.5 - Nomeando Objetos

Imagine que você tenha um formulário em seu documento HTML. Cada campo do formu-
lário é considerado um objeto de uma mesma espécie. Para diferenciarmos estes objetos,
precisamos nomeá-los. Uma caixa de texto que recebe o nome do cliente poderia por
exemplo se chamar TxtNome e a que recebe o seu telefone poderia se chamar TxtFone.
É importante ressaltar que todo o objeto criado deverá possuir um nome.

1.6 - Propriedades
As propriedades são as características de cada objeto. Um computador pode ter por
exemplo, teclado, mouse e monitor, assim como um cachorro pode ter pêlos, orelhas e
rabo.
É claro que alguns objetos podem possuir propriedades semelhantes.
Em alguns casos, uma propriedade também pode ser considerada um objeto que por sua
vez terá suas propriedades. Veja o teclado que é uma propriedade do computador. Ele
pode ser considerado um objeto já que possui propriedades como fios, teclas, molas, etc.
Assim, concluímos que um objeto pode conter subobjetos.

1.7 - Métodos
Os métodos são as ações que os objetos podem executar. Um cachorro por exemplo,
pode latir, morder, correr, etc. Em JavaScript uma janela pode estar aberta, fechada, mi-
nimizada, etc. Ao escrever os scripts, os métodos dever estar finalizados com a abertura e
fechamento de parênteses “()”. Cachorros podem correr, correr() ou janelas podem ser
fechadas, fechar(), e assim por diante.

1.8 - Eventos
Os eventos consistem nas ações que o usuário pode realizar durante a navegação pela
Internet. Esses eventos podem ser envios de formulários, preenchimento de campos, cli-
car sobre itens, etc. Em JavaScript esses eventos são processados por meio de coman-
dos específicos, conhecidos como Manipuladores ou Tratadores de Eventos.
Para escrevermos os script JavaScript, deveremos seguir as suas regras. A primeira regra
que devemos aprender é que devemos utilizar um ponto “.” Para separa, objetos, proprie-
dades e métodos como mostra o exemplo abaixo:
Cachorro.rabo grande.late()
Celular.toca()
Formulário.caixa de texto.clique()

FÁBIO RODRIGO BRANDÃO PÁG. 6

 Curso Básico de JavaScript

1.9 - Inserindo Scripts JavaScript

Os scripts JavaScript podem ser inseridos em duas áreas do documento HTML. A primei-
ra fica entre as tags <HEAD> e </HEAD> que delimitam a área de cabeçalho, e a segun-
da entre as tags <BODY> e </BODY> que delimitam a seção de corpo do documento
HTML.
Independente do local onde você irá colocar o seu script JavaScript, ele sempre deverá
ficar entre as marcações <SCRIPT LANGUAGE=“JavaScript”> e </SCRIPT>.
Estas marcações indicam ao navegador que o conteúdo que estiver ali deve ser compre-
endido como JavaScript e não como HTML. Veja um exemplo:

Figura 1.1 - Exemplo 1

Se você não entendeu alguns dos comandos HTML que estão acima, aconselho você a
dar uma olhada em nosso material sobre HTML.
As instruções colocadas entre comandos <SCRIPT> e </SCRIPT> são formadas por um
ou mais itens que podem ocupar uma linha. Embora não seja obrigatório, acostume-se
desde já, a utilizar ponto e vírgula “;” no final de suas instruções. Este caractere informa
ao navegador que aquela instrução chegou ao final e que a próxima linha é uma nova ins-
trução.
Normalmente a maioria das instruções JavaScript são colocadas dentro da área de cabe-
çalho, assim elas serão carregadas antes do usuário utilizar o documento.
Uma outra forma de inserir scripts em um documento HTML é através de um arquivo ex-
terno, onde podemos colocar todas as funções que poderão estar disponíveis para outros
documentos.
O arquivo contendo as instruções JavaScript deve ser salvo com a extensão “.js” e o do-
cumento que irá chamá-lo deve conter a seguinte instrução:
<script src=”nome_aquivo.js”></script>

FÁBIO RODRIGO BRANDÃO PÁG. 7

 Curso Básico de JavaScript

Capítulo II – Escrevendo Scripts

2.1 - Escrevendo o primeiro Script
Para escrever seus scripts JavaScript você poderá utilizar qualquer editor de textos. Al-
guns desenvolvedores utilizam o próprio bloco de notas que acompanha as versões do
Windows e é um editor simples e leve.
Neste material, utilizaremos um aplicativo Freeware (Distribuição Livre) chamado Matrix
Y2K que você pode obter em nosso site no endereço www.brainfonet.com e que tam-
bém acompanha o CD-Rom com nosso material.
O JavaScript é uma linguagem case-sensitive, ou seja, sensível a letras maiúsculas e
minúsculas. Logo, tome muito cuidado ao digitar as instruções em seus documentos. Siga
rigorosamente o tipo de caixa utilizado aqui em nossos exemplos.
Abra o aplicativo Matrix Y2K em seu computador.

Figura 2.1 - Janela do Matrix Y2K

Utilizaremos o Matrix porque ele auxiliará na automatização de algumas tarefas como a
visualização do resultado sem a necessidade de termos de abrir o navegador para isso.
 Clique no menu File.
 Escolha a opção New.
Um documento novo será criado com as tags básicas da linguagem HTML e será apre-
sentado do lado direito da janela do Matrix Y2K. Um ponto interessante do Matrix Y2K a
exibição de números indicativos para cada linha, muito útil no processo de depuração de
erros.

FÁBIO RODRIGO BRANDÃO PÁG. 8

 Curso Básico de JavaScript
Deixe seu código como o modelo abaixo:

Figura 2.2 - primeiro_exemplo.html

Antes de continuarmos, vamos salvar nosso arquivo:
 Clique no menu File.
 Escolha a opção Save As.
 Escolha um local e dê nome ao arquivo como “primeiro_exemplo”.
 Escolha no campo Salvar como, “Html Files”.
Para podermos visualizar o resultado, usaremos a guia Preview.

Figura 2.3 - Visualização do resultado do script primeiro_exemplo

 ANALIZANDO O CÓDIGO:
A linha 7 contém o objeto document, seguido do método write(), cuja a função é es-
crever na janela de documento a frase “Este é o meu primeiro script”.

Nota:
Neste material nos resumimos a falar somente sobre os comandos relacionados com Ja-
vaScript, caso você tenha dúvidas sobre as instruções da linguagem HTML, sugiro dar
uma olhada em nosso material sobre HTML.
Alguns navegadores antigos, não suportam a utilização de scripts JavaScript, e neste ca-
so apresentam os códigos no corpo do documento. Para resolver este problema, utiliza-
remos as tags de comentário da linguagem HTML para esconder os códigos destes nave-
gadores.

Nota:
Apesar de serem navegadores mais antigos que não dão suporte a linguagem JavaScript,
ainda assim existem usuários que utilizam estas versões de navegadores.

FÁBIO RODRIGO BRANDÃO PÁG. 9

 Curso Básico de JavaScript
Veja um exemplo de como utilizar:

Figura 2.4 - Comentários em Script

Você poderá utilizar um sistema de comentário nativo da linguagem JavaScript para colo-
car comentários dentro dos códigos JavaScript. Existem duas formas de inserir estes co-
mentários:

2.2 - Comentário de uma linha

É iniciado com duas barras de divisão consecutivas antes do texto de comentário.
Observe um exemplo:

Figura 2.5 - Comentário de uma linha

2.3 - Comentário com várias linhas

Este tipo de comentário contém uma marca de início de comentário indicada por uma bar-
ra e um asterisco “/*” e uma marca final indicada por asterisco e uma barra “*/”.

FÁBIO RODRIGO BRANDÃO PÁG. 10

 Curso Básico de JavaScript
Veja um exemplo:

Figura 2.6 - Comentário de várias linhas

FÁBIO RODRIGO BRANDÃO PÁG. 11

 Curso Básico de JavaScript

Capítulo III – Trabalhando com Janelas de Alerta

3.1 - Criando Janelas de Alerta
As janelas de alerta são utilizadas para passar informações importantes aos usuários, ou
sobre as ações praticadas por ele.

Figura 3.1 - Janela de Alerta

 ANALIZANDO O CÓDIGO:
A linha 7 cria uma janela de alerta por meio do método alert(), contendo a frase “Seja
bem vindo!”.
Para criarmos uma caixa contendo os botões OK e Cancelar, podemos usar o método
confirm no lugar de alert.

Figura 3.2 – Janela de Confirmação

Utilizando um outro método chamado prompt exibiremos uma caixa de edição para que
o usuário entre com algum dado.
Sintaxe:
prompt(mensagem,[entradaDefault])

Figura 3.3 – Prompt

FÁBIO RODRIGO BRANDÃO PÁG. 12

 Curso Básico de JavaScript

Capítulo IV – Variáveis, Strings e Matrizes

4.1 - Variáveis
Uma variável pode ser considerada uma caixa onde podemos armazenar um determinado
valor, e sempre que precisarmos deste valor basta buscarmos dentro desta caixa.
Todas as variáveis devem possuir um nome e poderá armazenar apenas um valor de ca-
da vez. O valor atribuído para uma variável pode ser:
 Definido pelo programador;
 Resultado de um determinado cálculo;
 Obtido por uma entrada de dados.
Para a linguagem JavaScript as variáveis podem armazenar seis tipos de valores:
 Number – armazena valores numéricos;
 Boolean – armazena valores verdadeiros ou falsos;
 Strings – armazenam seqüências de caracteres;
 Null – vazio e sem significado;
 Object – qualquer valor associado com objeto;
 Function – valor retornado por uma expressão.

4.2 - Criando variáveis

Existem duas maneiras de se criar uma variável em JavaScript. A primeira forma é utilizar
um método chamado explícito onde a declaração é feita antes de utilizá-la no script. A
declaração é feita através de uma instrução var seguido do nome da variável.
Sintaxe:
var <nome da variável>
Também é possível utilizar a instrução var para declarar mais de uma variável, separan-
do cada uma delas com vírgula “,”.
Exemplo:
var ctr, nome, curso
A segunda forma de declarar variáveis é utilizando o método implícito, onde você sim-
plesmente usa as variáveis sem declará-las.
Exemplo:
Professor = “Fábio Rodrigo Brandão”

Nota:
Adquira o costume de declarar as variáveis antes de utilizá-las com a instrução var. Isto
ajudará na análise dos scripts e a prevenir erros.

FÁBIO RODRIGO BRANDÃO PÁG. 13

 Curso Básico de JavaScript

4.3 - Nomeando Variáveis

Assim como em toda linguagem de programação, as variáveis devem ser rotuladas para
poderem ser identificadas pelo programa. A primeira coisa a se prestar atenção no mo-
mento de nomear as variáveis é lembrar que o JavaScript é case-sensitive. Portanto uma
variável com o nome tipo_curso é diferente da variável de nome Tipo_Curso e diferente
da variável Tipo_curso. Nunca inicie o nome de uma variável com números. Utilize sem-
pre uma letra ou o caractere underscore (_). Não existe uma regra sobre o comprimento
máximo de caracteres que podem ser utilizados para nomear variáveis, entretanto, tente
utilizar nomes curtos e descritivos.
Os nomes de variáveis não podem conter espaços em branco ou caracteres de pontua-
ção.
Você também não poderá nomear uma variável utilizando uma das palavras reservadas
do JavaScript, pois podem ser interpretadas de forma errada.
Confira abaixo a lista de palavras reservadas:

action charArt Focus getYear

alert clear fontColor go

alinkColor clearTimeout fontSize hash

anchor close form height

appCodeName complet forward History

apllets confirm Frame host

appName cookie frames hostname

appVersion Date getDate href

área defaultStatus getDay hspace

Array defaultValue getHours image

back document getMinutes images

bgColor elements getMonth indexOf

big encoding getSeconds italics

blink fgColor getTime javaEnableb

bold FileUpload getTimeZoneoff joinreverse

border fixed set lastIndexOf

lastModified

length open setHours text

FÁBIO RODRIGO BRANDÃO PÁG. 14

 Curso Básico de JavaScript

link opener setMinutes title

linkColor parent setMonth toGMTString

links parse setSeconds toLocaleString

Location pathname setTime toLowerCase

location plugins setTimeout top

lowsrc por setYear toUpperCase

method prompt small type

mimeTypes protocol sort userAgent

name prototype split UTC

Navigator referrer src value

onBlur reload status vlinkColor

onChange replace strike vspace

onFocus reset String width

onLoad scroll sub Window

onReset search submit window

onSelect select subtring write

onSubmit self sup writeIn

onUnload setDate target

4.4 - Armazenando dados em variáveis

Existem vários tipos de dados que podem ser armazenados dentro de uma variável. Basi-
camente, podemos dividi-los em dados numéricos e alfanuméricos, conhecidos como
strings. Para armazenar números para uma variável, você simplesmente usa o nome da
variável, seguido pelo sinal de igual e o número a ser armazenado.
Exemplo:
totalApostila = 100
paginasApostila = 200
Os valores alfanuméricos podem armazenar qualquer tipo de informação como letras,
números e símbolos, desde que estes valores estejam colocados entre aspas.
Exemplo:
totalApostila = “100 Unidades”

FÁBIO RODRIGO BRANDÃO PÁG. 15

 Curso Básico de JavaScript
paginasApostila = “200 Páginas”
Vejamos um exemplo:

Figura 4.1 - Trabalhando com variáveis

 ANALIZANDO O CÓDIGO:
A linha 7 declara as variáveis a e b;
As linhas 8 e 9 definem os valores para as variáveis a e b;
As linhas 10 e 11 escrevem, acompanhadas de um texto, os valores das variáveis a e b,
cada uma em um novo parágrafo;
Observe que para a apresentação de frases com a instrução document.write utiliza-
mos as frases entre aspas;
Para apresentar somente o conteúdo das variáveis, utilizamos apenas a variável entre
parênteses;
Utilizamos o sinal de mais “+” para concatenar a frase que está entre aspas com o valor
da variável.
Veja como podemos inserir tags HTML nos scripts JavaScript com a finalidade de apre-
sentar o resultado formatado:

Figura 4.2 – Conteúdo Formatado

Perceba que para o valor de color utilizamos aspas simples e não duplas.
Você também pode apresentar o conteúdo das variáveis em janelas de alerta conforme o
modelo apresentado:

FÁBIO RODRIGO BRANDÃO PÁG. 16

 Curso Básico de JavaScript

Figura 4.3 – Variáveis em caixa de alerta

Veja o resultado do exemplo:

Figura 4.4
 ANALIZANDO O CÓDIGO:
A linha 7, declara a variável a, enquanto a linha 8 define o valor da variável a que é uma
seqüência de texto ou seja, um valor alfanumérico, portanto foi colocado entre aspas;
A Linha 9 apresenta uma janela de alerta contendo o valor da variável a.

4.5 - Convertendo Tipos de Dados

O JavaScript possui algumas funções que nos permitem alterar o tipo de dado de uma
variável como por exemplo converter caracteres em números.
Confira o exemplo abaixo:

Figura 4.5 – Convertendo tipo de dados

 ANALIZANDO O CÓDIGO:
A Linha 8 indica que o valor da variável a é numérico;

FÁBIO RODRIGO BRANDÃO PÁG. 17

 Curso Básico de JavaScript
Na linha indicamos que a;
Na linha indicamos que a variável b recebe o resultado da divisão da variável a por 2;
A linha 10 escreve o valor da variável b.
Neste exemplo tudo está funcionando corretamente, porém, se o conteúdo da variável a
fosse alfanumérico, um erro seria gerado.
Veja um exemplo:

Figura 4.6
Observe o resultado do exemplo:

Figura 4.7 – Erro gerado

Para contornar esta situação, o JavaScript dispõe de duas funções para fazer a conver-
são de valores alfanuméricos em numéricos:
parseInt( ) – Converte um valor alfanumérico em numérico inteiro.
parseFloat( ) – Converte um valor alfanumérico em numérico de ponto flutuante.
Nota: Para que as funções parseInt( ) e parseFloat( ) funcionem corretamente, é
necessário que o valor a ser convertido seja iniciado com um caractere numérico.

FÁBIO RODRIGO BRANDÃO PÁG. 18

 Curso Básico de JavaScript
Vejamos um exemplo:

Figura 4.8
 ANALIZANDO O CÓDIGO:
A linha 7 declara a variável a,inteiro e flutuante;
A linha 8 define que o valor da variável a é “5.53 Litros”;
A linha 9 determina que a variável inteiro recebe o valor da conversão da variável a para
inteiro;
A linha 10 determina que a variável flutuante recebe o valor da conversão da variável a
para flutuante;
A linha 11 escreve o conteúdo da variável inteiro no corpo do documento;
A linha 12 escreve o conteúdo da variável flutuante no corpo do documento.

4.6 - Manipulando Strings

Os strings são armazenados em variáveis de memória e seu conteúdo deve estar obriga-
toriamente declarado entre aspas. Veja um exemplo:

Figura 4.9 – Manipulando Strings

Você também pode usar o sinal de (+) para concatenar valores de duas ou mais strings.
Exemplo:

FÁBIO RODRIGO BRANDÃO PÁG. 19

 Curso Básico de JavaScript

Figura 4.10
Observe o resultado:

Figura 4.11

4.6.1 - O objeto String

O JavaScript manipula string como sendo um objeto, atribuindo a ele uma série de méto-
dos que nos permite manipular o string com maior flexibilidade, como verificar números de
caracteres nele contidos, selecionar parte de seus caracteres, converter tipo de caixa ,
etc.
Existe uma segunda forma de criar um objeto string, utilizando uma instrução própria para
este fim:
Mensagem = new String(“Seja bem vindo!”)
A palavra chave new String tem por função criar um novo objeto de string.

4.6.2 - Convertendo caixas de texto

Através da conversão das caixas de texto poderemos converter todo o conteúdo de uma
caixa para letras maiúsculas ou minúsculas. Isto será feito um dos dois métodos do objeto
string:
toUpperCase( ) – Converte todos os caracteres de uma string para letras maiúsculas.
toLowerCase( ) – Converte todos os caracteres de uma string para letras minúsculas.

FÁBIO RODRIGO BRANDÃO PÁG. 20

 Curso Básico de JavaScript
Veja o exemplo abaixo:

Figura 4.12 – Convertendo Strings

 ANALIZANDO O CÓDIGO:
A linha 7 cria um objeto string de nome texto1 e armazena a frase Convertendo Strings;
A linha 8 cria um objeto string de nome texto2 e armazena a frase Realmente é muito fá-
cil;
A linha 9 escreve na tela o conteúdo da string texto1 após convertê-la em maiúscula.
A linha 10 escreve o conteúdo da string texto2 após convertê-la em minúscula.

4.6.3 - Comprimento de Strings

Através de uma propriedade do objeto string poderemos calcular o comprimento, em nú-
mero de caracteres, de uma variável alfanumérica. Esta propriedade é definida pela pala-
vra chave length que deve ser utilizada logo após o nome do objeto script.
Vejamos um exemplo:

Figura 4.13 – Comprimento de Strings

 ANALIZANDO O CÓDIGO:
A linha 7 cria um objeto string de nome CEP e armazena a o cep 13090000;
A linha 8 escreve na tela a quantidade de números da string CEP.

FÁBIO RODRIGO BRANDÃO PÁG. 21

 Curso Básico de JavaScript

4.6.4 - Substrings
Uma substring pode ser definida como parte de uma string. No JavaScript, uma substring
é manipulada pelo método substring( ), da seguinte maneira:
substring(PosiçãoInicial, NúmerodeCaracteres)
Onde PosiçãoInicial especifica a posição do primeiro caractere contido na string, a partir
da qual a seqüência de caracteres é retornada. Lembre-se que em uma string, a posição
do primeiro caractere recebe o valor 0. NúmerodeCaracteres especifica o número de ca-
racteres contido na string a ser retornado. Veja alguns exemplos:
Curso = “Webdesign”
Curso.substring(4,6) – Retorna “design”.
Professor = “João da Silva”
Professor.substring(0,4) – Retorna “João”

4.7 - Matrizes
Já vimos que é possível armazenar um valor de cada vez em uma variável. Com o uso de
matrizes, poderemos armazenar mais de um valor para a mesma variável.
Uma matriz é um conjunto de valores armazenado em uma única variável. Seguindo este
conceito, poderemos, por exemplo, armazenar os dias da semana em uma variável ou os
meses de um ano.
Cada valor deste conjunto será chamado de elemento da matriz e estes elementos de
diferenciaram através de um índice.
Veja um exemplo sendo representado para a matriz diaSemana:

0 Domingo

1 Segunda-feira

2 Terça-feira

3 Quarta-feira

4 Quinta-feira

5 Sexta-feira

6 Sábado

Nota:
Em JavaScript, o primeiro elemento de uma matriz é definido pelo índice de número 0.
Antes de utilizarmos uma matriz, deveremos declará-la com o seu número máximo de
elementos, da seguinte forma:
NomedaMatriz = new Array(número máximo de elementos)

FÁBIO RODRIGO BRANDÃO PÁG. 22

 Curso Básico de JavaScript
O JavaScript possui um objeto denominado Date com uma série de métodos que manipu-
lam datas. Por enquanto utilizaremos apenas o método getDay() que retorna um valor
entre 0 e 6 correspondente aos dias da semana.
Exemplo:

Figura 4.14 - Matriz

 ANALIZANDO O CÓDIGO:
A linha 7 cria um objeto date de nome Hoje contendo a data atual de seu computador no
momento de abertura da página;
A linha 8 armazena na variável de nome xDia, um número correspondente ao dia da se-
mana, cujo o valor depende da data de seu computador armazenada na variável Hoje;
A linha 9 cria a matriz de 7 elementos chamada diaSemana;
As linhas de 10 a 16 armazenam os nomes dos dias da semana nos elementos da matriz
diaSemana;
A linha 17 imprime a frase seguida do valor armazenado em xDia;
A linha 18 imprime a frase seguida do valor correspondente ao dia da semana para xDia.
Agora faremos um exemplo um pouco mais complexo, onde para cada dia da semana
teremos um cardápio como mostra a tabela abaixo:

0 Domingo Lasanha

1 Segunda-feira Feijoada

2 Terça-feira Bacalhau

3 Quarta-feira Arroz à grega

4 Quinta-feira Sopa

FÁBIO RODRIGO BRANDÃO PÁG. 23

 Curso Básico de JavaScript

5 Sexta-feira Frango Assado

6 Sábado Macarronada

Neste caso teremos que armazenar mais de um valor para cada elemento da matriz, po-
rém, como o JavaScript não suporta matrizes com mais de uma dimensão, teremos que
criar duas matrizes com sete posições em cada uma delas.
Exemplo:

Figura 4.15 - Matriz

 ANALIZANDO O CÓDIGO:
A linha 7 cria um objeto date de nome Hoje contendo a data atual de seu computador no
momento de abertura da página;
A linha 8 armazena na variável de nome xDia, um número correspondente ao dia da se-
mana, cujo o valor depende da data de seu computador armazenada na variável Hoje;
A linha 9 cria a matriz de 7 elementos chamada diaSemana;
A linha 10 cria a matriz de 7 elementos chamada pratoDia;
As linhas de 12 a 18 armazenam os nomes dos dias da semana nos elementos da matriz
diaSemana;
As linhas de 20 a 26 armazenam os nomes dos pratos nos elementos da matriz pratoDia;
A linha 27 imprime a frase seguida do valor armazenado em xDia;
A linha 28 imprime a frase seguida do valor correspondente ao dia da semana para xDia e
do prado do dia.

FÁBIO RODRIGO BRANDÃO PÁG. 24

 Curso Básico de JavaScript
Você pode utilizar os seguintes métodos para manipular datas:

getDay Retornar a semana.

getDate Retornar o dia.

getMonth Retornar o mês.

getYear Retornar o ano.

getHours Retornar a hora.

getMinutes Retornar os minutos.

getSeconds Retornar os segundos.

FÁBIO RODRIGO BRANDÃO PÁG. 25

 Curso Básico de JavaScript

Capítulo V - Operações Condicionais e Loops

As instruções condicionais são capazes de tomar decisões e são indispensáveis em qual-
quer programa.
O esquema de processamento do JavaScript é seqüencial, uma linha após a outra. Por
meio das instruções condicionais, também conhecidas como instruções de controle, pode-
remos determinar o que o JavaScript irá fazer se uma determinada condição for verdadei-
ra.
A grande maioria das linguagens de programação usa as instruções IF... THEN... END IF
para executarem esta tarefa.

5.1 - Instrução IF
A utilização da instrução IF deverá ser feita da seguinte forma:
If (condição) {ação}

Nota:
Em JavaScript usamos um duplo sinal de igualdade quando queremos testar se uma coi-
sa é igual a outra. Um único sinal de igualdade deve ser utilizado apenas para definir o
valor de uma variável.
Deveremos colocar a instrução entre “{}”, na verdade estamos substituindo a instrução
then pelas chaves duplas.
Vejamos um exemplo de uma instrução condicional com if:

Figura 5.1 – instrução If

 ANALIZANDO O CÓDIGO:
A linha 7 declara a variável quantidade;
A linha 8 identifica o valor da variável quantidade;
A linha 9 verifica se o valor da variável quantidade é igual a 10 e se a instrução for verda-
deira será impressa e mensagem na tela com o valor da variável quantidade.

FÁBIO RODRIGO BRANDÃO PÁG. 26

 Curso Básico de JavaScript

5.2 - Instrução ELSE

A instrução else deverá ser aplicada quando se deseja executar outra tarefa caso a ins-
trução if não seja verdadeira e deve ser feita da seguinte forma:
if (condição) {ação}
else {ação}
Vejamos um exemplo de utilização da instrução else:

Figura 5.2 – Instrução Else

 ANALIZANDO O CÓDIGO:
A linha 7 declara as variáveis comprou e vendeu;
A linha 8 define o valor da variável comprou;
A linha 9 define a valor da variável vendeu;
A linha 10 verifica se o valor da variável comprou é maior que o valor da variável vendeu
e imprime a frase se a condição for validada, caso contrário passa para a instrução else
localizada na linha 11 onde imprime oura frase.

5.3 - Operadores condicionais e lógicos

O JavaScript utiliza os operadores condicionais para testar valores da condição if. São
eles:

a == b Retorna verdadeiro se o valor armazenado em a for igual ao

valor armazenado em b.

a !=b Retorna verdadeiro se o valor armazenado em a não for igual

ao valor armazenado em b.

a>b Retorna verdadeiro se o valor de a for maior que o valor arma-

zenado em b.

a >= b Retorna verdadeiro se o valor de a for maior ou igual ao valor

armazenado em b.

a<b Retorna verdadeiro se o valor de a for menor que o valor arma-

FÁBIO RODRIGO BRANDÃO PÁG. 27

 Curso Básico de JavaScript
zenado em b.

a <=b Retorna verdadeiro se o valor de a for menor ou igual ao valor

armazenado em b.

Os operadores lógicos utilizados pelo JavaScript são:

&& Retorna verdadeiro se uma expressão a e (and) uma expressão

b forem verdadeiras.

|| Retorna verdadeiro se uma expressão a ou (or) uma expressão

b forem verdadeiras.

! O ponto de exclamação nega uma comparação (not). Exemplo:

a!=b se a não for igual a b.

Vejamos um exemplo onde aplicaremos a instrução getHours() que irá retornar a hora
atual do sistema e com base nela exibiremos uma saudação:

Figura 5.3 - getHours

 ANALIZANDO O CÓDIGO:
A linha 7 declara as variáveis Hora, xHora e txtSaudação;
A linha 8 armazena na variável xHora a hora contida no objeto hora por meio do método
getHours();
A linha 10 verifica se a hora em XHora é maior que 0 e menor que 12 para exibir a men-
sagem “Bom dia”;
A linha 11 verifica se a hora em XHora é maior ou igual a 12 e menor que 18 para exibir a
mensagem “Boa tarde”;
A linha 12 verifica se a hora em XHora é menor ou igual a 18 e menor ou igual a 23 para
exibir a mensagem “Boa noite”.

FÁBIO RODRIGO BRANDÃO PÁG. 28

 Curso Básico de JavaScript

5.4 - Loops
Um loop é um conjunto de instruções que devem ser executadas por um determinado
número de vezes. Em JavaScript, os loops são executados pela instrução for da seguinte
maneira:
for (x = 1; x <=20; x++) {trecho a ser repetido}
Analisando a instrução anterior, temos:
O primeiro parâmetro define um valor inicial para a variável x que recebe o valor 1, porém,
poderia estar recebendo qualquer outro valor.
O segundo parâmetro contém um bloco de condição que tem por finalidade executar o
loop até que a expressão “x<=20” for verdadeira. Neste caso o loop continuará a ser exe-
cutado enquanto a variável x for menor que 20.
O terceiro parâmetro contém um bloco de incremento composto pelo nome da variável
seguido do operador ++ que soma 1 a variável x sempre que o loop for executado. Pode-
remos também usar o operador – para que seja subtraído 1 ou mais sempre que o loop
for executado.
Para finalizar, escrevemos o trecho do programa a ser repetido, que deve estar entre cha-
ves “{}”.
Vejamos um exemplo:

Figura 5.4 - For

Observe o resultado:

FÁBIO RODRIGO BRANDÃO PÁG. 29

 Curso Básico de JavaScript

Figura 5.5

 ANALIZANDO O CÓDIGO:
Na linha 7 inicialmente definimos o valor da variável x para -5, em seguida, definimos que
o loop seria executado até que x fosse menor ou igual a 15 e por fim somamos 1 a cada
loop realizado ao valor de x.
Veja outro exemplo:

Figura 5.6
Agora vejamos o resultado:

FÁBIO RODRIGO BRANDÃO PÁG. 30

 Curso Básico de JavaScript

Figura 5.7
No exemplo anterior apenas foi mudado o incremento. Com a instrução x =x +2 é somado
2 a cada vez que o loop for executado.

FÁBIO RODRIGO BRANDÃO PÁG. 31

 Curso Básico de JavaScript

Capítulo VI - Eventos em JavaScript

Podemos definir um evento como sendo uma ação que o usuário realiza durante sua na-
vegação. Os eventos podem ser preenchimentos de formulários, cliques do mouse sobre
botões ou links, etc. Em JavaScript esses eventos são manipulados através de Manipula-
dores ou Tratadores de Eventos. Vamos analisar alguns dos principais eventos do JavaS-
cript:

6.1 - OnClick
Este evento é disparado sempre que o usuário clica com o mouse sobre algum objeto
configurado para responder a esse evento.
Vejamos um exemplo:

Figura 6.1 – Evento onClick

Veja o resultado:

Figura 6.2

FÁBIO RODRIGO BRANDÃO PÁG. 32

 Curso Básico de JavaScript

 ANALIZANDO O CÓDIGO:
A linha 10 cria um botão de formulário que contém o rótulo “Clique aqui!”. Ao clicar no bo-
tão, o evento onClick é executado abrindo uma janela com o texto “Você clicou no bo-
tão”.
Observe o uso de aspas simples cercando a frase. Isto se faz necessário porque o próprio
tratador de evento deve estar entre aspas.

Nota:
Você também pode inverter o uso das aspas da seguinte forma: ‘alert(“Você clicou no bo-
tão”)’.
Veja abaixo uma relação dos eventos mais utilizados do JavaScript:

Evento Descrição

onClick() Disparado quando o usuário clica sobre algum objeto.

onMouseOver() Disparado quando o usuário move um mouse para sobre um objeto.

onMouseOut() Disparado quanto o usuário move o mouse para fora de uma região.

onLoad() Disparado no final do carregamento de uma página.

onMouseDown() Disparado ao clicar do mouse antes de soltá-lo.

onMouseUp() Disparado após o soltar do botão do mouse após pressionado.

onFocus() Disparado sempre que o usuário efetua um clique com o botão do

mouse

FÁBIO RODRIGO BRANDÃO PÁG. 33

 Curso Básico de JavaScript

Capítulo VII - Funções

As funções são um conjunto de instruções que executam uma determinada tarefa.
Durante a execução de um script você pode chamar uma instrução quantas vezes quiser.
Para a execução de uma instrução, devemos definir o seu nome e as suas instruções.
A sintaxe para a utilização de puma função é:
Function nomeDaFunção () {instruções da função}
Veja um exemplo:

Figura 7.1 – Funções

 ANALIZANDO O CÓDIGO:
A linha 5 cria uma função chamada boasVindas;
A linha 7 define uma frase como valor da variável msgInicial;
A linha 8 define um caixa de alerta com o valor da frase;
A linha 12 define que deve ser carregada a função onLoad após o carregamento da pági-
na.

7.1 - Trabalhando com janelas

Por intermédio do JavaScript, poderemos criar janelas com grande flexibilidade, definindo
sua posição, tamanho podendo ocultar algumas de suas propriedades.
Vejamos a sintaxe correta:
objJanela1=Window.open(“URL”, “nome da janela”, características”)
Em que:
objJanela1: Corresponde ao nome de uma variável que conterá o novo objeto window.
Você poderá utilizar aqui qualquer nome de sua preferência.
URL: Contém o endereço da página a ser carregada nessa janela. Caso você não utilize
nenhum URL nenhuma página será carregada.
Nome da janela: Define um nome para a janela, atribuído à propriedade name do objeto
window.

FÁBIO RODRIGO BRANDÃO PÁG. 34

 Curso Básico de JavaScript
Características: Contém uma série de propriedades que podem ser usadas para adequar
a janela as suas necessidades, como tamanho da janela, sua posição, ocultar barras de
navegação, status, etc.
As principais propriedades para as janelas são:
menubar: Ativa ou não a barra de menu da janela. Podemos utilizar os valores 0 ou no
para desabilitar ou 1 ou yes para habilitar a barra de menu.
tollbar: Ativa ou não a barra de ferramentas da janela. Podemos utilizar os valores 0 ou
no para desabilitar ou 1 ou yes para habilitar a barra de menu.
scrollbars: Ativa ou não a barra de rolagem da janela. Podemos utilizar os valores 0 ou
no para desabilitar ou 1 ou yes para habilitar a barra de menu.
location: Ativa ou não a barra de endereços da janela. Podemos utilizar os valores 0 ou
no para desabilitar ou 1 ou yes para habilitar a barra de menu.
height: Usado para definir a altura, em pixels, da janela.
width: Usado para definir a largura, em pixels, da janela.
top: Ajusta a posição da janela para o topo da tela em pixels.
left: Ajusta a posição da janela para a esquerda da tela em pixels.
Vejamos um exemplo:

Figura 7.2 – Abrindo Janelas

Vejamos agora o resultado:

FÁBIO RODRIGO BRANDÃO PÁG. 35

 Curso Básico de JavaScript

Figura 7.3
 ANALIZANDO O CÓDIGO:
A linha 5 cria uma função chamada novaJanela;
A linha 7 define que a variável novaJanela recebe a o objeto window.open.
Perceba que nenhuma URL será utilizada para esta janela e que o nome da janela é tes-
te. É importante identificar um nome para a janela, pois assim poderemos usá-lo em um
link.
Em seguida temos configurada todas as propriedades da janela.
Agora vamos aprender a abrir janelas por meio de um link de imagem, onde teremos co-
mo link as miniaturas da imagem e quando o usuário clicar, na miniatura, uma janela com
a imagem em tamanho real será aberta.
Você poderá utilizar o software PDThumbs para criar as miniatura para as imagens do
seu site. O PDTumbs poderá ser baixado em nosso site no endereço
www.brainfonet.com e também está incluído no CD-Rom que acompanha o nosso mate-
rial.
Acompanhe o exemplo abaixo:

Figura 7.4 – Abrindo imagens nas janelas

FÁBIO RODRIGO BRANDÃO PÁG. 36
 Curso Básico de JavaScript

Veja o resultado do código anterior:

Figura 7.5
 ANALIZANDO O CÓDIGO:
Entre as linhas 5 e 9 está definida a função abreFoto(Foto) com o retorno da variável Fo-
to;
Entre as linhas 14 e 16 temos links de imagens que chamam a função javas-
cript:abreFoto() que passa a essa função o valor da imagem a ser exibida na janela quan-
do a miniatura é clicada.
Poderemos utilizar o mesmo processo para que o link seja aberto através de um texto ao
invés das imagens. Veja o exemplo abaixo:

Figura 7.6

FÁBIO RODRIGO BRANDÃO PÁG. 37

 Curso Básico de JavaScript
Veja o resultado do código anterior:

Figura 7.8

FÁBIO RODRIGO BRANDÃO PÁG. 38

 Curso Básico de JavaScript

Capítulo VIII - Trabalhando com Imagens

A utilização de imagens em seus documentos web é certamente um recurso que atrairá
muitos visitantes, porém, a sua aplicação deverá ser feita com muita cautela para não so-
brecarregar suas páginas. O JavaScript também nos oferece uma série de recursos para
trabalharmos com imagens em nossas páginas.

8.1 - Criando rollovers

Esse recurso cria um efeito dinâmico para uma determinada figura que muda sua aparên-
cia, assim que colocarmos o ponteiro do mouse sobre ela. Este recurso é muito utilizado
na criação de links e menus.
Vejamos um exemplo de menu:

Figura 8.1
 ANALIZANDO O CÓDIGO:
A linha 7 contém um link para o arquivo webmaster.html. Quando você mover o ponteiro
do mouse sobre a figura menu1.gif, o evento onMouseOver será ativado e a figura será
trocada por menu1_r.gif.
Quando o ponteiro do mouse é arrastado para fora da área da imagem do botão Web-
master, o evento onMouseOut será ativado e a figura retornará para menu1.gif.
As demais linhas funcionam de forma semelhante.
Você pode encontrar as imagens utilizadas nos exemplos dentro do CD-Rom que acom-
panha este material ou em nosso site no endereço www.brainfonet.com.
Agora vejamos como ficaria o resultado do código anterior:

FÁBIO RODRIGO BRANDÃO PÁG. 39

 Curso Básico de JavaScript

Figura 8.2
Um outro recurso que podemos aplicar com imagens e que com certeza você já deve ter
visto em vários sites é a exibição de figuras que se alternam. Este efeito é muito utilizado
na apresentação de banners de publicidade para a geração de receita. Vejamos um
exemplo no código asseguir:

Figura 8.3
Visualize a página em seu navegador para poder visualizar os banners se alternando.
Você pode encontrar as imagens utilizadas nos exemplos dentro do CD-Rom que acom-
panha este material ou em nosso site no endereço www.brainfonet.com.
Veja o resultado:

FÁBIO RODRIGO BRANDÃO PÁG. 40

 Curso Básico de JavaScript

Figura 8.4

Figura 8.5

Figura 8.6
 ANALIZANDO O CÓDIGO:
A linha 5 cria uma matriz chamada matBanner com três elementos;
A linha 6, 7 e 8 armazenam as figuras dos banners em cada posição da matriz;
A linha 9 inicia uma variável chamada numBanner de valor inicial igual a 0;
A linha 10 inicia uma variável chamada totalbanner de valor inicial igual a 3;
A linha 11 cria a função mudaBanner;
Alinha 12 armazena no objeto document as imagens contidas na matriz matBanner;
A linha 13 incrementa 1 à variável numBanner para que o próximo banner seja carregado;
A linha 14 verifica se numBanner atingiu o valor totalBanner(3); se afirmativo, retorna a
variável numBanner para o valor igual a 0;
A linha 15 define, em millissegundos, com qual freqüência os banners devem ser troca-
dos, no nosso caso a cada 2 segundos;
A linha 19 inicia a impressão dos banners a partir do evento onLoad que chama a função
mudaBanner();

FÁBIO RODRIGO BRANDÃO PÁG. 41

 Curso Básico de JavaScript
A linha 20 permite a impressão dos banners definindo sua altura e largura fixa.

FÁBIO RODRIGO BRANDÃO PÁG. 42

 Curso Básico de JavaScript

Capítulo IX - Validando Formulários

Em nosso livro de HTML, aprendemos sobre a utilização de formulários. Agora vamos unir
aos formulários HTML alguns scripts da linguagem JavaScript para a validação dos cam-
pos.
Provavelmente esta é umas das utilizações mais comuns, do JavaScript, pois muitos for-
mulários que criamos requerem uma autenticação dos campos como é o caso de CPF,
número de cartão de crédito, e-mail, etc.
Veja um exemplo abaixo:

Figura 10.1
 ANALIZANDO O CÓDIGO:
As linhas de 4 a 13 usam uma função denominada validaForm() que tem por objetivo
verificar cada campo obrigatório do formulário. As duas instruções if contidas nessa fun-
ção verificam se o conteúdo de cada campo obrigatório é menor ou igual a 1 caractere.
Caso a condição seja verdadeira, uma mensagem de alerta é exibida na tela.
Quando o usuário confirmar a mensagem de alerta, o cursor ficará posicionado exatamen-
te no campo que não foi preenchido corretamente.

FÁBIO RODRIGO BRANDÃO PÁG. 43

 Curso Básico de JavaScript

Conclusão
Chegamos ao final deste material e espero que você tenha conseguindo assimilar todas
as instruções aqui propostas.
Se ainda ficou com alguma dúvida releia o material e lembre-se que você poderá visitar o
nosso site e postar sua dúvida em nosso fórum. Desejo para você boa sorte em sua nova
empreitada e um grande abraço!

Fábio Rodrigo Brandão

Referências Bibliográficas:
Carlos A. J. Oliveiro – Faça um Site – Editora Erica – 2001
Adelize Generini de Oliveira – JavaScript – Visual Books – 1996

FÁBIO RODRIGO BRANDÃO PÁG. 44