자바스크립트 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]; 가 되는 것이다.