Discussion :

[denisC]

La FAQ Javascript est en ligne avec plus de 120 questions/réponses et en évolution constante.

http://javascript.developpez.com/faq/

Il vous est donc maintenant demandé de la consulter avant de poser une question sur le forum.

Vous pouvez également nous aider à la faire évoluer. Postez en enfilade ici vos questions/réponses correctement rédigées, ainsi que tout vos commentaires sur les questions existantes.

Merci

[SpaceFrog]

Nooooonnnn pas encore la grenouilllleeeeuuuuuu !!!!

Bon cette fois ci plutot que de la FAQ je viens vous proposer un ensemble de ChtruczéNastuces croisés au hasard de mes pérégrinations sur le web ...

Variables globales:
En partant du constat ques les variables globales sont des propriétés de la fenetre, on peut créer dynamiquement des variable !!!

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
function CreerVariableGlobale( NomVar, valeur )
 {
 	window[NomVar] = valeur;
 }
 
 CreerVariableGlobale( "voeux", "Bonne année 2005" )
 alert( voeux ); // Retournera "Bonne année 2005"

Raccourcissez votre code:
Combien de fois ai-je vu, poiur l'avoir fait moi même des codes du style

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
 function ModifierObjet( Obj )
 {
 	document.getElementById( Obj ).className = 'AutreCLass';
 	document.getElementById( Obj ).setAttribute( "title", "bla bla bla" );
 }

VOus allez vous économiser le bout des doigts et améliorer la lisibilité de votre code en adoptant désormais:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 function ModifierObjet( Obj )
 {
 	var MonObjet = document.getElementById( Obj );
 	with (MonObjet){
                                .className = 'blah';
                                .setAttribute( "alt", "new text" );
                                }
 }

L'utilité en devient rapidement évident si l'on augment les propriétés de l'objet à modifier...


De l'utilisation de setTimeout
Il paraîtrait que d'appeler un string en premier argument d'un setTimeout handicape les performance de ce dernier. Il serait bien plus performant d'appeler une focntion !!!

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

setTimeout( "mafonction(mesparamètres)", 5000 );

Devient

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

setTimeout( function() { mafonction(mesparamètres); }, 5000 );

et si le fonction ne comporte pas de paramètres:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

setTimeout( mafonction(); }, 5000 );

je n'ai jamais eu l'occasion de rester...

[Celelibi]

j'aimerais compléter ce qu'a dis SpaceFrog concernant les setTimeout.

lorsqu'on mets une chaine de caractère comme 1er argument, celle-ci devra être parsé pour être transformé en une fonction, mais le temps de parsing est quand même minime.

si l'expression dans le premier argument n'est pas une chaine de caractère, elle sera exécuté immadiatement sans attendre la fin du délais.
si le premier argument est une fonction déclaré comme spafy l'a montré ou déclaré comme l'exemple ci-dessous alors les arguments 3 à n seront les paramètres à passer à la fonction appellée.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
function bla (txt) {
  alert(txt)
}
setTimeout(bla, 2000, 'gnark');

[Celelibi]

Tien, un truc en rapport avec un post de SpaceFrog à placer dans les "trucs utiles à savoir".

Avant tout il faut savoir qu'une méthode d'un objet n'est ni plus ni moins qu'une propriété contenant une fonction, et tout ce que nous créons ne sont que des propriétés de certains objets.

Pour appeller une propriété prop d'un objet obj, la syntaxe naturelle (et la plus propre) est : obj.prop
Pour une raison ou une autre (à l'occasion d'une boucle for in par exemple) on peut avoir besoin de la syntaxe obj['prop'] qui est tout aussi correcte que la précédente.

Et ceci s'applique à n'importe quel objet quelque soit ses propriétés et ce qu'elles contiennent. Ce qui implique que l'on peut bien évidemment appeller une méthode de façon similaire.
obj.methode() <-- appel classique
obj['methode']() <-- appel moins conventionnel

Et pour finir il faut savoir que tous les objets javascript sont en fait des propriétés de l'objet window. Comme l'a dit SpaceFrog plus haut, on peut accéder aux variables globales de la façon window['nomVariable'], et bien sûr aussi de la façon window.nomVariable .
L'objet navigator, ainsi que tous les constructeurs préféfinis (String, Array etc...) et les fonctions simples, prédéfinis ou non n'échappent pas à cette règle.
Pour s'en convaincre il suffit de tester le code suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
alert(typeof window.navigator);
alert(typeof window.Array);
alert(typeof window.String);
alert(typeof window.escape);

