Apostila

JavaScript
Existem duas maneiras de executar scripts em uma pgina: ao carregar a pgina ou como resposta s aes o usurio.
Existem muitos tipos de eventos distintos, por exemplo, a pulsao de um boto, o movimento do mouse ou a seleo
de texto da pgina.
As aes que queremos realizar como resposta a um evento devem ser indicadas dentro do mesmo cdigo HTML,
mas neste caso se indicam em atributos HTML que se colocam dentro da etiqueta que queremos que responda s
aes do usurio.
Para evitar que o texto dos scripts se escreva na pgina quando os navegadores no os entendem, temos que ocult-
los com comentrios HTML (). Exemplo de como se deve ocultar os scripts.
<SCRIPT>

</SCRIPT>
Exemplos prticos
Abrir uma janela secundria, inserir a data atual e inserir um boto para voltar.
Por exemplo: abrir uma janela secundria sem barras de menus que mostre o buscador Google:
<html>
<head>
<title>Exemplos JS</title>
</head>
<body>
<script type="text/javascript">

</script>
<br />
<input type="button" value="Atrs" onclick="history.go(-1)">
</body>
</html>
Maisculas e minsculas
JavaScript faz distino entre maisculas e minsculas e devemos sempre usar letras minsculas em nome de
variveis e utilizar o padro camelCase.
Apesar da linguagem no nos obrigar a utilizar (;) ponto e vrgula ao final das instrues, esta uma boa prtica, pois,
outras linguagens como Java ou C obrigam a utiliz-las e estaremos nos acostumando a realizar uma sintaxe mais
parecida habitual em torno de programaes avanadas.
Variveis Javascript
Uma varivel um espao em memria onde se armazena um dado.

Exemplo:
parcela1 = 23
parcela2 = 33
soma = parcela1 + parcela2
Nomes no vlidos para variveis:

12meses comea com nmero
seu nome contm espao
return palavra reservada
pe%pe caracter especial
Em JavaScript no obrigatrio a declarao de variveis, mas, pode-se declarar utilizando a palavra var antes do
nome da varivel.
Exempo:
Var numero
Tambm permitido declarar e atribuir em um mesmo comando.

Exemplo:
Var numero= 10
mbito das variveis
As variveis podem ser locais e globais.
Variveis globais
As variveis globais so as que esto declaradas no mbito mais amplo possvel, que em Javascript uma pgina web.
Para declarar uma varivel global pgina simplesmente faremos em um script, com a palavra var.
var varivelGlobal
</script>
Variveis locais
Tambm poderemos declarar variveis em lugares mais dimensionados, como por exemplo, uma funo. A estas
variveis chamaremos de locais. Quando se declarem variveis locais somente poderemos acess-las dentro do lugar
aonde tenha sido declaradas.
As variveis podem ser locais em uma funo, mas tambm podem ser locais a outros mbitos, como por exemplo,
um lao de repetio.
exemplo:
function minhaFuncao) (){
var variavelLocal
}
</script>
A varivel s poder ser local se utilizarmos a palavra var e se estiver dentro de uma funo ou bloco de repetio, por
exemplo.
Exemplo de utilizao das variveis:

var parcela1 = 23
var parcela2 = "33"
var soma = parcela1 + parcela2
document.write(soma)
Exemplos de utilizao de Operadores

Exemplos
preo = 128 //introduzo um 128 na varivel preo
unidades = 10 //outra atribuio, logo veremos operadores de atribuio
fatura = preo * unidades //multiplico preo por unidades, obtenho o valor fatura
resto = fatura % 3 //obtenho o resto de dividir a varivel fatura por 3
preo++ //incrementa em uma unidade o preo (agora vale 129)
Operadores Lgicos
! Operador NO ou negao. Se true passa a false e vice-versa.
&& Operador Y, se so os dois verdadeiros vale verdadeiro.
|| Operador O, vale verdadeiro se pelo menos um deles for verdadeiro.
Exemplo
meuBoleano = true
meuBoleano = !meuBoleano //meuBoleano agora vale false
tenhofome = true
tenhoComida = true
comoComida = tenhoFome && tenhoComida
Operadores Condicionais
== Comprova se dois nmeros so iguais
!= Comprova se dois nmeros so distintos
> Maior que, devolve true se o primeiro operador for maior que o segundo
< Menor que, true quando o elemento da esquerda for menor que o da direita
>= Maior igual.
<= Menor igual
Caracteres Especiais
Alguns caracteres especiais que so permitidos em valores do tipo string:
\b: retrocesso (backspace);
\f: nova pgina (form feed);
\n: nova linha (line feed);
\r: retorno de carro (carriage return);
\t: caracter de tabulao (tab).
Estruturas de controle
Tomada de decises
Servem para realizar umas aes ou outras em funo do estado das variveis. Ou seja, tomar decises para executar
umas instrues ou outras dependendo do que esteja ocorrendo neste instante em nossos programas.
Por exemplo, dependendo se o usurio que entra em nossa pgina for maior de idade ou no, podemos lhe permitir
ou no ver os contedos de nossa pgina.
Se idade maior que 18 ento:

