introducao javascript

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


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


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


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ÇÕES DOS 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


6

Unidade 1


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


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


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


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.


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.


// exemplo usando chaves

function mensagem()

{

alert("Olá");

alert("Seja bem-vindo ao curso de JavaScript");

}

mensagem(); // função sendo chamada


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:


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).



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.


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.


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>");


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");


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.


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:


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) ||


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:


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>


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:


var nContador;

var sValor1, sValor2;

var sResultado, nResultado;

sValor1 = "10"; //Valor String


19

sValor2 = "1.5"; // Valor Fracionado

sResultado = sValor1 + sValor2;

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

// 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!");

}


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:

<script language="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>


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;


alert((nNum>0)? "Número positivo":"Número negativo");

</script>

Exemplo 3 – if else encadeado: <script language="javascript1.1" type="text/javascript">


23

var nNum;


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")

}


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.


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++;

}


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 que sabemos 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.


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.


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.


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 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:


30



sNomes[0] = "Carlos";

sNomes[1] = "Bruno";

sNomes[2] = "Mauricio";

sNomes[3] = "José";

sNomes[4] = "André";

sNomes.sort();

var nCount;

alert("Ordem Crescente");

for(nCount=0;nCount<sNomes.length;nCount++)

{

alert(sNomes[nCount]);

}

sNomes.reverse();

alert("Ordem Decrescente");

for(nCount=0;nCount<sNomes.length;nCount++)

{

alert(sNomes[nCount]);

}

</script>

6.2 O Objeto Date

O objeto Date é um dos objetos 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 com a 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 */


31

alert("Dia da semana: " + nDiaSemana);

</script>


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


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 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.


charAt() Mostra o caracter na posição pedida.


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];


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:


x = Math.pow(3,2) + Math.sqrt(100);

y = Math.floor(Math.random()* 100);

alert(x + " - " + y);

</script>


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().


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 comando Eval está rodando.

Podemos ver um exemplo disso no código a seguir:

Exemplo 1:


var nContador;

for(nContador=0;nContador<5;nContador++)

{

eval("var sTeste" + nContador + ";");

eval("sTeste" + nContador + "=" + nContador + ";");

}

for(nContador=0;nContador<5;nContador++)

{

eval("alert(sTeste" + nContador + ");");

}

</script>

Exemplo 2:

<html>


function compute(f)

{


36

f.result.value = eval(f.expr.value);

}

</script>

<body>

<form name="teste">

Digite uma 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


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.


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.


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


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>


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 clicando

fora dele ou utilizando a tecla "Tab".

Se depois de clicar e/ou escrever na área de texto, clica-se fora do documento,

produza-se o evento blur. <script language="javascript1.1" type="text/javascript">

function mensagem()

{

alert("Isto é o onblur");

}

</script>

</head>

<body>


Nome: <input type="text" name="texto1" id="texto1" size="20"

onblur="mensagem()"/>

</form>


42

7.4.8 onchange

O onchange é bastante semelhante ao onblur, mas com uma pequena 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>


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>


Nome: <input type="text" name="texto1" id="texto1" size="30" value="tenta

selecionar este texto" onselect="mensagem()"/>

</form>


43

Unidade 8 Conhecendo Objects DOM

8.1 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.


44




<head>


<title>Troca cor de fundo</title>

</head>

<body>

<input type="button" onclick="document.body.bgColor='yellow'" value="Amarelo" />

<input type="button" onclick="document.body.bgColor='blue'" value="Azul" />

<input type="button" onclick="document.body.bgColor='white'" value="Branco" />

<input type="button" onclick="document.body.bgColor='red'" value="Vermelho" />

</body>

</html>

8.6 Document Objects

HTML DOM define documentos HTML como uma 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


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


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:


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>


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:


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>


48

Unidade 9 Manipulando forms com DOM

9.1 Tutorial

Para tirarmos o máximo de proveito dos recursos da linguagem Javascript

devemos saber como a linguagem interage com as páginas HTML. O Javascript

tem acesso a diversos objetos disponíveis em uma página HTML, visto que o

próprio código Javascript é colocado dentro da página HTML.

O Javascript consegue acessar os elementos da página HTML de forma

hierárquica, ou seja, temos um objeto chamado document que é acessível a

qualquer script colocado na página. A partir do objeto document, é possível

acessar todos os elementos das páginas, desde os frames até os próprios elementos

de um formulário contido dentro da página.

Abaixo podemos ver um exemplo de como funciona esta hierarquia.

A partir do objeto document podemos ter acesso a quaisquer elementos contidos

