Académique Documents
Professionnel Documents
Culture Documents
Existem duas maneiras de executar scripts em uma página: ao carregar a página ou como
resposta às ações o usuário. Existem muitos tipos de eventos distintos, por exemplo, a
pulsação de um botão, o movimento do mouse ou a seleção de texto da página.
As ações que queremos realizar como resposta a um evento devem ser indicadas dentro do
mesmo código HTML, mas neste caso se indicam em atributos HTML que se colocam dentro
da etiqueta que queremos que responda às ações do usuário.
Para evitar que o texto dos scripts se escreva na página quando os navegadores não os
entendem, temos que ocultá-los com comentários HTML (<!--comentario HTML -->). Exemplo
de como se deve ocultar os scripts.
<SCRIPT>
<!--
Código Javascript
//-->
</SCRIPT>
Exemplos práticos
Abrir uma janela secundária, inserir a data atual e inserir um botão para voltar.
Por exemplo: abrir uma janela secundária sem barras de menus que mostre o buscador
Google:
<html>
<head>
<title>Exemplos JS</title>
</head>
<body>
<script type="text/javascript">
<!--
document.write(new Date())
window.open("http://www.google.com.br","Google","width=300,height=300");
//-->
</script>
<br />
<input type="button" value="Atrás" onclick="history.go(-1)">
</body>
</html>
Maiúsculas e minúsculas
JavaScript é faz distinção entre maiúsculas e minúsculas e devemos sempre usar letras
minúsculas em nome de variáveis e utilizar o padrão camelCase.
Apesar da linguagem não nos obrigar a utilizar (;) ponto e vírgula ao final das instruções, esta
é uma boa prática, 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 programações
avançadas.
Variáveis Javascript
Variáveis globais
As variáveis globais são as que estão declaradas no âmbito mais amplo possível, que em
Javascript é uma página web. Para declarar uma variável global à página simplesmente
faremos em um script, com a palavra var.
<script type="text/javascript">
var variávelGlobal
</script>
Variáveis locais
Também poderemos declarar variáveis em lugares mais dimensionados, como por exemplo,
uma função. A estas variáveis chamaremos de locais. Quando se declarem variáveis locais
somente poderemos acessá-las dentro do lugar aonde tenha sido declaradas.
As variáveis podem ser locais em uma função, mas também podem ser locais a outros
âmbitos, como por exemplo, um laço de repetição.
exemplo:
<script type="text/javascript">
function minhaFuncao) (){
var variavelLocal
}
</script>
A variável só poderá ser local se utilizarmos a palavra var e se estiver dentro de uma função
ou bloco de repetição, por exemplo.
Operadores Lógicos
! Operador NO ou negação. Se é true passa a false e vice-versa.
&& Operador Y, se são 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 números são iguais
!= Comprova se dois números são 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 são permitidos em valores do tipo string:
· \b: retrocesso (backspace);
· \f: nova página (form feed);
· \n: nova linha (line feed);
· \r: retorno de carro (carriage return);
· \t: caracter de tabulação (tab).
Estruturas de controle
Tomada de decisões
Servem para realizar umas ações ou outras em função do estado das variáveis. Ou seja,
tomar decisões para executar umas instruções ou outras dependendo do que esteja
ocorrendo neste instante em nossos programas.
Por exemplo, dependendo se o usuário que entra em nossa página for maior de idade ou não,
podemos lhe permitir ou não ver os conteúdos de nossa página.
• IF
• SWITCH
Loops
Os loops se utilizam para realizar certas ações repetidamente. São muito utilizados em todos
os níveis na programação. Com um loop podemos por exemplo, imprimir em uma página os
números de 1 ao 100 sem a necessidade de escrever cem vezes a instrução a imprimir.
Em javascript existem vários tipos de loops, cada um está indicado para um tipo de repetição
distinto e são os seguintes:
• FOR
• WHILE
• DO WHILE
Estrutura If
Sintaxe:
if (expressão) {
ações a realizar em caso positivo
...
} else {
ações a realizar em caso negativo
...
}
Exemplos:
if (dia == "Segunda-feira")
document.write ("Que tenha um ótimo começo de semana")
Estrutura SWITCH
Sintaxe:
switch (expressão) {
case valor1:
Sentenças a executar se a expressão tem como valor a valor1
break
case valor2:
Sentenças a executar se a expressão tem como valor a valor2
break
case valor3:
Sentenças a executar se a expressão tem como valor a valor3
break
default:
Sentenças a executar se o valor não é nenhum dos anteriores
}
Exemplo:
Switch (dia_da_semana) {
case 1:
document.write("É segunda-feira")
break
case 2:
document.write("É terça-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 não existe")
}
Loop FOR
Sintaxe:
for (iniciação;condição;atualização) {
sentenças a executar em cada repetição
}
Exemplo:
for (i=1;i<=1000;i+=2)
document.write(i)
for (i=343;i>=10;i--)
document.write(i)
}
Para isso, temos que fazer um loop que comece em 1 e termine em 6 e em cada repetição
escreveremos o respectivo cabeçalho.
for (i=1;i<=6;i++) {
document.write("<H" + i + ">Cabeçalho de nível " + i + "</H" + i + ">")
}
Estes loops se utilizam quando queremos repetir um número indefinido de vezes a execução
de umas sentenças, sempre que se cumpra uma condição.
Sintaxe:
while (condição){
sentenças a executar
}
do {
sentenças do loop
} while (condição)
Exemplo:
var soma = 0
while (soma < 1000){
soma += parseInt(Math.random() * 100)
document.write (soma + "<br>")
}
Funções em Javascript
As funções são utilizadas constantemente, não só as que você escreve como também as que
já estão definidas pelas linguagens, pois todas as linguagens de programação têm várias
funções para realizar processos habituais como, por exemplo, obter a hora, imprimir uma
mensagem na tela ou converter variáveis de um tipo a outro. Já vimos alguma função nos
exemplos anteriores, quando fazíamos um document.write() na verdade estávamos
chamando à função write() associada ao documento da página que escreve um texto na
página.
Sintaxe:
Exemplos:
function escreverBoasvindas(){
document.write("<H1>Olá a todos</H1>")
}
NomeDaFuncao()
A função deverá estar dentro do JavaScript e também deverá ser chamada dentro de um
JavaScript.
<HTML>
<HEAD>
<TITLE>MINHA PÁGINA</TITLE>
<SCRIPT>
function minhaFuncao(){
//faço algo...
document.write("Isto está bem")
}
</SCRIPT>
</HEAD>
<BODY>
<div style=”text-align:center”>
<SCRIPT>
minhaFuncao()
</SCRIPT>
</div>
</BODY>
</HTML>
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
<!--
num1 = prompt("Informe o primeiro número","Insira aqui");
num2 = prompt("Informe o segundo número","Insira aqui");
total = num1 + num2;
alert("Soma = "+total)
//-->
</script>
</head>
<body>
<p>teste</p>
</body>
</html>
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
<!--
function soma(){
num1 = prompt("Informe o primeiro número","Insira aqui");
num2 = prompt("Informe o segundo número","Insira aqui");
total = num1 + num2;
alert("Soma = "+total)
}
//-->
</script>
</head>
<body>
<button onclick="soma();">Somar</button>
<p>teste</p>
</body>
</html>
Exercícios
Exercícios :Estruturas
1. Faça um programa que receba o valor do salário-base de um funcionário, calcule e
mostre o salário a receber, sabendo-se que este funcionário tem gratificação de 5%
sobre o salário-base e paga imposto de 7% sobre o salário-base (Estrutura Seqüencial).
2. Faça um programa que leia 10 números inteiros e exiba na tela a mensagem ‘Par’ se
ele for um número par, ou ‘Ímpar’ se ele for um número ímpar (Estrutura de Seleção).
3. Faça um programa que receba duas notas de seis alunos, calcule e mostre (Utilize a
Estrutura de Repetição Determinada FOR):
A média aritmética das duas notas de cada aluno;
A mensagem que está na tabela a seguir:
Manipuladores de eventos
ONLOAD
Este evento é ativado após a página HTML ser completamente carregada.
Exemplo:
<html>
<head>
<script language="Javascript">
function chegada() {
window.alert("A página foi carregada com sucesso!");
}
</script>
</head>
<body OnLoad="chegada()">
<p>
Veja que interessante utilização do evento OnLoad.
</p>
</body>
</html>
ONUNLOAD
Este evento é ativado após a página HTML ser abandonada (seja através do clique
sobre algum link, ou sobre os botões de avanço/retrocesso do browser).
Exemplo:
<html>
<head>
<script language="Javascript">
function saida() {
window.alert("Volte sempre!");
}
</script>
</head>
<body OnUnload="saida()">
<p>
Veja que interessante utilização do evento OnUnload.
<a href="http://www.google.com.br">Google</a>
</p>
</body>
</html>
ONCLICK
O evento mais básico 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 são links, caixas de verificação e botões.
Exemplo:
<html>
<head>
<script type="text/javascript">
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 usuário
clicar ou alternar para um objeto específico na página. Este evento pode ser associado aos
objetos text, password, textarea e select (definidos pelas tags <INPUT>, <TEXTAREA> e
<SELECT>).
Exemplo:
<html>
<head>
<script type="text/javascript">
<!--
function foco() {
window.alert("O campo EMAIL está em foco");
}
//-->
</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 type="text/javascript">
<!--
function semFoco() {
window.alert("O campo EMAIL perdeu o foco");
}
//-->
</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>
<script type="text/javascript">
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>
Exercício: Faça uma terceira função que receba o primeiro, segundo e último nome e mostre
em um quarto <input> o nome gerado pelos três campos anteriores.
ONSELECT
Este evento é ativado quando o usuário seleciona (deixa em destaque) parte do texto em um
dos objetos aos quais está associado. São eles: text, password e textarea (definidos pelas
tags <INPUT> e <TEXTAREA>).
Exemplo:
<html>
<head>
<script type="text/javascript">
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 formulário. Ele é associado ao
objeto form (definido pela tag <FORM>).
Exemplo:
<html>
<head>
<script type="text/javascript">
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 />
Campo 2: <input type="text" size="10" name="campo2"><br />
<input type="submit" value="Enviar">
</form>
</body>
</html>
Validação de Formulários
Muitas vezes, os dados que são inseridos em um formulário 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 necessário, a interrupção do envio dos
dados de um formulário. Isto é realizado chamando-se a função a partir do manipulador
OnSubmit, fazendo com que ela retorne verdadeiro ou falso. Se a função associada ao
manipulador retornar falso, os dados do formulário não serão enviados. Esta funcionalidade
pode ser verificada a partir do código a seguir.
Exemplos:
<html>
<head>
<script type="text/javascript">
function submete() {
if (document.form1.campo1.value == "" || document.form1.campo2.value == "") {
alert("É necessário preencher todos os campos!!!");
return false;
}
else {
alert("Dados enviados com sucesso!!!");
return true;
}
}
</script>
</head>
<body>
<form name="form1" action="#" OnSubmit="return submete()">
Campo 1: <input type="text" size="10" name="campo1"><br />
Campo 2: <input type="text" size="10" name="campo2"><br />
<input type="submit" value="Enviar">
</form>
</body>
</html>
<html>
<head>
<script type="text/javascript">
function submete() {
if (isNaN(document.form1.cpf.value)||isNaN(document.form1.idade.value)){
alert("Preencha os campos CPF e idade apenas com números!!!");
return false;
}
else {
alert("Dados enviados com sucesso!!!");
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 />
<input type="submit" value="Enviar">
</form>
</body>
</html>
<html>
<head>
<title>Exemplo CheckBox</title>
<script type="text/javascript">
<!--
function verifica(){
if ((form1.cultura.checked == false)&& (form1.esporte.checked == false) &&
(form1.lazer.checked == false)){
alert("Marque pelo menos uma questão!");
return false;
}
else{
alert("Dados enviados com sucesso!!!");
return true;
}
}
//-->
</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 validação de campos do tipo botões de radio
<html>
<head>
<title>Exemplo CheckBox</title>
<script type="text/javascript">
<!--
function verifica(){
if ((form1.opcao[0].checked == false) && (form1.opcao[1].checked == false) &&
(form1.opcao[2].checked == false)){
alert("Marque uma das opções!!!");
return false;
}
else{
alert("Dados enviados com sucesso!!!");
return true;
}
}
//-->
</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 />
<input type="submit" value="Enviar" />
</p>
</form>
</body>
</html>
<html>
<head>
<title>Exemplo CheckBox</title>
<script type="text/javascript">
<!--
function listaSelecao(site) {
if (!(document.form1.site.options[1].selected ||document.form1.site.options[2].selected)){
alert("É obrigatória a seleção de um item");
return false;
}
else{
alert("Dados selecionados com sucesso!!!");
return true;
}
}
//-->
</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>
<input type="submit" value="Enviar" />
</p>
</form>
</body>
</html>
ONMOUSEOVER
Este evento é ativado quando o ponteiro do mouse passa sobre um objeto do tipo links ou
botões.
Exemplo:
<html>
<head>
<script language="Javascript">
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="Botão Reset" OnMouseOver="ativa()"><br />
<input type="submit" value="Botão Submit" OnMouseOver="ativa()">
</form>
</body>
</html>
Objetos
HIERARQUIA
O nível mais alto de objetos em Javascript consiste naqueles objetos que pertencem a
navigator (navegador). Diretamente abaixo deste nível, estão os objetos window (janela).
Cada janela tem uma árvore de níveis que se ramifica a partir dela. Estas árvores consistem
em location (localização), history (histórico) e document (documento). A cada nível há outros
objetos e abaixo da árvore de documentos há outra ramificação. Neste nível, há três objetos
array – forms (formulários), anchor (âncoras) e links. A figura 1 mostra a hierarquia de objetos
de Javascript.
No browser, os objetos seguem a mesma estrutura hierárquica da página HTML: de
acordo com essa hierarquia, os descendentes dos objetos são propriedades desses objetos.
Quando uma página é carregada no browser, ele cria um número de objetos de acordo
com o conteúdo da página. Os seguintes objetos são sempre criados, independentemente do
conteúdo da página: window, location, history e document.
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 type="text/javascript">
<!--
function manipulaObjetos(){
document.title = "Novo Título";
}
//-->
</script>
</head>
<body>
<form>
<p>
<script type="text/javascript">
<!--
manipulaObjetos();
//-->
</script>
</p>
</form>
</body>
</html>
Este é apenas um exemplo dos objetos que Javascript cria automaticamente de HTML.
Observe que quase todo elemento HTML pode ser usado como um objeto. Além disso, é
possível ler e atribuir valores a estes objetos dinamicamente.
Tenha em mente que à medida em que se estrutura uma página, também está se definindo
objetos e seus valores para Javascript. As próximas seções apresentam detalhadamente o
conjunto de objetos da linguagem Javascript.
OBJETO NAVIGATOR
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 são: 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 endereço. Esta informação é utilizada
apenas se uma porta não-padrão 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 são separados do resto da URL por um
sinal de interrogação (“?”).
Exemplo: location.search = nome=Joao
• Propriedade hash: retorna quaisquer âncoras que possam ter sido passadas na URL.
Valores de hash são separados do resto da URL por um sinal de cerquilha (“#”).
Exemplo: location.hash = capitulo1
OBJETO CHECKBOX
Exemplo completo:
<html>
<head>
<title>Exemplo CheckBox</title>
<script type="text/javascript">
<!--
function verifica1(){
if (form1.azul.checked == true )
window.document.body.style.backgroundColor = "blue";
}
function verifica2(){
if (form1.vermelho.checked == true )
window.document.body.style.backgroundColor = "red";
}
function verifica3(){
if (form1.amarelo.checked == true )
window.document.body.style.backgroundColor = "yellow";
}
//-->
</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
Exemplo:
<html>
<head>
<title>Exemplo CheckBox</title>
<script type="text/javascript">
<!--
function verifica(){
if (form1.cor[0].checked == true )
window.document.body.style.backgroundColor = "blue";
else
if (form1.cor[1].checked == true)
window.document.body.style.backgroundColor = "red";
else
if (form1.cor[2].checked == true)
window.document.body.style.backgroundColor = "yellow";
}
//-->
</script>
</head>
<body>
<form action="#" name="form1">
<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 informações quando o formulário é submetido (este objeto não aparece
no formulário). Suas propriedades são: name, value.
• Propriedade name: especifica o nome do objeto.
• Propriedade value: especifica a informação que está sendo passada.
OBJETO TEXT
Utilizado para entrada/saída de dados. Suas propriedades são: name, value, defaultValue.
• Propriedade name: especifica o nome do objeto.
• Propriedade value: especifica o valor do objeto.
• Propriedade defaultValue: especifica o valor default do objeto.
OBJETO RESET
Utilizado para limpar dados de um formulário. Suas propriedades são: name, value.
• Propriedade name: especifica o nome do botão.
• Propriedade value: especifica o título colocado na face do botão.
•
Exemplo: document.form.botao.value=“novo titulo”
OBJETO SUBMIT
OBJETO BUTTON
OBJETO TEXTAREA
Utilizado para entrada/saída de dados. Suas propriedades são: name, value, defaultValue.
• Propriedade name: especifica o nome do objeto.
• Propriedade value: especifica o valor do objeto.
• Propriedade defaultValue: especifica o valor default do objeto.
OBJETO SELECT
Utilizado para construir caixas de seleção. Suas propriedades são: name, options, length.
• Propriedade name: especifica o nome do objeto.
• Propriedade options: array que contém uma entrada para cada opção de uma caixa de
seleção.
• Propriedade length: especifica o comprimento do array de opções.
O exemplo a seguir identifica que opções foram selecionadas na caixa de seleção.
Exemplo:
<html>
<head>
<title>Exemplo CheckBox</title>
<script type="text/javascript">
<!--
function listaSelecao(site) {
if (document.form1.site.options[1].selected){
window.open("http://www.google.com.br","Google","status:no;left:100px");
}
else
if (document.form1.site.options[2].selected){
window.open("http://www.yahoo.com.br");
}
}
//-->
</script>
</script>
</head>
<body>
<form action="#" name="form1">
<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>
Os objetos do CORE Javascript são os objetos instrínsecos 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
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(parâmetros)
Se não for indicado nenhum parâmetro, será criado um objeto com a data e a hora atual do
sistema. É possível passar uma string representando uma data e hora como parâmetro:
x = new Date(“October 01, 2001 08:00:00”)
Caso sejam omitidos hora, minuto e segundo, o valor padrão será 0. Outra forma de indicar
data e hora é através de uma série de parâmetros numéricos, representando o ano, mês, dia,
hora, minutos e segundos.
A função Date( ) retorna a data atual.
OBJETO STRING
OBJETO WINDOW
Exemplos
<body>
<h1>Calculadora</h1>
<form>
Forneça uma expressão matemática:
<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. Relógio Digital
<html>
<head>
<title>Relógio Animado</title>
<script type="text/javascript">
<!-- esconder de clientes antigos
function relogio()
{
var agora = new Date();
var horas=agora.getHours()<10?"0"+agora.getHours():agora.getHours();
var minutos=agora.getMinutes()<10?"0"+agora.getMinutes():agora.getMinutes();
var
segundos=agora.getSeconds()<10?"0"+agora.getSeconds():agora.getSeconds();
document.form1.caixa.value=horas+":"+minutos+":"+segundos;
setTimeout("relogio()", 1000);
}
// -->
</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>
<script type="text/javascript">
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
<html>
<head>
<title>Banners Animados</title>
</head>
<script type="text/javascript">
<!--
var mensagens = ["um", "dois", "três", "quatro"];
var contador = 0;
function animarBanner()
{
if(document.getElementById)
document.getElementById('alvo').innerHTML=mensagens[contador];
else
if(document.layers)
{
with (document.alvo.document)
{
open();
write(mensagens[contador]);
close();
}
}
contador++;
if (contador >= mensagens.length)
contador = 0;
setTimeout("animarBanner()",500);
}
//-->
</script>
<body onload="animarBanner()">
<div id="alvo"></div>
</body>
</html>
Exercícios
1. Faça uma página que solicite o nome do aluno e escreva na tela uma mensagem de
boas-vindas (“Bem-Vindo, NomeDoAluno”) em título <h1>.
2. Faça um script que solicite a entrada da idade do usuário e apresente a seguinte saída
(numa caixa de alerta):
<SCRIPT type="text/javascript">
document.write(parts[0] + "<br>");
document.write(parts[1] + "<br>");
document.write(parts[2] + "<br>");
</SCRIPT>
<script type="text/javascript">
numero = prompt("Digite um numero");
for(num = 1; num <= 5; num++)
document.write(num + numero + " ");
</script>
6. Desenvolva um código para criar o formulário abaixo. Utilize JavaScript para validar se
todos os campos estão preenchidos ou marcados. Caso não esteja, emitir ume
mensagem solicitando que o campo seja preenchido.