Deixo-lhe ver o contedo para adultos
Se no
Mando-lhe fora da pgina
Em javascript podemos tomar decises utilizando dois enunciados distintos.

IF
SWITCH
Loops
Os loops se utilizam para realizar certas aes repetidamente. So muito utilizados em todos os nveis na
programao. Com um loop podemos por exemplo, imprimir em uma pgina os nmeros de 1 ao 100 sem a
necessidade de escrever cem vezes a instruo a imprimir.
Desde o 1 at o 100
Imprimir o nmero atual
Em javascript existem vrios tipos de loops, cada um est indicado para um tipo de repetio distinto e so os
seguintes:
FOR
WHILE
DO WHILE
Estrutura If
Sintaxe:
if (expresso) {
aes a realizar em caso positivo
...
} else {
aes a realizar em caso negativo
...
}
Exemplos:
if (dia == "Segunda-feira")
document.write ("Que tenha um timo comeo de semana")
if (credito >= preo) {

document.write("comprou o artigo " + novoArtigo) //mostro compra
carrinho += novoArtigo //coloco o artigo no carrinho da compra
credito -= preo //diminuo o crdito conforme o preo do artigo
} else {
document.write("acabou o seu crdito") //informo que lhe falta dinhero
window.location = "carrinhodacompra. html" //vou pgina do carrinho
}
if (idade > 18)

document.write("pode ver esta pgina para adultos")
if (bateria == 0 && redeEletrica = 0)

document.write("seu laptop vai se apagar em segundos")
Estrutura SWITCH
Utilizada para tomar decises em funo de distintos estados das variveis.
Sintaxe:
switch (expresso) {
case valor1:
Sentenas a executar se a expresso tem como valor a valor1
break
case valor2:
break
case valor3:
break
default:
Sentenas a executar se o valor no nenhum dos anteriores
}
Exemplo:
Switch (dia_da_semana) {
case 1:
document.write(" segunda-feira")
break
case 2:
document.write(" tera-feira")
break
case 3:
document.write(" quarta-feira")
break
case 4:
document.write(" quinta-feira")
break
case 5:
document.write(" sexta-feira ")
break
case 6:
case 7:
document.write(" fim de semana")
break
default:
document.write("Esse dia no existe")
}
Loop FOR
Sintaxe:
for (iniciao;condio;atualizao) {
sentenas a executar em cada repetio
}
Exemplo:
for (i=1;i<=1000;i+=2)
document.write(i)
for (i=343;i>=10;i--)
document.write(i)
}
Exemplo de HTML e JavaScript
O que desejamos escrever em uma pgina web mediante JavaScript o seguinte:
<H1>Cabealho de nvel 1</H1>

<H2>Cabealho de nvel 2</H2>
<H3> Cabealho de nvel 3</H3>
Para isso, temos que fazer um loop que comece em 1 e termine em 6 e em cada repetio escreveremos o respectivo
cabealho.
for (i=1;i<=6;i++) {
document.write("<H" + i + ">Cabealho de nvel " + i + "</H" + i + ">")
}
Loops WHILE e DO WHILE
Estes loops se utilizam quando queremos repetir um nmero indefinido de vezes a execuo de umas sentenas,
sempre que se cumpra uma condio.
Sintaxe:
while (condio){
sentenas a executar
}
do {
sentenas do loop
} while (condio)
Exemplo:
var soma = 0
while (soma < 1000){
soma += parseInt(Math.random() * 100)
document.write (soma + "<br>")
}
Funes em Javascript
As funes so utilizadas constantemente, no s as que voc escreve como tambm as que j esto definidas pelas
linguagens, pois todas as linguagens de programao tm vrias funes para realizar processos habituais como, por
exemplo, obter a hora, imprimir uma mensagem na tela ou converter variveis de um tipo a outro. J vimos alguma
funo nos exemplos anteriores, quando fazamos um document.write() na verdade estvamos chamando funo
write() associada ao documento da pgina que escreve um texto na pgina.
Sintaxe:
function nomefuncao (){

instrues da funo
...
}
Exemplos:
function escreverBoasvindas(){
document.write("<H1>Ol a todos</H1>")
}
Para chamar a funo utilizamos seu nome seguido dos parnteses.
NomeDaFuncao()
A funo dever estar dentro do JavaScript e tambm dever ser chamada dentro de um JavaScript.
<HTML>
<HEAD>
<TITLE>MINHA PGINA</TITLE>
<SCRIPT>
function minhaFuncao(){
//fao algo...
document.write("Isto est bem")
}
</SCRIPT>
</HEAD>
<BODY>
<div style=text-align:center>
<SCRIPT>
minhaFuncao()
</SCRIPT>
</div>
</BODY>
</HTML>
Exemplo sem funo:
<html>
<head>
<title>Untitled</title>

