자바스크립트 - 변수,조건문
변수는 값을 저장할 때 사용하는 식별자입니다. 이름은 변수이지만 숫자뿐만 아니라모든 자료형을 저장할 수 있습니다. 수학자들이 3.14159265 --- 원주율 값을 파이라고 간단히 표시하는 것과 비슷합니다. 변수는 다음 두 단계를 거쳐 사용할 수 있습니다.
1. 변수를 선언합니다.
2. 변수를 초기화합니다.
변수를 만드는 것을 '변수를 선언한다'고 표현합니다. 변수는 var 키워드 뒤에 식별자를 입력하는 방ㅂ접으로 선언합2니다. 변수 pi를 [코드 9-13]처럼 선언합니다.
코드 9-13 변수 선언
> var pi;
undefined
변수에 값을 저장하는 것을 '변수에 값을 할당한다'고 표현합니다. [코드 9-14]처럼 변수 pi에 값을 할당합니다.
코드 9-14 변수 선언과 값 할당
> var pi;
undefined
> pi = 3.14159265;
undefined
변수를 선언한 후 처음 값을 할당하는 것을 '변수를 초기화한다'고 말합니다. 일반적으로 변수의 선언과 초기화를 [코드 9-15]처럼 한 번에 처리합니다.
[코드 9-15] 변수 선언과 초기화
> var pi = 3.1459265;
undefined
변수에 값이 저장되면 [코드 9-16]처럼 변수를 사용해 저장된 값을 활용할 수 있습니다. [코드 9-16]처럼 입력하면 변수 pi에 저장된 값이 출력됩니다.
코드 9-16 변수에 저장된 값 출력
> var pi = 3.14159265;
undefined
> alerf(pi);
undefined
숫자가 저장된 변수는 산술 연산자처럼 숫자 연산자를 사용하고, 문자열이 저장된 변수는 문자열 연결 연산자처럼 문자열 연산자를 사용합니다.
기본 예제 9-2 변수 사용법(선언과 초기화)
1. HTML 페이지 만들기
먼저 자바스크립트를 실행할 수 있는 기본 HTML 페이지를 만듭니다. 이후 예제에서도 다른 태그를 별도로 수정하지 않은 이상 script 태그 부분만 표시합니다.
[코드 9-17] 기본 HTML 페이지 생성
<!DOCTYPE html>
<html>
<head>
<title>Javascript basic</title>
<script>
</script>
</head>
<body>
</body>
</html>
2. 변수 사용하기 변수를 사용하는 자바스크립트 코드를 script 태그 사이에 입력합니다. 코드를 실행하면 출력 결과처럼 반지름이 10인 원의 둘레를 구합니다.
[코드 9-18] 변수 사용
<script>
// 변수를 선언 및 초기화 합니다.
[var radius = 10;
var pi = 3.14159265;
// 출력합니다.
alert(2 * radius * pi);
</script>
5. 조건문
영화 <매트릭스>에서 모피어슨느 네오에게 빨간색과 파란색 알약 중 하나를 선택하라고 합니다. 파란색 알약을 먹으면 매트릭스 세계로 돌아가지만 빨간색 알약을 먹으면 다시는 원래 세계로 돌아갈 수 없습니다. 프로그램에서도 이렇듯 선택의 순간이 있는데, 바로 조건문을 만날 때 입니다. 이번에는 프로그램의 흐름을 변화시킬 수 있는 요소인 조건문을 살펴봅니다.
5.1 if 조건문
if 조건문은 가장 기본적인 조건문입니다. 불 표현식이 true이면 문장을 실행하고 false이면 문장을 무시합니다. 조건문을 만족해 실행되는 문장이 한 행이라면 중괄호를 생략할 수 있지만, 문장이 여러 행이라면 중괄호로 감싸야 합니다.
↓
<조건>→ true ↓ if (불 표현식) {
false↓ ㅡㅡㅡ<문장> 문자
}
[그림 9-3] if 조건문 순서도와 기본 형태
기본 예제 9-3 if 조건문으로 참, 거짓 구분
다음 코드는 if 조건문을 사용하는 간단한 예제입니다.
코드 9-19 참과 거짓 판별
<script>
// 조건문
if (273 < 52) {
// 표현식 "273 < 52"가 참일 때 실행합니다.
alert('273 < 52 => true');
}
// 프로그램 종료
alert('프로그램 종료');
</script>
if 조건문의 표현식이 거짓이므로 내부의 문장을 실행하지 않습니다.
" 당연히 거짓인데 왜 사용하나요?"
[코드 9-19]는 학습 때문에 만든 예제이며, 이렇게 당연한 조건의 조건문은 사용하지 않습니다.
기본 예제 9-4 if 조건으로 조건에 따라 분기
현재 시간에 따라 옺던과 오후를 알려 주는 프로그램을 만들어 봅니다.
1. 현재 시간 구하기 우선 현재 시간을 구하는 방법을 알아야겠죠? 자바스크립트는 다음 코드를 사용해 현재 시간을 구합니다.
[코드 9-20] 현재 시간 추출 방법
<script>
// Date 객체를 선언합니다.: 현재 시간 측정
var date = new Date();
// 요소를 추출합니다.
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDay();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
</script>
2. 오전과 오후 구분하기 현재 시간을 구하는 방법만 알면 쉽게 오전과 오후를 구분할 수 있습니다. 앞의 방법을 사용해 현재 시간을 구하고 오전과 오후를 판단하는 조건문 2개와 경고창으로 메시지를 표시하는 코드를 추가합니다.
[코드 9-21] 오전과 오후 판별
<script>
// 변수를 선언합니다.
var date = new Date();
var hours = date.getHours();
// 조건문
if (hours < 12) {
// 표현식 "hours < 12"가 참일 때 실행합니다.
alert('오전입니다.');
}
if (12 <= hours) {
// 표현식 "12 <= hours"가 참일 때 실행합니다.
alert('오후입니다.');
}
</script>
조건문은 굉장히 쉽지만 다양한 곳에 사용됩니다. 다른 시간 요소를 구하는 방법도 [코드 9-20]에서 살펴보았으므로 계절을 어떻게 구분할 수 있을지 생각해 보세요.
5.2 if else 조건문
현실은 물론이고 컴퓨터에서도 앞에서 다룬 오전과 오후처럼 조건에 따라 두 가지로 나뉘는 상황이 아주 많습니다. 자바스크립트는 이렇게 두 가지로 분명하게 나뉘는 상황에서 편리하게 사용ㄴ할 수 있는 if else 조건문을 제공합니다. if 조건문처럼 실행되는 문장이 한 행이라면 중괄호를 생략할 수 있지만, 문장이 여러 행이라면 중괄호로 감싸야 합니다.
true ↓ false
↓← <조건> →↓
<문장1> <문장2>
―――――――
↓
[그림 9-4] if else 조건문 순서도와 기본 형태
if (불 표현식) {
문장 1
} else {
문장 2
}
기본 예제 9-5 if else 조건문으로 조건에 따라 분기
[기본 예제 9-4]를 if else 조건문으로 변경해 보겠습니다. 실행 결과는 같습니다. if 조건문을 사용할 때는 조건을 두번 비교했지만, if else 조건문을 사용하면 한 번만 비교하므로 효율적입니다.
코드 9-22 if else 조건문으로 변경한 오전과 오후 판별
<script>
// 변수를 선언합니다.
var date = new Date();
var hours = date.getHours();
// 조건문
if (hours < 12) {
// 표현식 "hours < 12"가 참일 때 실행합니다.
alert('오전입니다.');
} else {
// 표현식 "hours < 12"가 거짓일 때 실행합니다.
alert('오후입니다.');
}
</script>
5.3 중첩 조건문과 if else if 조건문
조건문은 중첩해서 사용할 수 있습니다. 여러 번 중첩해도 사오간없으며 기본 형태는 다음과 같습니다.
if (불 표현식) {
if (불 표현식) {
문장
}
} else {
if (불 표현식) {
문장
} else {
문장
}
}
기본 예제 9-6 중첩 조건문
오전과 오후가 아니라 하루의 일정을 표현하려면 다음 코드처럼 중첩 조건문을 사용합니다. ㅋ노드가 복잡해 보이지만 간단한 내용이므로 이해하기 어렵지 않을 것입니다.
[코드 9-23] 하루 일정 표현
<script>
// Date 객체를 선언합니다: 현재 시간 측정
var date = new Date();
var hours = date.getHours();
// 조건문
if (hours < 5) {
alert('잠을 자렴....');
} else {
if (hours < 7) {
alert('준비');
} else {
if (hours < 9) {
alert('출근');
} elas {
if (hours < 12) {
alert('빈둥빈둥');
} else {
if (hours < 1) {
alert('식사');
} else {
// 여러 가지 업무를 수행합니다.
}
}
}
}
}
</script>
앞에서 조건에 따라 실행되는 문장이 한 행이라면 중괄호를 생략해도 된다고 했습니다. [코드 9-23]에서 중첩 조건문의 중괄호를 생략했을 때 만드는 조건문이 if else if 조건문입니다. if else if 조건문은 중복되지 않는 조건 세 가지 이상을 구분할 때 사용합니다.
if (불 표현식 {
문장
} else if (불 표현식) {
문장
} else if (불 표현식) {
문장
} else {
문장
}
기본 예제 9-7 if else if 조건문
[코드 9-23]의 중첩 조건문을 if else if 조건문으로 변경해 보겠습니다.
[코드 9-24] if else if 조건문으로 변경한 하루 일종 표현
<script>
// Date 객체를 선언합니다.: 현재 시간 측정
var date = new Date();
var hours = date.getHours();
// 조건문
if (hours < 5) {
alert('잠을 자렴....');
} else if (hours < 7) {
alert('준비');
} else if (hours < 9) {
alert('출근');
} else if (hours < 12) {
alert('빈둥빈둥');
} else if (hours < 1) {
alert('식사');
} else {
// 여러 가지 업무를 수행합니다.
}
</script>
TIP_ [코드 9-21]~[코드 9-24]는 프로그램을 실행하는 시간에 따라 메시지가 다르게 나타날 수 있습니다.
NOTE_ 논리 연산자와 조건문
논리 연산자도 조건문에서 사용할 수 있습니다. 예를 들어 계절을 구분하려면 조건문을 [코드 9-25]처럼 작성합니다.
코드 9-25 논리 연산자 사용
<script>
// Date 객체를 선언합니다: 현재 시간 측정
var date = new Date();
var month = date.getMonth() + 1;
// 조건문
if (3 <= month && month <= 5) {
alert('봄입니다.');
} else if (6 <= month && month <= 8 {
alert('여름입니다.');
} else if (9 <= month && month <= 11) {
alert('가을입니다.');
} else {
alert('겨울입니다.');
}
</script>
코드를 실행하면 현재 계절을 출력합니다.
[그림 9-5] 조건문과 논리 연산자 사용
논리 연산자와 조건문을 함께 사용할 때가 많으므로 여러 번 연습하기 바랍니다.
'프로그래밍 > Javascript' 카테고리의 다른 글
| 문서 객체 모델 (0) | 2017.08.09 |
|---|---|
| 자바스크립트 - 객체 (0) | 2017.08.08 |
| 자바스크립트 - 함수 (0) | 2017.08.07 |
| 자바스크립트 - 반복문 (0) | 2017.08.07 |
| 자바스크립트 기본 (0) | 2017.08.04 |
