24 Introdução Ao Javascript [Versão 2013-01] - Alfamídia

8/18/2019 24 Introdução Ao Javascript [Versão 2013-01] - Alfamídia

1/70

Alfamídia Programação:

Introdução ao Javascript


2/70

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ãotem qualquer responsabilidade sobre qualquer pessoa ou entidade com respeito àresponsabilidade, perda ou danos causados, ou alegadamente causados, direta ouindiretamente, pelas instruções contidas neste material ou pelo software de computador e produtos de hardware aqui descritos.

01/ 2013

Alfamídia Prowwww.alfamidia.com.br


3/70


3

UNIDADE 1 ..................................................................................................................................................................... 6

UNIDADE 2 INTRODUÇÃO AO JAVASCRIPT ............................................................................................................ 7

2.1

O QUE É JAVASCRIPT? .......................................................................................................................... 7

2.2

O NDE 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/70


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 I NTRODUÇÃ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/70


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 R EGULARES (R EGEX) ....................................................................... 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/70


6

Unidade 1


7/70


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, permiteincrementar a apresentação e interatividade das páginas Web. Funções escritas emJavascript 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 documentoHTML com elementos interessantes. Por exemplo, você será capaz de responderfacilmente 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”, sendoutilizado apenas para operações mais simples. Podemos entender uma linguagemde “script” como uma espécie de “roteiro” simples para execução de tarefas. Aslinguagens de script, como o Javascript, são compostas apenas por um conjuntode instruções em formato texto que são interpretadas pelo computador nomomento da sua execução.

A linguagem Javascript é Case sensitive, que significa que um programa ou umcompilador faz a diferença entre letras maiúsculas e minúsculas. O termo vem doinglê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 umasé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 queevolucionaram em conjunto com as versões de navegadores. A linguagem foiavanç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.phphttp://www.criarweb.com/artigos/168.php


8/70


8

para criar efeitos especiais. Com o tempo também o HTML foi avançando eforam criadas novas características como as camadas, que permitem tratar e planificar os documentos de maneira distinta. Javascript também avançou e paramanejar 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 deinstruçõ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 chegadados navegadores 3.0. Implementava pouco mais que sua versão anterior,como por exemplo, o tratamento de imagens dinamicamente e a criação dearrays.

Javascript 1.2: A versão dos navegadores 4.0. Esta tem como desvantagemque é um pouco distinta em plataformas Microsoft e Mozila, já que ambosnavegadores cresceram de distinto modo e estavam em plena luta nomercado.

Javascript 1.3: Versão que implementam os navegadores 5.0. Nesta versãoforam 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.phphttp://www.criarweb.com/artigos/168.php


9/70


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 naabertura da página HTML. Um bloco javascript é delimitado utilizando a tag nas páginas HTML. Todo o código colocado dentro destas tags éconsiderado como um bloco de script pelo browser.

Untitled Document

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 permitecomentários em linha única ou em bloco.