</script>
</head>
<body>
<p>teste</p>
</body>
</html>
Exemplo com funo:
<html>
<head>
<title>Untitled</title>

</script>
</head>
<body>
<button onclick="soma();">Somar</button>
<p>teste</p>
</body>
</html>
Funes pr-definidas de Javascript
Algumas funes pr-definidas de Javascript so:
eval (string), onde string representa uma expresso a ser resolvida,

retornando um valor numrico.
Exemplo:
x = 4;
eval (3 + x + 8);
Resultado = 15
parseInt(string, base), onde o primeiro parmetro representa uma string a ser convertida para a base
especificada no segundo parmetro.
Exerccios
Exerccios :Estruturas
1. Faa um programa que receba o valor do salrio-base de um funcionrio, calcule e mostre o salrio a receber,
sabendo-se que este funcionrio tem gratificao de 5% sobre o salrio-base e paga imposto de 7% sobre o
salrio-base (Estrutura Seqencial).
2. Faa um programa que leia 10 nmeros inteiros e exiba na tela a mensagem Par se ele for um nmero par,
ou mpar se ele for um nmero mpar (Estrutura de Seleo).
3. Faa um programa que receba duas notas de seis alunos, calcule e mostre (Utilize a Estrutura de Repetio
Determinada FOR):
A mdia aritmtica das duas notas de cada aluno;
A mensagem que est na tabela a seguir:
Mdia aritmtica Mensagem

Abaixo de 3,0 Reprovado
De 3,0 a 7,0 Exame
Acima de 7,0 Aprovado
O total de alunos aprovados;

O total de alunos de exame;
Total de alunos reprovados;
A mdia da classe.
4. Faa um programa que receba a idade de 10 pessoas. O programa deve calcular e mostrar a quantidade de
pessoas com idade maior que 18 anos (Estrutura de Repetio Indeterminada WHILE).
Manipuladores de eventos
Existem 2 categorias de manipuladores de eventos: eventos de sistema e eventos de mouse.

Os eventos de sistema disponveis so: OnLoad e OnUnload. Eles no exigem a interao do usurio para
serem ativados.
Os eventos de mouse disponveis so: OnClick, OnFocus, OnBlur, OnChange, OnSelect, OnSubmit e
OnMouseOver. Eles exigem a interao do usurio (atravs do mouse ou no) para serem ativados.
ONLOAD
Este evento ativado aps a pgina HTML ser completamente carregada.
Exemplo:
<html>
<head>
<script language="Javascript">
function chegada() {
window.alert("A pgina foi carregada com sucesso!");
}
</script>
</head>
<body OnLoad="chegada()">
<p>
Veja que interessante utilizao do evento OnLoad.
</p>
</body>
</html>
ONUNLOAD
Este evento ativado aps a pgina HTML ser abandonada (seja atravs do clique sobre algum link, ou sobre
os botes de avano/retrocesso do browser).
Exemplo:
<html>
<head>
function saida() {
window.alert("Volte sempre!");
}
</script>
</head>
<body OnUnload="saida()">
<p>
Veja que interessante utilizao do evento OnUnload.
<a href="http://www.google.com.br">Google</a>
</p>
</body>
</html>
ONCLICK
O evento mais bsico de mouse tratado pelo manipulador OnClick. Este evento ativado sempre que se d um
clique sobre um objeto que aceita evento de clique de mouse. Objetos que aceitam um evento OnClick so links,
caixas de verificao e botes.
Exemplo:
<html>
<head>
function mensagem() {
window.alert("Voc clicou neste campo");
}
</script>
</head>
<body>
<a href="http://www.google.com.br" OnClick="mensagem()">
Link comum</a><br>
<form>
<input type="radio" OnClick="mensagem()">Radio
<br>
<input type="checkbox" OnClick="mensagem()">Checkbox
<br>
<input type="reset" OnClick="mensagem()" value="Limpar">
<br>
<input type="submit" OnClick="mensagem()" value="Enviar">
<br>
</form>
</body>
</html>
ONFOCUS
O foco ocorre quando um objeto torna-se o item em foco. Isto acontece quando o usurio clicar ou alternar para um
objeto especfico na pgina. Este evento pode ser associado aos objetos text, password, textarea e select (definidos
pelas tags <INPUT>, <TEXTAREA> e <SELECT>).
Exemplo:
<html>
<head>