dentro da página HTML, como, por exemplo, uma caixa de texto de um

formulário.

O próprio objeto document possui uma série de propriedades e métodos que

podem ser utilizadas pelo Javascript para interagir ou modificar a aparência do

documento.

Além de poder visualizar as informações referentes ao documento, o Javascript

ainda pode interagir com diversos elementos contidos no HTML. Tomemos como

exemplo o HTML abaixo:


function populaImagens()

{

alert("Note que somente a primeira imagem está carregada!");

document.images[1].src = document.images[0].src

document

Forms[] Formulários

HTML)

Frames[] Frames

Elementos[] Elementos


49

document.images[2].src = document.images[0].src;

document.images[1].width = document.images[0].width;

document.images[2].width = document.images[0].width;

alert("Agora as imagens estão carregadas!");

}

</script>

</head>

<body>

<img src="mmc.jpg" width="150" />

<img />

<img />

<br>

<input type="button" value="Carregar Imagens" onClick="populaImagens();" />

</body>

Como podemos ver o HTML possui três elementos do tipo img, que representam

imagens dentro do documento. Também podemos notar que somente a primeira

imagem possui a propriedade src definida. Através do Javascript, podemos

perfeitamente acessar a coleção de imagens de um documento através da

propriedade images. A propriedade images contém uma coleção de todas as

imagens disponíveis dentro de um documento. No script acima, vemos um

exemplo onde utilizamos a propriedade src e width da primeira imagem para

carregar as demais imagens do document.

Além de poder acessar as imagens de um documento, podemos também acessar a

coleção de links disponíveis. O objeto document possui acesso a coleção de links

disponíveis na página através da propriedade links. Através desta propriedade

podemos acessar e até modificar cada um dos links da página. Para isso, o

elemento href tem que estar definido no HTML.

Através de um bloco de javascript podemos perfeitamente alterar as características

dos links disponíveis na página, acessando a propriedade links do objeto

document. Ao acessar cada um dos links podemos perfeitamente alterar o

caminho para o qual o link está apontando, bem como o texto contido dentro do

link. O exemplo abaixo mostra como alterar os links.


function populaLinks()

{

var sAlunos = new Array();

sAlunos[0] = "Andre";

sAlunos[1] = "Joao";

sAlunos[2] = "Maria";

sAlunos[3] = "Jose";

sAlunos[4] = "Carlos";

sAlunos.sort();

for(nCount=0;nCount<sAlunos.length;nCount++)

{


50

document.links[nCount].href = "http://www.empresa.com.br/alunos/" +

sAlunos[nCount];

document.links[nCount].innerHTML = sAlunos[nCount] + "<br />";

}

}

</script>

</head>

<body>

<a href="#"></a>

<a href="#"></a>

<a href="#"></a>

<a href="#"></a>

<a href="#"></a>

<input type="button" value="Carregar Links" onClick="populaLinks();" />

</body>

Além de alterar propriedades dos elementos podemos criar conteúdo dinâmico no

documento através do JavaScript. Isto pode ser obtido através da utilização do

método write do objeto document. Com o método write podemos escrever

conteúdo dentro do HTML no mesmo ponto onde se encontra o código script de

forma dinâmica. Um exemplo de implementação do método write pode ser

observado abaixo. <script language="javascript1.1" type="text/javascript">

function write()

{

var sAlunos = new Array();

sAlunos[0] = "Andre";

sAlunos[1] = "Joao";

sAlunos[2] = "Maria";

sAlunos[3] = "Jose";

sAlunos[4] = "Carlos";

sAlunos.sort();

for(nCount=0;nCount<sAlunos.length;nCount++)

{

document.write(sAlunos[nCount] + "<br>");

}

}

</script>

</head>

<body onload="write();">

</body>

9.2 Extraindo informações dos formulários HTML

Agora que já sabemos como mapear os eventos dos elementos de um formulário,

iremos buscar informações deste formulário, a fim de realizar validações e

alterações nas características deste formulário.

A extração de dados de um formulário começa pela busca da referencia do

formulário que contém o elemento com os dados que queremos utilizar. Esta


51

referencia ao formulário pode ser feita de diversas formas, que vão variar de

acordo com o formato do formulário

9.2.1 Buscando informações de formulários não nomeados

A maior parte dos elementos em um formulário HTML possui um atributo

chamado NAME, que é utilizado para buscar a referencia a este elemento dentro

de um código de script ou no destino final da página (web server). O próprio

formulário HTML, na maioria dos casos, possui um nome associado.

O problema é que o atributo nome não é um atributo obrigatório, nem para os