Os comentários em linha única são representados pelos caracteres ( // ) etransformam todo e qualquer texto colocado na mesma linha após este símboloem comentário, conforme exemplo a seguir:

// Este texto é comentário

Os comentários também podem ser criados em blocos no Javascript, utilizando anotação /* e */. Através desta notação, todo o texto colocado dentro destes doisdelimitadores é considerado como comentário para a linguagem de script,conforme o exemplo a seguir:

/* Aqui iniciamos um comentário em bloco

note que mesmo estando em outra linha, este texto continua sendo comentário


10/70


10

até que seja colocado o delimitador de fim de comentário */

// Este texto é em linha

3.3 A estrutura de um script Javascript

Assim como outras linguagens de script, o Javascript é criado a partir de umcó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ê podeutilizar variáveis para armazenar informações ou mesmo realizar cálculos.

Uma instrução escrita em Javascript pode ser representada por uma ou maisexpressões, palavras-chave, comandos, ou operadores, e em geral são escritos emuma linha de código no arquivo que contém o script. No javascript, cada instruçãocontendo 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 docomando seja colocado o caractere “;”.

Em alguns casos, ainda é importante colocar todo os comandos JavaScript emcomentário, caso for visualizado num navegador que não o reconheça.

Abaixo podemos ver um exemplo de duas linhas de comando escritas emJavascript.

sAlfamidia = "Este é o curso de JavaScript da Alfamídia!"; // Atribui umtexto à variável

alert(sAlfamidia);

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ãoutilizados, 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 utilizadelimitadores 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/70


11

3.4 Variáveis

Assim como qualquer linguagem de programação, o Javascript permite a criaçãode 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 escopolocal, 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 onome das variáveis que devem ser declaradas. É possível declarar mais de umavariá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

Como podemos ver no exemplo acima, a atribuição de variáveis é feita através dooperador 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 devariá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 umcódigo Javascript pode receber qualquer tipo de dado. A tipagem dos dados ocorreno momento da atribuição de valores as variáveis, ou seja, ao atribuir um valornúmero a uma variável, esta assume um tipo de dado “numérico”, ao atri buir umvalor string a uma variável, esta assume o valor string.

Apesar de não existir uma tipagem explícita de dados no Javascript, a linguageminterpreta 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 (querepresentam números inteiros ou fracionados), Strings (que representamcaracteres ou um conjunto de caracteres), e Boolean (que representam valores booleanos True/False).


12/70


12

var nNumber, String, bBoolean; //As variáveis ainda não assumiram um tipoespecí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);

3.5.2 Tipos de dados especiais (undefined e Null)

Os tipos de dados especiais são utilizados geralmente em expressões de teste emconjunto com os tipos de dados compostos.

O tipo undefined representa uma propriedade inexistente em um objeto criadodentro de um código javascript. O tipo null representa uma variável ou objeto semvalor, 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

3.5.3 Tipos de dados Compostos (por referência)

Dentre os tipos de dados compostos, podemos encontrar tipos mais complexoscomo o objeto do tipo Date (utilizado para representar datas e horas), o tipo Array(utilizado para representar um conjunto de dados), e objetos utilizados paraquaisquer 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


13/70


13

}

3.6 Caixas de Diálogo ou de MensagemPrecisamos mostrar mensagens de um script para o usuário no navegador. Issoserá feito utilizando métodos do objeto window. O Javascript possui 3 caixas demensagens.

3.6.1 O método alert()

O método alert() cria uma caixa de diálogo na qual é reproduzido o valor (variávele/ou cadeia de caracteres) do argumento que lhe foi fornecido. Esta caixa bloqueiao 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 Fi reFox

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


14/70


14

3.6.2 O método prompt()

No mesmo estilo do que o método alert(), Javascript dispõe de outra caixa dediálogo, chamada caixa de convite, que é composto por um campo que contémuma entrada a ser completada pelo usuário. Esta entrada contém um valor pordefault.

A sintaxe é:prompt("texto da caixa","valor por default");

Prompt no IE:

Prompt no Fir eFox:

Ao clicar no OK, o método reenvia o valor escrito pelo usuário ou a respostadefault. Se o usuário clicar em Cancel, o valor nulo é então reenviado.

O prompt() é utilizado para incrementar dados fornecidos pelo usuário.


15/70


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:

Confi rm no Fir eFox:

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, podemconter textos, expressões JavaScript e comandos Html. As linhas escritas atravésdeste método aparecerão no ponto da tela onde o comando for inserido.

A sintaxe é:

var nome="Alfamídia";

document.write("Esta é minha primeira linha!");

document.write("Esta é o valor da variável nome:" + nome);

A ideia do exemplo acima é escrever duas linhas. Entretanto o método write nãoinsere mudança de linha, o que provocará o aparecimento de apenas uma linhacom os dois textos emendados.

Uma alternativa para que isso não acontece é utilizarmos a concatenação com atag
do HTML que quebra linha:


16/70


16

A sintaxe é:

document.write("Esta é minha primeira linha!"+"
");

document.write("Esta é a segunda linha!");

3.7 Operadores

A linguagem Javascript possui um conjunto de operadores muito semelhantes aqualquer linguagem de programação convencional, que permitem tanto realizaroperações aritméticas como operações booleanas (verdadeiro ou falso). Osoperadores estão divididos em três grupos principais: Computacionais, Lógicos ede Atribuição.

Dentre os operadores computacionais, podemos encontrar os operadores que

realizam operações aritméticas, bem como operadores utilizados para realizarconcatenações de strings. A lista dos operadores computacionais pode servisualizada 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ógicosconvencionais, como equalidade e inequalidade. É importante ressaltar a diferençaentre o operador de atribuição = e o operador lógico de igualdade ==. Muitasvezes os desenvolvedores tendem a utilizar o operador de atribuição para realizartestes de igualdade, o que acarreta em erros de lógico nos scripts. Operadoreslógicos podem ser visualizados a seguir.

Operador Símbolo

Não Lógico (Negação) !Menor que <

Maior que >

Menor ou igual a =

Igual ==

Diferente (não igual) !=

E Lógico (AND) &&

OU Lógico (OR) ||


17/70


17

Além destes dois conjuntos de operadores, ainda temos os operadores deatribuição. O operador de atribuição é representado pelo símbolo =, que pode sercombinado com qualquer operador computacional a fim de combinar o valor atualda 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);


18/70


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 umatarefa bem específica e que podemos de necessário, utilizar várias vezes. Autilizaçã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çõesdisponí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 aodesenvolvedor utilizar funções próprias do Javascript e criar suas própriasfunçõ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 emqualquer ponto do código JavaScript. As funções intrínsecas mais comuns sãoapresentadas a seguir.

4.3.1 A função parseInt() e parseFloat()

As funções parseInt e parseFloat são utilizadas para converter valor do formatostring (texto) para o formato numérico. A função parseInt é utilizada paraconverter valores inteiros. A função parseFloat é utilizada para converter valoresfracionados. Estas funções são extremamente úteis quando se faz necessária aconversão de um valor textual, informado pelo usuário ou não, para um tiponúmero. A partir da conversão é possível utilizar os valores para cálculosnumé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/70


19

sValor2 = "1.5"; // Valor Fracionado

sResultado = sValor1 + sValor2;

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

// Concatenação

alert(sResultado + “ ”+ nResultado);

// Soma numérica

alert(nResultado);

4.3.2 Função escape() e unescape()

Estas funções são utilizadas para converter uma string em um formato legível emqualquer computador, ou seja, remove caracteres que podem ser considerados

inválidos para um formato padrão. Este formato padrão é representado por umsímbolo % e um valor hexadecimal (podemos observar esta conversãocomumente em barras de navegação de browsers).

Podemos ver um exemplo de utilização das funções escape e unescape noexemplo a seguir.

Podemos ver exemplos destas duas funções no script a seguir:

var sURL;

sURL = "http://www.processor.com.br/jscript?Param1=Curso de JavaScript&Param2=áéíóú";

sURL = escape(sURL);

alert(sURL);

sURL = unescape(sURL);

alert(sURL);

4.3.3 A função isNaN()

