apostila javascript

JavaScript

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 (). Exemplo de como se deve ocultar os scripts.

<SCRIPT></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"> </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

Uma variável é um espaço em memória onde se armazena um dado.Exemplo:parcela1 = 23 parcela2 = 33 soma = parcela1 + parcela2

Nomes não válidos para variáveis:12meses começa com númeroseu nome contém espaçoreturn palavra reservadape%pe caracter especial

Em JavaScript não é obrigatório a declaração de variáveis, mas, pode-se declarar utilizando a palavra var antes do nome da variável.Exempo: Var numero

Também é permitido declarar e atribuir em um mesmo comando.Exemplo:Var numero= 10

Âmbito das variáveis

As variáveis podem ser locais e globais.

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.

Exemplo de utilização das variáveis:var parcela1 = 23 var parcela2 = "33" var soma = parcela1 + parcela2 document.write(soma)

Exemplos de utilização de Operadores

Exemplos preço = 128 //introduzo um 128 na variável preço unidades = 10 //outra atribuição, logo veremos operadores de atribuição fatura = preço * unidades //multiplico preço por unidades, obtenho o valor fatura resto = fatura % 3 //obtenho o resto de dividir a variável fatura por 3 preço++ //incrementa em uma unidade o preço (agora vale 129)

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

Se idade é maior que 18 então: Deixo-lhe ver o conteúdo para adultos Se não Mando-lhe fora da página

Em javascript podemos tomar decisões utilizando dois enunciados distintos. 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.

http://www.criarweb.com/artigos/213.php

Desde o 1 até o 100 Imprimir o número atual

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

if (credito >= preço) { document.write("comprou o artigo " + novoArtigo) //mostro compra carrinho += novoArtigo //coloco o artigo no carrinho da compra credito -= preço //diminuo o crédito conforme o preço do artigo } else { document.write("acabou o seu crédito") //informo que lhe falta dinhero window.location = "carrinhodacompra. html" //vou à página do carrinho }

if (idade > 18) document.write("pode ver esta página para adultos")

if (bateria == 0 && redeEletrica = 0) document.write("seu laptop vai se apagar em segundos")

Estrutura SWITCH

Utilizada para tomar decisões em função de distintos estados das variáveis.

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

Exemplo de HTML e JavaScript

O que desejamos escrever em uma página web mediante JavaScript é o seguinte:

<H1>Cabeçalho de nível 1</H1> <H2>Cabeçalho de nível 2</H2> <H3> Cabeçalho de nível 3</H3> <H4> Cabeçalho de nível 4</H4> <H5> Cabeçalho de nível 5</H5> <H6> Cabeçalho de nível 6</H6>

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

Loops WHILE e DO WHILE


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 }

e

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:

function nomefuncao (){ instruções da função ... }

Exemplos:

function escreverBoasvindas(){ document.write("<H1>Olá a todos</H1>") }

Para chamar a função utilizamos seu nome seguido dos parênteses.

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>

Exemplo sem função:

<html><head><title>Untitled</title>

<script type="text/javascript"></script>

</head><body><p>teste</p>

</body></html>

Exemplo com função:

<html><head><title>Untitled</title><script type="text/javascript"></script>

</head><body><button onclick="soma();">Somar</button><p>teste</p>

</body></html>

Funções pré-definidas de Javascript

Algumas funções pré-definidas de Javascript são:

eval (string), onde string representa uma expressão a ser resolvida,retornando um valor numérico.Exemplo:

x = 4;eval (“3 + x + 8”);Resultado = 15

parseInt(string, base), onde o primeiro parâmetro representa uma string a ser convertida para a base especificada no segundo parâmetro.

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:

Média aritmética MensagemAbaixo de 3,0 ReprovadoDe 3,0 a 7,0 ExameAcima de 7,0 Aprovado

O total de alunos aprovados;O total de alunos de exame;Total de alunos reprovados;A média da classe.

4. Faça 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 Repetição Indeterminada WHILE).

Manipuladores de eventos

Existem 2 categorias de manipuladores de eventos: eventos de sistema e eventos de mouse.Os eventos de sistema disponíveis são: OnLoad e OnUnload. Eles não exigem a interação do usuário para serem

ativados.Os eventos de mouse disponíveis são: OnClick, OnFocus, OnBlur, OnChange, OnSelect, OnSubmit e OnMouseOver.

Eles exigem a interação do usuário (através do mouse ou não) para serem ativados.

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

ONUNLOADEste 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"></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"></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>

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

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

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

Exemplo de validação de campos do tipo text

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

Exemplo de validação de campos numéricos

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

Exemplo de validação de campos do tipo checkbox

<html><head> <title>Exemplo CheckBox</title>

<script type="text/javascript"></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



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>

Exemplo de validação de campos de seleção


<script type="text/javascript"></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>

ObjetosHIERARQUIA

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.

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 type="text/javascript"></script></head><body><form><p> <script type="text/javascript"></script></p></form></body></html>

A partir do código acima, obtem-se os seguintes objetos Javascript:

- document.title : título da página- document.formulario1 : formulário da página- document.formulario1.botao1 : botão do formulário

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

Este objeto dá informações sobre o navegador. Ele apresenta as seguintes propriedades: appName, appVersion, appCodeName, userAgent.

