Objetos

Objetos JavaScript

A interação com o usuário se dá através de objetos para entrada de dados (textos), marcação de opções (radio, checkbox e combo), botões e link’s para outras páginas. Veja abaixo a lista de eventos relacionados às tags HTML: OBJETO INPUT TEXT Os eventos associados a este objeto são: onchange, onblur, onfocus e onselect. Ex: <form name=”TText”>

Entrada de Texto <input type=text size=20 maxlength=30 name=”CxTexto” value=”” onchange=”alert (‘Voce digitou ‘ + CxTexto.value)”>

</form> OBJETO INPUT PASSWORD Os eventos associados a este objeto são: onchange, onblur, onfocus e onselect. Ex: <form name=”TPassword”>

Entrada de Senha<input type=password size=10 maxlength=10 name=”Senha” value=””>

</form> APOSTILA DE LÓGICA DE PROGRAMAÇÃO, HTML E JAVASCRIPT 98 OBJETO INPUT CHECKBOX O único evento associado a este objeto é onclick. OBJETO INPUT RADIO O único evento associado a este objeto é onclick. Ex:

Radio

<input type=radio name=”Rad” value=”1" onclick=”document.bgColor=’green’”> Fundo Verde <input type=radio name=”Rad” value=”2" onclick=”document.bgColor=’blueviolet’”> Fundo Violeta <input type=radio name=”Rad” value=”3" onclick=”document.bgColor=’#FFFF00'”> Fundo Amarelo

OBJETO INPUT BUTTON Este objeto tem por finalidade criar um botão ao qual se possa atrelar operações lógicas, a serem executadas quando o mesmo receber um click. O único evento associado a este objeto é onclick. Ex.

<form method=”POST” name=”TstButton”> Digite um Texto <input type=text size=30 maxlength=30 name=”Teste” value=””>

Click no Botao <input type=button name=”Bteste” value=”Botao de teste” onclick=”alert (‘Voce digitou: ‘ + TstButton.Teste.value)”>

</form> 99 APOSTILA DE LÓGICA DE PROGRAMAÇÃO, HTML E JAVASCRIPT OBJETO INPUT SUBMIT Este objeto é um botão que tem por finalidade submeter (enviar) o conteúdo dos objetos do formulário ao servidor. O único evento associado a este objeto é onclick. OBJETO TEXTAREA Os eventos associados a este objeto são: onchange, onblur, onfocus e onselect. OBJETO SELECT Para utilização deste objeto é importante o conhecimento de outras propriedades associadas: Objeto.length : Retorna a quantidade de opções existentes na lista Objeto.selectedindex : Retorna o “index” do objeto selecionado (primeiro = 0) Objeto.options[index].text : retorna o texto externo associado a cada opção Objeto.options[index].value : retorna o texto interno (value) associado a cada opção Objeto.options[index].selected : retorna verdadeiro ou falso Os eventos associados a este objeto são: onchange, onblur e onfocus. Abrindo novas janelas Mostraremos agora como podem ser abertas novas janelas sobre uma janela contendo o documento principal. A sintaxe geral deste método é a seguinte: Variavel = window.open (“Url”, “Nome da janela”, “Opções”) APOSTILA DE LÓGICA DE PROGRAMAÇÃO, HTML E JAVASCRIPT 100 Onde: Variavel - Nome que será atribuido como propriedade da janela. Url - Endereço Internet onde a janela será aberta. Normalmente voce estará utilizando a sua própria Url, neste caso, preencha com “”. Nome da Janela - É o nome que aparecerá no top da janela (Título) Opções - São as opções que definem as características da janela, quais sejam: -toolbar - Cria uma barra de ferramentas tipo “Back”, “Forward”, etc. -location - Abre a barra de location do browse -directories - Abre a barra de ferramentas tipo “What’s New”, “Handbook”, etc. -status - Abre uma barra de status no rodapé da janela -scrollbars - Abre barras de rolamento vertical e horizontal -menubar - Cria uma barra de menu tipo “File”, “Edit”, etc. -resizable - Permite ao usuário redimencionar a janela -width - Especifica a largura da janela, em pixels -height - Especifica a altura da janela, em pixels Todas as opções (exceto width e height) são boleanas e podem ser setadas de duas formas. Exemplo: “toolbar” ou “toolbar=1”) são a mesma coisa. Se nada for especificado, entendese que todas as opções estão ligadas; Caso seja especificada qualquer opção, será entendido que estão ligadas apenas as opções informadas. As opções devem ser informadas separadas por vírgula, sem espaço entre elas. Abrindo um Documento Para abrir um documento dentro da janela, deve ser utilizado o seguinte método: 101 APOSTILA DE LÓGICA DE PROGRAMAÇÃO, HTML E JAVASCRIPT Variavel.document.open() Onde “Variavel” é o nome da variável associada ao método window.open ESCREVENDO NO DOCUMENTO Para escrever a tela no documento, deve ser utilizado o seguinte método: Variavel.document.write (“Comandos html, Comandos JavaScript, Textos, etc.”) FECHANDO A JANELA Para fechar a janela, utilize o seguinte método: Variavel.document.write (“window.close()”) FECHANDO O DOCUMENTO Para fechar o documento, utilize o seguinte método: Variavel.document.close () A seguir, apresentamos um exemplo no qual estamos abrindo um documento onde o usuário ao clicar no botão “abre” é então aberta uma outra página. <script> function abrindo() { window.open (“”, “OutraJanela”, ‘scrollbars=yes,resizable=yes,width=650,height=550’) document.write (“<html><head><title>Essa é outra janela”) document.write (“</title></head><body bgcolor=’#FF00FF’>”) document.write (“
ESSA É UMA OUTRA

PÁGINA

---

”)

document.write (“<img width=200 height=200 src=” + Local + “Marcaelo.gif>”)

document.write (“
Java Script

---

”)

APOSTILA DE LÓGICA DE PROGRAMAÇÃO, HTML E JAVASCRIPT 102 document.write (“</body></html>”) document.close() } </script> <body bgcolor=”#FFFF00">

Ao clicar no botão uma nova página irá abrir!

<form method=”POST” name=”Form1">

<input type=”button” name=”abre” value=”Nova Janela” onclick=”abrindo()”>

</form> </body>

---

<< AULA 5 - Eventos	AULA 6 - Objetos	AULA 7 - Estruturas de Controle>>

<<= Página do curso