Comment javascript execute t'il les instructions

**SPACHFR** · 27/03/2009, 17h19

Bonjour,

Je débute en JavaScript.
Ma question peut sembler bizarre, mais j'ai tu mal à comprendre toute la logique du déroulement d'un code javascript.

ex.
J'ai une ligne de code qui fait appel à une fonction showPrompt()
cette appel est suivit d'une message type alert('xxx');

Code :

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

1
2
3
4
5
6
7
 
 
function newproject(){
    var message ='toto'                                          
    var RcCode = showPrompt('Create a Project',message,'prompt');
    alert(RcCode);                                               
}

lors de l'exécution de cette fonction, la boite de message alert() et affichée avec la valeur "undefine" avant même l'appel de la fonction showPrompt.
showPrompt étant une boite de dialog personnalisée.

Quelqu'un peut il m'expliquer pourquoi le message alert(RcCode]; et affiché immédiatement sans attendre le retour de ma fonction, il semble même que cela bloque l'exécution de showPromt, puisque ma boite de dialog perso n'apparait qu'ensuite ?

Merci

**Bovino** · 27/03/2009, 18h40

Tout d'abord, je ne suis pas certain que tous les navigateurs adoptent le même comportement, mais en gros, les instructions sont exécutées dans l'ordre ou elles apparaissent dans le script, mais lorsque tu fais appel à une fonction externe, celle-ci est exécutée mais cela ne fige pas l'exécution de la fonction appelante. Il est donc difficile, voire impossible de savoir à quel moment le résultat sera disponible.

**Walterbelo** · 27/03/2009, 18h59

Je demanderais à voir si il n'y a pas une erreur dans la fonction showprompt appelée. Je mettrais bien une petite pièce la dessus.
Avec Firefox, il suffit de regarder la console d'erreurs (menu Outils).

**Bovino** · 27/03/2009, 19h27

Envoyé par Walterbelo

Je demanderais à voir si il n'y a pas une erreur dans la fonction showprompt appelée. Je mettrais bien une petite pièce la dessus.
Avec Firefox, il suffit de regarder la console d'erreurs (menu Outils).

Oui, ou aussi que la fonction ne renvoie rien...

**SPACHFR** · 30/03/2009, 16h37

En fait mon problème est le suivant :
A partir d'une boite de dialog, je réalise une requête http par XMLhttprequest.
Le résultat de cette requête est un simple numérique.
Je voudrai en fonction de ce numérique ouvrir une seconde boite de dialog pour signifier une erreur ou l'execution correcte.
Les boites de dialog que j'utilise ne sont pas de moi, elles fonctionnent bien, mais dès que j'utilise le XMLhttp, je ne parviens plus à ouvrir une seconde boite de dialog.

Pour info j'ai récupéré le code à cette adresse :
http://www.leigeber.com/2008/04/cust...-dialog-boxes/

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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
 
// global variables //
var TIMER = 5;
var SPEED = 10;
var WRAPPER = 'content';
var actprj ='';
 
// calculate the current window width //
function pageWidth() {
  return window.innerWidth != null ? window.innerWidth : document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null;
}
 
// calculate the current window height //
function pageHeight() {
  return window.innerHeight != null? window.innerHeight : document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body != null? document.body.clientHeight : null;
}
 
// calculate the current window vertical offset //
function topPosition() {
  return typeof window.pageYOffset != 'undefined' ? window.pageYOffset : document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ? document.body.scrollTop : 0;
}
 
// calculate the position starting at the left of the window //
function leftPosition() {
  return typeof window.pageXOffset != 'undefined' ? window.pageXOffset : document.documentElement && document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ? document.body.scrollLeft : 0;
}
 