elementos do formulário, nem para o formulário em si. No caso de o formulário

não possuir um nome, devemos acessá-lo através da coleção forms, contida no

objeto document. Cada formulário possui como propriedades cada um dos

elementos contidos dentro dele. Se um formulário contém um elemento “caixa de

texto”, com o nome de txtNome, para o código javascript este formulário terá uma

propriedade chamada txtNome, que representara o elemento caixa de texto do

formulário.

Tomemos como exemplo o HTML abaixo:




<head>



</head>

<body>

<form>

Nome: <input type="text" name="txtNome" /><br />

<input type="button" name="btnok" value="clique aqui !"

onclick="btnOk_click()" />

</form>

Como este formulário não possui um nome associado, precisamos acessá-lo

através da coleção forms do objeto document. A coleção forms possui um

conjunto completo com todos os formulários disponíveis dentro do document

HTML. Como só temos um formulário dentro de nosso documento, o formulário

que queremos é o formulário de índice 0, conforme apresentado no bloco de script

abaixo: <script language="javascript1.1" type="text/javascript">

function btnOk_click()

{

alert(document.forms[0].txtNome.value);

}

</script>


52

O código de script acima busca uma referência a caixa de texto contida dentro do

formulário do documento e exibe a propriedade value da mesma, que representa o

conteúdo textual da caixa de texto.

9.2.2 Buscando informações de formulários nomeados

Quando os formulários são nomeados, o processo de busca de informações fica

mais fácil, pois é possível referenciar diretamente o formulário que contém o

controle que queremos buscar as informações. Se utilizarmos o mesmo HTML

utilizado anteriormente, porém com um formulário com a propriedade name,

podemos alterar nosso código de script para utilizar este nome associado ao

formulário. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"



<head>



</head>

<body>

<form name="frmDados">

Nome: <input type="text" name="txtNome" /><br />

<input type="button" name="btnok" value="clique aqui !"

onclick="btnOk_click()" />

</form>

</body>

</html>

Como temos a propriedade NAME associado ao FORM, podemos utilizar nosso

script desta forma:

<script language=“Javascript”>

function btnOk_click()

{

alert(document.frmDados.txtNome.value);

}

</script>

9.3 Validando informações no formulário

Agora que sabemos como buscar as informações do formulário HTML, devemos

verificar como extrair as informações dos elementos do formulário. Para isso,

devemos conhecer um pouco mais dos principais tipos de elementos disponíveis

nos formulários HTML


53

9.3.1 Validando informações de caixas de texto

As caixas de texto são os elementos mais simples de um formulário HTML,

porém são também os elementos mais flexíveis. As caixas de texto possuem como

propriedade principal a propriedade value, que devolve o conteúdo da caixa de

texto. A propriedade value nada mais é do que um objeto String do JavaScript que

já vimos anteriormente, contendo todas as suas propriedades e características.

No exemplo abaixo podemos ver um formulário que solicita informações de

usuário e senha em um formulário HTML. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"



<head>



</head>

<body>

<form name="frmDados" action="">

usuário: <input type="text" name="txtUsuario" /><br />

senha: <input type="password" name="txtSenha" /><br /><br />

<input type="button" name="btnok" value="efetuar logon"

onclick="btnok_click()" />

</form>

</body></html>

Para criarmos uma função que faça a validação deste formulário, basta criarmos o

mapeamento para o evento onclick do botão efetuar logon e apenas submeter o

formulário no caso de as informações solicitadas estarem corretas. O código de

script abaixo realiza esta validação.


function btnok_click()

{

if(document.frmDados.txtUsuario.value.length == 0)

{

alert("Informe o usuário !");

document.frmDados.txtUsuario.focus();

return;

}

if(document.frmDados.txtSenha.value.length < 6)

{

alert("A senha deve ter no mínimo 6 dígitos !");

document.frmDados.txtSenha.focus();

return;

}

document.frmDados.submit();

}

</script>


54

No bloco de script acima, utilizamos a propriedade value do objeto txtUsuario

para verificarmos se o campo está ou não preenchido. Note que estamos

utilizando a propriedade length para fazermos esta verificação. A propriedade

length pertence ao objeto String, que representa o conteúdo textual da caixa de

texto.

Note que caso o usuário não tenha entrado com as informações no campo usuário,

é apresentado um alerta ao usuário e o foco do campo é posicionado no campo

que está com erro no formulário. O foco é trocado através do método focus, que

está presente em todos os controles de interação com usuário dos formulários

HTML. Após a troca do foco, é chamado o comando return, para que a execução

da função seja interrompida.

