├── README.md └── web-workers └── simple-web-worker ├── README.md ├── index.html ├── main.js ├── style.css └── worker.js /README.md: -------------------------------------------------------------------------------- 1 | # simple-web-worker 2 | 3 | > NOTE: This example repository has been archived. The example code and live example can now be found at [dom-examples/web-workers/simple-web-worker](https://github.com/mdn/dom-examples/tree/master/web-workers/simple-web-worker) 4 | -------------------------------------------------------------------------------- /web-workers/simple-web-worker/README.md: -------------------------------------------------------------------------------- 1 | # simple-web-worker 2 | 3 | > NOTE: This example repository has been archived. The example code and live example can now be found at [dom-examples/web-workers/simple-web-worker](https://github.com/mdn/dom-examples/tree/master/web-workers/simple-web-worker) 4 | -------------------------------------------------------------------------------- /web-workers/simple-web-worker/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Web Workers basic example 9 | 10 | 11 | 14 | 15 | 16 | 17 |

Web
Workers
basic
example

18 | 19 |
20 |
21 |
22 | 23 | 24 |
25 |
26 | 27 | 28 |
29 |
30 | 31 |

Result: 0

32 |
33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /web-workers/simple-web-worker/main.js: -------------------------------------------------------------------------------- 1 | const first = document.querySelector('#number1'); 2 | const second = document.querySelector('#number2'); 3 | 4 | const result = document.querySelector('.result'); 5 | 6 | if (window.Worker) { 7 | const myWorker = new Worker("worker.js"); 8 | 9 | first.onchange = function() { 10 | myWorker.postMessage([first.value, second.value]); 11 | console.log('Message posted to worker'); 12 | } 13 | 14 | second.onchange = function() { 15 | myWorker.postMessage([first.value, second.value]); 16 | console.log('Message posted to worker'); 17 | } 18 | 19 | myWorker.onmessage = function(e) { 20 | result.textContent = e.data; 21 | console.log('Message received from worker'); 22 | } 23 | } else { 24 | console.log('Your browser doesn\'t support web workers.'); 25 | } 26 | -------------------------------------------------------------------------------- /web-workers/simple-web-worker/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | background-color: #7D2663; 3 | font-family: sans-serif; 4 | } 5 | 6 | h1 { 7 | margin: 0; 8 | font-size: 20vmin; 9 | letter-spacing: -0.2rem; 10 | position: absolute; 11 | top: 0; 12 | z-index: -1; 13 | } 14 | 15 | p { 16 | margin: 0; 17 | } 18 | 19 | .controls { 20 | padding: 4vw; 21 | width: 75%; 22 | margin: 10vw auto; 23 | background-color: rgba(255,255,255,0.7); 24 | border: 5px solid black; 25 | opacity: 0.3; 26 | transition: 1s all; 27 | } 28 | 29 | .controls:hover, .controls:focus { 30 | opacity: 1; 31 | } 32 | 33 | .controls label, .controls p, .controls input { 34 | font-size: 3vw; 35 | } 36 | 37 | .controls div { 38 | padding-bottom: 1rem; 39 | } 40 | 41 | -------------------------------------------------------------------------------- /web-workers/simple-web-worker/worker.js: -------------------------------------------------------------------------------- 1 | onmessage = function(e) { 2 | console.log('Worker: Message received from main script'); 3 | const result = e.data[0] * e.data[1]; 4 | if (isNaN(result)) { 5 | postMessage('Please write two numbers'); 6 | } else { 7 | const workerResult = 'Result: ' + result; 8 | console.log('Worker: Posting message back to main script'); 9 | postMessage(workerResult); 10 | } 11 | } 12 | --------------------------------------------------------------------------------