JavaScript. Professora Lucélia Oliveira

Transcrição

1 2010 JavaScript Professora Lucélia Oliveira

2 Sumário INTRODUÇÃO... 3 Exemplos práticos... 4 Variáveis... 5 Operadores... 6 Lista de Exerícios Estruturas de controle... 8 Estrutura If... 8 Estrutura SWITCH... 9 Estruturas de Repetição...10 Loop FOR...10 Loops WHILE e DO WHILE...10 Funções em Javascript...11 Funções pré-definidas de Javascript...12 Exercícios: Estruturas de controle...13 Manipuladores de eventos...14 Validação de Formulários...17 Objetos...21 Outros Exemplos...27 Exercícios de Revisão

3 INTRODUÇÃO A linguagem JavaScript foi criada em 1995 pela Netscape, com o objetivo de permitir a manipulação dinâmica dos elementos de uma página HTML. Devido ao seu grande sucesso, a Microsoft decidiu implementar sua versão do JavaScript que seria utilizada no Internet Explorer. Existem três maneiras de incluir JavaScript em páginas HTML: 1. Colocando as instruções entre as tags <script> e <title>uso de JavaScript I</title> <script type = text/javascript > <! - Var nome = Olá Lucélia! Document.write(nome); --> 2. Inserindo manipuladores de eventos dentro de tags HTML específicas. <title>uso de JavaScript II</title> <script type = text/javascript > <! - function mensagem(){ document.alert( Seja bem-vindo(a)!!! ); --> <body onload = mensagem(); > 3. Inserindo código JavaScript dentro de um arquivo com extensão.js e colocando o seu nome como valor do atributo src no documento HTML: function mensagem(){ nome = document.prompt( Informe o seu nome: ); exemplo.js document.alert(nome +,Seja bem-vindo(a)!!! ); <title>uso de JavaScript II</title> <script type = text/javascript src = exemplo.js > <body onload = mensagem(); > 3

4 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. Como funcionam esses eventos, veremos mais adiante. 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 devem 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: <title>exemplos JS</title>  <br /> <input type="button" value="atrás" onclick="history.go(-1)"> 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. 4

5 Variáveis Uma variável é um espaço em memória onde se armazena um dado. parcela1 = 23 parcela2 = 33 soma = parcela1 + parcela2 Nomes não válidos para variáveis: 12meses àcomeça com número seu nome àcontém espaço return à palavra reservada pe%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. Var numero = 10; As variáveis podem ser locais e globais. Variáveis globais Escopo das variáveis 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. var variávelglobal; 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. function minhafuncao) (){ var variavellocal 5

6 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 Operadores 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 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). 6

7 Lista de Exerícios 01 Para a solução dos exercícios a seguir, use o método prompt() para fazer as entradas de dados e o método alert() para mostrar os resultados. Escolha uma das três formas de inserção de JavaScript de sua preferência. 1. Faça um programa que leia dois números, calcule e imprima a soma desses dois números. 2. Faça um programa que receba dois números, calcule e imprima a divisão do primeiro número pelo segundo. 3. Faça um programa que leia um número e informe a metade e o dobro desse número. 4. Escrever um programa que permita receber o nome e a idade de uma pessoa e em seguida, informar o nome digitado e a idade da pessoa daqui a 30 anos. 5. Faça um programa que leia três notas de um aluno, calcule e imprima a média aritmética entre essas notas. 6. Faça um programa que receba dois números inteiros, calcule e imprima: - soma do dois números; - subtração do primeiro pelo segundo; - subtração do segundo pelo primeiro; - produto dos dois números; - divisão do primeiro pelo segundo; - quociente inteiro da divisão do primeiro pelo segundo; - resto da divisão do primeiro pelo segundo. 7

8 Estruturas de controle Tomada de decisões São usadas 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 usando duas estruturas distintas: Loops IF SWITCH 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. 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 Sintaxe: if (expressão) { ações a realizar em caso positivo... else { ações a realizar em caso negativo... Exemplos: Estrutura If 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 8

9 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 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: document.write("é fim de semana"); break; default: document.write("esse dia não existe") 9

10 Estruturas de Repetição Loop FOR Sintaxe: for (iniciação;condição;atualização) { sentenças a executar em cada repetição 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) 10

11 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. <title>minha Página</title> <script> function minhafuncao(){ //faço algo... document.write("isto está bom"); <div style= text-align:center > <script> minhafuncao() </div> Exemplo sem função: <title>untitled</title> 11

12  <p>teste</p> Exemplo com função: <title>untitled</title>  <button onclick="soma();">somar</button> <p>teste</p> 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. 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. 12

13 Exercícios: Estruturas de controle 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, sabendose 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 Abaixo de 3,0 De 3,0 a 7,0 Acima de 7,0 Mensagem Reprovado Exame 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). 13

14 Manipuladores de eventos Existem duas 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. ONLOAD Este evento é ativado após a página HTML ser completamente carregada. <script language="javascript"> function chegada() { window.alert("a página foi carregada com sucesso!"); <body OnLoad="chegada()"> <p> Veja que interessante utilização do evento OnLoad. </p> 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). <script language="javascript"> function saida() { window.alert("volte sempre!"); <body OnUnload="saida()"> <p> Veja que interessante utilização do evento OnUnload. <a href=" </p> 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. 14

15 function mensagem() { window.alert("você clicou neste campo"); <a href=" OnClick="mensagem()"> Link comum</a><br> <form> <div> <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 /> </div> 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>).  <form> <div> Nome: <input name="nome" type="text"><br> <input name=" " type="text" OnFocus="foco()"><br> Telefone: <input name="telefone" type="text"> </div> 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>). 15

16  <form> <div> Nome: <input name="nome" type="text"><br> <input name=" " type="text" OnBlur="semFoco()"><br> Telefone: <input name="telefone" type="text"> </div> 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>). function mudou1() { document.form1.completo.value=document.form1.nome.value; function mudou2() { document.form1.completo.value=document.form1.completo.value + " " + document.form1.sobrenome.value; <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> 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. 16

17 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>). function selecao() { window.alert("campo selecionado"); <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> ONSUBMIT Este evento é ativado no momento de enviar os dados do formulário. Ele é associado ao objeto form (definido pela tag <FORM>). function submete() { window.alert("evento OnSubmit ativado!"); <div> <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"> </div> 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. 17

18 Exemplos: Exemplo de validação de campos do tipo text 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; <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"> Exemplo de validação de campos numéricos 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; <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"> 18

19 Exemplo de validação de campos do tipo checkbox <title>exemplo CheckBox</title>  <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> Exemplo de validação de campos do tipo botões de radio <title>exemplo CheckBox</title>  <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> 19

20 Exemplo de validação de campos de seleção <title>exemplo CheckBox</title>  <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> ONMOUSEOVER Este evento é ativado quando o ponteiro do mouse passa sobre um objeto do tipo links ou botões. <script language="javascript"> function ativa() { window.alert("evento OnMouseOver ativado!"); <a href=" 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()"> 20

21 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. 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. <title>minha pagina</title>  <form> <p>  </p> 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 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. 21

22 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. 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) ] navigator.appversion = 2.0 (Win95; I) Propriedade appcodename: retorna o nome do código de desenvolvimento interno do desenvolvedor de um browser específico. 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. 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. 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 (? ). 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 ( # ). 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. nomeform.nomecheckbox.value = 1 Propriedade checked: valor booleano que especifica o estado de seleção da caixa (selecionada ou não-selecionada). if ( nomeform.nomecheckbox.checked == true ) { funcao(); Propriedade defaultchecked: valor booleano que especifica o estado default de seleção da caixa. Exemplo completo: <title>exemplo CheckBox</title> 22

23  <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> <p> <button onclick="verifica();">ok</button> </p> 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. <title>exemplo CheckBox</title>  23

24 <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> <p> <button onclick="verifica()">ok</button> </p> 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. 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. 24

25 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. <title>exemplo CheckBox</title>  <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> <p> <button onclick="listaselecao()">ok</button> </p> 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. 25

Exibir mais