JavaScript_1강_4_입출력 대화 상자(alret(), confirm(), prompt(), 문자->숫자 변환, 탬플릿 리터럴)

열라뽕따히·2024년 3월 7일

JavaScript

목록 보기

4/37

자바에서의 입출력 대화 상자

1. alret() : 알림(경고) 창

특정 정보를 사용자에게 메세지 창으로 알려 주기 위해 주로 사용됨
ex) window.alert("알림 내용 또는 경고 내용");
alert("알림 내용 또는 경고 내용");

2. confirm() : 확인 창

확인 또는 취소 버튼이 나타나는 알림창
boolean 타입
ex) window.confirm("문자열");
confirm("문자열");

3. prompt() : 입력 창

키보드로 데이터를 입력받을 때 사용하는 알림창
ex) window.prompt("문자열", [초기값 - 생략 가능]);
prompt("문자열", [초기값 - 생략 가능]);

문자열을 숫자로 바꾸어 주는 함수

1. Number() 함수

: 괄호 안에 데이터를 넣어 주면 숫자로 변환해주는 함수

2. parseInt() 함수

: 괄호 안에 데이터를 넣어 주면 숫자로 변환해주는 함수

템플릿 리터럴 방식

템플릿 리터럴은 문자열과 변수, 식을 섞어서 하나의 문자열로 만드는 표현 방식을 말함
템플릿 리터럴 방식 이전에는 문자열 부분을 큰 따옴표로 묶은 후에 연결 연산자인 '+'를 사용하여 식이나 변수와 연결을 하였음
하지만 변수나 식이 많아질수록 오타가 나올 확률이 많게 됨
템플릿 리터럴은 백팃(``)을 이용해서 문자열을 만듦.
템플릿 리터럴 안에 변수나 식이 들어간다면 ${ }로 묶어서 처리하면 됨

confirm() 예시

=============================코드=============================

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

	// 2. confirm() : 확인 창
	// [확인] 클릭 시 true 값 반환 / [취소] 클릭 시 false 값 반환  => boolean 타입
		let am_pm = confirm("현재 시간은 오전인가요?");
		console.log("am_pm >>> " + am_pm);
		
		/*
			문자열을 숫자로 바꾸어 주는 함수
			1. Number() 함수
			2. parseInt() 함수 
		*/
		
		let height = Number(prompt("당신의 키를 입력하세요!"));
		console.log(typeof(height));

	// 적정 표준 몸무게 : (키 - 100) * 0.9
		let standWeight = (height - 100) * 0.9;
		document.write("당신의 표준 몸무게는 " + standWeight + "kg 입니다.<br/>");

	// 템플릿 리터럴 방식
		document.write(`당신의 표준 몸무게는 ${standWeight} kg 입니다.`);
		
</script>
</head>
<body>
</body>
</html>