Appel d'une fonction dans un document.write

Invité · 21/05/2011, 21h00

Bonjour,

Sans rentrer dans les détails du pourquoi de ma question, est-il possible de passer une fonction X(parametre) dans la fonction write() ?
Vous me direz "Mais pourquoi utiliser write() pour faire ca ?!!?"

Eh bien ca prendrait pas mal de temps à expliquer. Peut-être trouverais-je un autre moyen en refléchissant cette nuit (!) mais en attendant :

Code :

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

document.write("X(", parametre, ")");

ne produit bien évidemment pas ce que je veux puisque parametre, une fois passée dans le write(), se retrouve "stringé", ce qui me gêne, car parametre n'est pas de type string à l'origine

Est-ce que c'est vraiment ingérable ? Si oui, une proposition ? Sinon, une (autre) proposition ?

Merci

**Bovino** · 21/05/2011, 21h39

Mouais... c'est vraiment tordu comme façon de faire et franchement, c'est assez crade (mais vu que tu ne dis pas pourquoi tu tiens à cette méthode, difficile de t'en conseiller une meilleure)...

Bref, write() sert à insérer du code HTML, il faut donc passer par

Code :

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

document.write('<script type="text/javascript">X('+parametre+')</script>');

**Tsilefy** · 23/05/2011, 00h09

Pourquoi ne pas encapsuler document.write dans une fonction? Tu en fais ce que tu veux après.

**RomainVALERI** · 23/05/2011, 09h31

Envoyé par rzawutang44

... Sans rentrer dans les détails du pourquoi de ma question, est-il possible de passer une fonction X(parametre) dans la fonction write() ?
Vous me direz "Mais pourquoi utiliser write() pour faire ca ?!!?"

Eh bien ca prendrait pas mal de temps à expliquer. Peut-être trouverais-je un autre moyen en refléchissant cette nuit (!) mais ...

...pour ma part je suis presque certain qu'il y a une erreur de conception quelque part "en amont" qui t'oblige à passer par ce montage impie (

).

Même si ça te semble tordu, montre-nous dans quel contexte ça s'insère et je suis sûr qu'on trouvera un moyen de ~~sauver ton âme ( !)~~ rationnaliser ce passage

**sekaijin** · 23/05/2011, 10h57

NE PAS UTILISER document.write

Code :

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

1
2
3
4
var script = document.createElement('script');
script.setAttribute("type","text/javascript");
script.append(document.createTextNode('X(' + parametre + ')' );
document.body.append(script);

A+JYT

**Bovino** · 23/05/2011, 11h09

+1 sekaijin

Sinon, tu peux aussi remplacer

Code :

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

script.appendChild(document.createTextNode('X(' + parametre + ')' ));

par

Code :

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

script.text = 'X(' + parametre + ')';

Invité · 23/05/2011, 13h50

Alors, il s'agit d'un simulateur (à la volée) de moyenne universitaire, que j'ai programmé et que j'"intègre" dans le CMS que j'utilise, Spip.

Pour ceux qui connaissent un peu le concept de squelettes Spip, la partie qui permet de lancer le code javascript est, dans le fichier article.html :

Code :

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

1
2
3
4
5
6
<B_simulation>
  <BOUCLE_simulation(MOTS){id_article}{titre=simulation}>
  <INCLURE{fond=simulation/simulation}>
  </BOUCLE_simulation>
  </B_simulation>
<//B_simulation>

ce qui permet de limiter l'inclusion du code javascript au seul article qui porte le mot cle 'simulation'

Le contenu du fichier simulation/simulation.html :

Code :

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

1
2
3
4
5
6
<form id="formc" method="post" action="">
	<script type="text/javascript" src="#CHEMIN{simulation/js/declarations.js}"></script>
	<script type="text/javascript" src="#CHEMIN{simulation/js/select.js}"></script>
	<script type="text/javascript" src="#CHEMIN{simulation/js/simulation.js}"></script>
	<script type="text/javascript">construire_tableau_semestre(s1);</script>
</form>

Le fichier de déclarations des unités d'enseignement (UE) et matieres des unités (ECUE), et des coefficients affectés à chaque matière : simulation/js/declarations.js :

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
//ECUEs S1, S2
cli1 = ["CLI1",5];
soc1 = ["SOC1",5];
dev1 = ["DEV1",5];
mppp1 = ["MPPP1",4];
asd1 = ["ASD1",4];
insp = ["INSP",4];
inlp = ["INLP",3];
 
dif1 = ["DIF1",5];
exp1 = ["EXP1",5];
pat1 = ["PAT",5];
psp1 = ["PSP1",4];
anp = ["ANP",4];
iter1 = ["ITER1",2];
tis1 = ["TIS1",2];
libre = ["LIBRE",3];
 
//UEs S1, S2
P1 = ["P1",cli1,soc1,dev1];
MPPP1 = ["MPPP1",mppp1];
ASD1 = ["ASD1",asd1];
COMP = ["COMP",insp,inlp];
 
P2 = ["P2",dif1,exp1,pat1];
PSP1 = ["PSP1",psp1];
ANP = ["ANP",anp];
ITIS1 = ["ITIS1",iter1,tis1];
LIBRE = ["LIBRE",libre];
 
//S1, S2
s1 = ["S1",P1,MPPP1,ASD1,COMP];
s2 = ["S2",P2,PSP1,ANP,ITIS1,LIBRE];

Le fichier simulation/js/select.js
Contient le menu déroulant pour la sélection des notes (0, 0.5, 1, 1.5...20).

Code :

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

<select = "<option value=\"0\">0</option><option value=\"0.5\">0.5</option><option value=\"1\">1</option><option value=\"1.5\">1.5</option><option value=\"2\">2</option><option value=\"2.5\">2.5</option><option value=\"3\">3</option><option value=\"3.5\">3.5</option><option value=\"4\">4</option><option value=\"4.5\">4.5</option><option value=\"5\">5</option><option value=\"5.5\">5.5</option><option value=\"6\">6</option><option value=\"6.5\">6.5</option><option value=\"7\">7</option><option value=\"7.5\">7.5</option><option value=\"8\">8</option><option value=\"8.5\">8.5</option><option value=\"9\">9</option><option value=\"9.5\">9.5</option><option value=\"10\">10</option><option value=\"10.5\">10.5</option><option value=\"11\">11</option><option value=\"11.5\">11.5</option><option value=\"12\">12</option><option value=\"12.5\">12.5</option><option value=\"13\">13</option><option value=\"13.5\">13.5</option><option value=\"14\">14</option><option value=\"14.5\">14.5</option><option value=\"15\">15</option><option value=\"15.5\">15.5</option><option value=\"16\">16</option><option value=\"16.5\">16.5</option><option value=\"17\">17</option><option value=\"17.5\">17.5</option><option value=\"18\">18</option><option value=\"18.5\">18.5</option><option value=\"19\">19</option><option value=\"19.5\">19.5</option><option value=\"20\">20</option>";

L'idée est un peu naze. Ce fichier va être supprimé, et la liste des notes sera retour d'une fonction select() dans le fichier simulation/js/simulation.js)

Le fichier des fonctions : simulation/js/simultation.js :

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
function UE(semestre, numero_UE) {
  return semestre[numero_UE];
}
 
function ECUE(unite, numero_ECUE) {
  return unite[numero_ECUE];
}
 
function nom_UE(unite) {
  return unite[0];
}
 
function nom_ECUE(ecue) {
  return ecue[0];
}
 
function nombre_UE(semestre) {
  return semestre.length-1;
}
 
function nombre_ECUE(unite) {
  return unite.length-1;
}
 
function coefficient_ECUE(ecue) {
  return ecue[1];
}
 
function coefficient_UE(unite) {
  var i;
  var c = 0;
 
  for (i = 1; i <= nombre_ECUE(unite); i++) {
    c += coefficient_ECUE(ECUE(unite, i));
  }
  return c;
}
 
function get_note_ECUE(nom_ecue) {
  return parseFloat(document.getElementById(nom_ecue).value);
}
 
function set_moyenne_UE(moyenne, nom_unite) {
  document.getElementById(nom_unite).value = moyenne;
}
 
function recalcule(unite) {
 
  var moy = 0;
  var coeff = 0;
  var i, ecue;
 
  for (i = 1; i <= nombre_ECUE(unite); i++) {
    ecue = ECUE(unite, i);
    coeff += coefficient_ECUE(ecue);
    moy = get_note_ECUE(nom_ECUE(ecue)) * coefficient_ECUE(ecue);
  }
 
  set_moyenne_UE(moy/coeff, nom_UE(unite));
}
 
function construire_ligne_UE(unite) {
 
  var NECUE = nombre_ECUE(unite);
  var NUE = nom_UE(unite);
  var c = "";
  var i;
 
  //document.write('<script type="text/javascript">recalcule('+unite+')</script>');
  // gestion des eventuels rowspan
  c += "<tr><td rowspan=\"" + NECUE + "\">" + nom_UE(unite) + "</td><td rowspan=\"" + NECUE + "\">" + coefficient_UE(unite) + "</td><td>" + nom_ECUE(ECUE(unite, 1)) + "</td><td>" + coefficient_ECUE(ECUE(unite, 1)) + "</td><td><select id=\"" + nom_ECUE(ECUE(unite, 1)) + "\" onchange=\"recalcule(" + NUE + ");\">" + select + "</select></td><td rowspan=\"" + NECUE + "\"><input type=\"text\" size=\"2\" id=\"" + nom_UE(unite) + "\"value=\"0\" style=\"border: 0 solid #000;\"></input></td></tr>";
 
  //plusieurs ECUEs
  if (NECUE > 1) {
    for (i = 2; i <= NECUE; i++) {
      c += "<tr><td>" + nom_ECUE(ECUE(unite, i)) + "</td><td>" + coefficient_ECUE(ECUE(unite, i)) + "</td><td><select id=\"" + nom_ECUE(ECUE(unite, i)) + "\" onchange=\"recalcule(" + NUE + ");\">" + select + "</select></td></tr>";
    }
  }
  return c;
}
 
function construire_tableau_semestre(semestre) {
 
  var debut = "<table class=\"spip\"><tr><th>UEs</th><th>Coeff/UE</th><th>ECUEs</th><th>Coeff/ECUE</th><th>Notes</th><th>Moy/UE</th></tr>";
  var fin = "</table>";
  var c = "";
  var total = "";
  var i;
 
  for (i = 1; i <= nombre_UE(semestre); i++) {
    c += construire_ligne_UE(UE(semestre, i));
  }
  total = debut + c + fin;
  document.write(total);
}

J'ai sans doute pas tout dit, si vous avez des questions, n'hésitez pas !

Note : dans ce que j'ai fait pour l'instant le fichier simulation/simulation.html n'appelle que construire_tableau_semestre(s1) (premier semestre, premiere année d'université).
Plus tard il y aura une boucle pour charger tous les semestres, avec d'autres fichiers de déclarations

