0. 반복문이란?
- 조건식이 맞으면 코드블록{} 내부의 코드를 계속해서 반복실행하는 구문을 의미한다.
- 같은 코드를 계속 반복한다는 것은 매우 비효율적이므로 for문, while문, do while문등을 사용하여 코드의 수를 줄이는것이 좋다.
1. while문 & do while문
1) while문
- ()안의 조건식이 맞으면, 코드블록{} 내부의 코드를 반복하는 구문이다.
- 조건이 맞지 않으면 코드블록을 벗어나 아래 코드로 이동한다.
📌 문법
<script>
while(조건식){
//반복할 코드
}
</script>📃 문제
- 경고창을 10번 실행하시오.
✏️ 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS 반복문</title>
<script>
var num = 1;
while(num <= 10){
alert('반복' + num);
num++;
}
</script>
</head>
<body>
</body>
</html>- 처음 실행할 숫자가 1이니까 num이라는 변수로 초기값을 선언했고, 10번 반복할 것이므로 변수 num이 10보다 작거나 같을때까지만 반복하도록 설정했다.
- [num++;]은 경고창 실행 후 변수를 1씩 증가시키는 것이다.
🖥️ 결과
2) do while문
- do while문은 일단 명령을 먼저 실행하고 조건을 나중에 확인하는 구문이다.
📌 문법
<script>
do{
//반복할 코드
}while(조건식);
</script>- while문과 같은 문제로 코드를 작성해보겠다.
✏️ 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS 반복문</title>
<script>
var num = 1;
do{
alert('반복' + num);
num++;
}while(num <= 10);
</script>
</head>
<body>
</body>
</html>- 결과는 while문과 같다.
3) while문과 do while문의 차이?
- 결과가 같은데 어떤점에서 차이가 있는지 의문이 들 수 있다.
- 코드에 두가지를 모두 써서 비교해보자면 아래와 같다.
✏️ 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS 반복문</title>
<script>
var num01 = 100;
var num02 = 100;
while(num01 < 10){
alert('while문 실행');
}
do{
alert('do while문 실행');
}while(num02 < 10);
</script>
</head>
<body>
</body>
</html>- while문과 do while문의 큰 차이는 조건이 맞지 않는 경우이다.
- while문은 조건식이 먼저 쓰여있기 때문에 조건이 맞지 않으면 코드를 반환하지 않고, do while문은 반복할 코드가 먼저 쓰여있기 때문에 조건이 맞지 않아도 처음 한번은 실행된다.
🖥️ 결과
2. for문
- for문 역시 while문과 같이 조건식이 맞으면 코드블록{}의 코드를 반복하는 구문이다.
- while문과의 차이는 초기값 선언과 증감되는 결과를 ()안에 한번에 작성하여 코드의 수를 줄인다는 것이다.
📌 문법
<script>
for(초기식;조건식;증감식){
//반복할 코드
}
</script>1) 기본 for문
- while문과 같은 문제로 코드를 작성해보겠다.
✏️ 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS 반복문</title>
<script>
//경고창을 1~10까지 반환
for(var i=1;i<=10;i++){
alert('반복' + i);
}
</script>
</head>
<body>
</body>
</html>
- for문 ()안에 초기식으로 변수 i를 선언한다. (보통 변수명은 i로 선언하는 것이 관례.)
- for문 ()안에 조건식은 초기식부터 반복할 횟수에 대한 조건을 처리하고, 증감식은 보통 ++, --, 복합대입연산자를 사용한다.
- 이것 또한 while문과 결과는 같다.
2) 조건이 있는 for문
📃 문제
- 1부터 10까지의 숫자 중, 홀수만 경고창에 반환하시오. = 1,3,5,7,9
✏️ 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS 반복문</title>
<script>
for(var i=1;i<=10;i+=2){
alert(i);
}
</script>
</head>
<body>
</body>
</html>- 초기식 : i라는 변수에 1을 작성. 조건식 : i가 10보다 작거나 같을때. 증감식 : i가 2씩 증가하도록 +=2로 처리.
🖥️ 결과
- 홀수인 1,3,5,7,9만 반환되는 것을 볼 수 있다.
3) 일 선택상자 만들기
📃 문제
- for문을 사용하여 1일부터 31일까지를 select태그로 반환하시오.
✏️ 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS 반복문</title>
<script>
var d = '<select>';
for(var i=1;i<=31;i++){
d += '<option>' + i + '일</option>';
}
d += '</select>';
document.write(d);
</script>
</head>
<body>
</body>
</html>- d라는 변수에 select 태그와 option 태그들을 담을 수 있도록 선언한 후,
1일부터 31일까지 반복할 수 있도록 for문을 사용하여 조건을 건다.
🖥️ 결과
3. 반복문 관련 키워드
1) break
- break 키워드는 반복문의 코드블록{} 밖으로 벗어나라는 구문이다. (반복을 중지해라.)
- 조건문인 switch 구문에서 case를 벗어나라는 의미로도 사용된다.
📃 문제
- [반복]을 계속해서 경고창에 띄우는 반복문을 만드시오.
- 단, [계속하시겠습니까?]라는 확인창을 띄워, [확인]버튼을 누르면 계속하고, [취소]버튼을 누르면 반복을 중지하시오.
✏️ 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS 반복문</title>
<script>
for(var i=0;true;i++){
alert('반복');
var q = confirm('계속하시겠습니까?');
if(!q){
break;
}
}
</script>
</head>
<body>
</body>
</html>- confirm() 함수(_부정연산자!)는 확인버튼 누르면 true, 취소버튼 누르면 false 반환
🖥️ 결과
2) continue
- continue 키워드는 지정된 조건이 발생하고 있는 반복만 중단하고 다음 반복은 계속하는 키워드이다.
📃 문제
- 1~10까지 경고창에 반복하여 반환하시오.
- 단, 3의 배수는 반환하지마시오.
✏️ 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>중첩for문과 키워드</title>
<script>
for(var i=1;i<=10;i++){
if(i % 3 == 0){
continue;
}
alert(i);
}
</script>
</head>
<body>
</body>
</html>🖥️ 결과
4. 중첩 for문
- for문 안에 또 for문을 작성하는 것을 중첩 for문이라고 한다.
- 보통 반복되는 변수가 2개인 경우 이렇게 작성한다.
📌 문법
<script>
for(){
for(){
}
}
</script>📃 문제
- 1학년 1반~3학년 10반까지 각각 문서에 출력하시오.
- 1~3학년까지 반복하는 변수와 1반~10반까지 반속하는 변수 2가지가 필요하다.
✏️ 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS 반복문</title>
<script>
//1학년 1반~3학년 10반 출력
var output = '';
for(var i=1;i<=3;i++){
output += '<h3>=====' + i + '학년=====</h3>';
for(var j=1;j<=10;j++){
output += '<p>' + i + '학년 ' + j + '반</p>';
}
}
document.write(output);
</script>
</head>
<body>
</body>
</html>🖥️ 결과
5. 배열
- 배열이란 여러 값을 나열해서 단일변수에 담아주는 것이다.
1) 배열의 선언
📌 문법
<script>
⑴ var 배열명 = [값1, 값2, 값3, ...];
⑵ var 배열명 = [
값1,
값2,
값3
];
⑶ var 배열명 = new Array(값1, 값2, 값3, ...);
</script>⑴ 배열이라고 말하기는 하지만 결국은 같은 변수이다. (값을 여러개 담을 수 있는 특수한 변수? 랄까)
⑵ 값이 길게 표현되는 경우에는 이런식으로 작성하는것이 보기 좋다. (보통 배열값에 배열 혹은 객체를 한번 더 적을 때)
⑶ new 키워드를 사용해서 객체를 새로 선언할 수도 있다.
2) 배열의 호출
1_ 전체 호출
📌 문법
<script>
배열명;
</script>✏️ 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS 배열과 for in문</title>
<script>
var n127 = ['태용','쟈니','태일','유타','도영','재현','정우','마크','해찬'];
alert('엔시티127 멤버 : ' + n127);
</script>
</head>
<body>
</body>
</html>- nct127 멤버들로 예시를 들어보았다.
🖥️ 결과
2_ 일부 호출
📌 문법
<script>
배열명[인덱스번호];
</script>- index번호 : 각각의 배열값이 배당받는 번호를 의미. (0번부터 시작)
✏️ 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS 배열과 for in문</title>
<script>
var n127 = ['태용','쟈니','태일','유타','도영','재현','정우','마크','해찬'];
alert('엔시티127 멤버 : ' + n127);
//재현솔로
alert(n127[5]);
//도재정
alert(n127[4] + n127[5] + n127[6]);
</script>
</head>
<body>
</body>
</html>- 첫번째는 재현만 호출한다. (코드에는 6번째로 적혀있지만 인덱스번호인 5번으로 호출.)
- 두번째는 도영, 재현, 정우를 호출한다.
🖥️ 결과
3_ 일부 호출
📌 문법
<script>
배열명.length;
</script>- 배열 값의 개수를 반환하는 속성이다.
✏️ 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS 배열과 for in문</title>
<script>
var n127 = ['태용','쟈니','태일','유타','도영','재현','정우','마크','해찬'];
alert('엔시티 멤버수 : ' + n127.length + '명');
</script>
</head>
<body>
</body>
</html>🖥️ 결과
값의 개수인 9개를 반환한다.
3) 배열의 반복
✏️ 코드 (반복할 개수 지정)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS 배열과 for in문</title>
<script>
var n127 = ['태용','쟈니','태일','유타','도영','재현','정우','마크','해찬'];
//멤버 소개
for(var i=0;i<9;i++){
alert(n127[i]);
}
</script>
</head>
<body>
</body>
</html>🖥️ 결과
- 반복은 잘 일어나지만 멤버가 빠지게 되면 문제가 생긴다.
✏️ 코드 (값과 반복 조건이 맞지 않는 경우)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS 배열과 for in문</title>
<script>
var n127 = ['태용','쟈니','태일','유타','도영','재현','정우'];
//멤버 소개
for(var i=0;i<9;i++){
alert(n127[i]);
}
</script>
</head>
<body>
</body>
</html>- 마지막에 있던 마크와 해찬이 드림활동으로 인해 빠졌다고 가정을 해보았다.
- 값은 7명인데 반복조건은 여전히 9이다.
🖥️ 결과
- 마지막에 개수가 맞지 않아 [undefined]라는 결과가 나오는 것을 확인할 수 있다.
✏️ 코드 (오류가 없는 코드)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS 배열과 for in문</title>
<script>
var n127 = ['태용','쟈니','태일','유타','도영','재현','정우','마크','해찬'];
//멤버 소개
for(var i=0;i<n127.length;i++){
alert(n127[i]);
}
</script>
</head>
<body>
</body>
</html>- [배열명.length]는 배열의 개수를 반환하기 때문에 마지막 배열번호는 개수 -1이다.
- 그렇기 때문에 멤버 중 누군가가 빠진다고 하더라도 수정할 필요가 없다.
6. for in문
- 자바스크립트는 현재도 계속 발전하며 업데이트 되고 있는데, for in문은 추가된 구문으로 배열 혹은 객체를 반복할 때 사용하는 구문이다.
1) 엔시티 127 반복하기
📌 문법
<script>
for(var i in 배열명){
//반복할 표현식
}
for(var i in 객체명){
//반복할 표현식
}
</script>- 반복하는 횟수는 배열이나 객체가 가지고 있는 값만큼만 반복한다.
✏️ 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS 배열과 for in문</title>
<script>
var n127 = ['태용','쟈니','태일','유타','도영','재현','정우','마크','해찬'];
//멤버 소개
for(var i in n127){
alert(n127[i]);
}
</script>
</head>
<body>
</body>
</html>- 반복할 개수를 지정한 for문과 결과가 같다.
2) 지역번호 선택상자에 넣기
- 배열은 규칙이 없는 값에 규칙을 주기 위해 담는다.
- 우리나라 지역번호를 보면 규칙이 따로 없는데, 이럴때 배열에 담아 for in문으로 처리해주면 된다.
✏️ 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>배열과 for in문</title>
<script>
var areaCode = ['02','031','032','033','041','042','043','044','051','052','053','054','055','061','062','063','064'];
var output = '<select>';
for(var i in areaCode){
output += '<option>' + areaCode[i] + '</option>';
}
output += '</select>';
document.write(output);
</script>
</head>
<body>
</body>
</html>
- 지역번호는 0번부터 시작하는데 숫자는 0으로 시작할 수 없기 때문에 문자열로 배열에 담아준다.
- select 태그는 반복할 필요없이 한번만 작성하면 되므로 반복문 바깥쪽에 작성하고, option태그는 반복되므로 for in문 내부에 추가대입 해준다.
🖥️ 결과
중국어랑 코딩하기 (❛ ֊ ❛„)