인생 디벨로퍼

[기초 JAVA Script] 3-1강 자바 스크립트 조건 / if 문 사용 본문

JAVA Script

[기초 JAVA Script] 3-1강 자바 스크립트 조건 / if 문 사용

뫄뫙뫄 2023. 7. 16. 16:13
728x90

Index

   1. 확인 표시하기 (if)
   2. 입력 내용에 따라 동작 변경하기 (prompt)
   3. 조건 분기 (else if)
   4. 목차내용

 

1. 확인 표시하기 (if 문)

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>3-01_if</title>
<link href="../../_common/css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="header-contents">
<h1>확인 다이얼로그 박스 표시하기</h1>
<h2>확인 다이얼로그 박스를 사용해보자</h2>
</div><!-- /.header-contents -->
</header>
<div class="main-wrapper">
<section>
	<p>게임 진행은 콘솔로 확인</p>
</section>
</div><!-- /.main-wrapper -->
<footer>JavaScript Samples</footer>
<script>
console.log(window.confirm('게임 시작! 준비됐나요?'));
</script>
</body>
</html>

표시된 팝업 창에서 확인 or 취소 선택

window.confirm('메시지')

window 객체에 confirm 메소드 사용. (confirm=확인하다)

  • confirm() : alert 메서드와 달리 '특정 값을 반환(true/false)'

 

if 문을 사용해, confirm 의 값에 따라 이후 처리를 결정

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>3-01_if</title>
<link href="../../_common/css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="header-contents">
<h1>확인 다이얼로그 박스 표시하기</h1>
<h2>클릭한 버튼에 따라 메시지를 변경한다</h2>
</div><!-- /.header-contents -->
</header>
<div class="main-wrapper">
<section>
	<p>게임 진행은 콘솔로 확인</p>
</section>
</div><!-- /.main-wrapper -->
<footer>JavaScript Samples</footer>
<script>
if(window.confirm('게임 시작! 준비됐나요?')){
	console.log('게임을 시작합니다.');
} else {
	console.log('게임을 종료합니다.');
}
</script>
</body>
</html>

  • window.confirm() 의 값이 true 일때, if 문 실행 / false 일때 else 실행
  • if (조건)  { } 형태로 조건을 걸어줄 수 있다. 

2. 입력 내용에 따라 동작 변경하기(prompt)

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>3-02_var</title>
<link href="../../_common/css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="header-contents">
<h1>입력 내용에 따라 동작 변경하기</h1>
<h2>클릭한 버턴의 결과를 변수제 저장한다</h2>
</div><!-- /.header-contents -->
</header>
<div class="main-wrapper">
<section>
	<p>브라우저의 콘솔을 열어주세요</p>
</section>
</div><!-- /.main-wrapper -->
<footer>JavaScript Samples</footer>
<script>
var answer = window.prompt('도움말을 보시겠습니까?');
console.log(answer);

</script>
</body>
</html>

window.prompt(메시지)

프롬프트에 입력되는 값을 반환

반환된 값을 변수 answer 에 담아 console 에 찍음.

더보기

변수

  • 변수 패턴
    • 정의한다
    • 대입한다
    • 읽는다
    • 변경한다
  • 자바스크리트 변수의 수명 : 해당 페이지가 표시되고 있는 기간
  • 변수명에 사용할 수 없는 예약어 (자바스크립트 언어 차체에서 사용하고 있는 단어)

if 문 활용

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>3-02_var</title>
<link href="../../_common/css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="header-contents">
<h1>입력 내용에 따라 동작 변경하기</h1>
<h2>변수에 저장된 내용에 따라 동작을 변경한다</h2>
</div><!-- /.header-contents -->
</header>
<div class="main-wrapper">
<section>
	<p>브라우저의 콘솔을 열어주세요</p>
</section>
</div><!-- /.main-wrapper -->
<footer>JavaScript Samples</footer>
<script>
var answer = window.prompt('도움말을 보시겠습니까?');
if(answer === 'yes') {
	window.alert('탭 키로 점프해서 장해물을 피합니다.');
}
</script>
</body>
</html>

yes 를 입력했을때, 또 다른 팝업이 뜬다!
아무 반응도 없다

3. 조건 분기 (else if)

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>3-03_elseif</title>
<link href="../../_common/css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="header-contents">
<h1>동작의 범위를 넗히자</h1>
<h2>no인지 판단한다</h2>
</div><!-- /.header-contents -->
</header>
<div class="main-wrapper">
<section>
	
</section>
</div><!-- /.main-wrapper -->
<footer>JavaScript Samples</footer>
<script>
var answer = window.prompt('도움말을 보시겠습니까?');
if(answer === 'yes') {
	window.alert('탭 키로 점프해서 장해물을 피합니다.');
} else if(answer === 'no') {
	window.alert('게임 진행중...');
} else {
	window.alert('yes 또는 no로 대답해주세요.');
}
</script>
</body>
</html>

  • if / else if / else 를 사용해 다른 조건들로 분기할 수 있다.

(참고)

처음 만나는 자바스크립트 - 가노 스케하루 저자(글) · 김완섭 번역

728x90

'JAVA Script' 카테고리의 다른 글

[기초 JAVA Script] 3-4강 함수 / 사칙연산  (0) 2023.07.16
[기초 JAVA Script] 3-3강 반복문 for문 / while 문  (0) 2023.07.16
[기초 JAVA Script] 3-2강 비교 연산자 / 논리 연산자  (0) 2023.07.16
[기초 JAVA Script] 2강 출력  (0) 2023.07.15
[기초 JAVA Script] 1강 자바스크립트란?  (0) 2023.07.15
'JAVA Script' Related Articles more