À propos des collections :
Elles ne sont ni des objets, ni des Tableaux. Une collection est un ensemble de "pointeurs" généré automatiquement qui pointent vers différents objets de la page html. On y accède de la même façon qu'un tableau indexé.
exemple :
document.forms est une collection.
document.forms[0] est un élément de la collection.
Les collections étant générés autoatiquement, on ne peut pas les modifier directement, mais à travers eux, on peut modifier la page html.

[denisC]

Comment acceder aux valeurs des champs d'un formulaire?

• Texts, textareas et hidden
  
  

  Code :

  Sélectionner tout - Visualiser dans une fenêtre à part

  1
  2
   
  var user_input = document.forms[0].monChamp.value

  ou monChamp est le nom (name) de la balise HTML input de type text, textarea ou hidden.
  
  Changer cette valeur:
  

  Code :

  Sélectionner tout - Visualiser dans une fenêtre à part

  1
  2
   
  document.forms[0].monChamp.value = 'La nouvelle valeur';

• listes Select Simples
  
  

  Code :

  Sélectionner tout - Visualiser dans une fenêtre à part

  1
  2
  3
   
  var selectBox = document.forms[0].monSelect;
  var user_input = selectBox.options[selectBox.selectedIndex].value

  ou monSelect est le nom (name) de la balise HTML select.
  document.forms[0].monSelect.selectedIndex retourne le numéro de l'option selectionnée dans la liste des options de ce select.
  
  Pour modifier l'option selectionnée, on modifie le selectedIndex:
  

  Code :

  Sélectionner tout - Visualiser dans une fenêtre à part

  1
  2
   
  document.forms[0].monSelect.selectedIndex = 2;

  (pour selectionner la troisième option)
  
• listes Select Multiples
  
  Il faut vérifier élément par élément la valeur de l'attribut selected (comme pour des checkbox)
  

  Code :

  Sélectionner tout - Visualiser dans une fenêtre à part

  1
  2
  3
  4
  5
  6
  7
   
  var selectBox = document.forms[0].monSelect;
  for (var i=0; i<selectBox.options.length; i++) {
    if (selectBox.options[i].selected) {
      alert("l'option "+selectBox.options[i].value+" est selectionnée");
    }
  }

  ou monSelect est le nom (name) de la balise HTML select.
  
  Pour modifier l'etat d'une des options, on utilise sont attribut selected
  

  Code :

  Sélectionner tout - Visualiser dans une fenêtre à part

  1
  2
   
  document.forms[0].monSelect.options[i].selected = true/false;

• Checkboxes
  
  Pour les checkBox, l'approche est un peu différente. Nous connaissons déjà leur valeur, ce qui est important, c'est de savoir si l'utilisateur l'a cochée ou non. Pour cela, il y a la propriété checked qui peut valoir true ou false.
  

  Code :

  Sélectionner tout - Visualiser dans une fenêtre à part

  1
  2
  3
  4
  5
   
  if (document.forms[0].maCheckbox.checked)
  {
  var user_input = document.forms[0].maCheckbox.name
  }

  Si la checkbox est activée, nous prenons son name (ou sa value).
  
  Pour forcer l'activation d'une checkbox:
  

  Code :

  Sélectionner tout - Visualiser dans une fenêtre à part

  1
  2
   
  document.forms[0].checkbox.checked = true

• Radio buttons
  
  Malheuresement, il est impossible de savoir directement quel est le bouton actif. Il faut tous les parcourir, et retrouver celui qui est actif:
  

  Code :

  Sélectionner tout - Visualiser dans une fenêtre à part

  1
  2
  3
  4
  5
  6
  7
  8
   
  for (i=0;i<document.forms[0].mesRadios.length;i++)
  {
    if (document.forms[0].mesRadios[i].checked)
    {
      var user_input = document.forms[0].mesRadios[i].value;
    }
  }

  ou mesRadio est le nom (name) du groupe de balises input de type radio.
  
  Pour ectiver un bouton radio:
  

  Code :

  Sélectionner tout - Visualiser dans une fenêtre à part

  1
  2
   
  document.forms[0].radios[i].checked = true;

  (tous les autres seront bien sur automatiquement desactivés)

