Partage

innerHTML, setTimeout, "Json" Concrètement..

En quoi est-ce mal? ou bien? ou mieu?

<< 1 2

Sujet résolu

8 janvier 2009 à 18:42:24

La variable infobulle peut parfaitement être remplacée, ça ne changera pas le contenu de ta page. De plus, l'avantage des variables c'est que tu peux créer un tableau d'infobulles, contrairement aux ids.

Tillertan

8 janvier 2009 à 18:48:03

oui mais si tu remplaces la variable infobulle et que t'as pas mis d'id et que tu veux le manipuler, tu l'as dans la baba ;o

Pour les ids il suffit de "infobulle-x"

Nesk

8 janvier 2009 à 18:51:09

Citation : Tiller

oui mais si tu remplaces la variable infobulle et que t'as pas mis d'id et que tu veux le manipuler, tu l'as dans la baba ;o

Je t'ai dit, il faut alors utiliser un tableau.

Tillertan

8 janvier 2009 à 18:52:22

Je parle pas du cas ou t'as plusieurs infobulles mais celui où tu réutilises la variable sans faire attention (Comme le cas que vous évoquez pour les id)

Edit:
Et perso je pense qu'il y a moins de chance de se trompé dans les ids et mettre deux fois la même que utilisé deux fois la même variable

Nesk

8 janvier 2009 à 19:04:06

Avec les ids tu es obligé de gérer toi-même les numéros attribués alors qu'avec un tableau tu fais un simple push() et comme ça tu n'as absolument aucun risque d'écrasement.

Et puis j'ai plus raison que toi d'abord :-°

Tillertan

8 janvier 2009 à 19:25:03

Psss, fait gaffe ou tu vas finir dans mon bol de lait °° {Cacao Powa}

Bref, en gros, c'est au bon vouloir du webmaster, on va simplifié comme ça °°

Nouveau débat !

Pourquoi setTimeout("bidultruc('machin')", 2000); est déconseillé ?
Pourquoi vous voulez mettre une fonction à la place des quotes? :-°

Golmote

8 janvier 2009 à 19:32:08

Entre autre parce que s'il y a des paramètres, ça a beaucoup de chance de foirer...

Nesk

8 janvier 2009 à 19:36:36

Citation : Tiller

Psss, fait gaffe ou tu vas finir dans mon bol de lait °° {Cacao Powa}

Citation : Tiller

Pourquoi setTimeout("bidultruc('machin')", 2000); est déconseillé ?
Pourquoi vous voulez mettre une fonction à la place des quotes?

Parce que la fonction est exécutée directement, contrairement à ta chaîne qu'il faut au préalable analyser. De plus je trouve ça plus lisible car je bénéficie alors de la coloration syntaxique. Et enfin, je peux très bien mettre une action toute bête sans pour autant créer une fonction pour ça.

Et aussi pour la même raison que Golmote.

Tillertan

8 janvier 2009 à 19:42:05

Je plussoie cette fois.

Nouveau débat !

Est-ce que l'écriture javascript simplifié change vraiment quelque chose niveau performance ou c'est que pour les yeux?

var truc = new Array();
var truc = new Array("Nesquik", "plus", "Lait", "Egale", "Miam");

function truc()
{
	this.bidul = function() { }
}

/******************/
/******* VS *******/
/******************/

var truc = [];
var truc = ({});
var truc = ({
	aliment1: "Nesquik",
	premiereOperation: "plus",
	aliment2: "Lait",
	secondeOperation: "Egale",
	resultat: "Miam"
});

var truc = {
	bidul: funcion() { }
}

Nesk

8 janvier 2009 à 19:46:54

J'en sais foutre rien sur ce point là... Et c'est gentil de m'apprécier de cette façon

Tillertan

8 janvier 2009 à 19:49:08

On va attendre nod_ alors :-°

Ps: Le titre commence a devenir long ;o

Golmote

8 janvier 2009 à 20:09:04

Du coup ton titre vient de me faire tilter là...

C'est quoi Json ? Ca a rapport avec ton post précédent ?

Tillertan

8 janvier 2009 à 20:12:53

En fait c'est pas vraiment du json ma question mais bon c'est tout comme ;o

http://fr.wikipedia.org/wiki/JavaScript_Object_Notation

Timot

8 janvier 2009 à 20:32:24

Pour le setTimeOut, mettre des guillemetes, cay mal parce que c'est l'équivalent de eval("true(param)"), et comme tout le monde le sait, "eval is evil".
Pour ce qui est de la notation simplifié, je ne pense pas qu'il y est des enormes marges de temps entre les différentes écritures

