[JavaScript] 3. 자바스크립트의 타입 변환 & 대화 상자

# 자바스크립트의 타입 변환 

let a = 10; // number 형 
let b = "5"; // string 형 
console.log(a + b);  // 105 도출
console.log(a * b);  // 50 도출

* 자바스크립트의 변수는 타입이 고정되어 있지 않으며, 같은 변수에 다른 타입의 값을 대입할 수 있습니다. 

let a = 10;  // number 형 
a = "JavaScript"; // string 형 

 

 

1. 묵시적 타입 변환 (자동 형변환) 

자바스크립트에서는 특정 타입의 값을 기대하는 곳에 다른 타입의 값이 오면, 자동으로 타입을 변환해서 사용합니다.

let a = "10";
let b = "20";
let result = a + b; // "1020"
result = a - b; // -10 <-- 숫자만 뺀다고 생각하기 때문에 자동으로 타입을 변환시켜 계산을 해준다.
let c = "문자";
result = a - c; // NaN

 

● NaN(Not a Number)

정의되지 않은 값이나 표현할 수 없는 값이라는 의미입니다. NaN은 number 타입의 값으로 0을 0으로 나누거나, 
숫자로 변환할 수 없는 연산을 시도하는 경우 반환됩니다. 

 

예시)

<script>
        "use strict";
        let a = 10 + "문자열";
        console.log(a);
        let b = "3" * "5";
        console.log(b);
        let c = 1 - "문자열";
        console.log(c);
        let d = "10" - "20";
        console.log(d);
</script>

 

 

2. 명시적 타입 변환 

자바스크립트는 자동으로 타입 변환을 사용하지만, 명시적으로 타입을 변환할 방법도 제공합니다. 

Number()	문자를 숫자로 변환합니다.(정수/소수 모두)
String()	숫자나, 불린 등의 자료를 문자형으로 변환합니다.
Boolean()	문자나 숫자 등의 자료를 불린 형으로 변환합니다.
	- 0 이 아닌 값이 있는 것들은 모두 true로 바뀐다. 따라서 0 은 false
Object()	모든 자료형을 객체형으로 변환합니다.
parseInt()	문자를 int형으로 변환합니다.(정수)
parseFloat()	문자를 float형으로 변환합니다.(소수)

 

예시)

<script>
        "use strict";
        let num1 = "10";
        let num2 = "5";
        console.log("현재 num의 타입 : " + (typeof num1)); // String
        console.log("num1 + num2 : " + (num1 + num2)); // 105
        console.log("Number(num1) + Number(num2) : " + (Number(num1) + Number(num2)));
</script>

console 값

 

 

 

 

# 자바스크립트의 대화 상자 

window.alert()	사용자에게 메시지를 보여주고, 확인을 기다립니다.
window.confirm()	사용자에게 메시지를 보여주고, 확인이나 취소를 누르면 그 결과를 불린 값으로 반환합니다.
window.prompt()	사용자에게 메시지를 보여주고, 사용자가 입력한 문자열을 반환합니다.

 

● 특징

1. window는 생략이 가능하다.

2. window는 객체이며 브라우저의 기능들이 들어가 있다.

 

 

예시 1)  window.alert 사용

<script>
        "use strict"
        window.alert("안녕하세요. JavaScript"); 
</script>

 

 

예시 2)  window.confirm 사용

<script>
        "use strict"
        let result = window.confirm('확인 또는 취소를 눌러주세요.');
        console.log(result); // Boolean 형으로 출력된다.
</script>

좌) '확인' 클릭할 때,        우) '취소' 클릭할 때

 

 

예시 3)  window.prompt사용(1)

<script>
        "use strict"
        let num1 = window.prompt("첫번째 숫자를 입력하세요.");
        let num2 = window.prompt("두번째 숫자를 입력하세요.");
        console.log(num1 + num2);
        //문자열 연결로 인하여 숫자가 더해지지 않고 연결된다.

        // console.log(Number(num1 + num2)); 맞지않은 표현 
</script>

console 값

 

 

 

예시 4)  window.prompt사용(2)

<script>
        "use strict"
        let num1 = window.prompt("첫번째 숫자를 입력하세요.");
        let num2 = window.prompt("두번째 숫자를 입력하세요.");
		
        console.log(Number(num1) + Number(num2));
</script>

console 값

 

 

문제)

아래와 같은 형식의 입력을 받아 출력 예시와 같이 프로그램을 작성해보자.

입력 예시 ) prompt 입력 
이름을 입력하세요. 홍길동
HTML 점수를 입력하세요. 90
CSS 점수를 입력하세요. 80
JavaScript 점수를 입력하세요. 85

출력 예시 ) console로 출력 
홍길동 님의 성적 
HTML : 90점
CSS : 80점 
JavaScript : 85점 
총점 : 
평균 : 

<h2>학생 성적 관리 프로그램</h2>
    <script>
        "use strcit"
        const name = prompt("이름을 입력하세요.");
        const num1 = Number(prompt("HTML점수를 입력하세요."));
        const num2 = Number(prompt("CSS점수를 입력하세요."));
        const num3 = Number(prompt("JavaScript점수를 입력하세요."));
        const total = num1 + num2 + num3;
        const avg = total / 3;

        console.log(`${name}님 성적표`);
        console.log(`HTML : ${num1}점`);
        console.log(`CSS : ${num2}점`);
        console.log(`JavaScript : ${num3}점`);
        console.log(`총점 : ${total}점`);
        console.log(`평균 : ${avg}점`);
</script>

console 값