[Celelibi]

Comment faire communiquer PHP et JavaScript ?

Tout ce qui va être dit ici est généralisable à tous les langages serveur, et n'est pas limité à PHP.
Avant tout il faut savoir qu'aucune communication réelle entre PHP et JavaScript n'est possible. Le seul moment où le navigateur peut envoyer des informtions au serveur, c'est lorsqu'il effectue une requête et demande un fichier. Et le seul moment où le serveur peut faire parvenir des informations au navigateur, c'est lorsqu'il répond à une requête du navigateur et envoi un fichier.
Le protocole HTTP n'autorise aucune dérogation à cette règle.

Donc, comment faire communiquer PHP et JavaScript ?
PHP peut déclarer des variables JavaScript de façon assez simple car pour PHP, le HTML et le JavaScript sont traités de la même façon; ce n'est que du texte envoyé sur la sortie standard (qui se trouve être votre navigateur).
Voir Comment utiliser une variable PHP/ASP dans du javascript ?.
Toujours dans la communication serveur -> client, on peut vouloir récupérer des informations sans actualiser la page, car si on actualise la page, on perd toutes les variables préalablement déclarés. À ce propos, voir le message de javatwister ci dessus "Code permettant d'appeler des données serveur sans actualisation".
Mais il y a aussi un autre moyen prévu pour pouvoir effectuer une requête sur le serveur après que la page ait été chargée. Il s'agit de XMLHttpRequest. Voir la documentation de mozilla à ce propos XML Extras, et celle de msdn pour IE IXMLHttpRequest.

Pour la commulication client -> serveur, et bien toutes les technique cités ci-dessus ont nécéssités une requête du client sur le serveur, et bien il est possible d'envoyer des variables au serveur de cette façon.
Pour transmettre des variables dans l'url, il faut utiliser la méthode GET, qui s'utilise comme suit : fichier.php?var=foo&variable=bar&truc=machin

Il n'est pas possible d'effectuer des requêtes POST sans envoyer de formulaire, et donc sans raffraichissement de la page. La taille des url étant limité, pour transmettre un gros volume de données au serveur il faudra toujours envoyer un formulaire.

[javatwister]

lire un tableau associatif;
le scinder en deux tableaux (clé, valeur);

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
var table={"un":"truc", "deux":"bidule", "trois":"machin"};
var couple=[], couple2=[];
 
for (key in table){
	couple.push(key);
	couple2.push(table[key]);
}
 
alert(couple);
alert(couple2);

[javatwister]

Permettre au visiteur de choisir s'il veut activer javascript;

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<body>
 
<p>
<a href="?yes" title="Cliquez ici si vous êtes d'accord">Je veux activer javascript.</a>
</p>
 
<script type="text/javascript"> 
 
if(location.search){
	var censure=document.createElement("script");
	censure.setAttribute("src","fonctions.js");
	document.links[0].search="";
	document.links[0].firstChild.replaceData(3,12,"Je conchie");
	document.getElementsByTagName("body")[0].appendChild(censure);
}
 
</script>

sachant que "fonction.js" contient le javascript optionnel;


[édition Spafy]
suite à un troll, un nettoyage s'imposait, en résumé:

siddh a écrit:

Et un "Attention vous etes sur un navigateur qui ne respecte que 20% des standards, vous ne pourrez donc que consulter 20% du site a moins de télécharger un vrai navigateur" ?


La, je sens qu'on va tourner au Troll....

D'ailleurs pour avoir les précieux pourcentages:
http://www.webdevout.net/browser_support_summary.php

[/edition Spafy]

[SpaceFrog]

Comment limiter le contenu d'un textarea

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<textarea onkeydown="return(this.value.length>10)?false:true;" oncontextmenu="return(this.value.length>10)?false:true;" ></textarea>

pas très ergonomique pour modifier le texte une fois le max atteint ...
seule la touche del arrière fonctionne

[guidav]

Comment optimiser l'impression d'une page : imprimer sans valider, imprimer en paysage, retirer les en-tête et pieds de page ? (fonctionne sous IE uniquement a priori)

