Web Workersフォアグラウンドスクリプト
次に、図3～図5の処理を行うフォアグラウンドとバックグラウンドスクリプトのコード内容を見ていきます
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>ワーカで乱数一致</title>
<script type="text/javascript" src="/jslib/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
if (window.Worker){
$("#stat").text("このブラウザはローカルストレージ使用可能です。");
} else {
alert("このブラウザではWeb Workersが使用できません。");
}
var worker = new Worker("worker1.js"); // （1）ワーカの生成
worker.onmessage = function(e) { // （2）ワーカから結果を受け取る
alert("一致乱数は" + e.data + "です。");
};
$("#calc").click(function(){
var num = $("#num").val(); // （3）
worker.postMessage(parseInt(num)); // （4）ワーカに数値を渡す
var video = $("#video1")[0]; // （5）ビデオエレメントの取得
video.play(); // （6）動画の再生
});
});
</script>
</head>
<body>
<h2>乱数一致をワーカで算出</h2>
<div>
10のべき乗を入力:<input type="text" size="6" id="num"/>
<input type="button" id="calc" value=" 実行 "/>
</div><hr/>
<video id="video1" controls src="/movlib/aac.mp4"></video>
</body>
</html>
画面ロード時の処理
画面ロード時の処理では、（1）で数値演算処理を担当するworker1.jsを引数に指定してWorkerのインスタンスworkerを生成します。
次に（2）でワーカでの処理が完了したときに、ワーカからの通知を受け取るためのリスナをセットしています。ワーカからのメッセージを受け取ると、onmessageイベントから匿名関数が呼び出されますが、サンプルではワーカでの一致乱数をアラート表示しています。ワーカからフォアグラウンドのスクリプトに渡されるデータはイベントオブジェクトとして匿名関数の引数（e）にセットされており、e.dataで渡されたデータを取得することができます。
「実行」ボタンクリック時の処理
「実行」ボタンがクリックされると匿名関数が呼び出され、（3）でワーカに渡す入力値（桁数）を取得した後、（4）のpostMessageで、入力値を引数にセットしてワーカに渡しています。ここで、データ型のないJavaScriptで渡される値は整数であることを指定するためにparseIntを使用しています。postMessageの実行によってワーカでのバックグラウンド処理が開始され、その後すぐに動画オブジェクトを取得して、（6）で動画の再生を開始します。この動画再生はHTML5の動画再生書式を使用して行っていますが、HTML5での動画再生は、<video>タグの記述も含めて大変シンプルな書式になっています。
この一連の処理によって、JavaScriptではバックグラウンドのワーカでは乱数一致の計算が行われ、フォアグラウンドでは動画が再生されるため、2つのJavaScriptが並行して実行される状態になります。ワーカの処理が完了すると、（2）の処理でアラート画面が表示されます。
ここでちょっとした注意が必要なのは（5）のビデオエレメントの取得で、document.getElementById（"ID値"）をjQueryで記述した場合、 $("#ID値") ではなく $("#ID値")[0] になることです。
Web Workersバックグラウンドスクリプト
// メッセージの受信
onmessage = function(e) { // （1）
var num2 = Math.pow(10, e.data); // （2）
var flag = false;
while(!flag){
var val1 = Math.floor(Math.random() * parseInt(num2)); // （3）
var val2 = Math.floor(Math.random() * parseInt(num2)); // （4）
if(val1 == val2){
flag = true;
}
}
postMessage(val1); // （5）
}
リスト3の（4）でバックグラウンドクリプトに値が渡されると、リスト4でonmessageからの匿名関数が呼び出されてワーカ処理が開始されます。渡された値は匿名関数にセットされているイベントオブジェクト（e）を使用してe.dataで取得されるので、その値を使用して乱数発生と、一致確認を行っています。
（2）でMath.powは第1引数を基数としてべき乗を計算するメソッドで、例えばe.dataが7の場合は10の7乗の値がnum2にセットされます。
while文の中で（3）と（4）はまったく同じ計算が行われていますが、Math.random() * parseInt(num2)で0.0～1.0（1.0以下）の10のnum.data乗が計算され、Math.floorで少数点以下が切り捨てられます。
while文は（3）と（4）の計算結果が一致した時に抜け、その値（val1）が（5）のpostMessageでフォアグラウンドクリプトに返されます。フォアグラウンドでは、値が返されるとリスト3 （2）のworker.onmessageイベントハンドラから匿名関数が起動されて、アラート表示が行われます。
