Partage

FOIRE AUX QUESTIONS - ANNEXE

Contribuez

30 décembre 2008 à 13:53:04

Citation : Nesquik69

Un petit truc tout bête mais sur lequel certains débutants se plantent parfois :

Comment accéder à l'attribut class d'une balise ?

En Javascript, le mot class est déjà réservé, ce qui fait que l'on ne peut pas accéder à la classe d'une balise par ce moyen :
alert(document.getElementById('test').class);
Pour y avoir accès il faut utiliser le mot className :
alert(document.getElementById('test').className);

Chose bonne à savoir :

Lorsqu'on utilise DOM pour rajouter des noeuds, et que l'on veut rajouter un attribut class à un objet, les navigateurs ont deux manières de faire :
- pour FF (et autres) : node.setAttribute("class", "la classe");
- pour IE (et que lui je crois) : node.setAttribute("className", "la classe");
Pour parer à ce problème, plusieurs méthodes :
- utiliser .className, compatible sur tous les navigateurs : node.className = "la classe"))
(Google vous renseignera mieux que moi sur comment détecter la présende d'IE)
- pour rester dans "l'esprit" DOM, mettre les deux lignes, étant donné qu'elle ne produise pas d'erreur sur le navigateur non adapté :

node.setAttribute("class", "la classe"); //Pour FF et autres
node.setAttribute("className", "la classe"); //Pour IE

Citation : nod_

window c'est l'objet global, l'utiliser explicitement c'est un signe d'echec. Avoir autant de variable globales c'est uniquement chercher des problèmes.

Pour la question du "var" c'est trivial, tu ne fais pas
var tonObjet.variable = "truc";
// mais tout simplement 
tonObjet.variable = "truc";
on rajoute un membre à l'objet (quelque soit l'objet. "window" est un objet), on ne rajoute pas de variable au contexte parent, donc pas besoin de "var".
C'est une question de portée et de bon sens. Si tu avais un peu d'idée sur comment fonctionne les objets en javascript ça devrait être évident.

En passant le code de Timot fait peur à voir, mélanger les if avec parenthèses et sans parenthèses c'est du grand n'importe quoi et ça n'a rien a faire dans une FAQ déstinée aux débutants. Ça embrouille et ce sont des mauvaises pratiques. Autant les habituer directement aux bonnes.

Pour la question de la place de <script> c'est un non débat. Il doit être placé juste avant </body> et pas dans le <head> pour ne pas géner le chargement du html et du CSS. En plus ça permet d'éviter d'utiliser window.onload vu que le html est déja chargé quand le js l'est.

Ça part d'un bon sentiment, mais pour le moment ça part surtout n'importe où.

J'ai remarqué récemment qu'IE n'aimait pas l'absence d'accolades pour une seule instruction, je suis donc en train de le corriger dans tout mes scripts, ce qui ne m'empeche pas de continuer à penser que c'est plus lisible. D'ailleurs, en PHP, je continue à adopter ce genre d'écriture, car c'est indépendant du navigateur, mais pour le JS, par souci de compatibilité, je mettrais désormais les accolades

