*자바스크립트 내장 함수
1. setTimeout(function, millisecond) - 일정 시간 후 함수를 한번실행
cleartTimeout(id) - 일정시간 후 함수를 한번 실행하는것을 중지
2. setInterval(function, millisecond) - 일정 시간마다 함수를 반복 실행
clearInterval(id) - 일정 시간마다 함수를 반복하는 것을 중지
*setTimeout 예제
setTimeout(function(), 1000) --- 여기서 1000은 milliseconds 단위이므로 1/1000 초이다.(1초)
1 2 3 4 5 6 7 8 9 10 | <script> var i; for(i = 0; i<10; i++){ setTimeout(function(){ document.write(i+"<br>"); },1000); /* 1초뒤에 for문이 돌아 1,2,3,4,.. 를 출력하길 기대하지만 되지않는다. 값이 복사된것이 아닌 변수에 직접 접근하고있기 때문이다. for문이 종료된시점의 값으로 핸들러는 직접 접근하여 출력한다.*/ } </script> | cs |
예상대로라면 for문이 돌아 0,1,2,3,4.... 9까지 1초마다 10번 출력되어야 할것 같지만 그렇게 되지않는다.
출력되는값은 마지막 순번의 값에 1을 더한 10만 출력이 될뿐더러, 1초뒤에 한번에 다 출력이된다.
아직 이유를 모르겠다.
j-query가서 배운다(?)고 하였으니 보류
*버튼을 누를때까지 일정 시간마다 함수를 반복 실행하는 Interval 함수 예제
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 | <head> <script> var id; function changeColor(){ id = setInterval(flashText, 500); }//flashtext를 0.5초마다 '반복실행'하는 function을 만들어 id에 저장. function flashText(){ var elem = document.getElementById("target"); elem.style.color = (elem.style.color == "red") ? "blue" : "red"; elem.style.backgroundColor = (elem.style.backgroundColor == "green") ? "yellow" : "green"; } //0.5초마다 바뀌는 실행문. function stopTextColor(){ clearInterval(id); // 버튼클릭을하면 이 function이 실행되며 interval이꺼진다 } </script> </head> <body onload = "changeColor();"><!-- 바디가 끝나면 chngeColor() 호출한다.--> <div id ="target" style="color: blue; background-color : yello;"> <p>This is a Text.</p> </div> <button onclick = "stopTextColor();">중지</button> //버튼을 클릭하는 순간 stopTextcolor()메서드 실행. </body> | cs |
*삼항연산자 ( 조건식 ? 참값 : 거짓값)
elem.style.color == "red" ? "blue" : "red"
(조건식) (참값) (거짓값)
순서
1. 자바스크립트에서 처음 color의 기본값은 black이기때문에 false가 되고
elem.style.color = "red"로 설정이 된다.
2. 그리고 0.5초뒤에 다시 실행되었을때에는
elem.style.color = "red"인 상태로 참이기때문에 참일때의 실행문인
elem.style.color = "blue"로 바뀌게된다.
3. 0.5초뒤에 다시 실행될때에는 elem.style.color = "blue"로 false이기때문에
다시 elem.style.color = "red"가 된다.
이렇게 0.5초마다 바뀌면서 색이 계속 변하게된다.
4. 종료할때에는 Interval값을 넣어준 id를 clearInterval(id)로 넣어 종료시키는 메서드를 사용한다.
5. <body onload = "changeColor();">
:: body가 끝나고 난 직후에 changeColor();를 호출한다.
(예제에서는 div태그와 p태그 button을 모두 생성후에 changeColor()를 실행하겠다는 의미가 된다.)
body안의 컨텐츠를 다 하고나면 메서드를 자동으로 호출할수있게된다.
'JAVA > javascript, jQuery' 카테고리의 다른 글
| 자바스크립트 - try-catch (0) | 2018.07.03 |
|---|---|
| 자바스크립트 - 경고창 및 입력 (0) | 2018.07.03 |
| 자바스크립트 - function (0) | 2018.07.03 |
| 자바스크립트 - undefined (0) | 2018.07.03 |
| ★★자바스크립트(JavaScript) 개념/문법 (0) | 2018.07.03 |