// build/show the dialog box, populate the data and call the fadeDialog function //
function showPrompt(title,message,type,autohide) {
  if(!type) {
    type = 'error';
  }
  var dialog;
  var dialogheader;
  var dialogclose;
  var dialogtitle;
  var dialogcontent;
  var dialogmask;
  if (title =='Create a Project') {
     actprj='cre';
     message ='<form name="newprj" '+
   			'<dd><br><br><br>Project Name : <INPUT type="text" id="zonetexte" value="New project name" size ="17" MAXLENGTH="10" onclick="if(this.value==\'New project name\')this.value=\'\'";>' +
      '<br><br><br><INPUT type="button" value="Create Project" onclick="aff()"></form>'
  }
  if (title =='Delete a Project') {
     actprj='del';
     message ='<form name="delprj" '+
   			'<dd><br><br><br>Project Name : <INPUT type="text" id="zonetexte" value="Project name" size ="17" MAXLENGTH="10" onclick="if(this.value==\'Project name\')this.value=\'\'";>'           +
      '<br><br><br><INPUT type="button" value="Send Request" onclick="aff()"></form>'
  }
  if(!document.getElementById('dialog')) {
    dialog = document.createElement('div');
    dialog.id = 'dialog';
    dialogheader = document.createElement('div');
    dialogheader.id = 'dialog-header';
    dialogtitle = document.createElement('div');
    dialogtitle.id = 'dialog-title';
    dialogclose = document.createElement('div');
    dialogclose.id = 'dialog-close'
    dialogcontent = document.createElement('div');
    dialogcontent.id = 'dialog-content';
    dialogmask = document.createElement('div');
    dialogmask.id = 'dialog-mask';
    document.body.appendChild(dialogmask);
    document.body.appendChild(dialog);
    dialog.appendChild(dialogheader);
    dialogheader.appendChild(dialogtitle);
    dialogheader.appendChild(dialogclose);
    dialog.appendChild(dialogcontent);;
    dialogclose.setAttribute('onclick','hideDialog()');
    dialogclose.onclick = hideDialog;
  } else {
    dialog = document.getElementById('dialog');
    dialogheader = document.getElementById('dialog-header');
    dialogtitle = document.getElementById('dialog-title');
    dialogclose = document.getElementById('dialog-close');
    dialogcontent = document.getElementById('dialog-content');
    dialogmask = document.getElementById('dialog-mask');
    dialogmask.style.visibility = "visible";
    dialog.style.visibility = "visible";
  }
  dialog.style.opacity = .00;
  dialog.style.filter = 'alpha(opacity=0)';
  dialog.alpha = 0;
  var width = pageWidth();
  var height = pageHeight();
  var left = leftPosition();
  var top = topPosition();
  var dialogwidth = dialog.offsetWidth;
  var dialogheight = dialog.offsetHeight;
  var topposition = top + (height / 3) - (dialogheight / 2);
  var leftposition = left + (width / 2) - (dialogwidth / 2);
  dialog.style.top = topposition + "px";
  dialog.style.left = leftposition + "px";
  dialogheader.className = type + "header";
  dialogtitle.innerHTML = title;
  dialogcontent.className = type;
  dialogcontent.innerHTML = message;
  var content = document.getElementById(WRAPPER);
  dialogmask.style.height = content.offsetHeight + 'px';
  dialog.timer = setInterval("fadeDialog(1)", TIMER);
  if(autohide) {
    dialogclose.style.visibility = "hidden";
    window.setTimeout("hideDialog()", (autohide * 1000));
  } else {
    dialogclose.style.visibility = "visible";
  }
}
 
// hide the dialog box //
function hideDialog() {
  var dialog = document.getElementById('dialog');
  clearInterval(dialog.timer);
  dialog.timer = setInterval("fadeDialog(0)", TIMER);
}
 
// fade-in the dialog box //
function fadeDialog(flag) {
  if(flag == null) {
    flag = 1;
  }
  var dialog = document.getElementById('dialog');
  var value;
  if(flag == 1) {
    value = dialog.alpha + SPEED;
  } else {
    value = dialog.alpha - SPEED;
  }
  dialog.alpha = value;
  dialog.style.opacity = (value / 100);
  dialog.style.filter = 'alpha(opacity=' + value + ')';
  if(value >= 99) {
    clearInterval(dialog.timer);
    dialog.timer = null;
  } else if(value <= 1) {
    dialog.style.visibility = "hidden";
    document.getElementById('dialog-mask').style.visibility = "hidden";
    clearInterval(dialog.timer);
  }
}
function aff() {
var prjname = document.getElementById('zonetexte').value;
var request_methode="POST";                      // methode acce serveur
if (actprj=='cre') {
var target_url="/cgi-bin/Creprj";               // CGI qui sera execute lors du POST
} else {
var target_url="/cgi-bin/Delprj";               // CGI qui sera execute lors du POST
}
var xhr_object = null;                         // variable pour objet xmlhttprequest
  if(window.XMLHttpRequest)                      // si browser Firefox
     xhr_object = new XMLHttpRequest();
  else if(window.ActiveXObject)                  //  si browser Internet Explorer
     xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
  else {                                         // XMLHttpRequest non supporte par le navigateur
     alert("Your browser does not support XMLHttpRequest, you must use Internet explorer or Mozilla Firefox.");
     return;
  }
  xhr_object.open(request_methode, target_url, true);     // emission de la requete
  xhr_object.setRequestHeader('Content-Type','text/html');
  xhr_object.send(prjname);
  xhr_object.onreadystatechange = function() {   // mode asynchrone, test regulierement si le teansfert est OK
     if(xhr_object.readyState == 4) {            // 4 -> transfert des donnees venant du serveur termine
     		var obj_return = xhr_object.responseText;
     		// document.write(obj_return);
     		   document.getElementById('retour').innerHTML=obj_return;
          hideDialog();
     }
  }
 return xhr_object;
}

lorsque je fait l'affichage dans le div retour, j'ai bien mon numérique

Code :

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

1
2
3
4
 
var obj_return = xhr_object.responseText;
document.getElementById('retour').innerHTML=obj_return;
hideDialog();

Etant débutant en javascript, je n'arrive pas a comprendre pourquoi je n'ai pas une nouvelle fenétre qui s'ouvre si je remplace le code suivant :

Code :

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

1
2
3
4
 
var obj_return = xhr_object.responseText;
showPrompt('OK',obj_return,success,5);          
hideDialog();

Je me trompe certainement quelque part, mais je ne voit pas où..... cela fait deux jours que j'ai tourné le problème dans tout les sens sans trouver la réponses.

Merci

**SPACHFR** · 30/03/2009, 17h45

J'ai fini par trouver, j'ai simplement récupéré d'id de la boite de dialog et ajouté des tag html pour le message.
Content de moi j'ai mais bien galéré (dur d'être débutant....)

Comment javascript execute t'il les instructions

JavaScript

Discussions similaires

Partager

Partager