</script>
</head>
<body>
<form>
Nome: <input name="nome" type="text"><br>
Email: <input name="email" type="text" OnFocus="foco()"><br>
Telefone: <input name="telefone" type="text">
</form></body>
</html>
ONBLUR
Este evento ativado quando um objeto torna-se fora de foco - quando se muda para outra janela, ou aplicativo, ou
quando se passa para outro objeto utilizando cliques do mouse, ou a tecla TAB. Ele associado aos objetos text,
password, textarea e select (definidos pelas tags <INPUT>, <TEXTAREA> e <SELECT>).
Exemplo:
<html>
<head>

</script>
</head>
<body>
<form>
Nome: <input name="nome" type="text"><br>
Email: <input name="email" type="text" OnBlur="semFoco()"><br>
Telefone: <input name="telefone" type="text">
</form>
</body>
</html>
ONCHANGE
Este evento ativado sempre que um objeto perde o foco e o seu valor alterado. Ele associado aos objetos text,
password, textarea e select (definidos pelas tags <INPUT>, <TEXTAREA> e <SELECT>).
Exemplo:
<html>
<head>
function mudou1() {
document.form1.completo.value=document.form1.nome.value;
}
function mudou2() {
document.form1.completo.value=document.form1.completo.value
+ " " + document.form1.sobrenome.value;
}
</script>
</head>
<body>
<form name="form1">
<pre>
Nome:
<input name="nome" type="text" OnChange="mudou1()">
Sobrenome:
<input name="sobrenome" type="text" OnChange="mudou2()">
Nome completo:
<input name="completo" type="text">
</pre>
</form>
</body>
</html>
Exerccio: Faa uma terceira funo que receba o primeiro, segundo e ltimo nome e mostre em um quarto <input>
o nome gerado pelos trs campos anteriores.
ONSELECT
Este evento ativado quando o usurio seleciona (deixa em destaque) parte do texto em um dos objetos aos quais
est associado. So eles: text, password e textarea (definidos pelas tags <INPUT> e <TEXTAREA>).
Exemplo:
<html>
<head>
function selecao() {
window.alert("Campo selecionado");
}
</script>
</head>
<body>
<form>
<pre>
Campo input texto:
<input type="text" OnSelect="selecao()">
Campo input senha:
<input type="password" OnSelect="selecao()">
Campo textarea:
<textarea OnSelect="selecao()"></textarea>
</pre>
</form>
</body>
</html>
ONSUBMIT
Este evento ativado no momento de enviar os dados do formulrio. Ele associado ao objeto form (definido pela
tag <FORM>).
Exemplo:
<html>
<head>
function submete() {
window.alert("Evento OnSubmit ativado!");
}
</script>
</head>
<body>
<form name="form1" OnSubmit="submete()">
Campo 1: <input type="text" size="10" name="campo1"><br />
<input type="submit" value="Enviar">
</form>
</body>
</html>
Validao de Formulrios
Muitas vezes, os dados que so inseridos em um formulrio precisam ser separados, analisados, manipulados
ou verificados quanto a erros antes de serem transmitidos para o servidor. O evento OnSubmit permite a captura e, se
necessrio, a interrupo do envio dos dados de um formulrio. Isto realizado chamando-se a funo a partir do
manipulador OnSubmit, fazendo com que ela retorne verdadeiro ou falso. Se a funo associada ao manipulador
retornar falso, os dados do formulrio no sero enviados. Esta funcionalidade pode ser verificada a partir do cdigo a
seguir.
Exemplos:
Exemplo de validao de campos do tipo text
<html>
<head>
if (document.form1.campo1.value == "" || document.form1.campo2.value == "") {
alert(" necessrio preencher todos os campos!!!");
return false;
}
else {
alert("Dados enviados com sucesso!!!");
return true;
}
}
</script>
</head>
<body>
<form name="form1" action="#" OnSubmit="return submete()">
</form>
</body>
</html>
Exemplo de validao de campos numricos
<html>
<head>
if (isNaN(document.form1.cpf.value)||isNaN(document.form1.idade.value)){
alert("Preencha os campos CPF e idade apenas com nmeros!!!");
return false;
}
else {
return true;
}
}
</script>
</head>
<body>
<form name="form1" action="#" OnSubmit="return submete()">
CPF: <input type="text" size="10" name="cpf"><br />
Idade: <input type="text" size="10" name="idade"><br />
</form>
</body>
</html>
Exemplo de validao de campos do tipo checkbox
<html>
<head>
<title>Exemplo CheckBox</title>

</script>
</head>
<body>
<form action="#" name="form1" OnSubmit="return verifica()">
<p>Escolha sua opção:<br />
<input type="checkbox" name="cultura" />Cultura <br />
<input type="checkbox" name="esporte" />Lazer<br />
<input type="checkbox" name="lazer" />Esporte<br />
<input type="submit" value="Enviar" />
</p>
</form>
</body>
</html>
Exemplo de validao de campos do tipo botes de radio
<html>
<head>

