자바스크립트 내장함수
1. 타이머 함수
setTimeout(함수, ms) : setTimeout 함수는 콜백함수 형태로 쓰임. 왜? 사용자마다 활용하고자 하는 함수(매개변수로 오는)함수가 다르기 때문
setInterval(함수, ms) : 주기적으로 활용하는 타이머인듯?
clearInterval(id)
clearTimeout(id)
2. 코드 실행 함수
eval(str)
3. 숫자 변환 함수
parseInt(str)
parseFloat(str)
타이머 함수
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
/*
자바스크립트 내장함수
1. 타이머
setTimeout(함수, ms) : setTimeout 함수는 콜백함수 형태로 쓰인다. 왜? 사용자마다 활용하고자 하는 함수(매개변수로 오는)함수가 다르기 때문
setInterval(함수, ms) : 주기적으로 활용하는 타이머인듯?
clearInterval(id)
clearTimeout(id)
*/
var func = function() {
alert('3초가 지났습니다.');
}
setTimeout(func, 3000);
// 위와 같이, 함수를 먼저 정의하고 그것을 매개변수로 쓰는 형태로 잘 쓰지 않는다.
// 매개변수의 위치에 바로 함수를 정의해서 쓰는 형태를 더 많이 쓴다.
setTimeout(function(){
alert('3초가 지났습니다.');
}, 3000);
var id = setInterval(function(){
document.write('현재 시간 : ' + new Date() + '<br>');
}, 1000); // 1초마다 주기적으로 함수를 호출하지요.
setTimeout(function(){
alert('날짜 쓰기 종료...');
clearInterval(id);
}, 10000); // 10초 후에 id라는 타이머 함수를 멈춘다.
</script>
</head>
<body>
</body>
</html>
타이머 함수의 문제점
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
// 아래의 실행 순서가 이상하다.
alert("첫번째...");
setTimeout(function() { // 제어권이 다른 곳에 갔다.
alert('setTimeout');
}, 0)
alert('두번쨰...')
// 실행 값이 이상하다? 왜 3만 세번 나오냐. 제어권 문제라는데..
for(var i = 0; i < 3; i++){
setTimeout(function() {
// 자바스크립트의 모든 코드가 실행되고 난 뒤에 setTimeout이 실행된다고 한다.
// 즉, i가 3이 될 때까지 반복문이 돌고나서 alert가 실행되기 때문에 i가 3인 경우만 세번 싱행된다.
// setTimeout 특이한놈이다. 사용 시 유의하자.
// setTimeout 부분을 클로저로 만들어 사용하면 이런 문제가 발생하지 않는다.
alert(i);
}, 0)
}
</script>
</head>
<body>
</body>
</html>
타이머 함수 문제점 해결 방법
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
function func(i) {
return setTimeout(function(){
alert(i);
}, 0);
}
for(var i = 0; i < 3; i++){
func(i);
}
</script>
</head>
<body>
</body>
</html>
위와 같은 표현
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
for(var i = 0; i < 3; i++){
(function(i){
setTimeout(function() {
alert(i);
}, 0)
})(i);
}
</script>
</head>
<body>
</body>
</html>
코드 실행 함수
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
var str = 'alert("hello");';
str += 'var number = 10;';
str += 'alert(number);';
str += 'var array = [10, 12.34, true, "good"];';
str += 'alert("배열의 요소 개수 : " + array.length + "개");';
eval(str);
number += 30;
alert('number : ' + number);
</script>
</head>
<body>
</body>
</html>
숫자변환함수
https://tyrionlife.tistory.com/153
[JS] 숫자 변환함수 비교 및 활용 예제(Number, parseInt, parseFloat)
Insert title here
tyrionlife.tistory.com
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
var won = '1000원';
var dollar = '1.78$';
document.write('Number : ' + Number(won) + '<br>');
document.write('parseInt : ' + parseInt(won) + '<br>');
document.write('parseInt : ' + parseInt(dollar) + '<br>'); // 정수로 파싱하기 때문에 소수점 이하 '버림'
document.write('parseFloat : ' + parseFloat(dollar) + '<br>'); // 실수로 파싱
document.write('<hr>');
var str = "12345";
var num = Number(str);
var num2 = parseInt(str);
document.write(str + 100 + '<br>');
document.write(num + 100 + '<br>');
document.write(num2 + 100 + '<br>');
set
</script>
</head>
<body>
</body>
</html>'웹 프로그래밍 > JavaScript' 카테고리의 다른 글
| [JS] 자동완성 기능 사용하기 : Tern Eclipse IDE 플러그인 설치 및 적용 (0) | 2020.06.17 |
|---|---|
| [JS] 숫자 변환함수 비교 및 활용 예제(Number, parseInt, parseFloat) (0) | 2020.06.17 |
| [JS] 클로저 개념 및 예제 (예제 추가 필요) (0) | 2020.06.17 |
| [JS] 논리 연산자의 우선순위 및 적용 예제 (0) | 2020.06.17 |
| [JS] 일치연산자 종류(==, ===, !=, !==) 및 문자열 비교 방법 (0) | 2020.06.17 |