A função isNaN (Is Not a Number) é utilizada para verificar se uma variávelcontém um valor especial NaN. O valor representa uma conversão numérica malsucedida (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:

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/70


20

4.4 Funções criadas pelo usuário

Além das funções disponíveis, por padrão no Javascript, a linguagem nos permitecriar nossas próprias funções, chamadas funções definidas pelo usuário. Para criarfunções devemos utilizar a cláusula function, que é utilizada para criar as funçõesno Javascript.

A sintaxe para a criação das funções no Javascript é:

function ([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 docorpo da função. Para definir os parâmetros, basta informar os nomes dasvariáveis que irão representar os parâmetros na função. Podemos ver um exemplode função no código abaixo:

function Soma(nNumero1, nNumero2)

{

var nSoma;nSoma = nNumero1+nNumero2;

alert("Soma= " + nSoma);

}

Soma(10,5);

As funções do Javascript ainda permitem que o usuário retorne valores. Pararetornar um valor em uma função, basta criar a função da mesma forma comoapresentado no exemplo anterior, porém com a utilização do comando return. Ocomando 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 umafunção. Podemos ver um exemplo de utilização do comando return a seguir.

function Soma(nNumero1, nNumero2)

{

return nNumero1+nNumero2;

}

alert("Soma= " + Soma(10,5));


21/70


21

4.5 Laboratório

Crie um diretório chamado Laboratórios dentro de sua pasta de arquivos. Dentro destediretó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 resultadose 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 estoquemí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 emdó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 emconsideração que sua comissão será de 5% do total da venda e que você tem os seguintesdados: preço unitário da peça e quantidade vendida.


22/70

Unidade 5 Expressões

5.1 Expressões Condicionais – estruturas de teste

Para uma utilização eficaz dos operadores disponíveis no Javascript, é necessárioentender como funcionam as estruturas de teste utilizadas pela linguagem. Dentrodo 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 sertestada, e caso ela seja verdadeira, o comando ou bloco de comandos subseqüenteao 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 seremexecutadas caso a condição testada no comando if não seja verdadeira.

A seguir podemos verificar um exemplo do comando if :

Exemplo 1 – i f simples:

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

Exemplo 2 – i f else :

var nNum;

nNum = parseInt(prompt("Informe um número inteiro:",""));

if(nNum > 0)

alert("Número positivo");

else

alert("Número negativo");

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 aexpressão entre parêntese é falsa, é a instrução B será executada.

var nNum;


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

Exemplo 3 – if else encadeado:


23/70


23

var nNum;


if(nNum == 0)

alert("Número neutro");

else if(nNum > 0)

alert("Número positivo");

else

alert("Número negativo");

Se o comando if possuir mais de uma instrução, é obrigatório a utilização dosdelimitadores 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 testeslógicos na linguagem Javascript. O comando switch é um comando de teste deseleção múltipla, ou seja, não testa a expressão lógica apenas por um valorespecí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ãológica, que irá conter os comandos executados no caso de cada uma dasexpressõ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 ascondições posteriores ao teste, conforme o exemplo a seguir:

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/70


24

5.3 Laboratório

5.3.1 Exercício 9

João comprou um computador para controlar o rendimento diário de seu trabalho. Todavez que ele traz um peso de peixes maior que o estabelecido pelo regulamento de pesca doEstado (50 quilos), ele deve pagar uma multa de R$ 4,00 por quilo excedente. João precisaque 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 dehoras 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 estivercom 3kg abaixo do peso ideal.


25/70


25

5.3.5 Exercício 13

Elabore um programa que, dada a idade de um nadador, classifique-o em uma dasseguintes categorias, sabendo que crianças com idade inferior a 5 anos ainda não podemcompetir 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çõesde 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 asinstruções entre as chaves. Uma vez que a condição não é mais verdadeira, o ciclointerrompe-se e continua-se o script.

Podemos ver um exemplo de utilização do comando while no código abaixo:

var sNome, nCont;

nCont = 1;

while(nCont


26/70


26

5.4.2 Do While

Utiliza-se geralmente quando não sabemos quantas vezes haverá de se executar oloop, 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 aschaves. Uma vez que a condição não é mais verdadeira, o ciclo interrompe-se econtinua-se o script.

Podemos ver um exemplo de utilização do comando do while no código abaixo:

var nNumi, nNumf;

nNumi = parseInt(prompt("Informe o número inicial: ",""));

do{

nNumf = parseInt(prompt("Informe o número final: ",""));

if(nNumf


27/70


27

Com a cláusula in podemos, por exemplo, buscar todas as propriedadesdisponíveis de um determinado objeto criado no JavaScript. No exemplo a seguir podemos visualizar todas as propriedades disponíveis no objeto window, querepresenta a janela do browser.

var prop;

for(prop in window)

{

var sMensagem;

sMensagem = "Propriedade da janela do Browser: ";

sMensagem += prop;

alert(sMensagem);

}

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 informea 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 osnúmeros pares desses números e multiplique por 2 mostrando também o resultado.


28/70


28

Unidade 6 ObjetosAlé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 derecursos dentro da linguagem. As próprias funções intrínsecas que vimos nomó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 mesmaforma que as funções em uma linguagem de programação e são utilizadas para dealguma 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 objetosutilizados.

Para utilizarmos um objeto no Javascript é necessário instanciá-lo inicialmente.Para iniciarmos um objeto precisamos criar uma variável que irá armazenar ainstância do objeto. Para criar uma nova instancia de um objeto, devemos utilizaro 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 umconjunto de valores dentro do Javascript. Para criarmos um array dentro do

Javascript, utilizamos a mesma sintaxe que utilizamos até o momento com asdatas, através do comando new. Deve-se lembrar que a primeira posição de umarray é 0, então um array de tamanho 6, começa na posição 0 e acaba na posição5. A seguir vemos uma série de exemplos de criação de arrays.

var sNomes = new Array();

var sValores = new Array(5)// Array de 6 posições;

Como mostrado no exemplo anterior, os array podem ser criados com umtamanho inicial ou não. Caso não seja informado o tamanho inicial, podemosaumentar seu tamanho à medida que criamos os elementos dentro do array.

Para criar e acessar elementos em um array em Javascript devemos utilizarcolchetes [ ] 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/70


29

MÉTODOS DESCRIÇÃO

join() Junta todos os elementos do array numa única cadeia. Osdiferentes elementos são separados por um caracterseparador especificado no argumento. Por default, esteseparador é 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:


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

for(var i=0;i


30/70


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


31/70


31

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


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 dosdemais. Para utilizarmos o objeto Math, não é necessário criar um nova instânciadeste em uma variável, basta chamarmos seus métodos e propriedadesdiretamente.

Este objeto é utilizado para realizar cálculos matemáticos mais avançados, quenã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/70


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


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

6.4 O Objeto String

O objeto string representa variáveis de texto dentro do Javascript. Os objetosstring são criados através do comando String () ou através da atribuição direta deum 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 decaracteres.


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


33/70


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:

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

6.5 Objetos criados pelo usuário

Além dos objetos intrínsecos, o Javascript também nos permite criar objetosdefinidos pelo usuário, com propriedades próprias definidas no próprio script.

Para criarmos um objeto definido pelo usuário no Javascript, devemos criar umavariável e atribuir uma nova instancia de um objeto do tipo Object. Após criar estavariável, basta atribuir as propriedades ao objeto que elas serão criadas de formaautomática. Podemos visualizar a utilização de objetos definidos pelo usuário noexemplo abaixo:

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/70


34

alert(sMsg);

}

6.6 Métodos

Os métodos de um objeto são funções que pertencem a um objeto. Repare queenquanto que as propriedades correspondem a variáveis, os métodoscorrespondem a funções.

6.6.1 Métodos estáticos

Alguns objetos oferecem métodos estáticos. Esses métodos diferem dos métodosnormais 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 podeser 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 querespondem a eventos sabendo sempre qual foi o objeto que originou o evento efuncionam 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. Osdois exemplos seguintes usam o objeto Math para ilustrar o uso desta declaração esão totalmente equivalentes.

Versão 1:

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

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

alert(x + " - " + y);


35/70


35

Versão 2: (equivalente à anterior.) Repare que não foi preciso replicar o comandoMath. antes dos nomes dos métodos pow(), sqrt(), floor() ourandom().

with (Math) {

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

y = floor(random()* 100);

}

alert(x + " - " + y);

Quando o número de instruções é pequeno não vale a pena usar a declaração with, mas seesse número crescer muito o código será mais compacto e fácil de ler se usarmos estadeclaraçã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 scripte 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


36/70


36

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

}

Digite uma expressáo matemática (exemplo: 2+2 ou 3*5):

Resultado:

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 edecrescente, 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 dasemana, 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 – Quin ta-feir a - 16:04:05 – Boa Tarde


37/70


37

6.7.4 Exercício 21

Crie uma variável chamada sNomes e atribua ela uma nova instancia de um Array, com 10elementos.

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 denomes 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 qualquere verifique quantos números do vetor são inferiores a esse número e quantos sãosuperiores.

6.7.6 Exercício 23

Escreva um programa que leia quatro números, calcule o quadrado de cada um e sometodos. Se o quadrado do terceiro for maior que mil (1000), mostre o número original efinalize 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. Lembrandoque estes números devem ser maior ou igual a 1 e menor ou igual a 60.


38/70


38

Unidade 7 Eventos

7.1 O que é

Os eventos são a maneira que temos em Javascript de controlar as ações dosvisitantes e definir um comportamento da página quando se produzam. Quandoum usuário visita uma página web e interage com ela, se produzem os eventos ecom 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 outroselementos.

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 umlink ou outro elemento.

MouseOut Quando o ponteiro do mouse sai de um link ou outroelemento.

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, independentementeque a solte ou não.

Keypress Quando o usuário deixa uma tecla clicada por um tempodeterminado.


39/70


39

Keyup Quando o usuário deixa de apertar uma tecla. É produzidono 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 osmanipuladores de eventos. Existem muitos tipos de manipuladores de eventos, para muitos tipos de ações do usuário. O manipulador de eventos se coloca naetiqueta HTML do elemento da página que queremos que responda às ações dousuário.

Por exemplo, temos o manipulador de eventos onclick, que serve para descreverações que queremos que se executem quando se clique. Se quisermos que aoclicar sobre um botão aconteça alguma coisa, escrevemos o manipulador onclick

na etiqueta desse botão. Algo parecido a isto.

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 quese 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 áreade 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/70


40

7.4.1 onclick

O onclick é mais clássico, o clique do mouse.

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.

7.4.3 onunload

O onunload aparece quando o usuário sai da página.

7.4.4 onmouseover

O onmouseover executa-se quando o cursor passa por cima (sem clicar) de umlink ou de uma imagem.

function mensagem()

{

alert("Você está utilizando o onmouseover");

}

Passe o mouse

7.4.5 onmouseoutO onmouseout executa-se quando o cursor sai da zona sensível (link ou imagem).

function mensagem()

{

alert("Você esta utilizando o onmouseout");

}


41/70


41

Passe o mouse

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 domouse ou com o uso da tecla "Tab".

function mensagem()

{

alert("Isto é o onfocus");

}

Nome:

7.4.7 onblur

O onblur executa-se quando por exemplo um campo de texto de um formulário

perde o foco. Isto aconteça quando o usuário desativa o campo de texto clicandofora dele ou utilizando a tecla "Tab".

Se depois de clicar e/ou escrever na área de texto, clica-se fora do documento, produza-se o evento blur.

function mensagem()

{

alert("Isto é o onblur");

}

Nome:


42/70


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.

function mensagem()

{

alert("Isto é o onchange");

}

Nome:

7.4.9 onselect

O onselect executa-se quando o usuário selecionou toda ou parte de um texto numcampo de texto.

function mensagem()

{

alert("Isto é o onselect");

}

Nome:


43/70


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 asaplicações da Web manipulam e interagem com as páginas da Web. Todos osbrowsers modernos implementam estes padrões. Apesar de essas implementaçõesserem geralmente incompletas, elas são suficientes para que possamos programarquase 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ódulotrata 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 paracor amarela com JAVASCRIPT e DOM.


44/70


44

Troca cor de fundo

8.6 Document Objects

HTML DOM define documentos HTML como uma coleção de Objetos. O Objetodocument , é o pai de todos os outros objetos de um documento HTML. OObjeto document.body, representa o elemento em um documentoHTML. O objeto document, é o pai de body, por isso devemos sempre acessarbody 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 umdocumento HTML, como visto no exemplo anterior, onde definiu a cor de fundocomo amarelo.

Exemplo de utilização: body.nomePropriedade

atributos Descrição

accessKey Seta ou retorna o comando chave para acessar o comandochave 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 dodocumento Html


45/70


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 asvezes 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 oservidor 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çãopara o form

Target Seta ou retorna o alvo em que o response vai processar apos a


46/70


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

}

}

Idade:


47/70


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 nodocumento, com o ID correspondente (como DIVs, Tabelas, etc). Ele pode serusado em qualquer posição dos nodos da árvore de objetos da API DOM.

A melhor forma de localizar objetos de formulário é utilizando seu caminhocompleto, 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;

}

Telefone:

Alfamídia

Azul

Vermelho


48/70


48

Unidade 9Manipulando forms com DOM

9.1 Tutorial

Para tirarmos o máximo de proveito dos recursos da linguagem Javascriptdevemos saber como a linguagem interage com as páginas HTML. O Javascripttem 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 formahierárquica, ou seja, temos um objeto chamado document que é acessível aqualquer script colocado na página. A partir do objeto document , é possívelacessar todos os elementos das páginas, desde os frames até os próprios elementosde 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 contidosdentro da página HTML, como, por exemplo, uma caixa de texto de umformulá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 dodocumento.

Além de poder visualizar as informações referentes ao documento, o Javascriptainda pode interagir com diversos elementos contidos no HTML. Tomemos comoexemplo 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

Frames[]Frames

Elementos[]Elementos


49/70


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

}

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 primeiraimagem 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 asimagens disponíveis dentro de um documento. No script acima, vemos umexemplo onde utilizamos a propriedade src e width da primeira imagem paracarregar as demais imagens do document .

Além de poder acessar as imagens de um documento, podemos também acessar acoleção de links disponíveis. O objeto document possui acesso a coleção de linksdisponí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ísticasdos links disponíveis na página, acessando a propriedade links do objetodocument . Ao acessar cada um dos links podemos perfeitamente alterar ocaminho para o qual o link está apontando, bem como o texto contido dentro dolink. 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


50/70


50

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

document.links[nCount].innerHTML = sAlunos[nCount] + "
";

}

}

