(Resolvido) Passar parametros para funcao

[rodrigoran]

Bom dia pessoal,

Por favor, tenho um dúvida que não consegui sanar, não sei se a forma (termos) como estou procurando são os mais corretos.

Tenho uma classe javascript chamada por exemplo Teste, em um dos metodos dela quero fazer o seguinte:

Alerta.prototype.alerta = function(){

 alert(this.palavra);

}

Teste.prototype.alerta = function(){

 this.form.onsubmit = this.Alerta;

}

Resumindo o exemplo, quero que quando o formulario for submetido, apareça um alerta com uma variável interna da classe.

Mas não consigo fazer, porque a partir do momento que chamo a função this.Alerta no onsubmit, ele não a entende mais como parte da classe, e o this.palavra passa a ser undefined.

Deu pra entender? Não sei sem consegui me expressar rs

Por favor, se alguém souber me ajudar, eu ficaria muito grato!

Rodrigo

[bareta]

http://www.portalmaracaju.com.br/blog/arti..._a_objetos.html

[Danilo Moraes]

Olha cara, não entendi exatamente o que tu quer fazer, porque tu esta usando um metodo alerta da classe Teste pra atribuir o metodo alerta da classe Alerta para o onsubmit do form?? porque tu não atribui direto pro onsubmit assim:

var alertar = new Alerta();
document.getElementById("idDoForm").onsubmit = alertar.alerta;

Me parece ser bem mais facil e bem menos "estranho". hehehhe Mas seguindo sua logica bolei esse codigo aqui que esta funcionando. Da uma olhada:

<script type="text/javascript">
function Alerta() {
    this.palavra = "palavra_qualquer";
}
function Teste() {
}
Alerta.prototype.alerta = function(){
    alert(classAlerta.palavra);//tem que ser classAlerta pois o this é um "hack" para variaveis publicas...
}

Teste.prototype.alerta = function(){
    document.forms[0].onsubmit = classAlerta.alerta;
}

var classAlerta = new Alerta();
var classTeste = new Teste();
window.onload = function() {//chamar aqui dentro para que de tempo de ser criado os elementos HTML
    classTeste.alerta();//chama para que seja adicionado o metodo ao evento onsubmit
}
</script>

<form id="form" onsubmit="">
<input type="submit" />
</form>

O seu codigo não iria funcionar de nenhum geito, e nem sei se atendi as suas espectativas porque não consegui entender apenas lendo o codigo. Olhe o porque:

Alerta.prototype.alerta = function(){

alert(this.palavra);

}

Nessa parte, eu supus que tu já havia criado uma classe Alerta e apenas esta inserindo um metodo que mostrará uma variavel publica que tu criou. Vamos a algumas ponderacoes para intender o porque isso aqui não esta funcionando. O javascript, não "implementa completamente" a programacao orientada a objetos. A maioria das caracteristicas de uma linguagem orientada a objetos como heranca simples e multipla, encapsulamento, classes, polimorfismo entre outras, precisa ser "emulada" no javascript, sendo necessario usar alguns hacks para simular essas caracteristicas. No javascript, quando você quer criar um atributo ou metodo simulando o encapsulamento public, tu usa a palavra this... Se tu não usar a palavra chave this, sera criado uma variavel com um escopo global, a nivel de window. Se tu usar a palavra chave var, sera criado uma variavel com escopo local, valendo apenas dentro de uma funcao. Quando tu usa a palavra chave this, tu cria uma variavel que so pode ser acessada seguindo uma "hierarquia". Vou tentar dar um exemplo melhor:

this.variavel_global = "Danilo Moraes";

alert(window.variavel_global)

Bom, viram que eu acessei a variavel_global seguindo pela sua "hierarquia" (não encontrei uma palavra melhor D:). Ai você vai tentar criar essa mesma variavel com a palavra chave var, e vai me dizer que conseguiu acessa-la usando window.variavel_global. E então você me pergunta: porque que com objetos eu não consigo?? Bom, lembremos do seguinte: a palavra chave var, garante que a variavel perdure enquanto a execucao do script esteja sobre aquele escopo. Compliquei, né? Dexa eu tentar denovo: O exemplo mais simples e o bem do inicio, aquele hello world:

var nome="Danilo";
function meuNome() {
  var nome="Fulano";
  alert(nome);
}
alert(nome);
meuNome();

Aqui deu pra percebe o esquema do escopo, né? A variavel nome dentro da funcao, existe apenas inquanto o javascript esta lendo a funcao, depois ela é tirada da memoria. Continuando com o this, quando você cria uma variavel com ele, é atribuida uma "regra de acesso" para essa variavel, onde so pode acessa-la pelo objeto que a criou... Quando usa-se o this direto no codigo javascript, fora de qualquer funcao, qual o objeto que sera "pai", ou, qual objeto que this estara referenciando? window! Lembrem-se que no javascript, o objeto raiz é window, portanto tudo que e criado na pagina, descende de window. Portanto, podemos acessar essa variavel usando window.variavel. No javascript, tudo que descende de window, por isso podemos omitir o nome desse objeto, escrevendo apenas variavel. Na criacao de objetos não é diferente, lembrando que objetos não passam de funcoes no javascript. Aquela funcao que tu fez ali em cima, não tem problema se tu tentar acessar assim:

function Alerta() {
    this.palavra = "palavra_qualquer";
}

Alerta.prototype.alerta = function(){
  alert(this.palavra);
}
var classAlerta = new Alerta();
classAlerta.alerta();

Pois tu esta fazendo uma referencia a variavel palavra usando this. Nesse caso, this esta fazendo referencia ao objeto Alerta. Ate aqui beleza, né? Mas o que há de errado então? Bom, o problema esta na maneira que tu esta usando para chamar esse metodo. No codigo que tu fez, ele não sera atribuido ao evento onsubmit do form, mas levando em consideracao o codigo que eu fiz ali, digamos que tu atribua esse metodo ao evento onsubmit assim:

Teste.prototype.alerta = function(){
    document.forms[0].onsubmit = classAlerta.alerta;
}

Vai dar erro e é extremamente aceitavel porque nesse caso, quem estara chamando o metodo alerta do objeto classAlerta? O evento onsubmit. Ai tu me pergunta: Mas o this não faz referencia apenas a objetos? E eu respondo: sim! E qual e o objeto que this estara referenciando quando o evento onsubmit executar o metodo alerta? O objeto do formulario: [object HTMLFormElement]. Por isso, ao invés de usar a palavra this para referenciar a variavel palavra, eu usei o proprio objeto que referencia a funcao Alerta() que seria o classAlerta. Ate aqui entendido? Depois, a segunda parte do seu script:

Teste.prototype.alerta = function(){

this.form.onsubmit = this.Alerta;

}

Aqui o negocio é mais sinistro. hehehehe

Nessa parte, a unica coisa que preciso comentar é a parte do this.Alerta. Alerta é uma funcao que podemos chamar de constructor. Constructors, são funcoes que instanciam uma classe a uma determinada variavel, criando um objeto. Quando tu apenas atribui o nome de uma funcao a uma variavel como assim: var funcao = Alerta, é atribuida para funcao, o codigo da funcao Alerta. Quando digo codigo, é o proprio texto mesmo. E para que esse codigo seja executado depois basta fazer: funcao()... ou seja, adicionar os parenteses. Eventos quando são disparados, tecnicamente eles "adicionam" os parenteses as funcoes que são atribuidas para eles então sempre atribuimos uma funcao a um evento sem os parenteses, para que seja atribuido apenas o seu codigo. Mas nesse caso, Alerta é apenas um constructor, a unica coisa que aconteceria aqui se tu atribuise esse constructor ao evento, seria que quando o evento fosse disparado, tu criaria a variavel palavra. Mas nem isso vai acontecer com esse script! ^^ porque? porque tu ta usando a palavra chave this e nesse caso, this esta referenciando o objeto Teste que não tem nenhum metodo chamado Alerta... Deu pra intende?

