scrivere codice object oriented!

**citrus** · 31-07-2006, 16:44

salve a tutti,
ho bisogno di scrivere una classe...
in questo modo potrò crearne diverse istanze così che non si calpestino i piedi tra di loro.
il problema è che non conosco (se non a grandi linee) la sintassi per la programmazione ad oggetti di javascript e quindi vi chiederei un paio di delucidazioni.

punto primo: come si crea una classe?
io ho provato così

codice:

var prova={
    proprietà: "valore";
    metodo: funtion(){
        alert(this.proprietà);
    }
}

e per istanziare l'oggetto e richiamarne i metodi?
io ho pensato...

codice:

var obj = new prova();
alert(obj.proprietà);
// oppure
obj.metodo();

purtroppo però non funziona e non riesco neppure a trovare una documentazione chiara e semplice a riguardo...
mi date un paio di dritte?
grazie mille
citrus

**pietro09** · 31-07-2006, 20:28

questa è la riscrittura del tuo codice

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Pagina senza titolo</title>
<script language="javascript" type="text/javascript">
// <!CDATA[
window.onload = function()
{
    document.getElementById("Button1").onclick = function()
    {
        var j = new prova();
        //var j = new prova('xyz');
        j.metodo();
        
        j.proprietà = "Pietro";
        j.metodo();
    }
}



function prova(proprieta)
{
    this.proprietà = (proprieta)?proprieta : "default";
}
prova.prototype.metodo = function()
{
    alert(this.proprietà);
}


// ]]>
</script>
</head>
<body >
    <input id="Button1" type="button" value="button" />
</body>
</html>

Documentazione in rete ce n'è tanta.
Ma resta il fatto cle le classi (chiamamole così) sono un argomento non certo semplice per javascritp, lontano dalla semplicità di java, c# o basic

**citrus** · 31-07-2006, 21:29

infatti non ci ho capito niente

conosco piuttosto bene la programmazione ad oggetti (java) ma questa sintassi mi spiazza...
sai indicarmi un tutorial o qualcosa dove studiare un pochino?
così non sto a stressarti

grazie

**Mega69** · 01-08-2006, 10:02

Guide del tutto esaurienti non esistono... Diciamo che per iniziare dovresti comprare un buon libro su javascript oppure leggere la sezione javascript di questo sito. Per poter imparare al meglio gli oggetti è necessaria parecchia esperienza, ma se conosci l'inglese è parecchio più semplice ( trovi un sacco di guide su internet ).

**fcaldera** · 01-08-2006, 10:16

http://www.javascriptkit.com/javatutors/oopjs.shtml
http://phrogz.net/JS/Classes/OOPinJS.html

**citrus** · 01-08-2006, 15:58

grazie a tutti per le risposte...
ieri sono andato a cercare un manuale javascript in libreria ma non ho rtovato niente di decente... quelli che ho visto hanno una sezione talmente minima sulla personalizzazione degli oggetti che non valeva la pena spendere 50 euro per poche pagine!
vedo ora i link segnalati da voi.. li gurdo subito.
nel frattempo però mi sono "permesso" sulla base del materiale trovato in rete, di scrivere per conto mio una classe...
purtroppo però non funziona...
potete cmq dargl iun occhiata per vedere se ci sono grossi errori concettuali o magari se mi è sfuggita qualche sciocchezza?
grazie mille
ecco il codice (in fondo ci sono 2 funzioni che istanziano la classe e ne usano i metodi)

codice:

function ajax(){
	this.objSOCK = null;
	this.openSock = _openSock;
	this.printOut = _printOut;
	this.receiveResponse = _receiveResponse;
	this.requestPage = _requestPage;
	this.sendForm = _sendForm();
}


	function _openSock(){
		var xmlhttp ;
		try{
		    xmlhttp = new XMLHttpRequest(); // Gecko (Firefox, Moz), KHTML (Konqueror, Safari), Opera, Internet Explorer 7
		}catch(e){
		    var MSXML_XMLHTTP_PROGIDS = new Array(
		        'MSXML2.XMLHTTP.5.0',  
		        'MSXML2.XMLHTTP.4.0',
		        'MSXML2.XMLHTTP.3.0',
		        'MSXML2.XMLHTTP',      // Internet Explorer 6
		        'Microsoft.XMLHTTP'   // Internet Explorer 4,5
		    );
		    var success=false;
		    for(var i=0;i < MSXML_XMLHTTP_PROGIDS.length && !success; i++){
		        try{
		            xmlhttp = new ActiveXObject(MSXML_XMLHTTP_PROGIDS[i]);
		            success=true;	
		        }catch(e){}
		    }
		    if(!success)
		        alert('attenzione: per navigare questo sito e necessario abilitare javascript o activeX');
		}
		return xmlhttp;
	}
	
	
	function _printOut(target, html){
	   document.getElementById(target).innerHTML = html
	}
	
	
	function _receiveResponse(target) {		
		if (this.objSOCK.readyState == 4) { 				
			if (this.objSOCK.status == 200 || this.objSOCK.statusText=="Found") {							
				this.printOut(target, this.objSOCK.responseText);    
			}else{
				this.printOut(target, " error:\n"+this.objSOCK.statusText);
			}
		}
	}
	
	
	function _requestPage(url, target, method, parameters) {
		this.objSOCK=this.openSock(); // creo l'oggetto XMLHttpRequest
		if(this.objSOCK){					
			this.objSOCK.onreadystatechange=function(){this.receiveResponse(target);};			
			if(method == undefined){method="GET";}
			this.objSOCK.open(method, url, true);					
			if (method == "GET" || method == "get"){							
				this.objSOCK.send("");					
			}else{
				this.objSOCK.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
				this.objSOCK.setRequestHeader('Content-length', parameters.length);
				this.objSOCK.setRequestHeader('Connection', 'close');
				this.objSOCK.send(parameters);
			}
		}
	}	
	
	
	function _sendForm(url, target, method, form_id){		
		var form = document.getElementById(form_id);
		var parametri = "";	
		// gestione di radio button e checkbox
		var name = new Array(); 
		var value = new Array();	
		var k=0;
		for(var i=0; i<form.elements.length; i++){		
			if((form.elements[i].type == "radio" || form.elements[i].type == "checkbox") && form.elements[i].checked){ 
				name[k] = form.elements[i].name;
				value[k] = form.elements[i].value; 
				k++; 
			}
		}	
		for(var i=0; i<value.length; i++) {
			parametri += name[i] + "=" + value[i] + "&";
		}				
		// gestione dei campi text e simili
		for(var i=0; i<form.elements.length; i++){		
			if(form.elements[i].type!="radio" && form.elements[i].type!="checkbox"){
				parametri += form.elements[i].name + "=" + form.elements[i].value + "&";
			}
		}				
		// invio dei parametri al server
		if(method == "GET" || method=="get" || method==undefined) 
			this.requestPage(url+"?"+parametri, target, method); 
		else if(method == "POST" || method=="post") 
			this.requestPage(url, target, method, parametri); 
	}

// -------------------------------------------------------------------------------------------------


	function request(url, target, title){				
		if(title!="")
			document.getElementById('imgTitle').src='img/titoli/'+title+'.jpg';
		var objAJAX = new ajax();
		objAJAX.printOut(target, "<div align='center'>[img]img/loading.gif[/img]</div>"); // preload
		objAJAX.requestPage(url,target);
	}
	
	
	function send(url, target, title, method, formId){
		if(title!="")
			document.getElementById('imgTitle').src='img/titoli/'+title+'.jpg';
		var objAJAX = new ajax();
		objAJAX.printOut(target, "<div align='center'>[img]img/loading.gif[/img]</div>"); // preload
		objAJX.sendForm(url, target, method, formId);
	}

**citrus** · 01-08-2006, 17:12

leggendo i link che ha postato gentilmente fcaldera ho potuto riscrivere la classe con il formalismo corretto (anche quello che avevo usato prima doveva esserlo secondo un tutorial ma vedo che questo funziona meglio).
adesso riesco ad istanziare l'oggetto ma poi qualcosa si blocca ugualmente...
e credo sia un problema dovuto ad ajax... evidentemente con il formalismo object oriented devo gestire la cosa in maniera diversa ma non so come.
in particolare l'esecuzione si blocca nel metodo receiveResponse().
qui ho messo degli alert per seguire l'andamento del flusso esecutivo e ho potuto vedere che il problema è dato dal fatto che non si riesce ad entrare nel primo ramo IF.
cosa che prima ha sempre funzionato (il codice è sempre lo stesso ho cambiato solo il formalismo). in particolare la faccenda riguarda l'oggetto XMLHttpRequest che istanzio nel metodo requestPage() e salvo nella proprietà della classe ajax che ho chiamato objSOCK.
secondo il tutorial che ho seguito questa proprietà dovrebbe essere accessibile da tutti i metodi della classe... eppure a questo punto la proprietà "readyState" dell'oggetto objSOCK ritorna 0 come se non fosse mai stato istanziato....
in relatàl'oggetto è stato instanziato e la proprietà dovrfebbe ritornare 4....
non capisco... qualche anima pia può darci un occhiata pls?
grazie mille
ecco il codice

codice:

