Visualizzazione dei risultati da 1 a 8 su 8
  1. #1

    Grande concorso "ottimizza il codice" :o)

    Prendendo spunto da un recente post sulle select, ho pensato di realizzare un codice d'esempio da inserire tra gli "script utili" del post in rilievo in questo forum.
    L'ho sviluppato scrivendolo di getto, più velocemente che non ragionatamente, anche perchè tempo non ne ho molto .
    Vi sfido dunque a far di meglio, ad ottimizzare (o addirittura stravolgere) questo script, in modo da fornire a tutti un altro script di qualità by HTML.it :quote:

    codice:
    <html><head><title>Gestione Select by Gwendlyn</title>
    <script>
    function copy(p,q){
    	if(eval("document.f.s"+p+".options.selectedIndex")>-1){
    		tmp=new Option();
    		eval("tmp.text=document.f.s"+p+".options[document.f.s"+p+".options.selectedIndex].text");
    		eval("tmp.value=document.f.s"+p+".options[document.f.s"+p+".options.selectedIndex].value");
    		eval("document.f.s"+q+".options[document.f.s"+q+".options.length]=tmp");
    	}else MsgBox();
    }
    function del(k){
    	if(eval("document.f.s"+k+".options.selectedIndex")>-1){
    		eval("document.f.s"+k+".options[document.f.s"+k+".options.selectedIndex]=null");
    	}else MsgBox();
    }
    function move(m,n){
    	if(eval("document.f.s"+m+".options.selectedIndex")>-1){
    		copy(m,n);
    		del(m);
    	}else MsgBox();
    }
    function moveupdown(a,b){
    	pos=eval("document.f.s"+a+".options.selectedIndex");
    	lung=eval("document.f.s"+a+".options.length");
    	if(pos>-1){
    		if((b==1&&pos<lung-1)||(b==-1&&pos>0)){
    				tmp1=new Option();
    				tmp2=new Option();
    				eval("tmp1.text=document.f.s"+a+".options[pos+b].text");
    				eval("tmp1.value=document.f.s"+a+".options[pos+b].value");
    				eval("tmp2.text=document.f.s"+a+".options[pos].text");
    				eval("tmp2.value=document.f.s"+a+".options[pos].value");
    				eval("document.f.s"+a+".options[pos]=tmp1");
    				eval("document.f.s"+a+".options[pos+b]=tmp2");
    				eval("document.f.s"+a+".options.selectedIndex=pos+b");
    		}
    	}else MsgBox();
    }
    function unsel(h){
    	eval("document.f.s"+h+".options.selectedIndex=-1")
    }
    function add(h){
    	lung=eval("document.f.s"+h+".options.length");
    	tmp=new Option();
    	eval("tmp.text=document.f.txt"+h+".value");
    	eval("tmp.value=document.f.txt"+h+".value");
    	eval("document.f.s"+h+".options[lung]=tmp")
    }
    function MsgBox(){
    	alert("Selezionare un'opzione")
    }
    </script>
    </head><body bgcolor=ffffff topmargin=0 marginheight=0 leftmargin=0 marginwidth=0 rightmargin=0 bottommargin=0>
    <form name=f>
    <table border=0 cellpadding=0 cellspacing=4><tr><td>
    <input type=button value=" + " onclick=moveupdown(1,-1) style="width:23">
    
    <input type=button value=" -- " onclick=moveupdown(1,1) style="width:23">
    </td><td>
    <select name=s1 size="10" style="width:100">
    <option value="a">a
    <option value="aa">aa
    <option value="aaa">aaa
    <option value="aaaa">aaaa
    <option value="aaaaa">aaaaa
    </select></td><td><select name=s2 size="10" style="width:100">
    <option value="b">b
    <option value="bb">bb
    <option value="bbb">bbb
    <option value="bbbb">bbbb
    <option value="bbbbb">bbbbb
    </select></td><td>
    <input type=button value=" + " onclick=moveupdown(2,-1) style="width:23">
    
    <input type=button value=" -- " onclick=moveupdown(2,1) style="width:23">
    </td></tr>
    <tr><td colspan=4></td></tr>
    <tr><td></td><td>
    <input type=text name=txt1 style="width:60"><input type=button value="add^" onclick="add(1)" style="width:40">
    
    <input type=button value="> Copia >" onclick="copy(1,2)" style="width:100">
    
    <input type=button value="> Sposta >" onclick="move(1,2)" style="width:100">
    
    <input type=button value="> Elimina" onclick="del(1)" style="width:100">
    
    <input type=button value="Deseleziona" onclick="unsel(1)" style="width:100">
    
    </td><td>
    <input type=text name=txt2 style="width:60"><input type=button value="add^" onclick="add(2)" style="width:40">
    
    <input type=button value="< Copia <" onclick="copy(2,1)" style="width:100">
    
    <input type=button value="< Sposta <" onclick="move(2,1)" style="width:100">
    
    <input type=button value="  Elimina <" onclick="del(2)" style="width:100">
    
    <input type=button value="Deseleziona" onclick="unsel(2)" style="width:100">
    </td><td></td></tr>
    </table>
    </form>
    </body></html>
    :quote:
    Progetto ~MEPHIT~
    PHP/AJAX/HTML5 Project for D&D players
    www.mephit.it

  2. #2
    Utente di HTML.it
    Registrato dal
    Jan 2002
    Messaggi
    633
    tu fai un uso intensivo della funzione eval.
    Questo è sconsigliato, per il fatto che questa funzione è piuttosto lenta e può creare errori,
    e nella maggior parte dei casi è possibile raggiungere il proprio scopo senza utilizzarla.
    Perciò ti consiglio di non usarla, a meno che non ne abbia proprio bisogno.
    Percui ho rivisto il tuo codice eliminando tutti gli eval,
    e introducendo variabili locali alle funzioni (che "scompaiono" alla fine della funzione stessa)
    al posto delle variabili globali:

    codice:
    <html><head><title>Gestione Select by Gwendlyn</title>
    <script>
    function copy(p,q){
    	var frmp=document.f["s"+p]
    	var frmq=document.f["s"+q]
    	if(frmp.options.selectedIndex>-1) {
    		var tmp=new Option();
    		tmp.text=frmp.options[frmp.options.selectedIndex].text
    		tmp.value=frmp.options[frmp.options.selectedIndex].value
    		frmq.options[frmq.options.length]=tmp
    	}else MsgBox();
    }
    function del(k){
    	var frm=document.f["s"+k]
    	if(frm.options.selectedIndex>-1) 
    		frm.options[frm.options.selectedIndex]=null
    	else MsgBox();
    }
    function move(m,n){
    	if(document.f["s"+m].options.selectedIndex>-1) {
    		copy(m,n)
    		del(m)
    	}else MsgBox()
    }
    function moveupdown(a,b){
    	var frm=document.f["s"+a]
    	var pos=frm.options.selectedIndex
    	var lung=frm.options.length
    	if(pos>-1){
    		if((b==1&&pos<lung-1)||(b==-1&&pos>0)){
    				var tmp1=new Option()
    				var tmp2=new Option()
    				tmp1.text=frm.options[pos+b].text
    				tmp1.value=frm.options[pos+b].value
    				tmp2.text=frm.options[pos].text
    				tmp2.value=frm.options[pos].value 
    				frm.options[pos]=tmp1
    				frm.options[pos+b]=tmp2
    				frm.options.selectedIndex=pos+b
    		}
    	}else MsgBox();
    }
    function unsel(h){
    	document.f["s"+h].options.selectedIndex=-1
    }
    function add(h){
    	var frm=document.f["s"+h]
    	var lung=frm.options.length
    	var tmp=new Option();
    	tmp.text=document.f["txt"+h].value
    	tmp.value=document.f["txt"+h].value
    	frm.options[lung]=tmp
    }
    function MsgBox(){
    	alert("Selezionare un'opzione")
    }
    </script>
    </head><body bgcolor=ffffff topmargin=0 marginheight=0 leftmargin=0 marginwidth=0 rightmargin=0 bottommargin=0>
    <form name=f>
    <table border=0 cellpadding=0 cellspacing=4><tr><td>
    <input type=button value=" + " onclick=moveupdown(1,-1) style="width:23">
    
    <input type=button value=" -- " onclick=moveupdown(1,1) style="width:23">
    </td><td>
    <select name=s1 size="10" style="width:100">
    <option value="a">a
    <option value="aa">aa
    <option value="aaa">aaa
    <option value="aaaa">aaaa
    <option value="aaaaa">aaaaa</option>
    </select></td><td><select name=s2 size="10" style="width:100">
    <option value="b">b
    <option value="bb">bb
    <option value="bbb">bbb
    <option value="bbbb">bbbb
    <option value="bbbbb">bbbbb
    </select></td><td>
    <input type=button value=" + " onclick=moveupdown(2,-1) style="width:23">
    
    <input type=button value=" -- " onclick=moveupdown(2,1) style="width:23">
    </td></tr>
    <tr><td colspan=4></td></tr>
    <tr><td></td><td>
    <input type=text name=txt1 style="width:60"><input type=button value="add^" onclick="add(1)" style="width:40">
    
    <input type=button value="> Copia >" onclick="copy(1,2)" style="width:100">
    
    <input type=button value="> Sposta >" onclick="move(1,2)" style="width:100">
    
    <input type=button value="> Elimina" onclick="del(1)" style="width:100">
    
    <input type=button value="Deseleziona" onclick="unsel(1)" style="width:100">
    
    </td><td>
    <input type=text name=txt2 style="width:60"><input type=button value="add^" onclick="add(2)" style="width:40">
    
    <input type=button value="< Copia <" onclick="copy(2,1)" style="width:100">
    
    <input type=button value="< Sposta <" onclick="move(2,1)" style="width:100">
    
    <input type=button value="  Elimina <" onclick="del(2)" style="width:100">
    
    <input type=button value="Deseleziona" onclick="unsel(2)" style="width:100">
    </td><td></td></tr>
    </table>
    </form>
    </body></html>
    è cmq carina l'idea della console
    Alcuni miei articoli in PRO.HTML.IT: JavaScript | DHTML | DOM
    Sviluppo : wedev | forum

  3. #3
    hai ragione per quanto riguarda la funzione eval.
    Ho seguito il tuo suggerimento e ho creato una nuova versione compatibile con tutti i browser.
    Stavolta però ho gestito select multiple.

    enjoy! :mavieni:

    codice:
    <html><head><title>Gestione Select by jure</title>
    <script>
    formName="f";
    select1="s1";
    select2="s2";
    text1="txt1";
    text2="txt2";
    
    function copy(p,q){
    	if(document.forms[formName].elements[p].options.selectedIndex>-1){
    		for(i=0;i<document.forms[formName].elements[p].options.length;i++){
    			if(document.forms[formName].elements[p].options[i].selected){
    				tmp=new Option();
    				tmp.text=document.forms[formName].elements[p].options[i].text;
    				tmp.value=document.forms[formName].elements[p].options[i].value;
    				document.forms[formName].elements[q].options[document.forms[formName].elements[q].options.length]=tmp;
    			}
    		}
    	}else MsgBox();
    }
    function del(k){
    	if(document.forms[formName].elements[k].options.selectedIndex>-1){
    		for(i=0;i<document.forms[formName].elements[k].options.length;i++){
    			if(document.forms[formName].elements[k].options[i].selected){
    				document.forms[formName].elements[k].options[i]=null;
    				i--;
    			}
    		}
    	}else MsgBox();
    }
    function move(m,n){
    	if(document.forms[formName].elements[m].options.selectedIndex>-1){
    		copy(m,n);
    		del(m);
    		unsel(m);
    	}else MsgBox();
    }
    function moveupdown_doIt(a,b,i,occupied,q){
    	if(document.forms[formName].elements[a].options[i].selected&&!occupied){
    		tmp1=new Option();
    		tmp2=new Option();
    		tmp1.text=document.forms[formName].elements[a].options[i+b].text;
    		tmp1.value=document.forms[formName].elements[a].options[i+b].value;
    		tmp2.text=document.forms[formName].elements[a].options[i].text;
    		tmp2.value=document.forms[formName].elements[a].options[i].value;
    		document.forms[formName].elements[a].options[i]=tmp1;
    		document.forms[formName].elements[a].options[i+b]=tmp2;
    		document.forms[formName].elements[a].options[i+b].selected=true;
    		i+=q;
    	}
    }
    function moveupdown(a,b){
    	lung=document.forms[formName].elements[a].options.length;
    	if(document.forms[formName].elements[a].options.selectedIndex>-1){
    		if(b==1){
    			for(i=lung-1;i>-1;i--){
    				if(i<lung-1){
    					if(i+b<lung)occupied=document.forms[formName].elements[a].options[i+b].selected;
    					else occupied=true;
    					moveupdown_doIt(a,b,i,occupied,1);
    				}
    			}
    		}else{
    			for(i=0;i<lung;i++){
    				if(i>0){
    					if(i+b>-1)occupied=document.forms[formName].elements[a].options[i+b].selected;
    					else occupied=true;
    					moveupdown_doIt(a,b,i,occupied,-1);
    				}
    			}
    		}
    	}else MsgBox();
    }
    function sel(h){
    	for(i=0;i<document.forms[formName].elements[h].options.length;i++){
    		document.forms[formName].elements[h].options[i].selected=true
    	}
    }
    function unsel(h){
    	document.forms[formName].elements[h].options.selectedIndex=-1
    }
    function add(k,h){
    	str=document.forms[formName].elements[k].value;
    	condition=(str=='')?confirm("Inserire un valore vuoto?"):true;
    	if(condition){
    		lung=document.forms[formName].elements[h].options.length;
    		tmp=new Option();
    		tmp.text=str;
    		tmp.value=str;
    		document.forms[formName].elements[h].options[lung]=tmp;
    	}
    }
    function MsgBox(){
    	alert("Selezionare almeno un'opzione")
    }
    </script>
    </head><body bgcolor=ffffff topmargin=0 marginheight=0 leftmargin=0 marginwidth=0 rightmargin=0 bottommargin=0>
    <form name=f>
    <table border=0 cellpadding=0 cellspacing=4><tr><td>
    <input type=button value=" + " onclick=moveupdown(select1,-1) style="width:23">
    
    <input type=button value=" -- " onclick=moveupdown(select1,1) style="width:23">
    </td><td>
    <select multiple name=s1 size="10" style="width:100">
    <option value="a">a
    <option value="aa">aa
    <option value="aaa">aaa
    <option value="aaaa">aaaa
    <option value="aaaaa">aaaaa
    </select></td><td><select multiple name=s2 size="10" style="width:100">
    <option value="b">b
    <option value="bb">bb
    <option value="bbb">bbb
    <option value="bbbb">bbbb
    <option value="bbbbb">bbbbb
    </select></td><td>
    <input type=button value=" + " onclick=moveupdown(select2,-1) style="width:23">
    
    <input type=button value=" -- " onclick=moveupdown(select2,1) style="width:23">
    </td></tr>
    <tr><td colspan=4></td></tr>
    <tr><td></td><td>
    <input type=text name=txt1 style="width:60"><input type=button value="add^" onclick="add(text1,select1)" style="width:40">
    
    <input type=button value="Sel. Tutto" onclick="sel(select1)" style="width:100">
    
    <input type=button value="Desel. Tutto" onclick="unsel(select1)" style="width:100">
    
    <input type=button value="> Copia >" onclick="copy(select1,select2)" style="width:100">
    
    <input type=button value="> Sposta >" onclick="move(select1,select2)" style="width:100">
    
    <input type=button value="> Elimina" onclick="del(select1)" style="width:100">
    
    </td><td>
    <input type=text name=txt2 style="width:60"><input type=button value="add^" onclick="add(text2,select2)" style="width:40">
    
    <input type=button value="Sel. Tutto" onclick="sel(select2)" style="width:100">
    
    <input type=button value="Desel. Tutto" onclick="unsel(select2)" style="width:100">
    
    <input type=button value="< Copia <" onclick="copy(select2,select1)" style="width:100">
    
    <input type=button value="< Sposta <" onclick="move(select2,select1)" style="width:100">
    
    <input type=button value="  Elimina <" onclick="del(select2)" style="width:100">
    
    </td><td></td></tr>
    </table>
    </form>
    </body></html>
    Progetto ~MEPHIT~
    PHP/AJAX/HTML5 Project for D&D players
    www.mephit.it

  4. #4
    Utente di HTML.it
    Registrato dal
    Jan 2002
    Messaggi
    633
    sì, molto meglio della precedente.
    Un'altro suggerimento è quello di utilizzare il var per le variabili locali (nelle funzioni) in modo da evitare di creare delle variabili globali (che potrebbero sovrascriverne delle altre con lo stesso nome).
    E poi, perchè no, dare "un'indirizzata" al tuo codice verso gli oggetti...d'altronde hai un set di funzioni che potrebbero diventare metodi...
    ciauz
    Alcuni miei articoli in PRO.HTML.IT: JavaScript | DHTML | DOM
    Sviluppo : wedev | forum

  5. #5
    Utente di HTML.it L'avatar di badaze
    Registrato dal
    Jun 2002
    residenza
    Lyon
    Messaggi
    5,344
    Alcune variazioni sul add...

    codice:
    <html><head><title>Gestione Select by jure</title>
    <script>
    formName="f";
    select1="s1";
    select2="s2";
    text1="txt1";
    text2="txt2";
    
    function elemAdd(h,text,value) {
    		tmp=new Option();
    		tmp.text=text;
    		tmp.value=value;
        document.forms[formName].elements[h].options.add(tmp);
    }
    
    function copy(p,q){
    	if(document.forms[formName].elements[p].options.selectedIndex>-1){
    		for(i=0;i<document.forms[formName].elements[p].options.length;i++){
    			if(document.forms[formName].elements[p].options[i].selected){
    				text=document.forms[formName].elements[p].options[i].text;
    				value=document.forms[formName].elements[p].options[i].value;
    				elemAdd(q,text,value);
    			}
    		}
    	}else MsgBox();
    }
    
    function del(k){
    	if(document.forms[formName].elements[k].options.selectedIndex>-1){
    		for(i=0;i<document.forms[formName].elements[k].options.length;i++){
    			if(document.forms[formName].elements[k].options[i].selected){
    				document.forms[formName].elements[k].options[i]=null;
    				i--;
    			}
    		}
    	}else MsgBox();
    }
    
    function move(m,n){
    	if(document.forms[formName].elements[m].options.selectedIndex>-1){
    		copy(m,n);
    		del(m);
    		unsel(m);
    	}else MsgBox();
    }
    function moveupdown_doIt(a,b,i,occupied,q){
    	if(document.forms[formName].elements[a].options[i].selected&&!occupied){
    		tmp1=new Option();
    		tmp2=new Option();
    		tmp1.text=document.forms[formName].elements[a].options[i+b].text;
    		tmp1.value=document.forms[formName].elements[a].options[i+b].value;
    		tmp2.text=document.forms[formName].elements[a].options[i].text;
    		tmp2.value=document.forms[formName].elements[a].options[i].value;
    		document.forms[formName].elements[a].options[i]=tmp1;
    		document.forms[formName].elements[a].options[i+b]=tmp2;
    		document.forms[formName].elements[a].options[i+b].selected=true;
    		i+=q; 
    	}
    }
    function moveupdown(a,b){
    	lung=document.forms[formName].elements[a].options.length;
    	if(document.forms[formName].elements[a].options.selectedIndex>-1){
    		if(b==1){
    			for(i=lung-1;i>-1;i--){
    				if(i<lung-1){
    					if(i+b<lung)occupied=document.forms[formName].elements[a].options[i+b].selected;
    					else occupied=true;
    					moveupdown_doIt(a,b,i,occupied,1);
    				}
    			}
    		}else{
    			for(i=0;i<lung;i++){
    				if(i>0){
    					if(i+b>-1)occupied=document.forms[formName].elements[a].options[i+b].selected;
    					else occupied=true;
    					moveupdown_doIt(a,b,i,occupied,-1);
    				}
    			}
    		}
    	}else MsgBox();
    }
    function sel(h){
    	for(i=0;i<document.forms[formName].elements[h].options.length;i++){
    		document.forms[formName].elements[h].options[i].selected=true
    	}
    }
    function unsel(h){
    	document.forms[formName].elements[h].options.selectedIndex=-1
    }
    
    function add(k,h){
    	str=document.forms[formName].elements[k].value;
    	condition=(str=='')?confirm("Inserire un valore vuoto?"):true;
    	if(condition){
    	  elemAdd(h,str,str);
    	}
    }
    
    function MsgBox(){
    	alert("Selezionare almeno un'opzione")
    }
    </script>
    </head><body bgcolor=ffffff topmargin=0 marginheight=0 leftmargin=0 marginwidth=0 rightmargin=0 bottommargin=0>
    <form name=f>
    <table border=0 cellpadding=0 cellspacing=4><tr><td>
    <input type=button value=" + " onclick=moveupdown(select1,-1) style="width:23">
    
    <input type=button value=" -- " onclick=moveupdown(select1,1) style="width:23">
    </td><td>
    <select multiple name=s1 size="10" style="width:100">
    <option value="a">a
    <option value="aa">aa
    <option value="aaa">aaa
    <option value="aaaa">aaaa
    <option value="aaaaa">aaaaa
    </select></td><td><select multiple name=s2 size="10" style="width:100">
    <option value="b">b
    <option value="bb">bb
    <option value="bbb">bbb
    <option value="bbbb">bbbb
    <option value="bbbbb">bbbbb
    </select></td><td>
    <input type=button value=" + " onclick=moveupdown(select2,-1) style="width:23">
    
    <input type=button value=" -- " onclick=moveupdown(select2,1) style="width:23">
    </td></tr>
    <tr><td colspan=4></td></tr>
    <tr><td></td><td>
    <input type=text name=txt1 style="width:60"><input type=button value="add^" onclick="add(text1,select1)" style="width:40">
    
    <input type=button value="Sel. Tutto" onclick="sel(select1)" style="width:100">
    
    <input type=button value="Desel. Tutto" onclick="unsel(select1)" style="width:100">
    
    <input type=button value="> Copia >" onclick="copy(select1,select2)" style="width:100">
    
    <input type=button value="> Sposta >" onclick="move(select1,select2)" style="width:100">
    
    <input type=button value="> Elimina" onclick="del(select1)" style="width:100">
    
    </td><td>
    <input type=text name=txt2 style="width:60"><input type=button value="add^" onclick="add(text2,select2)" style="width:40">
    
    <input type=button value="Sel. Tutto" onclick="sel(select2)" style="width:100">
    
    <input type=button value="Desel. Tutto" onclick="unsel(select2)" style="width:100">
    
    <input type=button value="< Copia <" onclick="copy(select2,select1)" style="width:100">
    
    <input type=button value="< Sposta <" onclick="move(select2,select1)" style="width:100">
    
    <input type=button value="  Elimina <" onclick="del(select2)" style="width:100">
    
    </td><td></td></tr>
    </table>
    </form>
    </body></html>

  6. #6
    Scusate ma se io il tag select lo voglio classicamente a tendina, cosa devo modificare?
    Provare paura per un qualcosa che ti possa capitare nel futuro non ti evita quell'evento,ti fa soltanto vivere un presente sbagliato!

  7. #7
    Come non detto, risolto.
    Provare paura per un qualcosa che ti possa capitare nel futuro non ti evita quell'evento,ti fa soltanto vivere un presente sbagliato!

  8. #8
    Originariamente inviato da maximum
    Come non detto, risolto.

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.