web worker de la suite de Fibonacci
Bonjour, toujours dans le livre de Olivier Hondermark "Tou javascript", je tente de réaliser un web worker avec la suite Fibonacci. Soit le code suivant :
Code:
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
| <html>
<head>
<title>Web Worker de démonstration</title>
</head>
<body>
<h1>Principe de fonctionnement d'un Web Worker</h1>
<h2>Définition de la suite de Fibonacci</h2>
<p>La suite de Fibonnaci est une suite de nombres <strong>F</strong>, tel que :<br>
- le n<sup>ième</sup> élément est égal à la somme des deux précédents<br>
- le premier élément vaut 1<br>
</p>
<p>La suite est notée : <b><strong>F<sub>n</sub></strong> = <strong>F<sub>n-1</sub></strong> + <strong>F<sub>n-2</sub></strong></b></p>
<h2> Résultat des <span id="longueur">N</span> premiers éléments de la suite de Fibonacci</h2>
<div id="suite">
<div id="suiteTitre" class="ligne"><div class="indice">Indice</div><div class="valeur">Valeur</div></div>
</div>
<script type="text/javascript">
if (window.Worker) {
var myWorker=new Worker("worker.js");
var fibonacci={
"type": "fibonacci",
"longueur": "30",
}
/* Envoyer un message avec la consigne de calcul de la suite */
myWorker.postMessage(fibonacci);
/* Réception du résultat */
myWorker.onmessage=function(evenement) {
/* Mise à jour du nombre d'éléments de la liste */
document.querySelector("span#longueur").innerText=evenement.data.longueur;
/* Construction de div#suite avec les lignes de résultats */
var suite=document.querySelector("div#suite");
var suiteTitre=document.querySelector("div#suiteTitre");
suite.innerText="";
suite.appendChild(suiteTitre);
for (var i=0; i<evenement.data.longueur; i++) {
var ligne=document.createElement("div");
ligne.className="ligne";
var indice=document.createElement("div");
indice.className="indice";
indice.innerText=(i+1);
var valeur=document.createElement("div");
valeur.className="valeur";
valeur.innerText=evenement.data.suite[i];
ligne.appendChild(indice);
ligne.appendChild(valeur);
suite.appendChild(ligne);
}
}
}
</script>
<style type="text/css">
body {
min-height: 500px;
}
strong {
font-style: italic;
}
div#suite {
display:inline-block;
padding:5px;
margin:5px;
background: #eee;
border-radius:8px;
border:1px solid #999;
}
div.ligne {
padding:2px;
}
div.indice {
display: inline-block;
width:50px;
text-align: center;
color:#999;
font-style: italic;
}
div.valeur {
display: inline-block;
width:100px;
font-weight: bold;
margin-left:10px;
}
</style>
</body>
</html> |
Dans le fichier hello.html sur mon bureau. Puis le code complémentaire suivant dans le fichier worker.js sur mon bureau :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
onmessage=function(evenement) {
console.log("Le message recu est dans evenement.data");
console.log(evenement.data);
var msg=evenement.data;
if (msg.type=="fibonacci") {
/* On commence avec un 0 pour ?viter de sortir du tableau ? l'indice 1 */
var s=[0,1];
for (var i=2; i<=msg.longueur; i++) {
s.push(s[i-1]+s[i-2]);
}
s.shift(); /* Supprime le premier ?l?ment technique valant 0 */
console.log(s);
msg.suite=s;
postMessage(msg); /* Envoi d'un message vers la page principale */
}
} |
Le fichier html fonctionne mais je crois que le renvois au fichier worker.js ne fonctionne pas. Les trente premier éléments de la suite de Fibonacci ne s'affichent pas. Que faire? Qu'est-ce ui ne marche pas? Où est l'erreur? Merci