A validação do controle de senha é feita de forma semelhante a validação do

campo de usuário, porém neste caso estamos verificando se o usuário digitou no

mínimo 6 dígitos para a senha.

Caso as condições estejam satisfeitas, o formulário HTML é submetido para o

WebServer.

9.3.2 Validando listas de seleção simples e múltipla (Combo e ListBox)

As listas de seleção simples múltiplas possuem o mesmo comportamento dentro

de um formulário HTML. Em ambos os casos é possível verificar se o usuário

selecionou algum item na lista ou se está com algum item da lista selecionado.

Tomemos o HTML abaixo como exemplo




<head>



</head>

<body>

<form name="frmDados" action="">

pesquisa vagas<br />

<br />

cidade:

<select size=1 name="cmbCidade">

<option value="">-- selecione a cidade --</option>

<option value="1">Belo Horizonte</option>

<option value="2">Porto Alegre</option>

<option value="3">Rio de Janeiro</option>

<option value="4">São Paulo</option>

</select><br />

<br />


55

cargos:<br />

<select size="5" name="lstCargo" multiple="multiple">

<option value="1">Analista de sistemas</option>

<option value="2">DBA</option>

<option value="3">Programador</option>

<option value="4">Programador/Analista</option>

<option value="5">Web-designer</option>

</select><br /><br />

<input type="button" name="btnok" value="pesquisar" onclick="btnok_click()">

</form>

</body>

</html>

Neste HTML temos uma caixa de seleção simples e uma caixa de seleção

múltipla. Para testarmos se o usuário selecionou ou não as informações destes

controles, utilizaremos o código de script a seguir.


function btnok_click()

{

if(document.frmDados.cmbCidade.options[0].selected==true)

{

alert("Selecione a cidade !");

document.frmDados.cmbCidade.focus();

return;

}

if(document.frmDados.lstCargo.value == "")

{

alert("Selecione o cargo !");

document.frmDados.lstCargo.value = "";

return;

}


}

</script>

Para a validação do primeiro campo utilizamos a coleção options do controle

cmbCidade. A coleção options contém uma referencia a cada um dos itens

existentes dentro da caixa de seleção. Os itens podem ser acessados da mesma

forma que um array simples em JavaScript. Cada item das caixas de seleção,

representados na coleção options, possuem uma série de propriedades, dentre elas

a propriedade selected. A propriedade selected devolve um valor verdadeiro caso

o item esteja selecionado, e falso caso não esteja selecionado. No caso de caixas

de seleção múltipla, é possível testar se mais de um item foi selecionado através

da coleção options, testando cada um dos valores da propriedade selected de cada

item.


56

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

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

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

As caixas de seleção também possuem, assim como as caixas de texto, a

propriedade value, que indica o valor do item selecionado. No caso da segunda

caixa de seleção, estamos fazendo um teste para verificar se o valor da caixa de

seleção é branco ou não, o que indica que o usuário não selecionou nenhum item.

Caso as condições sejam satisfeitas, o formulário é submetido ao servidor para o

processamento.

9.3.3 Validando caixas de escolha simples e múltipla (RadioButton e CheckBox)

Para finalizarmos o módulo de validação de dados em formulários HTML,

devemos verificar a validação das caixas de escolha simples e múltipla. Estas

caixas permitem ao usuário selecionar itens de forma múltipla ou simples em um

formulário.

Tomemos o HTML que segue como exemplo:

<html>

<head>

</head>

<body>

<form name="frmDados">

Selecione o grau de escolaridade:<br>

<input type="radio" name="optEscolaridade" value="1" />Analfabeto<br />

<input type="radio" name="optEscolaridade" value="2" />1º grau<br />

<input type="radio" name="optEscolaridade" value="3" />2º grau<br />

<input type="radio" name="optEscolaridade" value="4" />Superior incompleto<br />

<input type="radio" name="optEscolaridade" value="5" />Superior completo<br />

<input type="radio" name="optEscolaridade" value="6" />Pós, mestrado<br />

<br />

<input type="checkbox" name="chkAtividadefisica" value="a" />Pratica atividade

física

<input type="checkbox" name="chkFumante" value="f" />Fumante

<br /><br />

<input type=button value="enviar" onclick="Validar()" />

</form>

</body>

</html>

Para validarmos o formulário HTML acima utilizaremos a função Validar, que

está mapeada para o clique do botão Enviar, apresentada no bloco de script abaixo


57


function Validar()

