자바스크립트 chapter 1
1. 문자를 숫자로 바꾸는 방법!
<script type="text/javascript">
document.writeln("123" + 1 + "<br>");
document.writeln(Number("123") + 1 + "<br>");
document.writeln(Number("+123") + 1 + "<br>");
document.writeln(Number("123a") + 1 + "<br>"); // NaN(Not a Number)
a ="123";
// NaN을 비교하려면 isNaN()함수를 사용한다.
document.writeln((isNaN(Number(a)) ? "숫자아님" : (Number(a) + 1)) + "<br>");
document.writeln("<br><hr>");
document.writeln(parseInt("123") + 1 + "<br>");
document.writeln(parseInt("10", 2) + "<br>");
document.writeln(parseInt("10", 8) + "<br>");
document.writeln(parseInt("10", 16) + "<br>");
document.writeln(parseInt("FF", 16) + "<br>");
var exp = prompt("수식을 입력하세요"); //===> 문자열로 입력된다.
document.writeln(exp + "의 결과는 " + exp + "<br>");
// eval() : 유효한 자바스크립트 식으로 변경해준다.
// eval을 절대 사용하지 말 것! (eval is evil)
// https://velog.io/@modolee/javascript-eval-is-evil 참조!!!!
document.writeln(exp + "의 결과는 " + eval(exp) + "<br>");
</script>자바스크립트는 문자+정수 간의 자동 형변환이 이루어진다.
첫번째 케이스에서는 문자+정수의 조합으로 정수가 문자로 자동형변환 되면서 "1231"이 출력이 된다.
두번째 케이스: 마찬가지로 정수+문자의 조합인데 Number함수를 사용해 명시적 형변환을 이뤘다. 124 출력
세번째 케이스도 마찬가지이다.
네번째 케이스는 NaN이라는 값이 출려된다. NaN은 Not a Number라는 뜻. 숫자가 아닌 값이 섞여있기 때문
NaN을 비교하는 함수 : isNaN 함수
주어진 값이 NaN이면 true, 아니면 false이다.
다섯번째, parseInt를 사용해 String을 int형으로 형변환 하였다.
parseInt("String", radix) -> String 문자를 뒤에 있는 진법으로 변환시킨다.
2. prompt 함수를 이용한 숫자만 입력받기
<script type="text/javascript">
var age = 0;
do{
age = prompt("나이?");
}while(isNaN(age));
alert("당신은 내년에 " + (Number(age) + 1) + "살입니다.");
</script>변수 age 선언 후
반복문
prompt("나이")를 반복 while(age가 숫자일때까지)
스크립트 창에 나이(정수)를 입력하면
알림 alert 가 뜬다. 이때 age의 값을 명시적으로 알려주기위해 Number(age)+1 을 해준다.
3. Math함수와 형변환
<script type="text/javascript">
var n = Math.sqrt(2);
document.write(n + "<br>");
var n = Math.sqrt(3);
document.write(n + "<br>");
var n = Math.sqrt(-3);
document.write(n + "<br>"); // 허수를 NaN으로 판단.
s = String(123); // Number는 숫자로, String은 문자로 Boolean은 논리값으로 변환
document.write(typeof(s) + " : " + (s + 1) + "<br>");
s = Boolean("true");
document.write(typeof(s) + " : " + (!s) + "<br><hr>");
// 아래의 값은 모두 거짓이다.
document.write(Boolean(0) + "<br>");
document.write(Boolean('') + "<br>");
document.write(Boolean(NaN) + "<br>");
document.write(Boolean(null) + "<br>");
document.write(Boolean(undefined) + "<br><hr>");
document.write(('' == false) + "<br>"); // 자동 형변환이 이루어진다.
document.write(('' == 0) + "<br>");
document.write((0==false) + "<br>");
document.write(('274'==274) + "<br><hr>");
document.write(('' === false) + "<br>"); // 자동 형변환이 이루어지지 않는다. 타입과 값이 모두 일치
document.write(('' === 0) + "<br>");
document.write((0===false) + "<br>");
document.write(('274'===274) + "<br><hr>");
</script>자바와 마찬가지로 Math함수가 존재한다.
주의: 음수의 루트는 허수이므로 자바스크립트에서는 이 값을 NaN으로 판단한다.
아래도 형변환 관련 내용이다.
추가로 알아야 할 점
1). typeof 연산자는 피연산자의 평가 전 자료형을 나타내는 문자열을 반환한다.
2). 참과 거짓 boolean이 나오는데, 자바 스크립트에서는 0은 거짓 1은 참으로 리턴된다.
c언어에서는 0은 거짓 그 이외의 숫자는 참인 것과 비슷하다.
4. 조건문
<script type="text/javascript">
var today = new Date();
document.writeln( today.getYear() + "<br>"); // 1900년 이후 연도수
document.writeln( today.getFullYear() + "<br>");
document.writeln( today.getMonth() + "<br>"); // 월 (0~11)
document.writeln( today.getDate() + "<br>"); // 일
document.writeln( today.getDay() + "<br>"); // 요일
document.writeln( today.getHours() + "<br>");// 시
document.writeln( today.getMinutes() + "<br>");// 분
document.writeln( today.getSeconds() + "<br>");// 초
hh = today.getHours();
if(hh<=12){
document.writeln("오전<br>");
}else{
document.writeln("오후<br>");
}
// 스위치문의 이상한 표현
switch (true) {
case hh<11: // 값으로 조건식을 어떻게 가능할까? 자동형변환이 이루어져서 가능
document.writeln("아침~<br>");
break;
case hh<15:
document.writeln("점심~<br>");
break;
default:
document.writeln("저녁~<br>");
break;
}
</script>마찬가지로 자바 객체를 이용하는 것과 같이 똑같이 사용이 된다.
타입이 var로 시작하는 것만 유의하면 된다.
조건문도 자바와 유사하다.
주의해야 할 점
1. switch문의 이상한 표현에 대한 이야기.
위의 값에서 자바에서는 case 값: 이런 형식을 띄기 마련인데
여기서는 case 조건식: 이런 방식으로 작성하였다. 자바스크립트에서는 자동형변환이 이루어져 조건식이 참과 거짓
true, false를 리턴하게 되면서 이상한 방식의 switch문이 작동하는 것이다.
5. 짧은 조건문
<script type="text/javascript">
// || 연산의 경우 앞의값이 참이면 뒤는 계산하지 않는다.
document.writeln((true || "Sunday") + "<br>") // true
document.writeln((false || "Sunday") + "<br>") // Sunday
// && 연산의 경우 앞의값이 거짓이면 뒤는 계산하지 않는다.
document.writeln((true && "Sunday") + "<br>") // Sunday
document.writeln((false && "Sunday") + "<br>") // false
var n = 12;
document.writeln((n%2 || "짝수" ) + "<br>") // false
var n = 13;
document.writeln((n%2 && "홀수" ) + "<br>") // false
</script>||연산의 경우 앞의 값이 참이면 뒤는 계산하지 않는다.
반대로
&&연산의 경우 앞의 값이 false이면 뒤는 계산하지 않는다.
아래 식은 12를 2로 나눈 몫이 0이므로 자동형변환을 통해 거짓이 리턴된다. 앞의 값이 거짓이므로 뒤의 값이 계산되어
짝수가 출력된다.
그 다음 식은 13을 2로 나눈 몫이 1이므로 참이 리턴된다. 앞의 값이 참이므로 뒤의 값까지 계산이 된다.
홀수가 출력된다.
6. 가변인수
<script type="text/javascript">
// 가변 인수란? 인수의 개수가 정해지지 않은 함수
function sum(){
// 자바스크립트 함수에는 숨겨진 arguments라는 인수가 존재한다.
// arguments가 넘어온 모든 인수를 배열로 받아 준다.
var s = 0;
for(var i in arguments){
s += arguments[i];
}
return s;
}
document.writeln(sum(1, 2) + "<br>");
document.writeln(sum(1, 2, 3) + "<br>");
document.writeln(sum(1, 2, 3, 4, 5, 6, 7, 8) + "<br>");
</script>주의해야 할 점이 한가지 있다.
기존 for문 :과는 다른 점이 존재한다.
var i in arguments는 i에 배열의 값을 넘기는게 아니라 인덱스의 값을 넘긴다.
그렇기 때문에
s+=i가 아닌
s+=arguments[i]; 가 되는 것이다.