xavierm02

8 janvier 2009 à 21:02:55

bon... vu que t'as l'air de penser que innerHTML>DOM, je te mets au défit de refaire ce script SEULEMENT avec des innerHTML...
voici le script (il replace toutes les balises select par des div et les otpion qu'ils contiennent par des autre balises pour obtenir des options totalement personnalisables):

<html>
<head>
<style type="text/css">
.liste{
	position:absolute;
	text-align:left;
	border:1px solid #4FBAB3;
	white-space:nowrap;
	font:normal 12px verdana;
	display:none;
	background:#fff;
	z-index:100;
	padding:5px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	-khtml-border-radius:10px;
}
 
.liste a{
	display:block;
	cursor:default;
	color:#000;
	text-decoration:none;
	background:#fff;
}
 
.liste a:hover{
	color:white;
	background-color:#7370CB;
}
.aenlever
{
display:none;
}
</style>
<script type="text/javascript">
var timer;
var fleche='<img style=width:10px;width:10px;" src="http://photoxbc2.free.fr/xbc/flechebas.gif" alt="&darr;" />';
function montrerliste(obj)
{
	cacherlistes(obj.parentNode.getElementsByTagName('div')[0]);;
	if(obj.parentNode.getElementsByTagName('div')[0].style.display == 'block')
	{
		obj.parentNode.getElementsByTagName('div')[0].style.display='none';
		cacherlistes();
	}
	else
	{
		obj.parentNode.getElementsByTagName('div')[0].style.display='block';
		toutcacher();
	}
}
function validerliste(txt, id, idhidden)
{
	document.getElementById(idhidden).value = txt;
	var obj=document.getElementById(id);
	obj.parentNode.style.display = 'none';
	obj.parentNode.parentNode.getElementsByTagName('p')[0].innerHTML = fleche+obj.innerHTML;
}





function cstmGetElementsByClassNameExt(parentElement, class_name, tag) {
    /* Extendeds function with performance improvements.
     * by using a parentElement and the tag the class is on
     * the list of elements to check is reduced.
     *
     * This function doesn't get bound to an object.
     */
    var docList;
    var matchArray;
    var re;
    var len;
    
    tag = tag || "*";
    parentElement = parentElement || document;
    if (typeof parentElement == "string") //object could be passed instead of Id
        parentElement = document.getElementById(parentElement);
        
    /* Get array of tags */
    if (tag == "*") {
       /* The test is to accommodate IE 5, 
        * leave it out if IE 5 support is not required 
        */
       docList = parentElement.all || parentElement.getElementsByTagName('*');
    } else {
       docList = parentElement.getElementsByTagName(tag);
    }

    /*Create a regular expression object for class*/
    re = new RegExp("(?:^|\\s)" + class_name + "(?:\\s|$)");

	/* Create output array*/
    matchArray = new Array();
    len = docList.length;
    
    /* Populate output array from tag array 
     * do loop is faster than for loop 
     * albeit out is in reverse order
     */
    while (len--) {
        if (re.test(docList[len].className)) {            
            matchArray[matchArray.length] = docList[len];
        }
    }
    //return matchArray.reverse(); //if the order needs to forward
    return matchArray;
}
function cacherlistes(obj)
{
	listes=cstmGetElementsByClassNameExt(document,"liste");
	for(cacherliste=0;cacherliste<listes.length;cacherliste++)
	{
		if(listes[cacherliste]!=obj)
		{
			listes[cacherliste].style.display='none';
		}
	}
	clearTimeout(timer);
}
function toutcacher(cacherok)
{
	if(!surliste)
	{
		if(cacherok)
		{
			cacherlistes();
		}
		else
		{
			timer=setTimeout("toutcacher(true);",2500);	
		}
	}
}
function setForm()
{
	var asuprimer= new Array();
	selects = document.getElementsByTagName('select');
	for(i=0; i<selects.length; i++)
	{
		obj=selects[i];
		newinput = document.createElement("input");
		newinput.setAttribute('type','hidden');
		newinput.setAttribute('id',obj.id);
		newinput.setAttribute('name',obj.name);
		obj.parentNode.appendChild(newinput);
		
		newdiv = document.createElement("div");
		newdiv.setAttribute('class','blockliste');
		newdiv.setAttribute('className','blockliste');
		obj.parentNode.appendChild(newdiv);
		
		newp = document.createElement("p");
		newp.onclick=function() {clearTimeout(timer);montrerliste(this);};
		newdiv.appendChild(newp);
		
		newliste=document.createElement("div");
		newliste.setAttribute('class','liste');
		newliste.setAttribute('className','liste');
		newliste.onmouseover=function(){surliste=true;}
		newliste.onmouseout=function(){surliste=false;timer=setTimeout("toutcacher(true)",1000);}
		newdiv.appendChild(newliste);
		
		options=document.getElementById(obj.id).getElementsByTagName('option');
		for(j=0;j<options.length;j++)
		{
			if(j==0)
			{
				if(obj.title!='')
				{
					newp.innerHTML=fleche+obj.title;
				}
				else
				{
					newp.innerHTML=fleche+options[j].innerHTML;
				}	
			}
			newa = document.createElement("a");
			newa.setAttribute('href','javascript:void(0)');
			newa.setAttribute('id',obj.id+j);
			eval("newa.onclick=function(){validerliste('"+options[j].value+"', this.id,'"+obj.id+"');}");
			newa.onmouseover=function(){surliste=true;}
			newa.innerHTML=options[j].innerHTML+'<br>';
			newliste.appendChild(newa);
		}
	obj.removeAttribute('name');
	obj.removeAttribute('id');
	obj.setAttribute('class','aenlever');
	obj.setAttribute('className','aenlever');
	obj.innerHTML='';
	asuprimer[i]=obj;//ici, quand je fait obj.parentNode.removeChild(obj)   , ca ne marche pas... et je comrpend apspourquoi...
	}
	nbasuprimer=asuprimer.length;
	for(k=0;k<nbasuprimer;k++)
	{
		asuprimer[k].parentNode.removeChild(asuprimer[k]);
	}
}
var surliste=false;
window.onload = function() {
  setForm();
}
</script>
</head>
<body>
<span id="test">AVANT</span>:<br>
	<select id="something" name="something" title="1">
		<option value="1">This is option 1</option>
		<option value="2">This is option 2</option>
		<option value="3">This is option 3</option>
		<option value="4">This is option 4</option>
		<option value="5">This is option 5</option>
	</select>
	<select id="somethingelse" name="somethingelse" title="2">
		<option value="1">This is option 1</option>
		<option value="2">This is option 2</option>
		<option value="3">This is option 3</option>
	</select>
<div style="position:absolute;right:0px;top:0px;">
	<select id="somethingdone" name="somethingdone">
		<option value="1">This is option 1</option>
		<option value="2">This is option 2</option>
	</select>
</div>
<br>APRES:<br>
</body>
</html>

con concrètement tu va faire comment? un replace appliqué au innerHTML du body? avec des tas de Regex pour récupérer les attributs etc?
non... donc innerHTML!=DOM

PS: si jamais tu arrives a faire un script qui fait la même chose, compare les temps d'éxecution ... avec tes Regex ça va être marrant...

Tillertan

8 janvier 2009 à 21:06:36

Tu remarqueras que je n'ai jamais dit que innerHTML était pareil que les DOMs -_-''
Je me sert biensur des DOMs de temps en temps.

Moi je parle du cas ou tu crées un objet qui n'existait pas.

xavierm02

8 janvier 2009 à 21:08:38

bah la je les crée les div... et je vire les selects

Tillertan

8 janvier 2009 à 22:32:04

Citation : Trolltruc

bon... vu que t'as l'air de penser que innerHTML>DOM, je te mets au défit de refaire ce script SEULEMENT avec des innerHTML...

Echec, et Mat.

Citation : Pas de titre

PS: si jamais tu arrives a faire un script qui fait la même chose, compare les temps d'éxecution ... avec tes Regex ça va être marrant...

C'est effectivement assez marrant j'avoue

14 ms ton script, 6 ms le mien.
Edit: C'était que en local apparemment, la j'ai 7ms le mien, 8ms le tiens.
Edit²: 4ms le mien, 8ms le tiens sur mon fixe

<html>
<head>

</style>
<script type="text/javascript">


var lastAf = false;
function Aff(obj)
{
	//alert(obj);
	if (lastAf !== obj)
	{
		if (lastAf !== false)
			document.getElementById('select-' + lastAf).style.display = 'none';
		
		lastAf = obj;
		
		document.getElementById('select-' + obj).style.display = 'block';
	}
	else
	{
		lastAf = false;
		
		document.getElementById('select-' + obj).style.display = 'none';
	}
}


function Aff2(id, obj)
{
	document.getElementById('span-' + id).innerHTML = obj.innerHTML;
	document.getElementById(id).value = obj.innerHTML;
}

var af = 0;
function setForm()
{
	var timez = new Date();
	start = timez.getTime();
	//alert(start);
	var page = document.body.innerHTML;
	var selecs = [];
	var az = page.split('<select');
	
	delete(az[0]);
	
	for (var k in az)
	{
		regEx = new RegExp('id="(.*)"', '');
		var gt = regEx.exec(az[k]);
		var ty = gt[1].split('"');
		selecs.push(ty[0]);
		//alert(ty[0]);
	}
	
	//var az = regEx.exec(page);
	//alert(az[2]);
	
	//var selects = document.getElementsByTagName('select');
	
	//for (var i = 0; i < selects.length; i++)
	for (var i in selecs)
	{
		var tmpObj = document.getElementById(selecs[i]);
		var tmpId = tmpObj.id;
		var tmpName = tmpObj.name;
		var tmpTitle = tmpObj.title;
		var tmpInner = tmpObj.innerHTML.split('<');
		af++;
		
		if (tmpTitle == '')
			tmpTitle = 'Selectionnez une option';
		//alert('id="' + tmpId + '"(.*)style="(.*)"');
		var regEx = new RegExp('id="' + tmpId + '"(.*)style="([^"]*)"', 'g');
		var stylez = new Array('', '', '', '');
		if (regEx.test(page))
		{
			var regEx = new RegExp('id="' + tmpId + '"(.*)style="([^"]*)"', 'g');
			stylez = regEx.exec(page);
			//alert(stylez[2]);
		}
		
		
		var tmpContent = '<div id="div-' + tmpId + '" name="div-' + tmpName + '" style="height: 18px; width: 150px; text-align: center; float: left; border: 1px solid #000; position: relative; background: #FFFFFF; ' + stylez[2] + '" onclick="Aff(' + af + ')"><span id="span-' + tmpId + '">' + tmpTitle + '</span><br/>';
		tmpContent += '<div style="width: 150px; position: absolute; top: 18px; z-index: 4000; left: 0; display: none; background: #FFFFFF" id="select-' + af + '">';
		
		delete(tmpInner[0]);
		
		for (var k in tmpInner)
		{
			if (tmpInner[k].substr(0, 6) == 'option')
			{
				var tmpTruc = tmpInner[k].split('value="');
				var tmpVal = tmpTruc[1].split('"');
				var tmpValue = tmpVal[0];
				var tmpTruc = tmpInner[k].split('>');
				var tmpAff = tmpTruc[1];
				
				tmpContent += '<span onclick="Aff2(\'' + tmpId + '\', this)">' + tmpAff + '</span><br/>';
				
				//alert(tmpValue + "\r\n" + tmpAff);
				
			}
		}
		tmpContent += '</div></div><input type="hidden" name="' + tmpName + '" id="' + tmpId + '" value="" />';
		
		var regEx = new RegExp('<select(.*)id="' + tmpId + '"((.|\n)*)(</select>)', '');
		truc = regEx.exec(page);
		
		var result = '<select' + truc[1] + 'id="' + tmpId + '"' + truc[2] + '</select>';
		var azerty = result.indexOf('</select>', 0) + 9;
		var qsdfgh = result.substr(0, azerty);
		
		page = page.replace(qsdfgh, tmpContent);
	}
	document.body.innerHTML = page;
	
	var timez = new Date();
	end = timez.getTime();
	alert(end - start);
}

</script>
</head>
<body>
<span id="test">AVANT</span>:<br>
	<select id="something" name="something" title="1">
		<option value="1">This is option 1</option>
		<option value="2">This is option 2</option>
		<option value="3">This is option 3</option>
		<option value="4">This is option 4</option>
		<option value="5">This is option 5</option>
	</select>
	<select id="somethingelse" name="somethingelse" title="2">
		<option value="1">This is option 1</option>
		<option value="2">This is option 2</option>
		<option value="3">This is option 3</option>
	</select>
<div style="position:absolute;right:0;top:0;">
	<select id="somethingdone" name="somethingdone">
		<option value="1">This is option 1</option>
		<option value="2">This is option 2</option>
	</select>
</div>
<br>
<span onClick="setForm()">APRES: </span>
<br>
</body>
</html>

De plus mon script conserve les styles du select, genre position abolue, etc..
innerHTML > DOM

Le mien: http://tiller.fr/explorerUpload/Azerty.htm
Le tien: http://tiller.fr/explorerUpload/Qsdfgh.htm
Cliquez sur "Apres" pour effectuer le changement

Soit dit en passant aussi, mon script respect la disposition des anciens select au moins

Ps: J'ai fais ce code en même pas une heure, donc je sais qu'il n'est pas propre et qu'il y a des bug. Mais marche parfaitement pour l'exemple qu'il avait propose

Si jamais tu veux savoir pourquoi mon script est plus rapide c'est simple:
Avec tes fameux DOMs, tu réécris plein de fois dans le html, autant de fois qu'il y a de select et même plus.
Or, mon script lit la page, traite, puis écrit une seule fois.
J'aurais également pu l'accéléré en utilisant getElementByTagName mais j'ai préféré faire a la main car je me suis dit que tu considérais ça comme du dom~

Et j'ai pas d'erreur CSS dans la console de 'fox ;o

Edit de plusieurs mois apres: Osef de ça =°

Anonyme

9 janvier 2009 à 0:45:43

Vous battez pas je prépare un post, mais c'est un peu long avec tout ce que j'ai a y mettre…

Citation : Tiller

Nouveau débat !

Est-ce que l'écriture javascript simplifié change vraiment quelque chose niveau performance ou c'est que pour les yeux?

var truc = new Array();
var truc = new Array("Nesquik", "plus", "Lait", "Egale", "Miam");

function truc()
{
	this.bidul = function() { }
}

/******************/
/******* VS *******/
/******************/

var truc = [];
var truc = ({});
var truc = ({
	aliment1: "Nesquik",
	premiereOperation: "plus",
	aliment2: "Lait",
	secondeOperation: "Egale",
	resultat: "Miam"
});

var truc = {
	bidul = funcion() { }
}

yo. les "littéraux" sont exactement équivalent à new ObjetMachin();, c'est juste pour les yeux et ça limite les erreurs possible.

Pour la dernière fonction du premier bloc par contre attention, avec function truc () tu peux faire des choses que tu ne peux pas avec {truc:function ()}, dans le doute utilise le deuxième.

Pour eval c'est pas juste de la masturbation intellectuelle, il y a des considération de sécurité et d'optimisation, comme je l'ai dit, plus dans post qui arrive le plus vite possible.

( edit )
@Tiller : innerHTML != DOM tu peux pas comparer c'est ridicule. C'est comme comparer une cuisine avec un couteau…

Tillertan

9 janvier 2009 à 7:40:40

Je sais bien que innerHTML != DOM, je l'avais dis dans mon second post.

J'avais marqué ça dans l'euphorie d'avoir réussi son défi :-°

xavierm02

9 janvier 2009 à 10:03:44

ok... ton truk marche... mais les select obtenus sont spécialement moches

et personnellement, ça m'affiche 4 avec les 2... or moi il rajoute des images et des styles...(donc forcément surtout à cause des images, c'est ralenti ...).