{

var nCount;

var bSelecionou = false;

for(nCount=0; nCount<document.frmDados.optEscolaridade.length; nCount++)

{

if(document.frmDados.optEscolaridade[nCount].checked)

{

bSelecionou = true;

break;

}

}

if(bSelecionou == false)

{

alert("Selecione o grau de escolaridade !");

return;

}

if(document.frmDados.optEscolaridade.value=="")

{

alert("Selecione o grau de escolaridade !");

return;

}

if(document.frmDados.chkFumante.checked == true)

{

alert("O Ministério da saúde adverte. Fumar faz mal a saúde !");

}


}

</script>

Note que para validarmos ambos os controles estamos utilizando a propriedade

checked. A propriedade checked é utilizada para verificar se um controle de

seleção está marcado ou desmarcado, e serve tanto para radiobuttons como para

checkbox.

Na primeira validação, note que temos um conjunto de options com o mesmo

nome. Isto faz com que o script interprete os controles como um array de

controles, nos obrigando a informar o índice de cada um dos controles antes de

acessá-los. Criamos uma variável bSelecionou para verificarmos se o usuário

selecionou pelo menos um option button. Caso ele encontre um option button com

a propriedade checked igual a true, a variável bSelecionou será definida para true,

validando o formulário.

Para os outros dois campos, apenas estamos testando a propriedade checked para

dar um alerta para o usuário.


58

9.3.4 Controle de elementos do Textearea

Os elementos textarea são os campos que permitem introduzir várias linhas de

texto.

Vamos ver um exemplo a seguir que apresenta um formulário que tem um

textarea e um botão. Ao apertar o botão conta-se o número de caracteres e coloca-

se em um campo de texto.

Para acessar ao número de caracteres fazemos a partir da propriedade value do

objeto textarea. Como value contém um string podemos acessar à propriedade

length que têm todos os strings para averiguar sua longitude. function conta()

{

numCaracteres = document.form1.comentario.value.length ;

document.form1.numCaracteres.value = numCaracteres ;

}

function limpa(campo)

{

document.getElementById(campo).value = "";

document.getElementById(campo).focus();

}

</script>

</head>

<body>

<form name="form1">

<textarea name="comentario" id="comentario" cols="40" rows="3"

onfocus="limpa('comentario')">Este é o texto padrão</textarea>

<br />

<br />

Número de caracteres <input type="Text" name="numCaracteres" id="numCaracteres"

size="4" />

<br />

<input type="button" value="Conta caracteres" onclick="conta()" />

</form>

9.3.5 Criando uma função para mascaras de campos

O conteúdo desenvolvido abaixo é para demonstrar a aplicação de alguns

comandos em javascript, desenvolva o script e veja o resultado.


/*----------------------------------------------------------------------

Formatação para qualquer mascara

----------------------------------------------------------------------*/

function formatar(src, mask)

{

var i = src.value.length;


59

var saida = mask.substring(0,1);

var texto = mask.substring(i)

if (texto.substring(0,1) != saida)

{

src.value += texto.substring(0,1);

}

}

</script>

</head>

<body>


Data: <input type="text" name="data" size="10" maxlength="10"

OnKeyPress="formatar(this, '##/##/####')" /><br />

Hora: <input type="text" name="hora" size="5" maxlength="5"

OnKeyPress="formatar(this, '##:##')" /> <br />

CEP: <input type="text" name="cep" size="9" maxlength="9"

OnKeyPress="formatar(this, '#####-###')" /> <br />

Telefone: <input type="text" name="tel" maxlength="12" size="12"

OnKeyPress="formatar(this, '##-####-####')"/><br />

CPF: <input type="text" name="cpf" size="14" maxlength="14"

OnKeyPress="formatar(this, '###.###.###-##')"

/>

</form>

</html>

9.4 Validação com Expressões Regulares (RegEx)

Uma Expressão Regular, REGEX ou REGEXP é, basicamente, uma seqüência de

Caracteres dispostos sob uma determinada regra, de modo a coincidir com um

fragmento padrão de texto particular - presente em um determinado documento.

Abaixo usamos esta lógica para validação de um campo email.

Modelos de Expressões Regulares:

Testa valor String filtro utilizada

CEP /^[0-9]{5}-[0-9]{3}$/

CPF /^([0-9]{3}\.){2}[0-9]{3}-[0-9]{2}$/

Datas até 2099 formato (YYYYMMDD)

/^20[0-9][0-9]([012][0-9]|[3][01])([0][0-9]|[1][012])$/

MacAddress /^(([0-9a-f]{2}):){5}([0-9a-f]{2})$/


60

IP 1]?[0-9]{1,2}|2([0-4][0-9]|5[0-5]))\.){3}([1]?[0-9]{1,2}|2([0-4][0-9]|5[0-5]))$/