Além de alterar propriedades dos elementos podemos criar conteúdo dinâmico nodocumento 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 escreverconteúdo dentro do HTML no mesmo ponto onde se encontra o código script deforma dinâmica. Um exemplo de implementação do método write pode serobservado abaixo.

function write()

{

var sAlunos = new Array();

sAlunos[0] = "Andre";

sAlunos[1] = "Joao";

sAlunos[2] = "Maria";

sAlunos[3] = "Jose";

sAlunos[4] = "Carlos";sAlunos.sort();

for(nCount=0;nCount


51/70


51

referencia ao formulário pode ser feita de diversas formas, que vão variar deacordo 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 atributochamado NAME , que é utilizado para buscar a referencia a este elemento dentrode um código de script ou no destino final da página (web server ). O próprioformulário HTML, na maioria dos casos, possui um nome associado.

O problema é que o atributo nome não é um atributo obrigatório, nem para oselementos do formulário, nem para o formulário em si. No caso de o formulárionão possuir um nome, devemos acessá-lo através da coleção forms, contida noobjeto document . Cada formulário possui como propriedades cada um doselementos 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 doformulário.

Tomemos como exemplo o HTML abaixo:

Untitled Document

Nome:

Como este formulário não possui um nome associado, precisamos acessá-loatravés da coleção forms do objeto document . A coleção forms possui umconjunto completo com todos os formulários disponíveis dentro do document HTML. Como só temos um formulário dentro de nosso documento, o formulárioque queremos é o formulário de índice 0, conforme apresentado no bloco de script

abaixo:function btnOk_click()

{

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

}


52/70


52

O código de script acima busca uma referência a caixa de texto contida dentro doformulário do documento e exibe a propriedade value da mesma, que representa oconteú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 ficamais fácil, pois é possível referenciar diretamente o formulário que contém ocontrole que queremos buscar as informações. Se utilizarmos o mesmo HTMLutilizado anteriormente, porém com um formulário com a propriedade name, podemos alterar nosso código de script para utilizar este nome associado aoformulário.

Untitled Document

Nome:

Como temos a propriedade NAME associado ao FORM , podemos utilizar nossoscript desta forma:

function btnOk_click()

{

alert(document.frmDados.txtNome.value);

}

9.3 Validando informações no formulárioAgora que sabemos como buscar as informações do formulário HTML, devemosverificar como extrair as informações dos elementos do formulário. Para isso,devemos conhecer um pouco mais dos principais tipos de elementos disponíveisnos formulários HTML


53/70


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 detexto. A propriedade value nada mais é do que um o

24 Introdução Ao Javascript [Versão 2013-01] - Alfamídia

Documents

Transcript of 24 Introdução Ao Javascript [Versão 2013-01] - Alfamídia