Web Workers - With woker

by 0GiS0

HTML

<script src="http://modernizr.com/downloads/modernizr.js"></script>
<script src="http://www.returngis.net/wp-content/uploads/pics/2012/10/Fibonacci.js"></script>
<!DOCTYPE html>
<head></head>
<body>
    <article>
        <header>
            <h1>Web Workers</h1>
        </header>
        <div id="sample">
            <img alt="Pacmac" src="http://www.returngis.net/wp-content/uploads/pics/2012/10/pacman.gif"/>
        </div>
         <section id="fibonacci">
            <label for="txtSerie">Type a number:</label>
            <input id="txtSerie" type="number" min="1"/>
            <button id="btnCalculate">Calculate</button>
            <div>
                <output id="result" />
             </div>
        </section>
    </article>
</body>
</html>

CSS

body{
    font-family:'Segoe UI';
    font-size:9pt;
}

header h1{
    font-size:12pt;
    color: #fff;
    background-color: #1BA1E2;
    padding:20px;
}

#sample
{
    background-color: #000;
}

article section
{
    padding:20px;
}

input,button {
    padding:5px;
}

JavaScript

window.onload = function(){
    
    //Handlers
  
    var btnCalculate = document.getElementById("btnCalculate");
    
    btnCalculate.addEventListener("click",function(){
           
        if(Modernizr.webworkers)
        {
            var txtSerie = document.getElementById("txtSerie");
            var numbers = parseInt(txtSerie.value);
            
            //Create a Worker
            var myWorker = new Worker("Fibonacci.js");
            myWorker.onmessage = messageReceived;
            myWorker.onerror = errorHandler;
            
            worker.postMessage(numbers);
        }         
       else
       {
           var output = document.getElementById("result");
           output.innerText = "Your browser does not support Web Worker feature";
       }
            
    });
}
    
function messageReceived(event){

     var output = document.getElementById("result");
     output.innerText = event.data.join("\n");

}
    
function errorHandler(event){

    var output = document.getElementById("result");
     output.innerText = event.message;
}