Email /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/

HTML (substitui tags por nada) “<[^>]*>”, “”

function checkMail()

{

// atribui a variável x o valor do campo email do formulário

var x = document.forms[0].email.value;

/* cria uma variável com o filtro para fazer a pesquisa na string (neste caso é

para validar um emaill) */

var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-

9]{2,4})+$/;

//Faz consistência com o método test da variável x

if (filter.test(x)) alert(Email válido!');

else alert('Email inválido!');

}

9.5 Laboratório

9.5.1 Exercício 25

No documento HTML crie duas caixas de texto, com os nome de txtNum1 e

txtNum2

Crie um combobox permitindo que o usuário selecione a operação que deseja

realizar, entre os dois textboxes

Crie um novo botão com o nome de calcular, e mapeio o evento clique para a

função Calcular

Declare duas variáveis na função Calcular

Na função calcular crie um código para a validação dos dois textboxes para

algarismos numéricos. Caso o valor seja válido, atribui o valor conferido para

número com a função parseInt para as respectivas variáveis nNum1 e nNum2

Na função calcular, utilize o operador selecionado no combo para apresentar o

resultado ao usuário, utilizando o comando alert (dica, utilize a função eval)

9.5.2 Exercício 26

Crie um novo documento HTML conforme as instruções dos exercícios anteriores

Crie um novo formulário HTML com os seguintes campos


61

Campo Tipo

txtNome TextBox

txtNumCartao TextBox

chkNovoEndereco Chechbox

txtEndereco TextBox

txtCEP TextBox

Crie um botão para a submissão do formulário

Crie uma função para validar o formulário antes da submissão, que deve seguir as

seguintes regras:

- O campo txtNome é obrigatório

- O campo txtNumCartao é obrigatório e deve ser numérico

- Os campos txtEndereco e txtCEP são de preenchimento obrigatório SOMENTE

se o usuário selecionar a caixa chkNovoEndereco

- Se o preenchimento do CEP for necessário, ele deve ser numérico

9.5.3 Exercício 27

Crie um novo documento HTML conforme as instruções dos exercícios anteriores

Crie um novo formulário HTML com os seguintes campos

Campo Tipo Valores

txtNome TextBox

cmbEstadoCivil SELECT (ComboBox) Solteiro, Casado, Divorciado

txtNomeConjuje TextBox

txtNumDependentes TextBox

txtNomesDosDependentes TextBox ou TEXTAREA

Crie um botão para a submissão do formulário


62

Crie uma função para validar o formulário antes da submissão, que deve seguir as

seguintes regras:

- O campo txtNome é obrigatório

- O campo txtNomeConjuje é de preenchimento obrigatório somente se a opção do

combo selecionada for Casado

- O campo txtNumDependetes deve ser numérico

- Se o valor no campo txtNumDependentes for maior que zero, o campo

txtNomesDosDependentes deve ser diferente de branco


63

Unidade 10 Objeto Window

10.1 Métodos do objeto window

É o objeto principal na hierarquia e contém as propriedades e métodos para

controlar a janela do navegador. Dele dependem todos os demais objetos da

hierarquia. Vamos ver a lista de suas propriedades e métodos.

Método Descrição

alert(texto) Apresenta uma janela de alerta onde se pode ler o texto que recebe por parâmetro.

back() Ir uma página atrás no histórico de páginas visitadas. Funciona como o botão de voltar da barra de ferramentas. (Javascript 1.2)

blur() Tirar o foco da janela atual. (Javascript 1.1)

captureEvents(eventos) Captura os eventos que se indiquem por parâmetro (Javascript 1.2).

clearInterval() Elimina a execução de sentenças associadas a um intervalo indicadas com o método setInterval().(Javascript 1.2)

clearTimeout()

Elimina a execução de sentenças associadas a um tempo de espera indicadas com o método setTimeout().

close() Fecha a janela. (Javascript 1.1)

confirm(texto)

Mostra uma janela de confirmação e permite aceitar ou rejeitar

find()

Mostra uma janelinha de busca. (Javascript 1.2 para Netscape)

focus() Coloca o foco da aplicação na janela. (Javascript 1.1)

forward() Ir uma página adiante no histórico de páginas visitadas. Como se clicássemos o botão de adiante do navegador. (Javascript 1.2)

home() Ir à página de início o explorador que tenha configurado. (Javascript 1.2)


64

moveBy(pixelsX, pixelsY) Move a janela do navegador os pixels que se indicam por parâmetro para a direita e para baixo. (Javascript 1.2)

