UI/UX_013
간단정리
1.배열
1) 여러 개의 변수를 한꺼번에 다룰 수 있는 자료형
2) 대괄호([ ])로 생성
3) 대괄호 사용 후 안에 쉼표로 구분해 자료를 입력
4) 각각 다른 자료형도 배열의 요소 가능
var array = [273, 32, 103, 57, 52];
var array = [273, 'String', true, function () { }, {}, [273, 103]];
array[0] : 273 0부터 시작해서 접근
2. IF 조건문
1)
if(조건식) {
조건식 참일 경우 실행문장
}
그 다음 명령문;
2)
if (조건식) {
참일 때 실행합니다.
} else {
거짓일 때 실행합니다.
}
3)
if (조건식1) {
조건식1이 참일 때 실행합니다.
} else if(조건식2){
조건식1이 거짓이고 조건식2가 참일 때 실행합니다.
} else {
조건식1,2가 거짓일때 실행
}
3. switch 조건문
switch (조건식이나 변수) {
case 값1:
조건식이이나 변수가 값1에 해당하는 경우 실행
break;
case 값2:
조건식이이나 변수가 값2에 해당하는 경우 실행
break;
default:
어느곳에 해당하는 값이 없을 경우 실행
break;
}
4. 삼항 연산자
(조건식) ? 참일 때 실행 : 거짓일 때 실행
5.while 반복문
1) while (조건문) {
조건이 참일 경우 실행문장;
}
2) do {
최소 한번은 실행 후 조건 검사
} while (조건);
조건의 참 거짓 여부와 상관없이 내부의 문장을 최소한 한 번은 실행해야 하는 경우 사용
6. for 반복문
1) for (초기식; 조건식; 종결식) {
조건이 참일 동안 실행
}
- 초기식 실행
- 조건식 비교/ 조건이 거짓이면 반복문 종료
- 참일 경우 문장을 실행
- 종결식 실행
- 다시 ‘조건식 비교’ 이후를 반복
예문
Ex_01 변수선언가 출력
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
// 변수를 선언합니다.
var input = confirm('수락하시겠습니까?');
// 출력합니다.
document.write(input);
</script>
</head>
<body>
</body>
</html>
Ex_02
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
// 변수를 선언합니다.
var array = [ 273, 32, 103, 57, 52 ];
document.write(typeof (array));
</script>
</head>
<body>
</body>
</html>
Ex_03
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
// 변수를 선언합니다.
var array = [ 273, 32, 103, 57, 52 ];
document.write(typeof (array));
document.write("<br />");
document.write(array);
</script>
</head>
<body>
</body>
</html>
Ex_04
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
// 변수를 선언합니다.
var array = [273, 'String', true, function() {
}, {}, [ 273, 103 ] ];
// 출력합니다.
alert(array);
</script>
</head>
<body>
</body>
</html>
Ex_05 배열의 요소
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
// 변수를 선언합니다.
var array = [ 273, 32, 103, 57, 52 ];
document.write(array[1]);
// 배열 요소 접근 시 인덱스는 0 부터 시작
</script>
</head>
<body>
</body>
</html>
Ex_06 배열의 길이
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
var arrayA = [ 0, 1, 2, 3 ];
var arrayB = [ 0, 1, 2, 3, 4, 5, 6 ];
alert("length of A: " + arrayA.length);
alert("length of B: " + arrayB.length);
</script>
</head>
<body>
</body>
</html>
Ex_07 if 참일때만 실행
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
// 조건문
if (1 < 2) {
alert('참입니다.');
}
alert('종료');
</script>
</head>
<body>
</body>
</html>
Ex_08 if ~ else
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
var abc1 = prompt("숫자를 입력해주세요.", "");
var abc2 = Number(abc1);
// 조건문
if (abc2 < 12) {
alert("오전입니다.");
} else {
alert("오후입니다.");
}
alert("감사합니다.");
</script>
</head>
<body>
</body>
</html>
Ex_09 if ~ else if ~ else
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
// 변수를 선언합니다.
var hour = Number(prompt("1부터 24 사이 숫자를 입력하세요.", ""));
// 조건문
if (hour < 11) {
// "hour < 11"가 참일 때 실행합니다.
alert("아침 먹을 시간입니다.");
} else if (hour < 15) {
// "hour < 11"이 거짓이고 "hour < 15"가 참일 때 실행합니다.
alert("점심 먹을 시간입니다.");
} else {
// "hour < 11"이 거짓이고 "hour < 15"가 거짓일 때 실행합니다.
alert("저녁 먹을 시간입니다.");
}
alert("종료");
</script>
</head>
<body>
</body>
</html>
Ex_10 switch문
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
// 변수를 선언합니다.
var input = Number(prompt("숫자를 입력하세요.", ""));
// 조건문
switch (input % 2) {
case 0:
alert('짝수입니다.');
break;
case 1:
alert('홀수입니다.');
break;
default:
alert('숫자가 아닙니다.');
break;
}
</script>
</head>
<body>
</body>
</html>
Ex_11
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
// 변수를 선언합니다.
var input = prompt("숫자를 입력해주세요.", "");
var number = Number(input);
// 조건문
/*if(number > 0)
alert("양수입니다.");
else
alert("양수가 아닙니다.");
*/
(number > 0) ? alert("양수입니다.") : alert("양수가 아닙니다.");
</script>
</head>
<body>
</body>
</html>
Ex_12 while
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
// 변수를 선언합니다.
var value = 0;
// 반복문
while (value < 5) {
document.write(value + "번째 반복");
document.write("<br />");
value++;
}
</script>
</head>
<body>
</body>
</html>
Ex_13
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
// 변수를 선언합니다.
var value = 0;
// 반복문
while (value > 5) {
document.write(value + "번째 반복");
document.write("<br />");
value++;
}
// 거짓일 경우 한번 도 실행 안함
</script>
</head>
<body>
</body>
</html>
Ex_14 do ~ while
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
// 변수를 선언합니다.
var value = 0;
// 반복문
do {
document.write(value + "번째 반복문");
document.write("<br />");
value++;
} while (value < 0);
</script>
</head>
<body>
</body>
</html>
Ex_15 for
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
// 반복문
for (var value = 0; value < 5; value++) {
document.write(value + "번째 반복문");
document.write("<br />");
}
</script>
</head>
<body>
</body>
</html>
Ex_16
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
// 변수를 선언합니다.
var array = [ '포도', '사과', '바나나', '망고' ];
// 반복문
for (var i = 0; i < array.length; i++) {
document.write(array[i]);
document.write("<br />");
}
</script>
</head>
<body>
</body>
</html>
Ex_17 짝수의 합구하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
// 변수를 선언합니다.
var output = 0;
// 반복문
for (var i = 1; i <= 10; i++) {
if (i % 2 == 0) {
output += i;
}
}
// 출력합니다.
alert(output);
</script>
</head>
<body>
</body>
</html>
Ex_18 중첩 for문
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>구구단</title>
<script>
for (var i = 1; i < 10; i++) {
document.write(i + "단 출력<br />");
for (var j = 1; j < 10; j++) {
document.write(i + " * " + j + " = " + i * j + "<br />");
}
}
</script>
</head>
<body>
</body>
</html>
Ex_19 중첩 for문으로 피라미드 만들기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
// 변수를 선언합니다.
var output = '';
// 반복문
for (var i = 0; i < 15; i++) {
for (var j = 15; j > i; j--) {
output += ' ';
}
for (var k = 0; k < 2 * i - 1; k++) {
output += '*';
}
output += '\n';
}
// 출력합니다.
alert(output);
</script>
</head>
<body>
</body>
</html>
Ex_20
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자동테이블생성</title>
<style>
table {
border: 1px solid #575757;
}
td {
border: 1px solid #575757;
text-align: center;
width: 100px;
}
</style>
<script>
var num = 1;
document.write("<table>");
for (var i = 0; i < 10; i++) {
document.write("<tr>");
for (var j = 0; j < 5; j++) {
document.write("<td>" + num + "</td>");
num++;
}
document.write("</tr>");
}
document.write("</table>");
</script>
</head>
<body>
</body>
</html>
Ex_21 prompt로 값을 입력받아 테이블을 자동으로 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자동테이블생성</title>
<style>
table {
border: 1px solid #575757;
}
td {
border: 1px solid #575757;
text-align: center;
width: 100px;
}
</style>
<script>
var num = 1;
var s = prompt("행을 입력해 주세요", "");
var t = prompt("열을 입력해 주세요", "");
document.write("<table>");
for (var i = 0; i < s; i++) {
document.write("<tr>");
for (var j = 0; j < t; j++) {
document.write("<td>" + num + "</td>");
num++;
}
document.write("</tr>");
}
document.write("</table>");
</script>
</head>
<body>
</body>
</html>
Ex_22 학점계산기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자동테이블생성</title>
<script>
var language = prompt("언어점수를 입력해 주세요", "");
var math = prompt("수리점수를 입력해 주세요", "");
var society = prompt("사회점수를 입력해 주세요", "");
var science = prompt("과학점수를 입력해 주세요", "");
var result = [ language, math, society, science];
var sum = 0;
for (i = 0; i < result.length; i++) {
sum += Number(result[i]);
}
switch (Math.floor((sum/4)/10)) {
case 10:
alert("A학점입니다.");
break;
case 9:
alert("A학점입니다.");
break;
case 8:
alert("B학점입니다.");
break;
case 7:
alert("C학점입니다.");
break;
case 6:
alert("D학점입니다.");
break;
case 5:
alert("E학점입니다.");
break;
default:
alert("F학점입니다.");
break;
}
</script>
</head>
<body>
</body>
</html>