8/18/2019 24 Introdução Ao Javascript [Versão 2013-01] - Alfamídia
1/70
Alfamídia Programação:
Introdução ao Javascript
8/18/2019 24 Introdução Ao Javascript [Versão 2013-01] - Alfamídia
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
8/18/2019 24 Introdução Ao Javascript [Versão 2013-01] - Alfamídia
3/70
Alfamídia Programação: Introdução ao Javascript
3
UNIDADE 1 ..................................................................................................................................................................... 6
UNIDADE 2 INTRODUÇÃO AO JAVASCRIPT ............................................................................................................ 7
2.1
O QUE É JAVASCRIPT? .......................................................................................................................... 7
2.2
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
8/18/2019 24 Introdução Ao Javascript [Versão 2013-01] - Alfamídia
4/70
Alfamídia Programação: Introdução ao Javascript
4
5.4.3 For ........... .......... ........... .......... .......... ........... .......... ........... .......... ........... .......... ........... .......... ... 26
5.5 LABORATÓRIO ................................................................................................................................... 27 5.5.1
Exercício 14 .......... ........... .......... ........... .......... ........... .......... ........... .......... .......... ........... .......... 27
5.5.2
Exercício 15 .......... ........... .......... ........... .......... ........... .......... ........... .......... .......... ........... .......... 27
5.5.3
Exercício 16 .......... ........... .......... ........... .......... ........... .......... ........... .......... .......... ........... .......... 27
5.5.4
Exercício 17 .......... ........... .......... ........... .......... ........... .......... ........... .......... .......... ........... .......... 27
UNIDADE 6
OBJETOS ............................................................................................................................................... 28
6.1 O OBJETO ARRAY .............................................................................................................................. 28 6.2 O OBJETO DATE ................................................................................................................................ 30 6.3 O OBJETO MATH ............................................................................................................................... 31 6.4 O OBJETO STRING .............................................................................................................................. 32 6.5 OBJETOS CRIADOS PELO USUÁRIO ...................................................................................................... 33 6.6 MÉTODOS .......................................................................................................................................... 34
6.6.1
Métodos estáticos ............... ........... .......... ........... .......... ........... .......... ........... .......... .......... ....... 34
6.6.2
A declaração this ................................................................................................................. 34
6.6.3 A declaração with ................................................................................................................. 34
6.6.4
A função eval() .......... ........... ........... .......... ........... .......... .......... ........... .......... .......... ........... ..... 35
6.7
LABORATÓRIO ................................................................................................................................... 36 6.7.1
Exercício 18 .......... ........... .......... ........... .......... ........... .......... ........... .......... .......... ........... .......... 36
6.7.2
Exercício 19 .......... ........... .......... ........... .......... ........... .......... ........... .......... .......... ........... .......... 36
6.7.3
Exercício 20 .......... ........... .......... ........... .......... ........... .......... ........... .......... .......... ........... .......... 36
6.7.4 Exercício 21 .......... ........... .......... ........... .......... ........... .......... ........... .......... .......... ........... .......... 37
6.7.5 Exercício 22 .......... ........... .......... ........... .......... ........... .......... ........... .......... .......... ........... .......... 37
6.7.6 Exercício 23 .......... ........... .......... ........... .......... ........... .......... ........... .......... .......... ........... .......... 37
6.7.7 Exercício 24 .......... ........... .......... ........... .......... ........... .......... ........... .......... .......... ........... .......... 37
UNIDADE 7 EVENTOS ............................................................................................................................................... 38
7.1 O QUE É ............................................................................................................................................. 38 7.2 EVENTOS IMPLEMENTADOS PELO JAVASCRIPT .................................................................................. 38 7.3 COMO SE DEFINE UM EVENTO ............................................................................................................ 39
7.4
GESTÕES DE EVENTOS DISPONÍVEIS EM JAVASCRIPT ......................................................................... 39 7.4.1 onclick ..................................................................................................................................... 40
7.4.2 onload ...................................................................................................................................... 40
7.4.3
onunload .................................................................................................................................. 40
7.4.4
onmouseover ............................................................................................................................ 40
7.4.5
onmouseout .............................................................................................................................. 40
7.4.6
onfocus..................................................................................................................................... 41
7.4.7
onblur ...................................................................................................................................... 41
7.4.8
onchange ................................................................................................................................. 42
7.4.9
onselect .................................................................................................................................... 42
UNIDADE 8
CONHECENDO OBJECTS DOM ........................................................................................................... 43
8.1 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
8/18/2019 24 Introdução Ao Javascript [Versão 2013-01] - Alfamídia
5/70
Alfamídia Programação: Introdução ao Javascript
5
8.8.4 “Elements” de um FORM ....................................................................................................... 46
8.9 MÉTODO GETELEMENTBYID ............................................................................................................. 47
UNIDADE 9 MANIPULANDO FORMS COM DOM ..................................................................................................... 48
9.1 TUTORIAL .......................................................................................................................................... 48
9.2
EXTRAINDO INFORMAÇÕ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
8/18/2019 24 Introdução Ao Javascript [Versão 2013-01] - Alfamídia
6/70
Alfamídia Programação: Introdução ao Javascript
6
Unidade 1
8/18/2019 24 Introdução Ao Javascript [Versão 2013-01] - Alfamídia
7/70
Alfamídia Programação: Introdução ao Javascript
7
Unidade 2 Introdução ao Javascript
2.1 O que é Javascript?
O que é Javascript?
O Javascript é uma linguagem de script que, incorporado nas tags HTML, 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/18/2019 24 Introdução Ao Javascript [Versão 2013-01] - Alfamídia
8/70
Alfamídia Programação: Introdução ao Javascript
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
8/18/2019 24 Introdução Ao Javascript [Versão 2013-01] - Alfamídia
9/70
Alfamídia Programação: Introdução ao Javascript
9
Unidade 3 Noções básicas de Javascript
3.1 Criando um script em uma página HTML
Para utilizar o Javascript, é necessário criar uma página HTML e dentro desta página inserir uma tag delimitadora de script, a fim de executar o script 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
8/18/2019 24 Introdução Ao Javascript [Versão 2013-01] - Alfamídia
10/70
Alfamídia Programação: Introdução ao Javascript
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
8/18/2019 24 Introdução Ao Javascript [Versão 2013-01] - Alfamídia
11/70
Alfamídia Programação: Introdução ao Javascript
11
3.4 Variáveis
Assim como qualquer linguagem de programação, o Javascript permite a criaçã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).
8/18/2019 24 Introdução Ao Javascript [Versão 2013-01] - Alfamídia
12/70
Alfamídia Programação: Introdução ao Javascript
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
8/18/2019 24 Introdução Ao Javascript [Versão 2013-01] - Alfamídia
13/70
Alfamídia Programação: Introdução ao Javascript
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");
8/18/2019 24 Introdução Ao Javascript [Versão 2013-01] - Alfamídia
14/70
Alfamídia Programação: Introdução ao Javascript
14
3.6.2 O método prompt()
No mesmo estilo do que o método alert(), Javascript dispõe de outra caixa 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.
8/18/2019 24 Introdução Ao Javascript [Versão 2013-01] - Alfamídia
15/70
Alfamídia Programação: Introdução ao Javascript
15
3.6.3 O método confirm()
Este método mostra 2 botões o "OK" e "Cancel". Ao clicar no OK, confirm()reenvia o valor true e false caso clicar em Cancel. Este método é utilizado
sobretudo para confirmar uma opção.A sintaxe é:
confirm("Deseja continuar ?");
Confirm no IE:
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:
8/18/2019 24 Introdução Ao Javascript [Versão 2013-01] - Alfamídia
16/70
Alfamídia Programação: Introdução ao Javascript
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) ||
8/18/2019 24 Introdução Ao Javascript [Versão 2013-01] - Alfamídia
17/70
Alfamídia Programação: Introdução ao Javascript
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);
8/18/2019 24 Introdução Ao Javascript [Versão 2013-01] - Alfamídia
18/70
Alfamídia Programação: Introdução ao Javascript
18
Unidade 4 Utilizando Funções
4.1 O que é Função
Uma função é um grupo de linha(s) de código de programação destinado 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
8/18/2019 24 Introdução Ao Javascript [Versão 2013-01] - Alfamídia
19/70
Alfamídia Programação: Introdução ao Javascript
19
sValor2 = "1.5"; // Valor Fracionado
sResultado = sValor1 + sValor2;
nResultado = parseInt(sValor1) + parseFloat(sValor2);
// Concatenação
alert(sResultado + “ ”+ nResultado);
// Soma numérica
alert(nResultado);
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!");
}
8/18/2019 24 Introdução Ao Javascript [Versão 2013-01] - Alfamídia
20/70
Alfamídia Programação: Introdução ao Javascript
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));
8/18/2019 24 Introdução Ao Javascript [Versão 2013-01] - Alfamídia
21/70
Alfamídia Programação: Introdução ao Javascript
21
4.5 Laboratório
Crie um diretório chamado Laboratórios dentro de sua pasta de arquivos. Dentro 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.
8/18/2019 24 Introdução Ao Javascript [Versão 2013-01] - Alfamídia
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;
nNum = parseInt(prompt("Informe um número inteiro:",""));
alert((nNum>0)? "Número positivo":"Número negativo");
Exemplo 3 – if else encadeado:
8/18/2019 24 Introdução Ao Javascript [Versão 2013-01] - Alfamídia
23/70
Alfamídia Programação: Introdução ao Javascript
23
var nNum;
nNum = parseInt(prompt("Informe um número inteiro:",""));
if(nNum == 0)
alert("Número neutro");
else if(nNum > 0)
alert("Número positivo");
else
alert("Número negativo");
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")
}
8/18/2019 24 Introdução Ao Javascript [Versão 2013-01] - Alfamídia
24/70
Alfamídia Programação: Introdução ao Javascript
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.
8/18/2019 24 Introdução Ao Javascript [Versão 2013-01] - Alfamídia
25/70
Alfamídia Programação: Introdução ao Javascript
25
5.3.5 Exercício 13
Elabore um programa que, dada a idade de um nadador, classifique-o em uma 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
8/18/2019 24 Introdução Ao Javascript [Versão 2013-01] - Alfamídia
26/70
Alfamídia Programação: Introdução ao Javascript
26
5.4.2 Do While
Utiliza-se geralmente quando não sabemos quantas vezes haverá de se executar 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
8/18/2019 24 Introdução Ao Javascript [Versão 2013-01] - Alfamídia
27/70
Alfamídia Programação: Introdução ao Javascript
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.
8/18/2019 24 Introdução Ao Javascript [Versão 2013-01] - Alfamídia
28/70
Alfamídia Programação: Introdução ao Javascript
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.
8/18/2019 24 Introdução Ao Javascript [Versão 2013-01] - Alfamídia
29/70
Alfamídia Programação: Introdução ao Javascript
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 sNomes = new Array();
var sValores = new Array(6);
sNomes[0] = "André";
sNomes[1] = "Bruno";
sNomes[2] = "Carlos";
sValores[0] = 1;
sValores[1] = 2;
sValores[2] = 3;
sValores[3] = 4;
document.write("Vetor sNomes
");
for(var i=0;i
8/18/2019 24 Introdução Ao Javascript [Versão 2013-01] - Alfamídia
30/70
Alfamídia Programação: Introdução ao Javascript
30
var sNomes = new Array();
sNomes[0] = "Carlos";
sNomes[1] = "Bruno";
sNomes[2] = "Mauricio";
sNomes[3] = "José";
sNomes[4] = "André";
sNomes.sort();
var nCount;
alert("Ordem Crescente");
for(nCount=0;nCount
8/18/2019 24 Introdução Ao Javascript [Versão 2013-01] - Alfamídia
31/70
Alfamídia Programação: Introdução ao Javascript
31
alert("Dia da semana: " + nDiaSemana);
MÉTODOS DESCRIÇÃO
getDate() Devolve o dia do mês.
getMonth() Devolve o mês (começa por 0).
getFullYear() Retorna o ano com todos os dígitos.
getDay() Devolve o dia da semana (começa por domingo e vale 0).
getHours() Retorna a hora.
getMinutes() Devolve os minutos.
getSeconds() Devolve os segundos.
6.3 O Objeto Math
O objeto Math é um objeto com um comportamento um pouco diferente 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
8/18/2019 24 Introdução Ao Javascript [Versão 2013-01] - Alfamídia
32/70
Alfamídia Programação: Introdução ao Javascript
32
max() Math.max(x,y) Devolve o maior de 2 números x e y. Ex.: num = Math.max(4,8); Resultado: num = 8
min() Math.min(x,y) Devolve o menor de 2 números x e y.
Ex.: num = Math.min(4,8); Resultado: num = 4
pow() Math.pow(x,y) Calcula o valor de um número x elevado na potência y. Ex.: num = Math.pow(2,4); Resultado: num = 16
random() Math.random() Devolve o valor de um número aleató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 sNomes = new Array();
var nNumero1 = 10.5;
var nNumero2 = -10.5;
var nNumero3 = 4;
var nNumero4 = 12;
alert("Método ABS(10.5): " + Math.abs(nNumero1));
alert("Método ABS(-10.5): " + Math.abs(nNumero2));
alert("Método SQRT(Raiz Quadrada 4): " + Math.sqrt(nNumero3));
alert("Método Maximo(4,12): " + Math.max(nNumero3, nNumero4));
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.
MÉTODOS DESCRIÇÃO
charAt() Mostra o caracter na posição pedida.
8/18/2019 24 Introdução Ao Javascript [Versão 2013-01] - Alfamídia
33/70
Alfamídia Programação: Introdução ao Javascript
33
indexOf() Devolve a posição de um caracter ou cadeia de caracteres(pesquisa feita da esquerda para a direita).
lastIndexOf() Devolve a posição de um caracter ou cadeia de caracteres
(pesquisa feita da direita para a esquerda).substring(x,y) Devolve uma string parcial situada entre a posição x e a
posição y-1.
toLowerCase() Transforma todas as letras em minúsculas.
toUpperCase() Transforma todas as letras em Maiúsculas.
Podemos ver a implementação de alguns desses métodos no exemplo abaixo:
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];
8/18/2019 24 Introdução Ao Javascript [Versão 2013-01] - Alfamídia
34/70
Alfamídia Programação: Introdução ao Javascript
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);
8/18/2019 24 Introdução Ao Javascript [Versão 2013-01] - Alfamídia
35/70
Alfamídia Programação: Introdução ao Javascript
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
8/18/2019 24 Introdução Ao Javascript [Versão 2013-01] - Alfamídia
36/70
Alfamídia Programação: Introdução ao Javascript
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
8/18/2019 24 Introdução Ao Javascript [Versão 2013-01] - Alfamídia
37/70
Alfamídia Programação: Introdução ao Javascript
37
6.7.4 Exercício 21
Crie uma variável chamada sNomes e atribua ela uma nova instancia de um Array, com 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.
8/18/2019 24 Introdução Ao Javascript [Versão 2013-01] - Alfamídia
38/70
Alfamídia Programação: Introdução ao Javascript
38
Unidade 7 Eventos
7.1 O que é
Os eventos são a maneira que temos em Javascript de controlar as ações 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.
8/18/2019 24 Introdução Ao Javascript [Versão 2013-01] - Alfamídia
39/70
Alfamídia Programação: Introdução ao Javascript
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
8/18/2019 24 Introdução Ao Javascript [Versão 2013-01] - Alfamídia
40/70
Alfamídia Programação: Introdução ao Javascript
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");
}
8/18/2019 24 Introdução Ao Javascript [Versão 2013-01] - Alfamídia
41/70
Alfamídia Programação: Introdução ao Javascript
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:
8/18/2019 24 Introdução Ao Javascript [Versão 2013-01] - Alfamídia
42/70
Alfamídia Programação: Introdução ao Javascript
42
7.4.8 onchange
O onchange é bastante semelhante ao onblur, mas com uma pequena diferença. Não só a área de texto deve ter perdido o foco, mas também o seu conteúdo deve
ter sido alterado pelo usuário.
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:
8/18/2019 24 Introdução Ao Javascript [Versão 2013-01] - Alfamídia
43/70
Alfamídia Programação: Introdução ao Javascript
43
Unidade 8 Conhecendo Objects DOM
8.1 Introdução a DOM:
O W3C (World Wide Web Consortium) desenvolveu o padrão DOM para padronizar a forma de acesso a XML e suas estruturas e como os browsers e 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.
8/18/2019 24 Introdução Ao Javascript [Versão 2013-01] - Alfamídia
44/70
Alfamídia Programação: Introdução ao Javascript
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
8/18/2019 24 Introdução Ao Javascript [Versão 2013-01] - Alfamídia
45/70
Alfamídia Programação: Introdução ao Javascript
45
bgColor Seta ou retorna a cor de fundo do documento HTML
id Seta ou retorna o id do objeto Body (no IE 4 este atributo éread-only)
link Seta a cor dos links no documento html
text Seta ou retorna o cor dos textos no documento HTML
vLink Seta ou retorna a cor dos links visitados no documento HTML
8.8 Objeto Form
Form é usado para o usuário inserir informações no documento HTML. Todas 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
8/18/2019 24 Introdução Ao Javascript [Versão 2013-01] - Alfamídia
46/70
Alfamídia Programação: Introdução ao Javascript
46
submissão, normalmente é um frame ou iframe.
8.8.2 Métodos de um FORM
Método Descrição
reset() Coloca o valor inicial nos elementos do form
submit() Submete o form
8.8.3 Eventos de um form
Event Description
onReset Executa quando o evento reset ocorrer
onSubmit Executa quando o evento submit ocorrer
8.8.4 “Elements” de um FORM
Um form é constituído de vários objetos para interagir um usuário, neste caso
DOM disponibiliza um vetor de elementos. Para facilitar na validação dos objetos.Exemplo:
function validaIdade(){
if(document.forms[0].elements[0].value < 0)
{
alert("Digite a idade válida");
}
}
Idade:
8/18/2019 24 Introdução Ao Javascript [Versão 2013-01] - Alfamídia
47/70
Alfamídia Programação: Introdução ao Javascript
47
Esta função valida o primeiro campo, do primeiro form do documento HTML.
Coleções descrição
elements[] Retorna um array contendo cada elemento de um FORM
8.9 Método getElementById
Este método retorna qualquer objeto que foi encontrado em toda árvore 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
8/18/2019 24 Introdução Ao Javascript [Versão 2013-01] - Alfamídia
48/70
Alfamídia Programação: Introdução ao Javascript
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
8/18/2019 24 Introdução Ao Javascript [Versão 2013-01] - Alfamídia
49/70
Alfamídia Programação: Introdução ao Javascript
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
8/18/2019 24 Introdução Ao Javascript [Versão 2013-01] - Alfamídia
50/70
Alfamídia Programação: Introdução ao Javascript
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
8/18/2019 24 Introdução Ao Javascript [Versão 2013-01] - Alfamídia
51/70
Alfamídia Programação: Introdução ao Javascript
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);
}
8/18/2019 24 Introdução Ao Javascript [Versão 2013-01] - Alfamídia
52/70
Alfamídia Programação: Introdução ao Javascript
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
8/18/2019 24 Introdução Ao Javascript [Versão 2013-01] - Alfamídia
53/70
Alfamídia Programação: Introdução ao Javascript
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
Top Related