**RomainVALERI** · 23/05/2011, 14h47

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function construire_tableau_semestre(semestre) {
 
  var debut = "<table class=\"spip\"><tr><th>UEs</th><th>Coeff/UE</th><th>ECUEs</th><th>Coeff/ECUE</th><th>Notes</th><th>Moy/UE</th></tr>";
  var fin = "</table>";
  var c = "";
  var total = "";
  var i;
 
  for (i = 1; i <= nombre_UE(semestre); i++) {
    c += construire_ligne_UE(UE(semestre, i));
  }
  total = debut + c + fin;
  document.write(total);
}

Il me semble qu'il serait plus propre / clair / maintenable / sain / souhaitable / efficace / rationnel (ne rayez aucune mention inutile

y'en a pas ^^) de passer par les méthodes DOM (Document.createElement, Element.appendChild, etc.) pour la création de la <table> (voir à ce sujet le post sur la construction de tableaux par SF dans les contributions ^^)

Envoyé par rzawutang44

Code :

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

<select = "<option value=\"0\">0</option><option value=\"0.5\">0.5</option><option value=\"1\">1</option><option value=\"1.5\">1.5</option><option value=\"2\">2</option><option value=\"2.5\">2.5</option><option value=\"3\">3</option><option value=\"3.5\">3.5</option><option value=\"4\">4</option><option value=\"4.5\">4.5</option><option value=\"5\">5</option><option value=\"5.5\">5.5</option><option value=\"6\">6</option><option value=\"6.5\">6.5</option><option value=\"7\">7</option><option value=\"7.5\">7.5</option><option value=\"8\">8</option><option value=\"8.5\">8.5</option><option value=\"9\">9</option><option value=\"9.5\">9.5</option><option value=\"10\">10</option><option value=\"10.5\">10.5</option><option value=\"11\">11</option><option value=\"11.5\">11.5</option><option value=\"12\">12</option><option value=\"12.5\">12.5</option><option value=\"13\">13</option><option value=\"13.5\">13.5</option><option value=\"14\">14</option><option value=\"14.5\">14.5</option><option value=\"15\">15</option><option value=\"15.5\">15.5</option><option value=\"16\">16</option><option value=\"16.5\">16.5</option><option value=\"17\">17</option><option value=\"17.5\">17.5</option><option value=\"18\">18</option><option value=\"18.5\">18.5</option><option value=\"19\">19</option><option value=\"19.5\">19.5</option><option value=\"20\">20</option>";

L'idée est un peu naze. Ce fichier va être supprimé, et la liste des notes sera retour d'une fonction select() dans le fichier simulation/js/simulation.js)

Oui, et surtout heureusement que c'est pas noté sur 100

Invité · 23/05/2011, 19h38

Oui, et surtout heureusement que c'est pas noté sur 100

J'avoue j'aurais pu penser à une boucle

Je sors ?
Sinon pour le reste je vais regarder avec la fonction de création d'éléments que tu m'as conseillée, ca m'a l'air bien !

Je vous fais un retour plus tard.
Merci

Appel d'une fonction dans un document.write

JavaScript

Discussions similaires

Partager

Partager