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 html : 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
<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 : 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
 
        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