.
Pour le script de variables dynamiques, j'ai fait une erreur bête, merci de me l'avoir fait remarquer.
Pour ce qui est de l'utilisation de window, je n'encourage en rien son utilisation, cependant un débutant qui laisse encore trainer des variales globales peut avoir besoin de cette information, mais je suis d'accord pour dire que le globa, cay mal.
Pour ce qui est du placement de la balise script, il est vrai que le mieux est apparement de le mettre à la fin du body, cependant, si on fait ça et que l'utilisateur arrete le chargement de la page, est ce que le javascript est lu ?
(J'ai jamais encore mis mes scripts en bas de page, je vais testé ça

Anonyme

30 décembre 2008 à 14:24:21

les acolades c'est pas pour faire chier, mais ça facilite l'optimisation du code une fois le script fini, voir : http://developer.yahoo.com/yui/compressor/
qui a besoin de code clair et consistant pour ne pas tout niquer (et ce n'est pas par manque de fonctionalités de l'outil! c'est pas son role de bien programmer)

Plus lisible c'est discutable. Je trouve pas. Mon éditeur surligne les { } correspondants, et dans une certaine mesure je le fait automatiquement aussi. Ça m'aide énormément. Se reposer sur des raccourcis syntaxiques c'est le meilleur moyen de pleurer la prochaine fois qu'on edit le code.
De même il faut toujours mettre un ; (et pourtant le compilateur javascript le rajoute automatiquement si il n'y est pas. C'est pas une raison).

La détection du navigateur c'est le mal aussi. A ne pas faire, En plus d'être ultra compliqué à trouver correctement, cet entête est tout sauf fiable. il faut tester les méthodes disponibles plutot que supposer que l'on connait le navigateur (et si je fait passer mon FF pour IE? ça nique tout. Ça ne devrait pas, en aucun cas).

Pour régler ce problème de class rien de plus simple: element.className = "machin"; la seule approche simple et compatible (en plus d'être courte).

xavierm02

30 décembre 2008 à 14:56:30

le settimeout je savais pas...
le truk de l'attribut onclick je l'ai deja changé sur la version sur mon pc(ou celui de mes grand parents la en l'occurence) parce que c'est ca qui fait merder ie...

il y avait aussi Class ou il falait en mettre un 2eme avec className

xavierm02

1 janvier 2009 à 9:55:04

mon super script enfin fini (et qui marche avec ie contrairement à celui de nod_

)

<html>
<head>
<style type="text/css">
.liste{
	position:absolute;
	text-align:left;
	border:3px solid blue;
	white-space:nowrap;
	font:normal 12px verdana;
	display:none;
	background:#fff;
	z-index:100;
}
 
.liste a{
	border:1px solid blue;
	display:block;
	cursor:default;
	color:#000;
	text-decoration:none;
	background:#fff;
}
 
.liste a:hover{
	color:white;
	background-color:blue;
}
.aenlever
{
display:none;
}
.inputhidden
{
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>

Anonyme

1 janvier 2009 à 12:45:24

Mais lache l'affaire. eval() setTimeout() avec une chaine de caractère en paramètre.

On m'écoute vraiment pas ou quoi ?

Timot

1 janvier 2009 à 13:02:51

Je suis en train d'essayer de comprendre comment marche les closures, dans son code, on peut remplacer :

eval("newa.onclick=function(){validerliste('"+options[j].value+"', this.id,'"+obj.id+"');}");

Par :

newa.onclick = function(option, id, idObjet){
   return function() { validerliste(option.value, id, idObjet); };
}(options[j], this.id, obj.id);

C'est bien ça nod_ ?

Anonyme

1 janvier 2009 à 13:31:48

Yep, bien joué Timot.

Il faut faire comme ça sinon dans la boucle le i va toujours être le dernier index une fois la boucle finie. Comme JS attend le dernier moment pour executer le code et assigner les valeurs aux variables, il pense que tout les variable = i; ont la meme valeure de i. C'est "logique" mais pas ce qu'on veut

Pour lui faire comprendre que c'est ce i en question que l'on veut il faut qu'on le passe en paramètre d'une fonction, que l'on execute tout de suite (la JS prend la bonne valeur du i) et onclick a besoin d'une fonction, alors on retourne une fonction.

C'est chaud mais génial les closures

xavierm02

1 janvier 2009 à 13:33:39

le eval() je voit pas comment le remplacer... sinon les truk deviennent des variables... donc ça foire...
le setTimeOut j'ai zapé

le css pour que ça soit un peu moin moche

.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;
}

ok... j'ai remplacé... mais ton truk d'enlever les guillemets autour des setTimeOut c'est pas bon... enfin ça marche pas sans sous mon internet explorer...

Anonyme

1 janvier 2009 à 13:34:23

Timot t'as filé la réponse

xavierm02

1 janvier 2009 à 14:07:12

et le eval() est mieux que l'autre truk... parce que lui au moins il marche!

Timot

1 janvier 2009 à 14:22:16

Beh mon truc marche, j'ai juste oublié les parenthèses :

newa.onclick = (function(option, id, idObjet){
   return function() { validerliste(option.value, id, idObjet); };
})(options[j], this.id, obj.id);

EDIT : Pour rajouter et supprimer un événement proprement (càd en essayant d'utiliser les fonctions DOM W3C si le navigateur les supporte) :

//Pour rajouter un événement
function addEvent(obj_, event_, fct_) {
	if(obj_.addEventListener) {
		obj_.addEventListener(event_, fct_, true);	
	}
	else if(obj_.attachEvent && !(/this\./g.test(fct_.valueOf()))) {
		obj_.attachEvent('on' + event_, fct_);
	}
	else {
		obj_['on' + event_] = fct_;
	}
}

//Pour enlever un événement
function supprEvent(obj_, event_, fct_) {
	if(obj_.removeEventListener) {
		obj_.removeEventListener(event_, fct_, true);	
	}
	else if(obj_.detachEvent && !(/this\./g.test(fct_.valueOf()))) {
		obj_.detachEvent('on' + event_, fct_);
	}
	else {
		obj_['on' + event_] = null;
	}
}

Timot

2 janvier 2009 à 13:18:47

La fonction parse amélioré qui prend en compte les attributs et les balises auto-fermantes (version proposé par Golmote, que j'ai amélioré) :

function parse(object_, string_) {
	this.setAttributes = function(node, tableau){
		if(typeof tableau != "object" || tableau.toString() == "") return false;

		for(var j=0, item; item = tableau[j]; j++) {
			if(item == "") continue;
			item = item.split("=");
			var att = document.createAttribute(item[0]);
			att.nodeValue = item[1].substring(1, item[1].length-1);
			node.setAttributeNode(att);
		}
	};
	this.getAttributes = function(node){
		node = node.replace(/(<|>|\/)/g, "");
		return node.split(" ");
	};
	
	var regexBalise = new RegExp("(<[^>]+>)", "g");
	var regexBaliseFermante = new RegExp("<\/[^>]+>", "g");
	var regexBaliseAutoFermante = new RegExp("<[^>]+\/>", "g");
	
	if(!(regexBalise.test(string_))) {
		var str = document.createTextNode(string_);
		object_.appendChild(str);
	}
	else {
		var tableau = string_.split(regexBalise);
		var content = false, balise = false, tableau_att = false;
		for(var i=0, node; typeof (node = tableau[i]) != "undefined"; i++) {
			if(balise) {
				if(regexBaliseFermante.test(node) && node.substring(2,tableau[i].length-1) == balise) {
					var node = document.createElement(balise);
					this.setAttributes(node, tableau_att);
					object_.appendChild(node);
					parse(node, content);
					balise = false;
					content = false;
					tableau_att = false;
				}
				else {
					content += node;
				}
			}
			else if(regexBaliseAutoFermante.test(node)) {
				var tab = this.getAttributes(node);
				balise = tab.shift();
				var node = document.createElement(balise);
				this.setAttributes(node, tab);
				object_.appendChild(node);
				balise = false;
			}
			else if(regexBalise.test(node)) {
				content = "";
				tableau_att = this.getAttributes(node);
				balise = tableau_att.shift();
			}
			else if(node != ""){
				parse(object_, node);
			}
		}
	}
}

Ce code permet donc le remplacement de innerHTML en utilisant le DOM

Tuttu

27 janvier 2009 à 11:34:03

Petite info pratique sur la compatibilité Prototype et IE7 (non testé sur le 6, je ne l'ai pas)

Quand on utilise une fonction Ajax.Updater ou Ajax.PeriodicalUpdater et que l'on se trouve sous IE7, on connait tous le résultat. Rien ne s'affiche car IE va chercher dans son cache.
If faut donc ajouter ceci en haut de son code :

//Exemple 1676. Interdire la mise en cache avec header()
<?php
//http://fr.php.net/manual/fr/function.header.php
header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); // Date du passé
?>

Ce n'est pas toujours vrai. La façon dont est écrite la requête Updater est importante. En effet, le dernier éléments mis en paramètre dans la fonction NE doit PAS être suivi d'une virgule pour que le script fonctionne sous IE7. Un exemple ?

Ce code ne fonctionnera pas. En effet, il y a une virgule après le "onComplete".

function Exemple(Action)
{
	new Ajax.Updater(
		'Exemple',
		'Exemple.php',
		{
			method: 'get',
			parameters: 'Action='+Action+''
                        onComplete: Suite(),
		}
	);
	
}

En revanche ce code fonctionne car la virgule n'est pas présente.

function Exemple(Action)
{
	new Ajax.Updater(
		'Exemple',
		'Exemple.php',
		{
			method: 'get',
			parameters: 'Action='+Action+''
                        onComplete: Suite()
		}
	);
	
}

En espérant que ça servira.

cerium50

15 février 2009 à 22:53:50

Une question qui revient assez régulièrement...

Comment ajouter un lien "Imprimer cette page" ?

Il suffit de tester la méthode print, et d'afficher un lien, ou tout autre élément auquel on associe window.print() à l'événement onclick.

<p id="print"></p>

<script type="text/javascript">
//<![CDATA[
if(window.print) { //si le client connait la méthode print()
	document.getElementById('print').innerHTML = '<a href="#" onclick="window.print(); return false;">Imprimer cette page.</a>'; //on affiche un lien dans la balise qui a pour id 'print' et le tour est joué
	}	
//]]>
</script>

Comment inclure du javascript dans un document xHhtml et rester valide ?

Il faut dans ce cas utiliser les CDATA qui sont prévus à cet effet (ils permettent dans un document XML de ne pas interpréter le code entre ces balises), (le but de la méthode consistant à mettre des commentaires n'est pas la validité mais de masquer le code aux anciens navigateurs) :

<script type="text/javascript">
//<![CDATA[

/*tout plein de code javascript ici*/

//]]>
</script>

strucky

20 avril 2009 à 19:57:12

J'en reviens aux variables dynamiques.
http://www.siteduzero.com/forum-83-327 [...] html#r3280392

Je suis pas un pro du js, mais dans quel cas l'utilisation de variables dynamiques s'avère indispensable et sans alternative "propre" ?

Pour moi ce genre de truc est à proscrire de tout script.

Timot

20 avril 2009 à 20:20:23

C'est rare d'avoir besoin de l'utiliser, mais j'en ai besoin par exemple :

for(var i=1, img; i<=5; i++) {
	img = document.createElement("img");
	img.setAttribute("src", ICarte.aDossiers["images"] + ICarte.aDossiers["maps"] + "carte" + ICarte.id + "_c" + i + ".png");
	img.setAttribute("alt","couche n°"+i);
	ICarte["oCouche"+i] = ICarte.oCouches.appendChild(img);
	img.style.width = ICarte.width + "px";
	img.style.height = ICarte.height + "px";
	img.style.position = "absolute";
	img.style.top = "0px";
	img.style.left = "0px";
	img.style.zIndex = 10*i;
}

C
C'est un script de jeu ou j'ai différentes couches et je les initialise avec oCouche+i pour pouvoir ensuite utiliser oCouche1, oCouche2.
Remarque, si tu veux faire sans, tu peux faire un tableau oCouches[1], oCouches[2], ca marche aussi, mais je trouve ca moins clair.
C'est jamais totalement indispensable je pense, mais c'est bon à savoir

strucky

20 avril 2009 à 22:28:38

Oui, voilà, pour moi un array sera toujours plus propre que des variables dynamiques, surtout que c'est le but d'un array.

Enfin, chacun sa façon de voir.

lordofcastle

21 avril 2009 à 2:09:18

... Ca n'existe pas vraiment les variables dynamiques ce ne sont que les "attribut" des objets auxquels tu accèdes.
Dans ton cas tu as un objet ICarte.oCouche1, ICarte.oCouche2 ect
si tu veux si ca peut t'aider à comprendre ça reviendrai au même que de faire ça
(attention ligne à ne jamais utiliser !)

eval("ICarte.oCouche"+i);

Idem pour tes variables globales c'est juste des attributs du super objet window. !
Donc oui c'est propre d'accéder à l'attribut d'un objet avec les [].

Citation : Pas de titre

Oui, voilà, pour moi un array sera toujours plus propre que des variables dynamiques, surtout que c'est le but d'un array.

que tu fasses ca

var obj = {} ;
obj.toto = 'aa' ;
alert(obj['toto']);

ou ca

var arr = [] ;
arr['toto'] = 'aa' ;
alert(arr['toto']);

c'est exactement la même chose.
La seule difference c'est le premier herite de Object.prototype alors que le second hérite Array.prototype, ce qui lui confère un petit jeu de methode en plus (et l'attribut length)
Donc non ce n'est pas le but de l'array. Si tu fais un array sans utiliser ses méthodes ca n'a pas d'interet.
(d'ailleur on pourrait très bien faire meme si l'array s'y prete souvent mieux :

var numbers_object = {
    '0': 'zero',  '1': 'un',   '2': 'deux',
    '3': 'trois'
};

Anonyme

25 avril 2009 à 0:13:30

J'avais pas fait gaffe, mais il y a quelques petites choses qui ne devraient pas figurer dans la FAQ qui ont été rajoutés le 20 (à croire que je parle dans le vent d'ailleurs…)

Citation : cerium50

Une question qui revient assez régulièrement...

Comment ajouter un lien "Imprimer cette page" ?

Il suffit de tester la méthode print, et d'afficher un lien, ou tout autre élément auquel on associe window.print() à l'événement onclick.
<p id="print"></p>

<script type="text/javascript">
//<![CDATA[
if(window.print) { //si le client connait la méthode print()
	document.getElementById('print').innerHTML = '<a href="#" onclick="window.print(); return false;">Imprimer cette page.</a>'; //on affiche un lien dans la balise qui a pour id 'print' et le tour est joué
	}	
//]]>
</script>

Alors soit tu met <![CDATA[ ]]> soit tu met rien. Voir mon tuto dans la signature. L'association des deux c'est débile. De plus moi je code pas en vrai XHTML par défaut comme à peut près 99.9999% du web donc le CDATA porte à confusion plus qu'autre chose.
Ensuite window.print c'est vieux comme le monde, si javascript s'execute, alors la méthode print est présente.
Puis tu utilises une balise <a> pour faire la besogne. J'ai envie de dire : «il est ou le lien?» (on remarque le jeu de mot magnifique)

bref :

<p id="print"></p>

<script type="text/javascript">
document.getElementById('print').innerHTML = '<button type="button" onclick="window.print();">Imprimer cette page.</button>';
</script>

Et meme mieux puisqu'on est pas des sauvages :

<p id="print"></p>

<script type="text/javascript">
var boutton = document.createElement("button");
boutton.type = "button";
boutton.onclick = function () {window.print();};
boutton.appendChild(document.createTextNode("Imprimer"));
document.getElementById("print").appendChild(boutton);
</script>

Citation : cerium50

Comment inclure du javascript dans un document xHhtml et rester valide ?

Il faut dans ce cas utiliser les CDATA qui sont prévus à cet effet (ils permettent dans un document XML de ne pas interpréter le code entre ces balises), (le but de la méthode consistant à mettre des commentaires n'est pas la validité mais de masquer le code aux anciens navigateurs) :
<script type="text/javascript">
//<![CDATA[

/*tout plein de code javascript ici*/

//]]>
</script>

Les anciens navigateurs (le genre qui execute pas le javascript) ne font pas du XHTML. Pas de danger, pas besoin de le cacher. faut virer les // et lire mon tuto merde.

On est plus dans les années 90 bon sang.

Golmote

25 avril 2009 à 0:35:39

La révolte de nod_

(Je sens que t'as pas fini de gueuler à ce sujet... :-°

)

cerium50

25 avril 2009 à 10:30:13

@Nod_ : j'ai posté avant le tuto hein.

Et pour print j'en démord pas, tester la si la méthode print est présente est nécessaire !

Anonyme

25 avril 2009 à 13:57:05

oh oui excuse moi, je n'ai fait attention qu'a la date à laquelle a été rajouté le truc à la faq.

Pour print j'suis pas d'accord

c'est manifestement pas du code serveur donc c'est dispo. Le truc c'est encore plus vieux que getElementById (window.print «compatible Netscape Navigator 4. x» ; ça veut dire avant l'an 2000 ça!) que l'on utilise maintenant sans vergogne. Y'a moyen que ça soit présent…

Golmote

25 juin 2009 à 3:00:08

Citation : Timot

Quand y'en a plus, y'en a encore !
Voila la version définitive (du moins je l'espère ) de mon objet CSS qui est maintenant totalement compatible IE.
Et quelques nouvelles fonctionna litées :
- définir des propriétés seulement pour IE : CSS.Set("#ton élément", "IEmarginLeft", "10px"); Qui peut être très utile dans les problèmes avec les flottants (marge négatives nécessaires pour IE par exemple)
- on peut récupérer la vrai valeur d'une propriété. La valeur effective si vous préférez. Si vous avez mis une taille en % par exemple, avec CSS.GetRealValue("id d'un élément", "width") renverra la taille en pixel de l'élément (comme le offsetWidth mais pour toutes les propriétés). Attention, elle prend en paramètre l'idée d'un élément qui doit être existant un directement un élément mais il doit être existant dans la page et pas seulement défini les feuilles de style.

Voila le code :

/*########################################################
#############  Objet pour faciliter la gestion des feuilles de style en js ############
#########################################################*/
var isIE = navigator.userAgent.toLowerCase().indexOf('msie')!=-1;
var CSS = {
	/*############  Récupérer l'élément ##############*/
	Get: function (element_) {
		for(var i = document.styleSheets.length-1; i>=0; i--) {
			var rules = document.styleSheets[i].rules || document.styleSheets[i].cssRules;
			for(var j=0; j<rules.length; j++) {
				if(rules[j].selectorText == element_) { 
					return rules[j];
				}
			}
			return false;
		}
	},
	
	/*############  Récupérer le style d'un élément ##############*/
	GetStyle: function (element_) {
		return CSS.Get(element_).style;
	},
	
	/*########  Récupérer le style d'un élément version text ###########*/
	GetStyleText: function (element_) {
		return CSS.Get(element_).cssText;
	},
	
	/*########  Récupérer la valeur d'une propriété d'un élément ###########*/
	GetValue: function (element_, propriete_) {
		var rules = CSS.GetStyle(element_);
		if(!rules)
			return null
		if(rules.getPropertyValue){
			return rules.getPropertyValue(propriete_);
		}
		else {
			var prop = propriete_.replace(/\-([A-Z]{1})/g, "$1".toUpperCase());
			return rules[prop];
		}
	},
	
	/*########  Récupérer la valeur effective d'une propriété d'un élément ###########*/
	GetRealValue: function (element_, propriete_) {
		var element = (typeof element_ == "string")? document.getElementById(element_) : element_;
		if (element.currentStyle)
			return element.currentStyle[propriete_];
		else if (window.getComputedStyle)
			return document.defaultView.getComputedStyle(element, null).getPropertyValue(propriete_);
	},
	
	/*############  Changer le style d'un élément  ##############*/
	Set: function(element_, propriete_, value_) {
		var rules = CSS.GetStyle(element_);
		if(!rules) {
			CSS.Add(element_);
			rules = CSS.GetStyle(element_);
		}

		if(typeof propriete_ == "object") {
			for(propriete in propriete_) 
				CSS.SetProperty(rules, propriete, propriete_[propriete]);
		}
		else {
			var propriete = propriete_.replace(/^\s+/g,'').replace(/\s+$/g,'') 

			if(typeof value_ == "string") {
				CSS.SetProperty(rules, propriete, value_);
			}
			else {
				var tableau = propriete.split(/[:;]/);
				for(var i=0; 2*i < tableau.length; i++) {
					CSS.SetProperty(rules, rules_tableau[2*i], tableau[2*i+1]);
				}
			}
		}
	},
	
	/*############  Changer la valeur d'une propriété (compatibilité IE/FF)  ##############*/
	SetProperty: function(rules_, propriete_, value_, importance_) {
		var importance = (typeof importance == "string")? importance_ : "";
		var prop = propriete_.replace("_float", "float");
		if(rules_.setProperty && !((/^IE/g).test(prop))){
			prop = prop.replace(/([A-Z]+)/g, "-$1");
			prop = prop.toLowerCase();
			rules_.setProperty(prop, value_, importance);
		}
		else {
			if(((/^IE/g).test(prop))){
				if(!isIE)
					return false;
				else
					prop = prop.replace("IE", "");
			}	
			prop = prop.replace(/\-([A-Z]{1})/g, "$1".toUpperCase());
			rules_[prop] = value_ + importance;
		}
	},
	
	/*##########  Rajoute un élément  ############*/
	Add: function(element_) {
		var styleSheet = document.styleSheets[0];
		var rules = styleSheet.rules || styleSheet.cssRules;
		if(styleSheet.insertRule)
			styleSheet.insertRule(element_+" { }", rules.length);
		else if(styleSheet.addRule)
			styleSheet.addRule(element_, "{ }");
	},
	
	/*##########  Met tout les styles de l'élement à zéro ############*/	
	Clear: function(element_) {
		var text = CSS.GetStyleText(element_);
		text = text.substring(text.indexOf("{")+1, text.lastIndexOf("}"));
		var proprietes = text.split(/[:;]/);
		for(var j=0; 2*j < proprietes.length-1; j++) {
			CSS.Set(element_, proprietes[2*j], "");
		}
	},
	
	/*##########  Supprime l'élement de la feuille de style  ############*/		
	Delete: function(element_) {
		var rule = CSS.Get(element_);
		var parent = rule.parentStyleSheet;
		parent.deleteRule(rule);
	}
}

Remarque : vous pouvez utiliser votre propre variable isIE si vous avez déja une variable de ce type .

Bonne utilisation à tous .

Timot, j'ai étudié un peu ton code... et il restait beaucoup d'incompatibilités avec IE. Notamment dues au fait que ta regexp de transformation "a-b"->"aB" ne fonctionnait pas.

Bref, je l'ai un peu retravaillé.

/*########################################################
#############  Objet pour faciliter la gestion des feuilles de style en js ############
#########################################################*/
var isIE = navigator.userAgent.toLowerCase().indexOf('msie')!=-1;
var CSS = {
	/*############  Transforme une propriété de la forme "text-decoration" en "textDecoration" ##############*/
	PropertyIE: function(propriete_) {
		var prop = "";
		for(var i=0;i<propriete_.length;i++) {
		  if(propriete_.charAt(i)=="-") {
		    prop += propriete_.charAt(++i).toUpperCase();
		  } else {
		    prop += propriete_.charAt(i);
		  }
		}
		return prop;
	},
	
	/*############  Récupérer l'élément ##############*/
	Get: function (element_) {
		for(var i = document.styleSheets.length-1; i>=0; i--) {
			var rules = document.styleSheets[i].rules || document.styleSheets[i].cssRules;
			for(var j=0; j<rules.length; j++) {
				if(rules[j].selectorText == element_) { 
					return rules[j];
				}
			}
			return false;
		}
	},
	
	/*############  Récupérer le style d'un élément ##############*/
	GetStyle: function (element_) {
		return CSS.Get(element_).style;
	},
	
	/*########  Récupérer le style d'un élément version text ###########*/
	GetStyleText: function (element_) {
		return CSS.GetStyle(element_).cssText;
	},
	
	/*########  Récupérer la valeur d'une propriété d'un élément ###########*/
	GetValue: function (element_, propriete_) {
		var rules = CSS.GetStyle(element_);
		if(!rules)
			return null
		if(rules.getPropertyValue){
			return rules.getPropertyValue(propriete_);
		}
		else {
			var prop = CSS.PropertyIE(propriete_);
			return rules[prop];
		}
	},
	
	/*########  Récupérer la valeur effective d'une propriété d'un élément ###########*/
	GetRealValue: function (element_, propriete_) {
		var element = (typeof element_ == "string")? document.getElementById(element_) : element_;
		if (element.currentStyle) {
			var prop = CSS.PropertyIE(propriete_);
			return element.currentStyle[prop];
		} else if (window.getComputedStyle) {
			return document.defaultView.getComputedStyle(element, null).getPropertyValue(propriete_);
		}
	},
	
	/*############  Changer le style d'un élément  ##############*/
	Set: function(element_, propriete_, value_) {
		var rules = CSS.GetStyle(element_);
		if(!rules) {
			CSS.Add(element_);
			rules = CSS.GetStyle(element_);
		}

		if(typeof propriete_ == "object") {
			for(propriete in propriete_) 
				CSS.SetProperty(rules, propriete, propriete_[propriete]);
		}
		else {
			var propriete = propriete_.replace(/^\s+/g,'').replace(/\s+$/g,'') 

			if(typeof value_ == "string") {
				CSS.SetProperty(rules, propriete, value_);
			}
			else {
				var tableau = propriete.split(/[:;]/);
				for(var i=0; 2*i < tableau.length; i++) {
					CSS.SetProperty(rules, tableau[2*i], tableau[2*i+1]);
				}
			}
		}
	},
	
	/*############  Changer la valeur d'une propriété (compatibilité IE/FF)  ##############*/
	SetProperty: function(rules_, propriete_, value_, importance_) {
		var importance = (typeof importance == "string")? importance_ : "";
		var prop = propriete_.replace("_float", "float");
		if(rules_.setProperty && !((/^IE/g).test(prop))){
			prop = prop.replace(/([A-Z]+)/g, "-$1");
			prop = prop.toLowerCase();
			rules_.setProperty(prop, value_, importance);
		}
		else {
			if(((/^IE/g).test(prop))){
				if(!isIE)
					return false;
				else
					prop = prop.replace("IE", "");
			}
			var prop = CSS.PropertyIE(propriete_);
			rules_[prop] = value_ + importance;
		}
	},
	
	/*##########  Rajoute un élément  ############*/
	Add: function(element_) {
		var styleSheet = document.styleSheets[0];
		var rules = styleSheet.rules || styleSheet.cssRules;
		if(styleSheet.insertRule)
			styleSheet.insertRule(element_+" { }", rules.length);
		else if(styleSheet.addRule)
			styleSheet.addRule(element_, "{ }");
	},
	
	/*##########  Met tout les styles de l'élement à zéro ############*/	
	Clear: function(element_) {
		var text = CSS.GetStyleText(element_);
		var proprietes = text.split(/[:;]/);
		for(var j=0; 2*j < proprietes.length-1; j++) {
			CSS.Set(element_, proprietes[2*j].toLowerCase(), "");
		}
	},
	
	/*##########  Supprime l'élement de la feuille de style  ############*/		
	Delete: function(element_) {
		var rule = CSS.Get(element_);
		if(rule.parentStyleSheet && rule.parentStyleSheet.deleteRule) {
		  var parent = rule.parentStyleSheet;
		  parent.deleteRule(rule);
		} else {
		  var reg = new RegExp("\\"+element_+" {\\s*?.*?\\s*?}","g");
		  for(var i=0;i<document.styleSheets.length;i++) {
		    document.styleSheets[i].cssText = document.styleSheets[i].cssText.replace(reg,"");
		  }
		}
	}
}

Il ne supporte toujours pas les selecteurs multiples, et son comportement peut varier légèrement entre FF et IE.
(Notamment lors de la suppression d'un élément de la feuille de style. IE supprimera également l'élément quand il est présent avec un autre, contrairement à FF).
En gros, pour utiliser le script, il faut des feuilles de style simples

birdy42

26 février 2010 à 16:39:23

Vu le nombre de fois qu'on a vu cette demande, j'ai modifié un peu le script de Tiller pour effectuer sur un seul élément :

Comment afficher ou cacher un élément HTML en cliquant sur un lien (ou un bouton).

<div id="container">
 
<button type="button" onclick="return change('div1');">div 1</button>
<button type="button" onclick="return change('div2');">div 2</button>
<button type="button" onclick="return change('div3');">div 3</button>
<button type="button" onclick="return change('div4');">div 4</button>
 
<div id="div1" style="display:none;">
Blablabla 1
</div>
 
<div id="div2" style="display:none;">
Deuxième blabla
</div>
 
<div id="div3" style="display:none;">
Contenu du troisième
</div>
 
<div id="div4" style="display:none;">
Et un petit dernier
</div>
 
</div>
 
<script type="text/javascript">
function change(id) {
  var div = document.getElementById(id);
  if(div && div.style.display !== 'none'){
    div.style.display = "none";
  } 
  else{
    div.style.display = "";
  }
  return false; // Annule l'action du lien
}
 </script>

Golmote

26 février 2010 à 17:26:07

L'inverse ne serait-il pas plus logique ?

Vérifier si c'est ==="none", et si ça l'est, faire display="" ?

(Parce que là tu dis f*ck aux éléments inline... :-°

)

xavierm02

27 février 2010 à 10:58:35

Wao le vieux up :-°

Et pourquoi tu fais ça ?
Tu penses sérieusement que ceux qui n'arrivent pas à coder ça sauront adapter ton code ?
Je suis pas sûr...

Et si c'est pour la semaine verte, ba ça prend 30 sec de coder ça donc autant le refaire à chaque fois (en plus Golmote il kif refaire tout le temps la même chose :-°

).

Tiens au fait en relisant mes posts précédents, je me suis dis "mais qu'est-ce que j'étais noob ! Je comprenais même pas les closures o_O

Golmote

27 février 2010 à 11:16:23

Citation : xavierm02

Tiens au fait en relisant mes posts précédents, je me suis dis "mais qu'est-ce que j'étais noob ! Je comprenais même pas les closures ".

Normal.

Moi c'est la même quand je relis de vieux sujets où nod_ en vieux sage nous expliquant à nous petits n00bs (et tu en faisais partie, au même titre que moi et Nes' entre autres) comment fonctionnaient les 'classes' en JS, l'héritage étou étou... :honte:

Timot

27 février 2010 à 11:26:40

Ca dérive en post nostalgie la XD.
Comment on faisait pour coder sans closures ? o_O

xavierm02

27 février 2010 à 11:29:00

Citation : Timot

Comment on faisait pour coder sans closures ?

eval() :/

birdy42

27 février 2010 à 16:32:11

Pas vieux up voyons... j'me suis dit que ça donnerait bien dans la FAQ quoi

<< 1 2 3 4 >>