Pour faire un bouton d'impression sans que l'utilisateur ait besoin de valider en cliquant sur OK
Dans le <head>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<script id=clientEventHandlersJS language=javascript> 
<!-- 
 function Button1_onclick() 
 { 
  //cette fonction permet de déclencher l'impression sans validation
  WebBrowser.ExecWB(6,6); 
 } 
//--> 
</script>

et dans le <body>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<INPUT type="button" value="Imprimer" ID="Button1" NAME="Button1" onclick="return Button1_onclick()">

Pour modifier automatiquement les en-têtes et pieds de page, et changer l'orientation portrait/paysage de la feuille.
Il faut pour cela utiliser un contrôle activeX. Cet exemple concerne le contrôle scriptX, publié par la société MeadCo http://www.meadroid.com/scriptx/index.asp
Il est nécessaire que l'utilisateur installe le contrôle activeX (demander un déploiement à l'administrateur pour une application de type intranet).
Pour s'en servir, il faut mettre dans le <head> le code suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<object id=factory style="display:none"
 classid="clsid:1663ed61-23eb-11d2-b92f-008048fdd814"
 codebase="http://www.meadroid.com/scriptx/ScriptX6243314.cab#Version=6,2,433,14">
</object>
<script defer>
 function window.onload()
 {
  if (!factory.object) 
  {
   return
  } 
  else 
  {
   factory.printing.leftMargin = 1.0;
   factory.printing.topMargin = 1.0;
   factory.printing.rightMargin = 1.0;
   factory.printing.bottomMargin = 1.0;
   factory.printing.header = "Ma société - Page &p sur &P";
   factory.printing.footer = "";
   factory.printing.portrait = true;
   factory.printing.Print (false);
  }
  }
</script>

A noter : scriptX permet de nombreuses autres choses, mais le produit devient payant (et même très cher).

[supermanu]

Comment avoir 2 listes déroulantes liées avec prise en compte des identifiants

- Pourquoi ?

Avoir 2 listes déroulantes liées dans un formulaire est assez courant. Les éléments de la deuxième liste s'affichant en fonction de l'élément sélectionné dans la première.
Seulement il est souvent util de pouvoir construire ces listes à partir d'une base de données, en gardant les identifiants de la base de données qui pourront être utilisés ultérieurement.

Ce code crée donc un menu javascript dynamique qui peut être initialisé avec un code serveur (PHP, JAVA...)

- Comment ?

Dans un premier temps on crée un fichier listesLiees.js contenant le code suivant (ce code n'a pas besoins d'être modifié) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
 
function CreerMenu(profondeur,titre1,titre2) {
	this.nb=0;
	this.prof=profondeur;
	this.titre1=titre1; 
	this.titre2=titre2; 
	this.Add=AddObjet;
	this.Aff=AffMenu;
}
 
function AddObjet(deep,txt,id,idPere) {
	var rub = new Object;
	rub.deep=deep;
	rub.txt=txt;
	rub.id=id;
	rub.idPere=idPere;
	this[this.nb]=rub;
	this.nb++;
}
 
function AffMenu(nameListe1,nameListe2) {
	var Z="<SELECT size=1 name='"+nameListe1+"' onChange='Clic(this.form,\""+nameListe1+"\",\""+nameListe2+"\")'>\n<OPTION value=\"0\" selected>"+this.titre1+"</OPTION>\n";
	for (var i=0;i<this.nb;i++) {
		if (this[i].deep==1) {
			Z+="<OPTION value='"+this[i].id+"'>"+this[i].txt+"</OPTION>\n"
		}
	}
	Z+="</SELECT>\n";
 
	Z+="<SELECT name='"+nameListe2+"'>\n<OPTION value=\"0\">"+this.titre2+"</OPTION>\n</SELECT>\n";
	document.write(Z);
}
 
 
function ajouterElement(liste,texte,valeur) {
	var o=new Option(texte,valeur);
	liste.options[liste.options.length]=o;
}
 
function viderListe(uneListe) {
	uneListe.options.length=0;
}
 
