📝 Javascript
🖥️ 1. 내장 함수
1-1. eval(문자열)
- 주어진 문자열을 수식으로 변환하여 리턴한다.
<body>
<script>
let a = "1+1";
let b = 1+1;
let c = eval("1+1");
document.write("<h1>" + a + "</h1>"); // 1+1
document.write("<h1>" + b + "</h1>"); // 2
document.write("<h1>" + c + "</h1>"); // 2
</script>
</body>1-2. Number(문자열)
- 주어진 문자열의 변수가 숫자모양일 경우 실제 숫자형으로 변환하여 리턴한다.
- 실수
1-3. parseInt(문자열)
- 주어진 문자열의 변수가 숫자모양일 경우 실제 숫자형으로 변환하여 리턴한다.
- 정수
EX1) Number와 parseInt 비교
<body>
<script>
let value = "100";
let num1 = Number(value);
let num2 = parseInt(value);
let result1 = value + 1; // 1001
let result2 = num1 + 1; // 101
let result3 = num2 + 1; // 101
document.write("<h1>result1 = " + result1 + "<h1>");
document.write("<h1>result2 = " + result2 + "<h1>");
document.write("<h1>result3 = " + result3 + "<h1>");
</script>
</body>EX2)
<body>
<script>
let value = "100.6";
let num1 = Number(value);
let num2 = parseInt(value);
let r1 = num1 + 1; // 101.6
let r2 = num2 + 1; // 101
document.write("<h1>r1 = " + r1 + "</h1>");
document.write("<h1>r2 = " + r2 + "</h1>");
</script>
</body>1-4. 숫자 변환 함수의 한계
- Number 함수와 parseInt 함수는 파라미터로 전달된 문자열이 숫자 형태가 아닌 경우
"NaN"이라는 값을 리턴하는데, 이 "NaN" 값과 숫자값과의 연산은 모든 결과가 "NaN"이다.
EX)
<body>
<script>
let a = Number("a"); // NaN
document.write("<h1>a = " + a + "</h1>")
// NaN
let a_sum = a + 1; // a_sum = NaN
document.write("<h1>a_sum = " + a_sum + "</h1>");
let a_str = a + "str"; // a_str = NaNstr
document.write("<h1>a_str = " + a_str + "</h1>");
</script>
</body>1-5. 변수의 NaN여부를 검사하는 함수
- isNaN함수는 파라미터로 전달되는 변수의 NaN여부를 boolean 형태로 리턴한다.
- 파라미터가 숫자로 변환할 수 없는 문자열일 경우에는 NaN형태이므로 true를 리턴한다.
- 파라미터가 숫자 모양을 한 문자열이거나 실제 숫자형 변수일 경우에는 NaN이 아니므로 false를 리턴한다.
→ parseInt 함수나 Number 함수의 정상동작을 보장하기 위해서는 파라미터를 전달하기 전에 해당 값이 NaN이 아니라는 것을 검사해야 한다.
→ isNaN 함수의 결과를 부정하면 그 값은 숫자값이거나 숫자형으로 변환 가능한 문자열이라는 의미가 된다.
→ let is_num = !isNaN(검사할 값);
EX1)
<body>
<script>
let v1 = "가나다라";
let v2 = "1234";
let is_num1 = !isNaN(v1);
let is_num2 = !isNaN(v2);
if(is_num1){
document.write("<h1>'" + v1 + "'는 숫자입니다.</h1>");
} else {
document.write("<h1>'" + v1 + "'는 숫자가 아닙니다.</h1>");
} // '가나다라'는 숫자가 아닙니다.
if(is_num2){
document.write("<h1>'" + v2 + "'는 숫자입니다.</h1>");
} else {
document.write("<h1>'" + v2 + "'는 숫자가 아닙니다.</h1>");
} // '1234'는 숫자입니다.
</script>
</body>EX2)
<body>
<script>
function sumInt(x, y){
let isStrX = !isNaN(x); // 숫자 true, 문자 false
let isStrY = !isNaN(y);
// 둘 중 하나라도 숫자 모양이 아니라면 실행을 중단하고 메시지를 리턴
if( !isStrX || !isStrY ){
return "숫자 형태이거나 숫자값이 전달되어야 합니다.";
}
let result = parseInt(x) + parseInt(y);
return result;
}
let sum1 = sumInt("a", 1);
let sum2 = sumInt("1", "2");
let sum3 = sumInt(100, 5.1);
let sum4 = sumInt(-1, "-100");
document.write("<h1>" + sum1 + "</h1>");
// 숫자 형태이거나 숫자값이 전달되어야 합니다.
document.write("<h1>" + sum2 + "</h1>"); // 3
document.write("<h1>" + sum3 + "</h1>"); // 105
document.write("<h1>" + sum4 + "</h1>"); // -101
</script>
</body>1-6. alert 대화상자
- 웹페이지에서 가장 일반적으로 사용되는 대화상자로, 사용자에게 정보를 보여주기 위하여 사용된다.
- 이 대화상자에는 "확인" 버튼이 함께 표시된다.
- alert 대화상자를 웹페이지에 표시하기 위해서는 alert 함수에 표시하고자 하는 메시지를 파라미터로 전달한다.
EX)
<body>
<script>
alert("알림 대화 상자입니다.");
</script>
</body>1-7. confirm 대화상자
- 사용자에게 어떠한 결정사항에 대한 긍정 혹은 부정의 답을 얻고자 하는 경우에 표시되는 대화상자이다.
- confirm 함수에 사용자에게 물어볼 내용을 문자열 파라미터로 전달한다.
- confirm 함수는 사용자가 긍정의 버튼을 클릭하면 true, 부정의 버튼을 클릭하면 false를 리턴하여 주기 때문에, 이 값을 사용하여 if문을 구성하면 사용자의 선택에 따른 후속처리를 구현할 수 있다.
EX)
<body>
<script>
let is_ok = confirm("정말 삭제하시겠습니까?");
if(is_ok){
alert("확인을 선택하셨습니다.");
} else {
alert("취소를 선택하셨습니다.");
}
</script>
</body>1-8. prompt 대화상자
- 사용자가 입력 내용을 얻고자 한 경우에 사용하는 대화상자
- 이 함수에는 사용자에게 표시할 문구와 입력칸에 설정할 기본값을 파라미터로 전달한다.
- 만약 입력칸에 설정할 기본 내용이 없다면, 빈 문자열("")을 파라미터로 설정해도 된다.
- 사용자가 입력한 내용이 문자열 형태로 리턴
- 사용자가 아무런 값도 입력하지 않았으면 빈 문자열 입력
- 사용자가 취소 버튼을 눌렀다면 null이 리턴된다.
EX)
<body>
<script>
let input = prompt("입력 대화상자입니다.","기본값");
document.write(input);
</script>
</body>