moveTo(pixelsX, pixelsY) Move a janela do navegador à posição indicada nas coordenadas que recebe por parâmetro. (Javascript 1.2)

open() Abre uma janela secundária do navegador.

print()

Como se clicássemos o botão de imprimir do navegador. (Javascript 1.2)

prompt(pergunta,valor_default) Mostra uma caixa de diálogo para pedir um dado. Devolve o dado que se escreveu.

releaseEvents(eventos) Deixa de capturar eventos do tipo que se indique por parâmetro. (Javascript 1.2)

resizeBy(pixelslargo,pixelsAlto) Redimensiona o tamanho da janela, acrescentando ao seu tamanho atual os valores indicados nos parâmetros. O primeiro para a altura e o segundo para a largura. Admite valores negativos se deseja reduzir a janela. (Javascript 1.2)

resizeTo(pixelslargo,pixelsAlto) Redimensiona a janela do navegador para que ocupe o espaço em pixels que se indica por parâmetro (Javascript 1.2)

routeEvent() Encaminha um evento pela hierarquia de eventos. (Javascript 1.2)

scroll(pixelsX,pixelsY)

Faz um scroll da janela para a coordenada indicada por parâmetro. Este método está desaconselhado, pois agora se deveria utilizar scrollTo()(Javascript 1.1)

scrollBy(pixelsX,pixelsY) Faz um scroll do conteúdo da janela relativo à posição atual. (Javascript 1.2)

scrollTo(pixelsX,pixelsY) Faz um scroll da janela à posição indicada pelo parâmetro. Este método tem que ser utilizado ao invés do scroll. (Javascript 1.2)

setInterval() Define um script para que seja executado indefinidamente em cada intervalo de tempo. (Javascript 1.2)

setTimeout(sentença,segundos) Define um script para que seja executado uma vez depois de um tempo de espera determinado.


65

stop()

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

Exemplo do uso de algumas funções da propriedade window:

Exemplo 01 – Janela Nova: clicando num botão

Arquvio abrir_ janela.html

<body>

<input type="button" value="Abrir janela" onclick="window.open('pop-

up.html','nova','width=300,height=150,toolbar=no,location=no,directories=no,stat

us=no,menubar=no,scrollbars=no,resizable=no')" />

</body>

Arquvio pop_up.html <body>

<input type="button" value="fechar" onclick="self.close()" />

</body>

Exemplo 02 – Janela Nova: Passando o mouse em imagem

Arquvio abrir_ janela_imagem.html


function abre()

{

open('pop_up_imagem.html','imagem','width=350,height=350,toolbar=no,location

=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no');

}

</script>

</head>

<body>

<a href="#" onmouseover="abre()">

<img src="iceage.jpg" alt="ice age" width="100" border="0"/> </a>

</body>

Arquvio pop_up_imagem.html <body>

<img src="iceage.jpg" width="350" height="330" alt="ice age" />

</body>

Exemplo 03 – Janela Nova: automática

Arquvio abrir_ janela_automatica.html


function abre()

{


66

open('pop_up_automatico.html','popup','width=350,height=350,toolbar=no,locat

ion=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no');

}

</script>

</head>

<body onload="abre()">

Janela Principal

</body>

Arquvio pop_up_automatica.html

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

aguarde...

</body>

67

Unidade 11 Introdução ao DHTML

11.1 O que é DHTML

Com a introdução de browsers mais avançados, e com mais recursos surgiu um

novo recurso para criação de páginas Web mais interativas, o DHTML. O

DHTML é composto por um conjunto de tecnologias que permite ao

desenvolvedor Web a manipulação de diversos elementos na página Web. As

tecnologias necessárias para se trabalhar com o DHTML são o HTML, o CSS e o

JavaScript.

O DHTML consiste em alterar o conteúdo e exibição de diversos elementos da

página HTML de uma forma totalmente dinâmica, com a utilização de códigos de

script. Nos próximos tópicos veremos as operações mais comuns que podemos

fazer com o DHTML.

11.2 Trocando o layout dos elementos do HTML

Uma das características do DHTML é a de alterar as características de exibição de

uma determinada página web de forma dinâmica. Para alterar estas características,

o DHTML se utiliza do CSS, um conceito de formação de elementos nas páginas

Web introduzido a partir do Internet Explorer 4.0.

Para criarmos elementos DHTML em uma página HTML é necessário informar

um atributo adicional ao elemento que queremos acessar, este atributo é chamado

de ID. Ao informar o ID a um elemento, ele passa a ter automaticamente uma

referência nos códigos de script da página HTML.

Cada elemento dinâmico utilizado no DHTML possui algumas propriedades como

innerHTML, que setam o conteúdo HTML do elemento e a propriedade STYLE

que define o formato de apresentação do elemento. A propriedade style possui

uma série de sub-propriedades que podem ser acessadas a fim de alterar o layout

do document HTML.

Para exemplificar o uso de DHTML para trocar o layout de um documento HTML

utilizaremos o HTML apresentado a seguir:

<style type="text/css">

<!--

#imagem {

height: 97px;

width: 130px;

border: 2px;

border-color: #0000FF;

border-style: solid;


68

float:left;

}

/*comentários */

#texto {

height: 200px;

width: 500px;

border: 2px;

background-color: #00CCFF;

float:left;

padding-left:10px;

margin-left:5px;

}