</script>
</head>
<body>
<form action="#" name="form1" OnSubmit="return verifica()">
<p>Escolha sua opção:<br />
<input type="radio" name="opcao" />Cultura <br />
<input type="radio" name="opcao" />Lazer<br />
<input type="radio" name="opcao" />Esporte<br />
</p>
</form>
</body>
</html>
Exemplo de validao de campos de seleo
<html>
<head>

</script>
</head>
<body>
<form action="#" name="form1" onsubmit="return listaSelecao(site)">
<p>Escolha uma das opções<br />
<select name="site">
<option value="0">Escolha uma Opção</option>
<option value="1">Google</option>
<option value="2">Yahoo</option>
</select>
</p>
</form>
</body>
</html>
ONMOUSEOVER
Este evento ativado quando o ponteiro do mouse passa sobre um objeto do tipo links ou botes.
Exemplo:
<html>
<head>
function ativa() {
window.alert("Evento OnMouseOver ativado!");
}
</script>
</head>
<body>
<a href="http://www.google.com.br" OnMouseOver="ativa()">
Passe o mouse sobre este link</a>
<form>
<input type="reset" value="Boto Reset" OnMouseOver="ativa()"><br />
<input type="submit" value="Boto Submit" OnMouseOver="ativa()">
</form>
</body>
</html>
Objetos
HIERARQUIA
O nvel mais alto de objetos em Javascript consiste naqueles objetos que pertencem a navigator (navegador).
Diretamente abaixo deste nvel, esto os objetos window (janela). Cada janela tem uma rvore de nveis que se
ramifica a partir dela. Estas rvores consistem em location (localizao), history (histrico) e document (documento). A
cada nvel h outros objetos e abaixo da rvore de documentos h outra ramificao. Neste nvel, h trs objetos array
forms (formulrios), anchor (ncoras) e links. A figura 1 mostra a hierarquia de objetos de Javascript.
No browser, os objetos seguem a mesma estrutura hierrquica da pgina HTML: de acordo com essa
hierarquia, os descendentes dos objetos so propriedades desses objetos.
Quando uma pgina carregada no browser, ele cria um nmero de objetos de acordo com o contedo da
pgina. Os seguintes objetos so sempre criados, independentemente do contedo da pgina: window, location,
history e document.
A NATUREZA ORIENTADA A OBJETOS DE XHTML
Javascript considera HTML uma linguagem orientada a objetos, na qual os diversos tags HTML correspondem a
diferentes tipos de objetos Javascript.
Exemplo:
<html>
<head><title>Minha pagina</title>

</script>
</head>
<body>
<form>
<p>

</script>
</p>
</form>
</body>
</html>
A partir do cdigo acima, obtem-se os seguintes objetos Javascript:
- document.title : ttulo da pgina