function Clic(formulaire,nameListe1,nameListe2) {
	var objForm = formulaire;
	var liste1 = objForm.elements[nameListe1];
	var liste2 = objForm.elements[nameListe2];
 
	var idPapa = liste1.options[liste1.selectedIndex].value;
 
	//on vide la deuxième liste
	viderListe(liste2);
 
	//on rempli la deuxième liste
 
	if(idPapa == 0) {
		ajouterElement(liste2,menu.titre2,0);
	}
	else {
		for (var i=0;i<menu.nb;i++) {
			if(menu[i].deep==2 && menu[i].idPere==idPapa) {
				ajouterElement(liste2,menu[i].txt,menu[i].id);
			}
		}
	}
}

Puis on s'inspire de l'exemple ci-dessous :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
<html>
	<head>
		<title>Listes déroulantes liées</title>
	<script language="JavaScript" src="listesLiees.js" type="text/javascript"></script>
	<script language="JavaScript">
 
		// CreerMenu(Nb de listes, titre1, titre2)
		// Les 2 titres sont obligatoires
		var menu=new CreerMenu(2,"--Liste 1--","--Liste 2--");
 
 
		//permet de parametrer les différentes listes
		//menu.Add(niveau,libellé,identifiant,identifiantPere);
		//pour les éléments du premier niveau on met identifiantPere=0
		menu.Add(1,"Internet",5,0);
			menu.Add(2,"Création de sites",51,5);
			menu.Add(2,"Graphismes",66,5);
			menu.Add(2,"Hébergement",53,5);
 
		menu.Add(1,"Matériel",7,0);
			menu.Add(2,"Documentation",71,7);
			menu.Add(2,"Enchères",100,7);
			menu.Add(2,"Fabricants",41,7);
 
	</script>
</head>
 
<body>
 
<h1>Listes déroulantes liées</h1>
<form name="monForm">
<script language="JavaScript">
	/* on passe en paramètre le name de la première et de la deuxième liste */
	menu.Aff('nameListe1','nameListe2');
</script>
</form>
 
</body>
</html>

Comme on peut le constater, il suffit de :

