WebProgramming/Prac13-6.html at main · huheyun/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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>워커 태스크 만들기</title>
</head>
<body>
    <h3>곱셈하기</h3>
    <hr>
    <input id="from" type="text" size="20"> X
    <input id="to" type="text" size="20">
    <button type="button" id="button" onclick="send()">곱하기</button>
    <input id="mul" type="text" size="20">


    <script>
        let multiWorker = new Worker("multi.js"); // 워커 태스크 생성

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

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