Estruturas de Controle e Objetos

Como dito no artigo anterior, hoje iremos ver as estruturas de controle do JavaScript e vamos iniciar os estudos a programação orientada a objetos em JavaScript. Como eu disse antes, não tenho interção de ensinar lógica aqui, por isso irei apenas deixar alguns exemplos comentados usando as estruturas de controle, mandem e-mail ou comentários em caso de dúvidas.

Estrutura if e estrura else:

var a = 3;
var b = 5;
var c = 3;

if(a < b) { //se a for menor que b
alert('"a" é menor que "b"');
} else { //caso contrario
alert('"a" não é menor que "b"');
}

if(a == c) { //se a for igual a c
alert('"a" é igual a "c"');
}

Estrutura switch case:

var a = 3;

switch(a) {
case 1: //se a for 1
alert('"a" é 1');
break;
case 2: //se a for 2
alert('"a" é 2');
break;
case 3: //se a for 3
alert('"a" é 3');
break;
case 4: //se a for 4
alert('"a" é 4');
break;
default: //se a nao for nenhum dos casos, entao use o padrao
alert('"a" não está em nenhum dos outros valores');
}

Lembrando que o switch case do JavaScript também aceita valores de string, exemplo:

var a = 'pessoa';

switch(a) {
case 'pessoa':
alert('anda sobre 2 pernas');
break;
case 'cachorro':
alert('anda sobre 4 pernas');
break;
case 'passaro':
alert('voa');
break;
default:
alert('desconhecido');
}

Estrutura while:

var a = 1;

while(a < 10) {
alert(a + ' vezes');
a++;
}

Estrutura for:

for(var i = 0; i < 10; i++) {
alert('ciclo ' + i);
}

Ainda existe outra estrutura para o for, que é o chamado for in, vamos ver isso ainda nesse artigo mais adiante.

Temos a estrutura with mas também deixaremos ela mais para frente.

Objetos
Vamos agora iniciar nossos estudos quanto a criação de objetos com JavaScript. Como dito antes, tudo em JavaScript são objetos, você as vezes cria objetos e os usa sem nem se dar conta disso, vamos ver 2 maneiras de iniciar um objeto em branco:

var meuObjeto = new Object();
var outroObject = {};

Use qual você preferir, eu prefiro a segunda porque assim eu escrevo menos :P
Agora temos incríveis objetos em branco que não fazem nada!! Não é maravilhoso?
Brincadeiras de lado, em JavaScript todos os objetos são dinâmicos, ou seja, eu posso adicionar recursos a eles a qualquer hora, criar variáveis e métodos que nunca existiram nele, podemos mudar isso apenas no objeto atual, ou podemos modificar o seu prototype, modificando o prototype nós podemos adicionar variáveis e métodos para todas as instâncias de um objeto. Vamos então criar nosso primeiro objeto útil:

var Circunferencia = function() {};
Circunferencia.prototype.raio = 1; //valor padrao

Circunferencia.prototype.diametro = function() {
return this.raio * 2;
};

Circunferencia.prototype.perimetro = function() {
return 2 * Math.PI * this.raio;
};

Circunferencia.prototype.area = function() {
return Math.PI * this.raio * this.raio;
};

var b = new Circunferencia();

b.raio = 5;
alert(b.diametro());
alert(b.perimetro());
alert(b.area());

b.raio = 7;
alert(b.diametro());
alert(b.perimetro());
alert(b.area());

b.raio = 10;
alert(b.diametro());
alert(b.perimetro());
alert(b.area());

O objeto para ter seu prototype modificado precisa iniciar-se a partir de uma função, os objetos que sao iniciados das outras formas servem mais como estruturas de dados, para transferir informações.

Temos acima um simples objeto Circunferencia que tem a variável raio e os métodos diametro(), perimetro() e area. Nós estamos adicionando esses métodos no objeto prototype dentro da nossa classe, isso porque quando mudamos o prototype, nós alteramos a classe propriamente dita, então todas as instâncias de bola terão esses métodos/variáveis. Veja que quando estamos dentro de um método e queremos acessar outros recursos da classe, temos que colocar o this seguido de um . para termos a referencia dessas variáveis/métodos. Alguns agora podem estar se perguntando: "e como eu faço pra criar um inicializador para minha classe?". Ai é só colocar-mos algo na função de criação, assim ela se torna o inicializador, vamos ver isso:

var Circunferencia = function(raio) {
this.raio = raio;
};

