<최종 화면>
코드 작성을 잘 해도, 크롬에서 동작이 잘 안될 수 있다. Edge에서 실행하자.
카운트가 계속 실행되는 기능을 만들어보자.
우선 버튼과 표시될 h2요소를 만들자.
이제 버튼을 누를시, 카운트가 되고, 그것이 h2요소에 표시되게 해보자.
그리고 추가로 버튼을 3개 만들자.
실시간으로 동작되는 것은 다른 곳에서 수행을 해야한다. js파일을 만들어서 가져오자.
우선 start worker버튼을 누르면 Worker객체를 생성하자.
이제 실시간 카운트할 기능을 js 파일로 만들자.
만든 js 파일을 적용하자.
그러나 너무 빨리 반복되어서 내가 원하는 숫자 카운트를 볼 수 없다. 컴퓨터가 1부터 카운트하는 속도는 인간과 다르다.
그래서 딜레이를 거는 것처럼 0.5초후에 실행하도록 하자.
그러나 동작이 안될 것이다.
전역 변수 w를 스크립트문 제일 위에 써준다.
이제 Worker에게 메세지를 전달해보자.
따로 동작할 코드를 적을 js파일을 만들자.
첫 번째 입력 필드의 값을 그 옆에 있는 입력 필드에 전달하자.
|
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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function clickBtn(){
var n=0;
while(true){
n++;
document.getElementById('hh').innerHTML=n;
}
// 무한반복문을 실행하면 화면에 그리는 작업도 못함. 브라우저 렉!!
}
</script>
<script>
w=undefined;
function clickBtn2(){
//Worker는 웹기술이어서 웹서버에 올려야만 실행할 수 있음. 즉, http://로 시작되는 주소로 문서를 열어야함.
// 로컬에서도 동작되는 브라우저가 일부 있음. (Edge, firefox)
if(w==undefined){
// 내장 생성자 함수로서 존재하는 Worker객체 생성
//worker가 해야할 작업을 별도의 js문서에 만들어야 함.
// worker에서 postMessage()로 보낸 데이터 받기[콜백함수 등록]
w.onmessage= function( event ){
//파라미터로 전달된 event객체가 보내진 데이터를 가지고 있음.
document.getElementById('hh').innerHTML=event.data;
}
}else{
alert('이미 워커가 존재함');
}
}
function clickBtn3(){
// 워커 멈추기
w.terminate();
w=undefined;
}
</script>
</head>
<body>
<button onclick="clickBtn()">무한 카운트</button>
<hr>
<h2 id="hh">결과</h2>
<hr>
<button onclick="clickBtn2()">start worker</button>
<button onclick="clickBtn3()">stop worker</button>
<!-- 워커동작중에 메인스레드가 동작하는지 여부 테스트용 버튼 -->
<button onclick="alert('clicked!!')">button</button>
<hr>
<h3>Worker에게 메세지 전달</h3>
<!-- 워커가 별도의 js문서라서 이곳에서의 데이터를 사용할 수가 없기에.. 전달하는 기법이 필요함. -->
<input type="text" id="in1">
<button onclick="aaa()">send to worker</button>
<input type="text" id="in2" size="40" readonly>
<script>
function aaa(){
// 입력된 값
var v= document.getElementById('in1').value;
w2.postMessage(v); //워커에게 전달
// 워커에서 postMessage()로 보낸 데이터를 받기
w2.onmessage= function(event){
document.getElementById('in2').value= event.data;
}
}
</script>
</body>
</html>
|
'안드로이드 웹앱 콘테츠 개발자 양성(국비지원) > HTML+Java script' 카테고리의 다른 글
| ECMA script 2015(ES6) let과 var 차이, const (0) | 2019.12.20 |
|---|---|
| HTML+Java script (기초) webStorage (localStorage, sessionStorage ) 웹 브라우저 데이터 저장 관련 (0) | 2019.12.19 |
| HTML+Java script (기초) geolocation Google Map Api 이용 (웹페이지에서 지도 보여주기) (0) | 2019.12.19 |
| HTML+Java script (기초) geolocation (위도, 경도 ) (0) | 2019.12.19 |
| HTML+Java script (기초) drag에 대한 이벤트 (0) | 2019.12.19 |
댓글