WebProgramming/ex13-9.html at main · NaEunMin/WebProgramming · GitHub

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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>시작과 끝 숫자를 전달받아 합을 구하는 워커 태스크</title>
  </head>

  <body>
    <h3>시작과 끝 숫자를 전달받아 합을 구하는 워커 태스크</h3>
    <hr />
    <input id="from" type="text" size="10" /> x
    <input id="to" type="text" size="10" /> =
    <input id="result" type="text" size="10" />
    <button type="button" id="result" onclick="send()">result</button>
    <script>
      let addWorker = new Worker('add.js'); // 워커 태스크 생성

      function send() {
        // 워크 태스크에 시작 숫자와 끝 숫자 전송
        let parameters = {
          // 시작 숫자와 끝 숫자로 구성된 객체
          from: document.getElementById('from').value,
          to: document.getElementById('to').value,
        };
        // 시작 숫자와 끝 숫자를 담은 객체를 워커 태스크로 전송
        addWorker.postMessage(parameters);
      }

      // 워커 태스크로부터 결과를 기다리는 리스너 등록
      addWorker.onmessage = function (e) {
        // 워커 태스크로부터 전달받은 합 출력
        document.getElementById('result').value = e.data;
      };
    </script>
  </body>
</html>