[JavaScript] 기초문법-2 (alert, prompt, confirm / 형변환)

[JavaScript] 기초문법-2 (alert, prompt, confirm / 형변환)

---

✅ 사용자 인터페이스 기능 (alert / prompt / comfirm)

▶ alert : 알려줌

▶ prompt : 입력 받음

▶ confirm : 확인 받음

 

1. alert('message'); 

 

- 확인 버튼을 누를 때까지 계속해서 메세지를 보여줌

- 확인버튼을 누르면 닫힘

 

 

2. prompt('message', [default]);

 

- 사용자에게 메세지를 보여주고, 값을 입력받을 수 있음

- 취소를 누르면 null을 반환

 

const name = prompt("이름을 입력하세요.");

alert(`환영합니다. ${name}님`);

 

- 두번째 인수를 넣으면 default 제공 가능

 

let birthDay = prompt('생년월일을 입력하세요.', '2001-04-');
alert(`당신의 생일이 ${birthDay} 맞습니까?`);

 

 

 

3. confirm('message');

 

- 사용자에게 확인을 받기 위한 용도

- 확인 : true 반환

- 취소 : false 반환

let pushButton = confirm("버튼을 누르시겠습니까?");
alert(pushButton);
// '확인' - true
// '취소' - false

---

✅ 자료형변환

 

1. 숫자형 변환

Number('문자') : 문자 ➡ 숫자형

let word = '500';

console.log(typeof(word)); // string
console.log(typeof(Number(word))); // number

 

- 숫자가 아닌 문자가 있으면 NaN 타입이 뜸

console.log(
  Number(true),
  Number(false),
  Number("123"),
  Number("123rs")
  )
// 1 0 123 NaN

 

 

2. 문자형 변환

String(숫자) : 숫자 ➡ 문자형 

let num = 3;

console.log(
  typeof(num), // number
  typeof(String(num)), // string
  )

 

3. Boolean 형변환

Boolean(내용) : 내용 ➡ 불린형

- false : 0, '', null, undefined, NaN

- true : 나머지

console.log(
  Boolean(0), // false
  Boolean('0'), // true
  Boolean(''), // false
  Boolean(' ') // true
  )

 

 

4. 예제

1) 입력 : prompt를 이용하여 수학과 영어 점수 입력

2) 출력 : 수학과 영어 점수의 평균을 출력

 

4-1. [오류 발생] 출력 결과 : 5045

const mathScore= prompt("수학 몇점?"); // 100
const engScore= prompt("영어 몇점?"); // 90
const result = (mathScore + engScore) /2;

console.log(result); // 5045 - 논리오류 발생

 

- 오류 원인 : prompt로 입력받은 값은 모두 문자열

('100' + '90' = '10090')

>> 10090 / 2 = 5045가 나온 것 (문자열을 알아서 숫자형으로 바꿔 나눠줌)

 

 

4-2. [미흡] 숫자형 변수로 저장

const mathScore= 100;
const engScore= 90;
const result = (mathScore + engScore) /2;

console.log(result); // 95

 

- 처음부터 숫자형 변수로 저장하는 방법으로 해결 가능

- 그러나 이 방법을 사용하면, 사용자로부터 입력받는 것이 불가능함.

 

 

4-3. [오류 발생] 출력 결과 : 5045

- Number('문자') 사용 : 문자를 숫자형으로 바꿔줌

const mathScore= prompt("수학 몇점?");
const engScore= prompt("영어 몇점?");
const result = Number(mathScore + engScore) /2;

console.log(result); // 5045

 

- 오류 원인 : 1번과 같은 오류

>> '50' + '45' = 5045를 숫자형으로 변환해서 오류 발생

 

4-4. [해결]

- Number('문자') 사용 : 문자를 숫자형으로 바꿔줌

const mathScore= prompt("수학 몇점?");
const engScore= prompt("영어 몇점?");
const result = (Number(mathScore) + Number(engScore)) /2;

console.log(result);

---

📛 주의 📛
Number(null) // 0 - prompt에서 취소 버튼을 눌렀을 때 null 반환
Number(undefined) // NaN

Boolean(0) - false
Boolean('0') - true
Boolean('') - false // 아무것도 없음
Boolean(' ') - true // 공백이 포함될 경우