Objetos
Objetos JavaScript
Quando compramos um televisor, recebemos um manual, que por mais simples que possa ser, traz sempre algumas especificações técnicas do aparelho. Por exemplo: Polegadas da tela, voltagem de trabalho, entre outras. Essas especificações técnicas transferido para o vocabulário da OOP são as propriedades do objeto (televisor). Em JavaScript essas propriedades nada mais são do que variáveis internas do objeto. Um objeto está sujeito a determinados métodos. Um método geralmente é uma função que gera alguma informação referente ao objeto. Por exemplo ao mudar de canal, nós estamos executando uma função do televisor, o mesmo ocorre quando aumentamos ou diminuímos o volume. Seguindo nosso exemplo, quando a tensão da rede sai da faixa de trabalho no caso de uma queda de tensão ou uma sobrecarga, o sistema de segurança da Tv, não permite que ocorram danos no aparelho, quando muito, queima o fusível da fonte de alimentação. Em aparelhos mais modernos, quando uma emissora sai do ar, a tela fica azul, sem aquele chiado irritante. Sendo assim podemos concluir que nosso objeto está sujeito a algumas situações, estas situações podem ocorrer a qualquer momento, e são chamadas de eventos. 2.1) Criando Objetos Trabalhar com objetos é a única forma de manipular os arrays, vejamos como: Digamos que queremos implementar uma lista de clientes, nosso objeto poderia ser definido assim: Function CriaClientes(nome,endereco,telefone,renda) { this.nome=nome; this.endereco=endereco; this.telefone=telefone; this.renda=renda; } A propriedade “this” especifica o objeto atual como sendo fonte dos valores passados a função. Agora, basta criar o nosso objeto: Maria = New CriaClientes('Maria Aparecida','Rua Guilhotina dos Patos, S/N','332-1148',1300) Para acessar as propriedades do objeto Maria, basta usar a seguinte sintaxe: Maria.nome - retorna 'Maria Aparecida' Maria.endereco - retorna 'Rua Guilhotina dos Patos, S/N' Maria.telefone - retorna '332-1148'
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>> |
|---|