[Javascript] 변수, 조건문, 반복문, 배열
변수
• 값을 저장할 때 사용하는 식별자
• 숫자뿐만 아니라 모든 자료형 저장 가능
• 변수는 var 키워드 뒤에 식별자를 입력하는 방법으로 선언
var pi; // 변수 선언
pi = 3.14159; // 값 할당
HTML 페이지 만들기
- 자바스크립트를 실행할 수 있는 기본 HTML 페이지를 만들고 다른 태그를 별도로 수정하지 않은 채
script 태그 부분에서 코드를 작성한다.
변수 사용하기
✍ 입력
💻 출력
조건문과 반복문
• if - else 조건문
✍ 입력
💻 출력
• if else if 조건문
✍ 입력
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 변수 선언
var date = new Date(); // 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 < 14) {
alert('식사');
} else {
}
</script>
</head>
<body>
</body>
</html>💻 출력
• 논리연산자와 조건문
현재 계절을 출력하는 코드
✍ 입력
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 변수 선언
var date = new Date(); // Date 객체 선언 (현재 시간 측정)
var month = date.getMonth() + 1;
if (month >= 3 && month <= 5) {
alert('봄이에요');
} else if (month >= 6 && month <= 8) {
alert('여름이에요');
} else if (month >= 9 && month <= 11) {
alert('가을이에요');
} else {
alert('겨울이에요');
}
</script>
</head>
<body>
</body>
</html>💻 출력
• 반복문
'안녕하세요' 문구 5번 경고창으로 출력하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
for (var i = 0; i <= 5; i++) {
alert('안녕하세요');
}
</script>
</head>
<body>
</body>
</html>배열
• 변수 여러 개를 한꺼번에 다룰 수 있는 자료형
• 자바스크립트에서 배열은 대괄호([ ])를 사용해 생성
• 배열 내부에 다양한 자료형 입력 가능
✍ 입력
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var array = [12, '야구', true, [32,103]];
alert(array);
</script>
</head>
<body>
</body>
</html>
💻 출력
• 배열 생성과 배열 요소 접근
✍ 입력
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 배열 생성
var array = [1,2,3,4];
// 배열 요소 변경
array[0] = 5;
// 요소 출력
alert(array[0]);
alert(array[1]);
</script>
</head>
<body>
</body>
</html>💻 출력
• 배열 요소의 개수
- 배열 변수의 length 속성을 사용하여 배열 요소의 개수 확인
✍ 입력
<script>
// 변수 선언
var array = [1,2,3,4];
alert(array.length);
</script>💻 출력
배열과 반복문
• while 반복문
✍ 입력
💻 출력
• for 반복문
- 위의 while 반복문에서 사용하였던 소스코드를 for문으로 작성하기
- for 반복문을 사용하여 0부터 100까지의 합 계산하기
✍ 입력
💻 출력
실습 예제
센티미터 cm를 입력하면 피트 feet 와 인치 inch로 변환하는 프로그램을 작성하시오.
(1feet = 12inch, 1inch = 2.54cm)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var cm = parseFloat(prompt("cm 단위로 입력해주세요"));
var inch = cm / 2.54;
var feet = inch / 12;
alert(cm +'은 ' + inch.toFixed(3) + '인치, ' + feet.toFixed(3) +'피트입니다.');
</script>
</head>
<body>
</body>
</html>
원기둥 밑면의 반지름과 높이를 입력받아 부피를 계산하는 프로그램을 작성하시오.
Hint 원기둥의 부피 = 밑면의 넓이 × 높이 = (반지름 × 반지름 × π) × 높이
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var r = parseFloat(prompt('반지름을 입력하세요'));
var h = parseFloat(prompt('높이를 입력하세요'));
var pi = 3.14;
var volume = (r * r * pi) * h;
alert('원기둥의 부피는 ' + volume + '입니다.')
</script>
</head>
<body>
</body>
</html>네 자리 정수를 입력받아 천, 백, 십, 일의 자리로 분리해 출력하는 프로그램을 작성하시오.
천의 자리는 parseInt (num/1000), 백의 자리는 parseInt (num%1000/100)으로 구할 수 있습니다.
사용자에게 값을 입력받는 부분은 다음과 같이 prompt( ) 함수를 사용합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var num = prompt('네 자리 정수를 입력하세요');
alert('천의 자리: ' + parseInt(num/1000) + ' , 백의 자리: ' + parseInt(num%1000/100)
+', 십의 자리: ' + parseInt(num%100/10) + ', 일의 자리: ' + parseInt(num%10));
</script>
</head>
<body>
</body>
</html>사용자에게 태어난 연도를 입력받아 그 해의 띠를 출력하는 프로그램을 작성하시오.
입력받은 연도를 12로 나눈 나머지를 사용합니다. 나머지가 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11일 때는 각각 원숭이띠, 닭띠, 개띠, 돼지띠, 쥐띠, 소띠, 범띠, 토끼띠, 용띠, 뱀띠, 말띠, 양띠입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var year = prompt('연도를 입력하세요');
var num = ['원숭이','닭','개','돼지','쥐','소','범','토끼','용','뱀','말','양'];
alert(num[year % 12] + '띠입니다.');
</script>
</head>
<body>
</body>
</html>반복문을 사용해 다음 그림과 같이 패턴을 출력하는 프로그램을 작성하시오. 반복문을 이중으로 사용합니다.
*
**
***
****
*****
******
*******
********
*********
**********
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var str = '';
for (var i = 1; i <= 10; i++) {
for(var j = 1; j <= i; j++) {
str += '*';
}
str += '\n';
}
alert(str);
</script>
</head>
<body>
</body>
</html>