- document.formulario1 : formulrio da pgina
- document.formulario1.botao1 : boto do formulrio
Este apenas um exemplo dos objetos que Javascript cria automaticamente de HTML. Observe que quase todo
elemento HTML pode ser usado como um objeto. Alm disso, possvel ler e atribuir valores a estes objetos
dinamicamente.
Tenha em mente que medida em que se estrutura uma pgina, tambm est se definindo objetos e seus valores
para Javascript. As prximas sees apresentam detalhadamente o conjunto de objetos da linguagem Javascript.
OBJETO NAVIGATOR
Este objeto d informaes sobre o navegador. Ele apresenta as seguintes propriedades: appName, appVersion,
appCodeName, userAgent.
Propriedade appName: retorna o nome do browser do usurio.
Exemplo: navigator.appName = Netscape
Propriedade appVersion: retorna a verso do browser e a verso do sistema operacional em que ele est
rodando. [ formato: nmero da verso (plataforma; pas) ]
Exemplo: navigator.appVersion = 2.0 (Win95; I)
Propriedade appCodeName: retorna o nome do cdigo de desenvolvimento interno do desenvolvedor de um
browser especfico.
Exemplo: navigator.appCodeName = Mozilla
Propriedade userAgent: usada em cabealhos HTTP para fins de identificao, a combinao das
propriedades appCodeName e appVersion. Servidores Web usam esta informao para identificar os recursos
que o navegador dispe.
Exemplo: navigator.userAgent=Mozilla/2.0 (Win95; I)
OBJETO LOCATION
Este objeto utilizado para identificar o documento corrente. Ele consiste em uma URL completa no formato
protocolo//servidor:porta/caminho seguidos de ?search ou #hash.
Suas propriedades so: protocol, hostname, port, pathname, search, hash. Cada uma de suas propriedades
representa uma parte da URL total.
Propriedade protocol: retorna o protocolo de transporte do documento.
Exemplo: location.protocol = http:
Propriedade hostname: identifica o nome do computador hospedeiro.
Propriedade port: especifica a porta para o endereo. Esta informao utilizada apenas se uma porta no-
padro estiver sendo usada.
Propriedade pathname: define o caminho e o nome do arquivo.
Propriedade search: retorna quaisquer comandos de consulta que possam estar embutidos na URL corrente.
Valores de search so separados do resto da URL por um sinal de interrogao (?).
Exemplo: location.search = nome=Joao
Propriedade hash: retorna quaisquer ncoras que possam ter sido passadas na URL. Valores de hash so
separados do resto da URL por um sinal de cerquilha (#).
Exemplo: location.hash = capitulo1
OBJETO CHECKBOX
Utilizado na construo de caixas de verificao. Suas propriedades so: name, value, checked,
defaultChecked.
Propriedade name: especifica o nome da caixa.
Propriedade value: especifica o valor da caixa.
Exemplo:
nomeForm.nomeCheckbox.value = 1
Propriedade checked: valor booleano que especifica o estado de seleo da
caixa (selecionada ou no-selecionada).
Exemplo:
if ( nomeForm.nomeCheckbox.checked == true ) {
funcao();
}
Propriedade defaultChecked: valor booleano que especifica o estado default de
seleo da caixa.
Exemplo completo:
<html>
<head>

</script>
</script>
</head>
<body>
<form action="#" name="form1">
<p>Escolha a cor do site<br />
<input type="checkbox" name="azul" />Azul <br />
<input type="checkbox" name="vermelho" />Vermelho<br />
<input type="checkbox" name="amarelo" />Amarelo<br />
</p>
</form>
<p>
<button onclick="verifica1(); verifica2();verifica3();">OK</button>
</p>
</body>
</html>
OBJETO RADIO
Corresponde a um array de botes, onde todos os botes compartilham a mesma propriedade name. Suas
propriedades so: name, checked, defaultChecked, length.
Propriedade name: especifica o nome do objeto.
Propriedade checked e defaultChecked: funcionamento idntico ao definido em checkbox.
Propriedade length: especifica o comprimento do array.
Exemplo:
<html>
<head>

</script>
</head>
<body>
<p>Escolha a cor do site<br />
<input type="radio" name="cor" />Azul<br />
<input type="radio" name="cor" />Vermelho<br />
<input type="radio" name="cor" />Amarelo<br /><br />
</p>
</form>
<p>
<button onclick="verifica()">OK</button>
</p>
</body>
</html>
OBJETO HIDDEN
Utilizado para enviar informaes quando o formulrio submetido (este objeto no aparece no formulrio). Suas
propriedades so: name, value.
Propriedade value: especifica a informao que est sendo passada.
OBJETO TEXT
Utilizado para entrada/sada de dados. Suas propriedades so: name, value, defaultValue.
Propriedade value: especifica o valor do objeto.
Propriedade defaultValue: especifica o valor default do objeto.
OBJETO RESET
Utilizado para limpar dados de um formulrio. Suas propriedades so: name, value.
Propriedade name: especifica o nome do boto.
Propriedade value: especifica o ttulo colocado na face do boto.

Exemplo: document.form.botao.value=novo titulo
OBJETO SUBMIT
Utilizado para interfacear Javascript e outros scripts/programas. Suas propriedades so: name, value.
OBJETO BUTTON
Utilizado na construo de interfaces. Suas propriedades so: name, value.

OBJETO TEXTAREA
Utilizado para entrada/sada de dados. Suas propriedades so: name, value, defaultValue.
Propriedade value: especifica o valor do objeto.
Propriedade defaultValue: especifica o valor default do objeto.
OBJETO SELECT
Utilizado para construir caixas de seleo. Suas propriedades so: name, options, length.
Propriedade options: array que contm uma entrada para cada opo de uma caixa de seleo.
Propriedade length: especifica o comprimento do array de opes.
O exemplo a seguir identifica que opes foram selecionadas na caixa de seleo.
Exemplo:
<html>
<head>

</script>
</script>
</head>
<body>
<p>Escolha um dos sites:<br />
<select name="site">
<option value="0">Escolha uma Opção</option>
<option value="1">Google</option>
<option value="2">Yahoo</option>
</select>
</p>
</form>
<p>
<button onclick="listaSelecao()">OK</button>
</p>
</body>
</html>
3.3 Objetos do CORE Javascript
Os objetos do CORE Javascript so os objetos instrnsecos da linguagem, isto existem tanto no cliente (navegador),
quanto no servidor Web.
Os objetos do Client-Side Javascript e do Server-Side Javascript somente funcionam, respectivamente, em programas
escritos para o navegador e para o servidor Web.
OBJETO ARRAY
possvel criar um vetor atravs do objeto Array, pr-definido no Javascript.

nome_do_array = new Array(10)
Para inserir e consultar elementos de um array, deve-se utilizar a seguinte sintaxe: nome_do_array[x]
A varivel x representa o ndice de um elemento. O primeiro elemento o de nmero 0.
OBJETO DATE
O objeto Date lhe ajuda a manipular datas. Para criar um objeto do tipo Date, deve-se utilizar a seguinte sintaxe:
nome_do_objeto = new Date(parmetros)
Se no for indicado nenhum parmetro, ser criado um objeto com a data e a hora atual do sistema. possvel passar
uma string representando uma data e hora como parmetro:
x = new Date(October 01, 2001 08:00:00)
Caso sejam omitidos hora, minuto e segundo, o valor padro ser 0. Outra forma de indicar data e hora atravs de
uma srie de parmetros numricos, representando o ano, ms, dia, hora, minutos e segundos.
A funo Date( ) retorna a data atual.
OBJETO STRING
Em Javascript, toda string um objeto, e, portanto, tem mtodos e propriedades associadas.

length (propriedade): retorna o comprimento de um string.
Sintaxe: string.length
indexOf( ) (mtodo): retorna a posio da primeira ocorrncia do caracter procurado dentro de um string
especfico. As posies dos caracteres que compem um string variam entre "0" e "comprimento do string -
1" (length - 1). Se o caracter procurado no for encontrado em nenhuma posio, o mtodo retorna "-1".
Sintaxe: string.indexOf(caracter_procurado,posio_inicial_de_busca)
charAt( ) (mtodo): retorna o caracter encontrado na posio indicada.
Sintaxe: string.charAt(posio)
toUpperCase( ) (mtodo): traduz todo caracter dentro de uma string para letra maiscula.
Sintaxe: string.toUpperCase()
toLowerCase( ) (mtodo): traduz todo caracter dentro de uma string para letra minscula.
Sintaxe: string.toLowerCase()
substring( ) (mtodo): retorna uma sequncia de caracteres de uma string maior.
Sintaxe: string.substring(ndiceA, ndiceB)
onde ndiceA e ndiceB so ambos valores numricos entre 0 e a propriedade de string length.
OBJETO WINDOW
O objeto window representa a janela do navegador ou um frame. criado um objeto window sempre que o
navegador encontra uma tag <BODY>.
Propriedades mais utilizadas:

defaultStatus: a mensagem que ser exibida quando no tiver nenhuma outra na status bar do navegador.
Cuidado para no confundir com a propriedade status, que reflete umas mensagens transitrias, adequadas
para um certo momento ou ao do usurio;
Height: esta propriedade contm a altura, em pixels, da janela do navegador;
Width: semelhante propriedade anterior, porm trabalha com a largura;
name: representa o nome da janela;
status: especifica a mensagem a ser exibida na status bar do navegador. muito til para comunicar ao
usurio pequenas mensagens.
Mtodos mais utilizados:

alert( ): exibe uma mensagem para o usurio. A string com a mensagem deve ser passada para o mtodo
como parmetro;
back( ): equivalente a apertar o boto back do navegador. Ou seja, volta atrs na ltima navegao feita pelo
usurio;
forward( ): tem o mesmo efeito do boto forward do navegador. Ou seja, se o usurio tiver apertado o boto
back para voltar ltima pgina visitada, o forward avana novamente para a pgina mais recente;
open( ): abre uma nova janela. O mtodo recebe como parmetros uma URL (o endereo da pgina que vai
ficar na nova janela), o nome da janela e uma string com suas carctersticas;
close( ): fecha a janela especificada. O Javascript somente pode fechar automaticamente janelas abertas por
ele. Caso contrrio, aparece uma caixa de confirmao para o usurio;
confirm( ): exibe uma caixa de mensagem para o usurio com duas opes: OK e Cancel. Caso o usurio
pressione OK, o mtodo retorna true. Caso contrrio, false. Ele recebe como parmetro uma string com a
mensagem a ser exibida para o usurio;
prompt( ): exibe uma caixa de mensagem e campo para o usurio entrar com uma string. O mtodo retorna a
string digitada pelo usurio. So aceitos dois parmetros. O primeiro uma string com a mensagem a ser
exibida e o segundo o valor padro da string a ser digitada pelo usurio.
Exemplos
1. Exemplo de uma calculadora simples:

<html>
<head>
<script type=text/javascript>

</script>
</head>
<body>
<h1>Calculadora</h1>
<form>
Fornea uma expresso matemtica:
<input type="text" NAME="expr" SIZE=15 >
<p>
< input type ="button" VALUE="Calcule" onClick="calcula(this.form)">
< input type ="reset" VALUE="Limpar">
<p>
Resultado:
< input type ="text" NAME="result" SIZE=15 >
</ form >
</ body >
</ html >
2. Relgio Digital
<html>
<head>
<title>Relgio Animado</title>

</script>
</head>
<body onLoad="relogio()">
<form name="form1">
<input type="text" value="" name="caixa">
</form>
</body>
</html>
3. Seguindo o ponteiro do mouse
<html>
<head>
<title>Animacao e Eventos</title>
<style type="text/css">
#bloco { position: absolute; top: 50px; left: 50px }
</style>
function m(e)
{
document.getElementById("bloco").style.left=e.clientX;
document.getElementById("bloco").style.top=e.clientY;
}
</script>
</head>
<body onMouseMove="m(event)">
<span id="bloco">Sempre a seguir !!!</span>
</body>
</html>
4. Banner
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Banners Animados</title>
</head>

</script>
<body onload="animarBanner()">
<div id="alvo"></div>
</body>
</html>
Exerccios
1. Faa uma pgina que solicite o nome do aluno e escreva na tela uma mensagem de boas-vindas (Bem-Vindo,
NomeDoAluno) em ttulo <h1>.
Em seguida, apresente dois input type=text para entrada de valores inteiros e quatro botes para efetuar as
operaes matemticas bsicas (+, -, %, *). O resultado deve ser impresso em um terceiro input type=text.
2. Faa um script que solicite a entrada da idade do usurio e apresente a seguinte sada (numa caixa de alerta):
- se a idade for menor que 18 :

Voc pode entrar no site. Divirta-se!
- se a idade for igual ou maior que 18:
Voc no pode entrar no site.
3. Qual a sada aps a execuo deste cdigo?
soma = 0;
num = 1;
while (num <= 20) {
soma += num;
num++;
}
document.write("Resultado : = " + soma)
</script>
<SCRIPT type="text/javascript">
test = "Professora Luclia Oliveira";
parts = test.split(" ");
document.write(parts[0] + "<br>");
</SCRIPT>
numero = prompt("Digite um numero");
for(num = 1; num <= 5; num++)
document.write(num + numero + " ");
</script>
6. Desenvolva um cdigo para criar o formulrio abaixo. Utilize JavaScript para validar se todos os campos esto
preenchidos ou marcados. Caso no esteja, emitir ume mensagem solicitando que o campo seja preenchido.

Apostila

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Apostila

Enviado por

Direitos autorais:

Formatos disponíveis

JavaScript

Uma varivel um espao em memria onde se armazena um dado.

Nomes no vlidos para variveis:

Tambm permitido declarar e atribuir em um mesmo comando.

mbito das variveis

As variveis podem ser locais e globais.

Exemplo de utilizao das variveis:

Exemplos de utilizao de Operadores

Se idade maior que 18 ento:

Em javascript podemos tomar decises utilizando dois enunciados distintos.

if (credito >= preo) {

if (idade > 18)

if (bateria == 0 && redeEletrica = 0)

Utilizada para tomar decises em funo de distintos estados das variveis.

Exemplo de HTML e JavaScript

O que desejamos escrever em uma pgina web mediante JavaScript o seguinte:

<H1>Cabealho de nvel 1</H1>

Loops WHILE e DO WHILE

function nomefuncao (){

Para chamar a funo utilizamos seu nome seguido dos parnteses.

Exemplo sem funo:

Exemplo com funo:

Funes pr-definidas de Javascript

Algumas funes pr-definidas de Javascript so:

eval (string), onde string representa uma expresso a ser resolvida,

Mdia aritmtica Mensagem

O total de alunos aprovados;

Existem 2 categorias de manipuladores de eventos: eventos de sistema e eventos de mouse.

Exemplo de validao de campos do tipo text

Exemplo de validao de campos numricos

Exemplo de validao de campos do tipo checkbox

Exemplo de validao de campos do tipo botes de radio

Exemplo de validao de campos de seleo

A partir do cdigo acima, obtem-se os seguintes objetos Javascript:

- document.title : ttulo da pgina

Utilizado na construo de interfaces. Suas propriedades so: name, value.

3.3 Objetos do CORE Javascript

possvel criar um vetor atravs do objeto Array, pr-definido no Javascript.

Em Javascript, toda string um objeto, e, portanto, tem mtodos e propriedades associadas.

Propriedades mais utilizadas:

Mtodos mais utilizados:

1. Exemplo de uma calculadora simples:

3. Seguindo o ponteiro do mouse

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

- se a idade for menor que 18 :

3. Qual a sada aps a execuo deste cdigo?

4. Qual a sada aps a execuo deste cdigo?

test = "Professora Luclia Oliveira";

parts = test.split(" ");

5. Qual a sada aps a execuo deste cdigo?

Você também pode gostar