Circunferencia.prototype.diametro = function() {
return this.raio * 2;
};

Circunferencia.prototype.perimetro = function() {
return 2 * Math.PI * this.raio;
};

Circunferencia.prototype.area = function() {
return Math.PI * this.raio * this.raio;
};

var b = new Circunferencia(5);

alert(b.diametro());
alert(b.perimetro());
alert(b.area());

b.raio = 7;
alert(b.diametro());
alert(b.perimetro());
alert(b.area());

b.raio = 10;
alert(b.diametro());
alert(b.perimetro());
alert(b.area());

Simples não? Na verdade não estamos criando exatamente um objeto novo, e sim modificando um objeto do tipo function, parece meio louco, mas logo logo você se acostuma.

Antes de terminarmos vamos usar nosso exemplo anterior para demostrar o uso de for in e with:

var Circunferencia = function(raio) {
this.raio = raio;
};

Circunferencia.prototype.diametro = function() {
return this.raio * 2;
};

Circunferencia.prototype.perimetro = function() {
return 2 * Math.PI * this.raio;
};

Circunferencia.prototype.area = function() {
return Math.PI * this.raio * this.raio;
};

var b = new Circunferencia(5);

with(b) {
alert(diametro());
alert(perimetro());
alert(area());

raio = 7;
alert(diametro());
alert(perimetro());
alert(area());

raio = 10;
alert(diametro());
alert(perimetro());
alert(area());
}

for(var p in b) {
alert(p + ' ==> ' + b[p]);
}

Como vimos acima, o with é usado para manter um objeto quando ele vai ser muito usado, assim sempre que apontar-mos as coisas, é como se já estivemos avisando que estão na variável que definimos no with. Já o for in serve para passarmos por tudo que tem dentro de um objeto, dizemos o nome da chave (p no nosso caso) in e o nome da variável, assim como se fosse um array associativo, podemos pegar os métodos/variáveis de um objeto passando seu nome dentro de cochetes.

Segue agora a referêcia do Object, todos os objetos do JavaScript contém os métodos e propriedades citadas abaixo:

Object (Built-in Object)
Object is the basic object from which all other objects are derived. It defines methods common to all objects that are often overridden to provide functionality specific to each object type. For example, the Array object provides a toString() method that functions as one would expect an array’s toString() method to behave.This object also permits the creation of user-defined objects and instances are quite often used as associative arrays.

Constructor
var instanceName = new Object();

This statement creates a new (generic) object.

Properties
prototype The prototype for the object. This object defines the properties and methods common to all objects of this type. (IE4+ (JScript 3.0+), MOZ, N3+ (JavaScript 1.1+), ECMA Edition 1)

Methods
hasOwnProperty(property) Returns a Boolean indicating whether the object has an instance property by the name given in the string property. (IE5.5+, MOZ/N6+, ECMA Edition 3)

isPrototypeOf(obj) Returns a Boolean indicating if the object referenced by obj is in the object’s prototype chain. (IE5.5+, MOZ/N6+, ECMA Edition 3)

propertyIsEnumerable(property) Returns a Boolean indicating if the property with the name given in the string property will be enumerated in a for/in loop. (IE5.5+, MOZ/N6+, ECMA Edition 3)

toSource() Returns a string containing a JavaScript literal that describes the object. (MOZ, N4.06+ (JavaScript 1.3+))

toString() Returns the object a string, by default "[object Object]". Very often overridden to provide specific functionality. (IE4+ (JScript 3.0+), MOZ, N2+ (JavaScript 1.0+), ECMA Edition 1)

unwatch(property) Disables watching of the object’s property given by the string property. (N4 (JavaScript 1.2))

valueOf() Returns the primitive value associated with the object, by default the string "[object Object]". Often overridden to provide specific functionality. (IE4+ (JScript 3.0+), N3+ (JavaScript 1.1+), ECMA Edition 1)

watch(property, handler) Sets a watch on the object’s property given in string property. Whenever the value of the property changes, the function handler is invoked with three arguments: the name of the property, the old value, and the new value it is being set to. The handler can override the setting of the new value by returning a value, which is set in its place. (N4 (JavaScript 1.2))

Support
Supported in IE4+ (JScript 3.0+), MOZ, N2+ (JavaScript 1.0+), ECMAScript Edition 1.


Por hoje é tudo, como já sabem: dúvidas, críticas, sugestões, podem me mandar um e-mail (wilkerlucio@gmail.com) ou deixem um comentário ;)