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