Objetos

ORIENTAÇÃO A OBJETOS

Diferente da Linguagem HTML, a linguagem JavaScript corresponde a programação orientada a objetos, isto é, todos os elementos de uma página da Web são tratados como objetos.

Estes objetos são agrupados de acordo com seu tipo ou finalidade.

Dentro da linguagem JavaScript, são criados automaticamente objetos que permitem que o usuário possa criar novos objetos de acordo com sua conveniência.

Ao ser carregada uma página da Web, é criado um determinado número de objetos JavaScript, com propriedades e valores próprios que são ajustados pelo conteúdo da própria página.

Todos eles seguem uma hierarquia que reflete toda a estrutura de uma página HMTL.

A linguagem JavaScript pode ser utilizada para a criação de scripts tanto do lado cliente como do lado servidor.

Seguindo a hierarquia de objetos da linguagem JavaScript, são criados os seguintes objetos ao ser carregada uma página:

• window: O objecto mais acima na hierarquia, contém propriedades que se

aplicam a toda a janela. Há também um objecto desta classe para todas as "sub-janelas" de um documento com frames

• location: Contém as propriedades da URL actual.
• history: Contém as propriedades das URLs visitadas anteriormente.
• document: Contém as propriedades do documento contido na janela, tais

como o seu conteúdo, título, cores, etc

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 ser modificado ou interagir com 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.

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

<<= Página do curso