function ajax(){
	this.objSOCK = null;

	this.openSock = function(){
		var xmlhttp ;
		try{
		    xmlhttp = new XMLHttpRequest(); // Gecko (Firefox, Moz), KHTML (Konqueror, Safari), Opera, Internet Explorer 7
		}catch(e){
		    var MSXML_XMLHTTP_PROGIDS = new Array(
		        'MSXML2.XMLHTTP.5.0',  
		        'MSXML2.XMLHTTP.4.0',
		        'MSXML2.XMLHTTP.3.0',
		        'MSXML2.XMLHTTP',      // Internet Explorer 6
		        'Microsoft.XMLHTTP'   // Internet Explorer 4,5
		    );
		    var success=false;
		    for(var i=0;i < MSXML_XMLHTTP_PROGIDS.length && !success; i++){
		        try{
		            xmlhttp = new ActiveXObject(MSXML_XMLHTTP_PROGIDS[i]);
		            success=true;	
		        }catch(e){}
		    }
		    if(!success)
		        alert('attenzione: per navigare questo sito e necessario abilitare javascript o activeX');
		}
		return xmlhttp;
	}
	
	
	this.printOut = function(target, html){
	   document.getElementById(target).innerHTML = html
	}
	
	
	this.receiveResponse = function(target) {
		alert('ok1');		
		if(this.objSOCK.readyState == 4) { 	
		alert('ok2');						
			if (this.objSOCK.status == 200 || this.objSOCK.statusText=="Found") {							
				this.printOut(target, this.objSOCK.responseText);    
			}else{
				this.printOut(target, "error:\n"+this.objSOCK.statusText);
			}
		}
		alert('ok3');
	}
	
	
	this.requestPage = function(url, target, method, parameters) {
		this.objSOCK=this.openSock(); // creo l'oggetto XMLHttpRequest
		if(this.objSOCK){					
			//this.objSOCK.onreadystatechange=function(){this.receiveResponse(target);};
			this.objSOCK.onreadystatechange=this.receiveResponse(target);						
			if(method == undefined){method="GET";}
			this.objSOCK.open(method, url, true);					
			if (method == "GET" || method == "get"){			
				//setTimeout('this.objSOCK.send("")',1000);
				this.objSOCK.send("");					
			}else{
				this.objSOCK.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
				this.objSOCK.setRequestHeader('Content-length', parameters.length);
				this.objSOCK.setRequestHeader('Connection', 'close');
				//setTimeout('this.objSOCK.send(parameters)',1000);
				this.objSOCK.send(parameters);
			}
		}
	}	
	
	
	this.sendForm = function(url, target, method, form_id){		
		var form = document.getElementById(form_id);
		var parametri = "";	
		// gestione di radio button e checkbox
		var name = new Array(); 
		var value = new Array();	
		var k=0;
		for(var i=0; i<form.elements.length; i++){		
			if((form.elements[i].type == "radio" || form.elements[i].type == "checkbox") && form.elements[i].checked){ 
				name[k] = form.elements[i].name;
				value[k] = form.elements[i].value; 
				k++; 
			}
		}	
		for(var i=0; i<value.length; i++) {
			parametri += name[i] + "=" + value[i] + "&";
		}				
		// gestione dei campi text e simili
		for(var i=0; i<form.elements.length; i++){		
			if(form.elements[i].type!="radio" && form.elements[i].type!="checkbox"){
				parametri += form.elements[i].name + "=" + form.elements[i].value + "&";
			}
		}				
		// invio dei parametri al server
		if(method == "GET" || method=="get" || method==undefined) 
			this.requestPage(url+"?"+parametri, target, method); 
		else if(method == "POST" || method=="post") 
			this.requestPage(url, target, method, parametri); 
	}
}
// -------------------------------------------------------------------------------------------------


	function request(url, target, title){				
		if(title!="")
			document.getElementById('imgTitle').src='img/titoli/'+title+'.jpg';
		var objAJAX = new ajax();
		objAJAX.printOut(target, "<div align='center'>[img]img/loading.gif[/img]</div>"); // preload
		objAJAX.requestPage(url,target);
	}
	
	
	function send(url, target, title, method, formId){
		if(title!="")
			document.getElementById('imgTitle').src='img/titoli/'+title+'.jpg';
		var objAJAX = new ajax();
		objAJAX.printOut(target, "<div align='center'>[img]img/loading.gif[/img]</div>"); // preload
		objAJX.sendForm(url, target, method, formId);
	}

**Mega69** · 01-08-2006, 23:12

Forse sarebbe meglio snellire il tutto levando la compatibilità con i vecchi browser microsoft o almeno cacciando tutti questi controlli sul response... Per essere sicuro che tutto venga caricato bene basta controllare che il readystate sia a 4 ogni onstatechange.

Se proprio vuoi fare qualcosa di più complesso fallo dopo. Inizia dallo "scheletro" e accertati che funzioni.

**citrus** · 01-08-2006, 23:34

ciao,
il codice che vedi ha sempre funzionato alla perfezione... compresa la compatibilità con i browser... l'unica cosa che ho fatto è stato inserirlo in una classe per fare in modo che ogni sua istanza gestisca una comunicazione individuale con il server.
questo mi permetterà di avviare più comunicazioni in contemporanea...
ritornando a noi...
il problema sta proprio nel readyState che è = 0 quando invece dovrebbe essere = 4.
e non capisco come mai.
premetto che non ho una gran conoscenza dell'oggetto XMLHttpRequest (mi informerò al più presto) ma posso garantirti che prima funzionava e che le cose sono cambiate nel momento in cui ho creato la classe.
per questo ho pensato alla visibilità dell'oggetto XMLHttpRequest (alias objSOCK)...
ma temo non sia quello il problema.. è la soluzione, haimè, mi sfugge.
hai/avete qualche idea?

grazie x l'aiuto.

Discussione: scrivere codice object oriented!

Strumenti discussione

Ricerca discussione

Visualizza

scrivere codice object oriented!

Permessi di invio