Tillertan

9 janvier 2009 à 10:57:43

Les images n'ont aucun impacte sur la vitesse affiché--

Tu ne fais que rajouté du html sa ne ralentis rien.

Et bah, j'ai fais le mien en environ 1h donc ouai s'moche mais c'est adaptable.

Et, juste pour le fun, je l'ai améliorer:
http://tiller.fr/explorerUpload/Azerty2.htm

Le temps obtenu est plus long (pas beaucoup) que le tiens, mais :
- Il gère là 6 selects contre toi 3
- Il gère les class, les css par l'id (#truc{}), le css direct dans le code (style=""), l'absence de name="", l'absence de id=""
- Il gère les "select" dans les options
- Aucune erreur JS, ni CSS
- Les positions sont plutot bien respecté comparé au tiens ;o

Pour les mêms selects que moi, le tiens:
http://tiller.fr/explorerUpload/Qsdfgh2.htm
Temps beaucoup plus long, affichage non respecté.

Toi, au plus t'as de select, au plus le lag augmente vite.
Moi il n'augmente que légèrement

Avec ou sans image, cela ne change rien:
http://tiller.fr/explorerUpload/Azerty3.htm

Osef encore =°

xavierm02

9 janvier 2009 à 11:39:18

t'as bien testé tes 2 derniers liens?
le tien met 2 fois plus de temps...

EDIT
{
le tien mets plus de temps sous chrome
le mien mets plus de temps sous firefox
le tien marches pas sous safari(windows) ni sous ie
gné?
}

Tillertan

9 janvier 2009 à 12:04:00

Effectivement j'avais pas regardé ie et safari.

sa doit etre un truc de isInClass, je l'ai codé avec les pieds cette fonction

Nesk

9 janvier 2009 à 15:45:33

Vous trouvez pas que vous tournez un peu en rond là ? À mon avis vous n'arriverez pas à grand chose là :-°

Tillertan

9 janvier 2009 à 16:08:41

http://tillerfolio.fr/SdZ/green.htm

<< 1 2