-->

</style>


function mostra(objeto)

{

if(document.getElementById(objeto).style.display != "none")

document.getElementById(objeto).style.display = 'none';

else

document.getElementById(objeto).style.display = '';

}

/*tudo o que é CSS procura por STYLE

se (dentro do documento, div TEXTO, style CSS, parametro display NEGA o none

vai ocultar senão não recebe nada */

</script>

</head>

<body>

<div id="imagem" onmouseover="mostra('texto')" onmouseout="mostra('texto')">

<img src="flores.jpg" alt="Foto 01" width="130" height="97" />

</div>

<div id="texto" style="display:none;">

<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis tempus

vulputate nisi. Vivamus ultrices porta eros. Sed vitae purus sit amet nisi

ornare cursus. Nam eu nisi. Quisque at nulla a ligula pretium mattis. Nullam

sem. Donec cursus tristique tellus. Vestibulum laoreet, turpis et vulputate

ultrices, ligula elit hendrerit sapien, sollicitudin molestie leo leo accumsan

dui. Quisque venenatis urna in enim. Aliquam erat volutpat. Donec nec quam quis

elit posuere commodo. Curabitur justo nulla, suscipit vitae, elementum id,

molestie ac, dolor. Aliquam id arcu. Praesent ac metus. Fusce tortor enim,

molestie id, iaculis sed, elementum eget, dolor. </p>

</div> </body>

No exemplo, ao passar o mouse sobre uma imagem, uma div (anteriormente

oculta) aparece. Ao retirar o mouse, a div volta a ficar oculta.

11.3 Escondendo e mostrando elementos dinamicamente

Através do uso de DHTML também é possível esconder e mostrar elementos do

documento HTML dinamicamente. No HTML abaixo temos o exemplo de um

menu desenvolvido utilizando elementos <A HREF> e <DIV>.


69




<head>



</head>

<body>

<a href="javascript:MostraMenu(subMenu1)">Menu 1</a><br />

<div id="subMenu1" style="display: none;">

   <A HREF="#">Sub Menu 1</a><br />




</div>

<a href="javascript:MostraMenu(subMenu2)">Menu 2</a><br>

<div id=subMenu2 style="display: none;">

   <a href="#">Sub Menu 1</a><br />




</div>

<A HREF="javascript:MostraMenu(subMenu3)">Menu 3</a><br />

<div id=subMenu3 style="display: none;">





</div>

</body>

</html>

Note que os links de cada um dos menus apontam para uma função JavaScript

chamada MostraMenu. Para chamarmos funções javascript através de links, basta

informarmos a instrução javascript: na propriedade HREF do link e especificar a

função que desejamos chamar. A função é chamada com um parâmetro, que

representa o menu que desejamos mostrar ou esconder.

Os submenus ficam inicialmente escondidos, utilizando-se a propriedade display

de cada um dos DIV utilizados para montá-los.

O código de Script a seguir demonstra como a função MostraMenu gera os menus

dinamicamente e faz com que os links fiquem visíveis ou invisíveis conforme os

cliques do usuário.


function MostraMenu(divSubMenu)

{

if(divSubMenu.style.display=="none")


70

divSubMenu.style.display="inline";

else

divSubMenu.style.display="none";

}

</script>

Note que o código de script utilizado para mostrar e esconder os menus é

extramente simples. Utilizando o menu div do submenu recebido como

parâmetro, a função verifica se o submenu está sendo mostrado ou não,

verificando a propriedade style.display. A propriedade display indica a

visibilidade ou não de um elemento HTML, e pode ser utilizado por qualquer

elemento que contenha uma propriedade ID. Ao verificar a visibilidade do

submenu, a função esconde ou mostra o menu conforme o estado atual do mesmo.

introducao javascript

Documents