Aprenda a aplicar funções a elementos como se fossem nativas

[hantaro 1]

Bom sei que muita gente sofre pra tentar fazer isso, eu mesmo demorei mais de um mês, mas tudo se resolveu quando comecei a estudar programação orientada a objeto. As bibliotecas hoje fazem isso tranquilo, mas porque não aprender a fazer isso com seus próprios dedos?

 

Chega de papo e vamos lá.

 

Primeiro não colocarei um código aqui que seleciona uma div com id tal que tenha dentro uma class tal,mostrarei apenas ao básico, ou seja a raiz do problema.

 

Suponhamos que queremos pegar uma div com id ‘box’ e mudar seu transparência para 60%, faríamos isso

 

document.getElementById(id).style.opacity='0.6';//FF

Mas deixando o codigo mais limpo e bonito podemos fazer algo assim

 

$(‘box’).Alpha(60);

Muito mais bonito não, e ainda mais pratico, agora vamos a explicação de como isso é possivel

 

Criamos uma função basica que retorna o elemento com o id passado (essa todo mundo conhece)

 

var dom=function(id){
	return document.getElementById(id);
}

Em seguida criamos uma função que quando chamada ira atribuir a variavel id o elemento com o id passado em seu parametro

 

var elemento=function(id){
	this.id=dom(id);
}

this.id, isso é programação orientada a objetos. Aqui é o seguinte, chamaremos essa função dentro de uma variavel, entao o id será acessado da seguinte maneira variavel.id

explicarei isso mais adiante.

 

agora a famosa função $ que faz a magica acontecer

 

var $=function(id){
	var dom=new elemento(id);
	return dom;
}

Isso ai em cima foi o que me deu mais trabalho para desenvolver, vamos a explicação por linha

 

1 - Iniciamos a função $, esta função tem como parametro o id do elemento que selecionaremos

2 - Criamos uma variavel com o nome dom

Essa variavel tera como valor um novo elemento(), que é uma função que criamos acima

Repare que a função elemento() vai ter o id acessado por no nosso caso dom.id

3 - A função retorna a variavel dom que tera o elemento pronto para ser acessado

 

Agora um exemplo pratico de como fazer o efeito da transparencia usando o codigo acima

 

Na programação orientada a objeto (recomendo que estudem isso) podemos adicionar metodos, que são funções dentro da função principal (se eu estiver errado,postem ai),a qualquer momento e em qualquer lugar do codigo usando uma propriedade chamada prototype, vejamos entao como colocar a nossa função de transparencia

 

elemento.prototype.Alpha=function(opacity){
	this.id.style.opacity=opacity/100;
	this.id.style.filter='alpha(opacity='+opacity+');';
}

1 - Elemento é a função a que atribuiremos nossa função, isso porque ela possue o id do elemento que sera chamado mais em baixo

prototype é usado para adicionar o metodo que queremos a função, que no nosso caso o metodo Alpha

Alpha é o metodo que estamos adicionamos, que possue uma função a ser executada quando o mesmo for chamado

2 - this.id aqui é um pouco chato e complicado de explicar mas é o seguinte, na função $ chamamos a função elemento dentro da variavel dom, entao podemos dizer aqui estamos pegando o dom.id.Enato porque voce colocou this?

 

Nossa função elemento retornou o objeto criado, entao podemos acessa-lo livremente.

style.opacity e style.filter sao usados para colocar a transparencia no FF e IE respectivamente, enato nao explixarei isso.

 

Exemplo pratico

 

<div id="box" style="width:100px;height:100px;background:#333;"></div>
<a href="#" onClick="$('box').Alpha(60);">Alpha</a>

Espero ter ajudado pelo meno uma pessoa, e duvidas, sugestões, erro no codigo, sintam se a vontade para postarem

[klaygomes 0]

Muito bom seu tutorial, existem algumas falhas nos conceitos, mas já é um exelente inicio para quem esta começando em javascript e em oop.

[hantaro 1]

Realmente eu não sou muito de entender e explicar bem os conceitos, sô mais ir no codigo, montei e postei o tutorial pra os iniciante e ate alguns mais avançados não ficar pensando que as frameworks fazem coisas impossivel, afinal mesmo elas sendo faceis de usar, existem um codigo quase igual por tras, nada que estudo nao crie.

[Mário Monteiro 179]

Tópico Movido

 

Origem: Javascript / DHTML http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Destino: Laboratório de scripts (Javascript / DHTML)

[Leandro Barral 1]

Muito bom.. parabens \o/

 

Abraço.

 

Att,

Leandro Barral.

 

P.S.: só faltou ser nao-obstrutivo =D

[klonder 14]

Excelente tópico. Realmente a criação de classes em JavaScript pode ajudar-nos muito em determinadas situações.

 

Vocês também poderão utilizar o seguinte código:

<html>
<head>
<script type="text/javascript">
function objeto(id){
	this.id = document.getElementById(id);

	this.Alpha = function(opacity) {
		this.id.style.opacity = opacity/100;
		this.id.style.filter = 'alpha(opacity='+opacity+');';
	}
}

function $(id){
	var dom = new objeto(id);
	return dom;
}
</script>
</head>
<body>
<div id="box" style="width:100px;height:100px;background:#333;"></div>
<a href="#" onclick="$('box').Alpha(60);">Alpha</a>
</body>
</html>

Referências bibliográficas:

http://gulp.com.br/desenvolvimento/javascript-oop/

http://clientside.com.br/prototype-ampliando-os-superpoderes-de-classes-javascript/