Version imprimable
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
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 !!!
Raccourcissez votre code:Code:
2
3
4
5
6
7
8
Combien de fois ai-je vu, poiur l'avoir fait moi même des codes du style
VOus allez vous économiser le bout des doigts et améliorer la lisibilité de votre code en adoptant désormais:Code:
2
3
4
5
6
L'utilité en devient rapidement évident si l'on augment les propriétés de l'objet à modifier...Code:
2
3
4
5
6
7
8
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 !!!
DevientCode:setTimeout( "mafonction(mesparamètres)", 5000 );
et si le fonction ne comporte pas de paramètres:Code:setTimeout( function() { mafonction(mesparamètres); }, 5000 );
je n'ai jamais eu l'occasion de rester...Code:setTimeout( mafonction(); }, 5000 );
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:
2
3
4
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:
2
3
4
À 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.
Comment acceder aux valeurs des champs d'un formulaire?
- Texts, textareas et hidden
ou monChamp est le nom (name) de la balise HTML input de type text, textarea ou hidden.Code:
2
Changer cette valeur:
Code:
2
- listes Select Simples
ou monSelect est le nom (name) de la balise HTML select.Code:
2
3
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:
(pour selectionner la troisième option)Code:
2
- listes Select Multiples
Il faut vérifier élément par élément la valeur de l'attribut selected (comme pour des checkbox)
ou monSelect est le nom (name) de la balise HTML select.Code:
2
3
4
5
6
7
Pour modifier l'etat d'une des options, on utilise sont attribut selected
Code:
2
- 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.
Si la checkbox est activée, nous prenons son name (ou sa value).Code:
2
3
4
5
Pour forcer l'activation d'une checkbox:
Code:
2
- 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:
ou mesRadio est le nom (name) du groupe de balises input de type radio.Code:
2
3
4
5
6
7
8
Pour ectiver un bouton radio:
(tous les autres seront bien sur automatiquement desactivés)Code:
2
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.
:arrow: lire un tableau associatif;
:arrow: le scinder en deux tableaux (clé, valeur);
Code:
2
3
4
5
6
7
8
9
10
:arrow: Permettre au visiteur de choisir s'il veut activer javascript;
sachant que "fonction.js" contient le javascript optionnel;Code:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
[édition Spafy]
suite à un troll, un nettoyage s'imposait, en résumé:
[/edition Spafy]Citation:
Envoyé par DenisC
Comment limiter le contenu d'un textarea
pas très ergonomique pour modifier le texte une fois le max atteint ...Code:<textarea onkeydown="return(this.value.length>10)?false:true;" oncontextmenu="return(this.value.length>10)?false:true;" ></textarea>
seule la touche del arrière fonctionne
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>
et dans le <body>Code:
2
3
4
5
6
7
8
9
Pour modifier automatiquement les en-têtes et pieds de page, et changer l'orientation portrait/paysage de la feuille.Code:<INPUT type="button" value="Imprimer" ID="Button1" NAME="Button1" onclick="return Button1_onclick()">
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 :
A noter : scriptX permet de nombreuses autres choses, mais le produit devient payant (et même très cher).Code:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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é) :
Puis on s'inspire de l'exemple ci-dessous :Code:
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
Comme on peut le constater, il suffit de :Code:
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
- Définir les titres des 2 listes : var menu=new CreerMenu(2,"--Liste 1--","--Liste 2--");
- Définir les name des select : menu.Aff('nameListe1','nameListe2');
- 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.
...Il existe bien sur le bouton "reset"
Mais dans le cas d'un formulaire ayant été soumi et pour lequel les choix sont conservés, ce bouton est inefficace :lol:Code:<input type="reset" />
Voici la fonction que j'utilise : (testée sous IE 6.0 et FF 1.5)
Appel, par exemple :Code:
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
Code:<a href="javascript:reInitFormulaire('Nom_du_formulaire');">Réinitialiser le formulaire</a>
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....Citation:
Envoyé par SpaceFrog
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
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:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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:
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>
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 :
Ca ne pose qu'une seule contrainte au niveau des script (JS) :Code:
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
pour déclarer une fonction, ne pas faire :mais bienCode:function MaFunc() {}
Quelle est la différence entre ces deux déclarations ?Code:MaFunc=function() {}
MODE STATIQUE:Code:function X() {}
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
MODE VARIABLE:Code:X=function() {}
valide dans le contexte navigateur (mode global)
Pour terminer ce petit exposé, je dirais juste :;)Citation:
efin, ca dépend des navigateurs...
Code:
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"> <input type="button" value="<-- Remove" style="width: 150px" onclick="transfert(document.getElementById('slc2'),document.getElementById('slc1'))" /> </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>
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:
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