Propriedade appName: retorna o nome do browser do usuário.Exemplo: navigator.appName = Netscape

Propriedade appVersion: retorna a versão do browser e a versão do sistema operacional em que ele está rodando. [ formato: número da versão (plataforma; país) ]Exemplo: navigator.appVersion = 2.0 (Win95; I)

Propriedade appCodeName: retorna o nome do código de desenvolvimento interno do desenvolvedor de um browser específico.Exemplo: navigator.appCodeName = Mozilla

Propriedade userAgent: usada em cabeçalhos HTTP para fins de identificação, é a combinação das propriedades appCodeName e appVersion. Servidores Web usam esta informação para identificar os recursos que o navegador dispõe.

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

Utilizado na construção de caixas de verificação. Suas propriedades são: 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 seleção dacaixa (selecionada ou não-selecionada).Exemplo:if ( nomeForm.nomeCheckbox.checked == true ) {funcao();}

Propriedade defaultChecked: valor booleano que especifica o estado default deseleção da caixa.

Exemplo completo:


<script type="text/javascript"></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 botões, onde todos os botões compartilham a mesma propriedade name. Suas propriedades são: name, checked, defaultChecked, length.

Propriedade name: especifica o nome do objeto. Propriedade checked e defaultChecked: funcionamento idêntico ao definido em checkbox. Propriedade length: especifica o comprimento do array.

Exemplo:



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

Utilizado para interfacear Javascript e outros scripts/programas. 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.

OBJETO BUTTON

Utilizado na construção de interfaces. 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.

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

3.3 Objetos do CORE Javascript

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

É possível criar um vetor através 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 variável x representa o índice de um elemento. O primeiro elemento é o de número 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(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

Em Javascript, toda string é um objeto, e, portanto, tem métodos e propriedades associadas. length (propriedade): retorna o comprimento de um string.

Sintaxe: string.length indexOf( ) (método): retorna a posição da primeira ocorrência do caracter procurado dentro de um string específico. As

posições dos caracteres que compõem um string variam entre "0" e "comprimento do string - 1" (length - 1). Se o caracter procurado não for encontrado em nenhuma posição, o método retorna "-1".

Sintaxe: string.indexOf(caracter_procurado,posição_inicial_de_busca) charAt( ) (método): retorna o caracter encontrado na posição indicada.

Sintaxe: string.charAt(posição) toUpperCase( ) (método): traduz todo caracter dentro de uma string para letra maiúscula.

Sintaxe: string.toUpperCase() toLowerCase( ) (método): traduz todo caracter dentro de uma string para letra minúscula.

Sintaxe: string.toLowerCase() substring( ) (método): retorna uma sequência de caracteres de uma string maior.

Sintaxe: string.substring(índiceA, índiceB)onde índiceA e índiceB são ambos valores numéricos 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 não tiver nenhuma outra na status bar do navegador. Cuidado para

não confundir com a propriedade status, que reflete umas mensagens transitórias, adequadas para um certo momento ou ação do usuário;

Height: esta propriedade contém a altura, em pixels, da janela do navegador; Width: semelhante à propriedade anterior, porém 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 usuário pequenas mensagens.

Métodos mais utilizados: alert( ): exibe uma mensagem para o usuário. A string com a mensagem deve ser passada para o método como

parâmetro; back( ): é equivalente a apertar o botão back do navegador. Ou seja, volta atrás na última navegação feita pelo usuário; forward( ): tem o mesmo efeito do botão forward do navegador. Ou seja, se o usuário tiver apertado o botão back para

voltar à última página visitada, o forward avança novamente para a página mais recente; open( ): abre uma nova janela. O método recebe como parâmetros uma URL (o endereço da página que vai ficar na nova

janela), o nome da janela e uma string com suas carcterísticas; close( ): fecha a janela especificada. O Javascript somente pode fechar automaticamente janelas abertas por ele. Caso

contrário, aparece uma caixa de confirmação para o usuário; confirm( ): exibe uma caixa de mensagem para o usuário com duas opções: OK e Cancel. Caso o usuário pressione OK,

o método retorna true. Caso contrário, false. Ele recebe como parâmetro uma string com a mensagem a ser exibida para o usuário;

prompt( ): exibe uma caixa de mensagem e campo para o usuário entrar com uma string. O método retorna a string digitada pelo usuário. São aceitos dois parâmetros. O primeiro é uma string com a mensagem a ser exibida e o segundo é o valor padrão da string a ser digitada pelo usuário.

Exemplos

1. Exemplo de uma calculadora simples:<html><head><script type=”text/javascript”></script></head>

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

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

Em seguida, apresente dois input type=”text” para entrada de valores inteiros e quatro botões para efetuar as operações matemáticas básicas (+, -, %, *). O resultado deve ser impresso em um terceiro input type=”text”.

2. Faça um script que solicite a entrada da idade do usuário e apresente a seguinte saída (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ê não pode entrar no site. ”

3. Qual a saída após a execução deste código?

<script type="text/javascript"> soma = 0;

num = 1; while (num <= 20) { soma += num;

num++; } document.write("Resultado : = " + soma)</script>


<SCRIPT type="text/javascript">

test = "Professora Lucélia Oliveira";

parts = test.split(" ");

document.write(parts[0] + "<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.

apostila javascript

Documents