Por isso decidi fazer onsubmit = classAlerta.alerta porque assim eu estou usando uma referencia "perfeita". =P

Como sempre, eu faco um jornal aqui =//

Desculpa se ficou um texto enjoativo, mas sempre gosto de explicar tudo nos minimos detalhes! heheheh

T+

[rodrigoran]

Muito obrigado pela atenção bareta e Danilo, muito obrigado mesmo!!

bareta no link que você passou eu dei uma olhada mas creio que não resolve meu problema.

Danilo, super bem explicado cara, demais, muito obrigado!

Mas creio que não fui muito claro, e pra piorar notei que fiz um código errado no exemplo!

Deixa tentar explicar melhor:

Estou criando uma classe para trabalhar com ajax, a idéia é que nada seja "global", seja tudo dentro da classe, podendo assim ter X conexão ajax ao mesmo tempo, sem nenhuma conflitar com a outra, e de maneira "elegnante" como fica com classes (em JS chamam-se classes mesmo?).

A parte do ajax já estou dominando bem, o problema está sendo no onreadystatechange, olha só:

this.conexao.onreadystatechange = function(){
                    if(this.conexao.readyState == 4){
                        if (this.conexao.status == 200){
                            this.resposta.call();
                        }
                    }
                };

Olha só o problema, dentro a função que chamo com o onreadystatechange, não consigo chamar this.resposta por exemplo, porque ele se comporta como se não estivesse dentro da classe. Então criei uma "ponte", assim:

var ponte = this;
                this.conexao.onreadystatechange = function(){
                    if(ponte.conexao.readyState == 4){
                        if (ponte.conexao.status == 200){
                            ponte.resposta.call();
                        }
                    }
                };

Funcionou, mas achei bem deselegante, não acham?

Ao pesquisar, achei no site da SUN algo como this.conexao.onreadystatechange = function(event), mas não funcionou em nenhum navegador, o engraçado é que no site diz que daria certo por alguns motivos meio bizarros que não entendi bem rs

Outra coisa, essa var ponte, fica global no JS?

Se eu tiver usando duas classes desse meu ajax, uma "ponte" vai interferir na outra?

Já tive problemas com onsubmit e onclick outras vezes, e nunca achei uma maneira melhor que essa para resolver.

Conhecem? Ou melhor, existe?

Mais uma vez muito obrigado pela atenção, valeu mesmo!!!

Abraços!

[Jonathan Queiroz]

Recentemente fiz uma aplicação bem parecida, com o objetivo de simplificar o trabalho de AJAX em um site (ainda não está pronto).

Quanto a seu código, acho que não é interessante declarar o objeto conexao como public. Afinal não faz muito sentido alguém querer modificar algo nele. Se achar interessante, você pode até criar algumas funções que retornem algo relacionado ao estado da requisição etc.

Seria mais interessante deixar o conexao como uma variável local.

var conexao=[...] //Cria a requisição
[...]
conexao.onreadystatechange = function(){
                    if(conexao.readyState == 4){
                        if (conexao.status == 200){
                            resposta.call();
                        }
                    }
                };

[rodrigoran]

Fala Jonathan Queiroz,

Da forma como você falou não da na mesma? Porque de qualquer forma eu não vou precisar criar a variável que vou passar pra dentro da função que o onreadystatechange chama?

Valeu!

Abraços,

Rodrigo

[Jonathan Queiroz]

Se a variável for local você poderá acessar em funções mais internas, além de que é mais recomendado pelos motivos que citei.

Um exemplo bem simples:

MinhaClasse = new function() {
            var variavel = "Bom dia"
            this.SubClasse = new function() {
                this.alerta = function() {
                    alert(variavel) //Bom dia
                }
            }
        }
        onload = function() {
            MinhaClasse.SubClasse.alerta()
        }

[rodrigoran]

Beleza Jonathan, muito obrigado, valeuu mesmo!

[Jonathan Queiroz]

De nada, cara !

Qualquer coisa posta aí !