1. Définir les titres des 2 listes : var menu=new CreerMenu(2,"--Liste 1--","--Liste 2--");
2. Définir les name des select : menu.Aff('nameListe1','nameListe2');
3. Initialiser le menu : menu.Add(1,"Internet",5,0);
   menu.Add(2,"Création de sites",51,5); ...
   (Ce qui est généralement fait à partir de données provenant d'une BDD)

- Avantage ?
Une fois les 2 listes affichées, on a, pour les deux listes la concordance entre le libellé et sa value (=identifiant en base de données).
En soumettant le formulaire on peut ainsi récupérer ces identifiants et s'en servir efficacement.

[crazydiver_e2]

...Il existe bien sur le bouton "reset"

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="reset" />

Mais dans le cas d'un formulaire ayant été soumi et pour lequel les choix sont conservés, ce bouton est inefficace

Voici la fonction que j'utilise : (testée sous IE 6.0 et FF 1.5)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
//Dé-sélectionner les différents champs de saisie d'un formulaire. Tous les éléments doivent avoir un id unique.
function reInitFormulaire(formulaire){
	var frm = eval("document."+ formulaire);
	var long =  frm.length;
	for(i=0; i<long ; i++){
		var typeElement = frm.elements[i].type;
		var element = document.getElementById(frm.elements[i].id);
	//alert(typeElement + "\n" + document.getElementById(frm.elements[i].id).id);
		switch(typeElement){
			case "checkbox":
			case "radio":
				if(element.checked == true){
					element.checked = false;
				}
			break;
			case "file":
			case "text":
			case "textarea":
				if(element.value != ''){
					element.value = '';
				}
			break;
			case "select-multiple":
			case "select-one":
				for(yo=0;yo<element.length;yo++){
					if(element.options[yo].selected == true){
						element.options[yo].selected = false;
					}
				}
			break;
		}
	}
}

Appel, par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="javascript:reInitFormulaire('Nom_du_formulaire');">R&eacute;initialiser le formulaire</a>

[SpaceFrog]

Question récurrente s'il en est , comment debugguer un javascriptscript sous IE

http://www.microsoft.com/downloads/d...n&Hash=4VP8FTC

[Eric Berger]

Question récurrente s'il en est , comment debugguer un javascriptscript sous IE

http://www.microsoft.com/downloads/d...n&Hash=4VP8FTC

A l'époque j'utilisais ça, mais là je viens d'essayer et ie me fait une alerte sécurité, même si je laisse tout ouvert....
Si c'est que chez moi, ça vaudrait le coup d'ajouter je pense...
http://www.microsoft.com/windows/ie/...devaccess.mspx
ajoute "document tree" dans le menu outils

[SpaceFrog]

Jusqu'à présent sauf à utiliser une police à espacement constant dont on connaissait la largeur d'un caractère, il était difficile de calculer la largueur qu'occuperait une chaine de caractères à l'écran ...

Ce temps est révolu, la grenouille de l'espace vous apporte sa solution ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<script type='text/javascript'>
function textWidth(mytext){
var testdiv=document.getElementById('test')
testdiv.innerHTML=mytext
return document.getElementById('test').offsetWidth +"px"
}
</script>
</head>
 
<body>
<div id="test" style="display:inline;visibility:hidden;position:absolute;z-index:100;"></div>
<input type='text' id='saisie' />
<input type='button' onclick="alert(textWidth(document.getElementById('saisie').value))" value='largeur pixels' />
</body>
</html>

[FremyCompany]

Bien sur tout le monde connait window.print qui permet d'imprimer le contenu de la page courrante... Je vous propose ici une piste simple à mettre en oeuvre pour imprimer facilement du HTML à la volée :
1/ Une iframe invisible ayant pour page print.html (visibility: hidden; display: none; left: -500px; top: -500px)
2/ Dans cet iframe (print.html) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
  <head><title>Print Zone</title></head>
  <body>
   <script>
    var Printer=new Object();
    Printer.Print=function (HTML) { 
        var win = window.open("")
        window.focus();
        win.document.title="Apercu de l'impression en cours";
        win.document.body.innerHTML=HTML;
        win.print();
        win.close();
    }
    window.top.Printer=Printer;
    // Utilisation, partout dans toutes les frames, iframes, page mère, etc // window.top.Printer.Print('Image selectionnée :<br /><img src="img01.gif" />')
   </script>
  </body>
</html>

[FremyCompany]

Voici une boite de texte numérique qui s'auto-corrige durant la frappe et sur onchange. La valeur retournée est toujours un nombre conforme à la syntaxe W3C/EMCScript.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<html>
    <head>
        <title>Number TextBox in JavaScript</title>
    </head>
    <body>
        <script type="text/javascript">
CreateNumericTextBox = function(attributes) {
    var tb=document.createElement("input");
    var div=document.createElement("div");
    tb.setAttribute("type","text");
    tb.setAttribute("value","0");
    for (key in attributes) {
        tb.setAttribute(key, attributes[key]);
        if (key == "id") {
            tb.id=attributes[key];
        }
        else if (key == "name") {
            tb.name=attributes[key];
        }
        else if (key == "value") {
            tb.value=attributes[key];
        }
    }
    tb.setAttribute("onkeyup","NumericTextBox_OnKeyUp(this)");
    tb.setAttribute("onchange","NumericTextBox_OnChange(this)");
    tb.setAttribute("onblur","this.onchange()");
    div.appendChild(tb);
    document.write(div.innerHTML);
}
 
NumericTextBox_OnChange=function(obj) {
   NumericTextBox_OnKeyUp(obj)
   if (obj.value.charAt(obj.value.length-1)==".") {
      obj.value=obj.value.substr(0,obj.value.length-1);
   }
   else if (obj.value=="-") {
    obj.value="0";
   }
   while (obj.value.length > 0 && obj.value.charAt(0)==0 && obj.value.charAt(1) != ".") {
    obj.value=obj.value.substr(1);
   }
   obj.value = ((obj.value.length==0) ? ('0') : (obj.value));
   obj.value = "" + parseFloat(obj.value.replace(",",".")) + "";
}
NumericTextBox_OnKeyUp=function(obj) {
   var virgule=false;
   var min=false;
   var oldvalue=obj.value;
   var newvalue="";
   for (var i=0; i<oldvalue.length; i++) {
      if (i==0 && (oldvalue.charAt(i) == "-") && !min) {
         newvalue+="-";
         min=true;
      }
      else if ((oldvalue.charAt(i) == "," || oldvalue.charAt(i) == ".") && !virgule) {
         if (i==0 || (i==1 && min)) {
            newvalue+="0";
         }
         newvalue+=".";
         virgule=true;
      }
      else if (!isNaN(parseInt("" + oldvalue.charAt(i) + ""))) {
         newvalue+=oldvalue.charAt(i)
      }
   }
   if (oldvalue!=newvalue) {
      obj.value=newvalue;
   }
}
/* TEST */
CreateNumericTextBox({"id":"tb1"})
        </script>
    </body>
</html>

[FremyCompany]

Pourquoi mon script JS ajouté à ma page avec innerHTML (AJAX, XSLT, ...) ne marche-t-il pas ?
De même que :
Pourquoi mes ID, Name, Class, ... ajoutés à ma page avec innerHTML (AJAX, XSLT, ...) ne marche-t-il pas correctement sur tous les navigateurs ?
Fonctions non prévues par les navigateurs...

Solution :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
    // SetInnerHTML Sécurisé
    function setInnerHTML(divContent, HTML) {
      divContent.innerHTML=HTML; 
      var All=divContent.getElementsByTagName("*");
      for (var i=0; i<All.length; i++) {
        All[i].id=All[i].getAttribute("id")
        All[i].name=All[i].getAttribute("name")
        All[i].className=All[i].getAttribute("class")
      }
      var AllScripts=divContent.getElementsByTagName("script")
      for (var i=0; i<AllScripts.length; i++) {
         var s=AllScripts[i];
         if (s.src && s.src!="") {
            // Précédement asynchrone, mis en synchrone pour éviter des problèmes de dépendances de scripts
            eval(getFileContent(s.src))
         }
         else {
            eval(s.innerHTML)
         }
      }
    }
 
    // Renvoie le texte de l'objet ActiveXObject le plus récent depuis une liste
    var pickRecentProgID = function (idList){
	    // found progID flag
        var bFound = false;
        for(var i=0; i < idList.length && !bFound; i++){
            try{
                var oDoc = new ActiveXObject(idList[i]);
                o2Store = idList[i];
                bFound = true;
            }catch (objException){
                // trap; try next progID
            };
        };
        if (!bFound)
		    throw ("Aucun ActiveXObject n'est valide sur votre ordinateur, pensez à mettre à jour votre navigateur");
        idList = null;
        return o2Store;
    }
 
    // Retourne un nouvel objet XmlHttpRequest
    var GetXmlHttpRequest_AXO=null
    var GetXmlHttpRequest=function () {
	    if (window.XMLHttpRequest) {
		    return new XMLHttpRequest()
	    }
	    else if (window.ActiveXObject) {
		    if (!GetXmlHttpRequest_AXO) {
			    GetXmlHttpRequest_AXO=pickRecentProgID(["Msxml2.XMLHTTP.5.0", "Msxml2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"]);
		    }
		    return new ActiveXObject(GetXmlHttpRequest_AXO)
	    }
	    return false;
    }
 
    function getFileContent(url) {
       var Xhr=GetXmlHttpRequest();
       Xhr.open("GET",url,false);
       Xhr.send(null);
       return Xhr.responseText;
    }

Ca ne pose qu'une seule contrainte au niveau des script (JS) :
pour déclarer une fonction, ne pas faire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

function MaFunc() {}

mais bien

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

MaFunc=function() {}

Quelle est la différence entre ces deux déclarations ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

function X() {}

MODE STATIQUE:
Valide dans le contexte actuel (la fonction qui contient le eval)
Si le eval n'est pas contenu par une fonction, tout est déclaré en mode global

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

X=function() {}

MODE VARIABLE:
valide dans le contexte navigateur (mode global)

Pour terminer ce petit exposé, je dirais juste :

efin, ca dépend des navigateurs...

[FremyCompany]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<html>
    <body>
        <script>
function transfert(s1,s2) {
    for (var i=0; i<s1.options.length; i++) {
        if (s1.options[i].selected) {
            try { // FireFox
                s2.options[s2.options.length]=(s1.options[i]);
            } catch (ex) { // IE
                var o=s1.getElementsByTagName("option")[i];
                s2.appendChild(o.cloneNode(true))
                s1.removeChild(o)
            }
        }
    }
}
        </script>
        <table border="0" cellpadding="0" cellspacing="0" style="width: 100%; boder: 0px none transparent;">
            <tbody>
                <tr>
                    <td style="text-align: right; width: 50%">
                        <select id="slc1" size="10" style="width: 100%">
                            <option>slc1_1</option>
                            <option>slc1_2</option>
                            <option>slc1_3</option>
                            <option>slc1_4</option>
                            <option>slc1_5</option>
                        </select>
                    </td>
                    <td style="text-align: center; width: 160px">
                        <input type="button" value="Add -->" style="width: 150px" onclick="transfert(document.getElementById('slc1'),document.getElementById('slc2'))" /><br />
                        <div style="display: inline">&nbsp;&nbsp;<input type="button" value="<-- Remove" style="width: 150px" onclick="transfert(document.getElementById('slc2'),document.getElementById('slc1'))" />&nbsp;&nbsp;</div>
                    </td>
                    <td style="text-align: left; width: 50%">
                        <select id="slc2" size="10" style="width: 100%">
                            <option>slc2_1</option>
                            <option>slc2_2</option>
                            <option>slc2_3</option>
                            <option>slc2_4</option>
                            <option>slc2_5</option>
                        </select>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

[Commodore]

On ne peut pas faire un scroll horizontal dans une Selectbox en html. Cependant, il existe un moyen d'émuler ce type de Selectbox :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<html>
<head>
  <title>Horizontal scroll bar dans un select box</title>
  <script language="javascript">
   //Scrolling sur DIV
   function OnDivScroll()
   {
    var liste = document.getElementById("liste");
    //horizontal scrolling: Pour éviter un scroll vertical quand la taille de la selectbox est 8 et le compte des items est plus grand
    //vertical scrolling: Pour voir tous les items de la selectbox
 
    //Vérifie si les items sont plus que 8, et mettre la taille de la select en conséquence
    if (liste.options.length > 8)
    {
     liste.size=liste.options.length;
    }
    else
    {
     liste.size=8;
    }
   }
 
   function OnSelectFocus()
   {
    if (document.getElementById("divListe").scrollLeft != 0)
    {
     document.getElementById("divListe").scrollLeft = 0;
    }
 
    var liste = document.getElementById('liste');
    if( liste.options.length > 8)
    {
      liste.focus();
      liste.size=8;
    }
   }   
  </script>
</head>
<body MS_POSITIONING="GridLayout">
  <form id="Form1" method="post" runat="server">
   <table cellpadding="0" cellspacing="0" border="0" align=center>
    <tr>
     <td>
      <asp:Label Runat=server ID="Label2"> Liste :</asp:Label>
     </td>
    </tr>
    <tr>
     <td>
      <br>
      <SELECT size="9" multiple style="WIDTH: 300px">
       <OPTION>Item 1</OPTION>
       <OPTION>Item 2</OPTION>
       <OPTION>Item 3</OPTION>
       <OPTION>Item 4</OPTION>
       <OPTION>Item 5</OPTION>
       <OPTION>Item 6</OPTION>
       <OPTION>Item 7</OPTION>
       <OPTION>Item 8</OPTION>
       <OPTION>Item 9</OPTION>
       <OPTION>Item 10</OPTION>
      </SELECT>
     </td>
    </tr>
    <tr>
     <td>
      <br>
      <hr>
      <br>
      <asp:Label Runat=server ID="Label1"> Liste :</asp:Label>
     </td>
    </tr>
    <tr>
     <td>
     <br>
      <div id="divListe" style="OVERFLOW: auto;WIDTH: 304px;HEIGHT: 147px"
       onscroll="OnDivScroll();">
       <SELECT id="liste" size="8" multiple onfocus="OnSelectFocus();">
        <OPTION>Item 1</OPTION>
        <OPTION>Item 2</OPTION>
        <OPTION>Item 3</OPTION>
        <OPTION>Item 4</OPTION>
        <OPTION>Item 5</OPTION>
        <OPTION>Item 6</OPTION>
        <OPTION>Item 7</OPTION>
        <OPTION>Item 8</OPTION>
        <OPTION>Item 9</OPTION>
        <OPTION>Item 10</OPTION>
       </SELECT>
      </div>
     </td>
    </tr>
   </table>
  </form>
</body>
</html>