반복문이란?
반복적인 작업이 발생할 경우 사용 할 수 있는 문법이다.
예를들어 div태그를 천개를 생성해야 할 경우 하나하나 생성하여 천개를 만드는 것 보다는
반복문을 통하여 프로그래밍적으로 처리하는 것이 더 효율적이고 시간적으로도 생산적 일 것이다.
좀 더 단적인 예를 들어
업무 지시로 천개의 div 태그를 생성할 일이 있어서 만들었는데
알고보니 2천개가 필요했다면 간단하게 반복문 수정을 통해 변경이 가능 할 것이다.
그럼 반복문 사용법을 알아보자.
for 문법
for(초기값; 종료조건; 증감식){
// 반복문 동작...
}
ex) 2단 구구단
<!DOCTYPE html>
<html>
<head>
<title>2단</title>
</head>
<body>
<script>
for(i=1; i<10; i++){
console.log(i+" * 2 = "+i*2);
}
</script>
</body>
</html>
2단을 찍어봤으니 9단까지도 찍어보면 좋을 것 같다.
ex) 구구단 gugudan.html
<!DOCTYPE html>
<html>
<head>
<script src="gugudan.js" type="text/javascript" charset="utf-8"></script>
<style>
.gugudan{
width: 100%;
position: absolute;
}
.gugudan div{
width: 10%;
float: left;
margin: 15px;
border: 1px solid black;
}
.gugudan div div{
width: 100px;
position: relative;
text-align: center;
border: none;
}
</style>
</head>
<body >
<div id="gugudan" class="gugudan">
</div>
</body>
</html>
gugudan.js
window.onload = function () {
var htmlStr = "";
var dan = 2;
var value;
for(dan; dan<10; dan++){
htmlStr += "<div id='dan-"+dan+"'><div> " + dan + "단 </div>";
for(j=1; j<10; j++){
value = dan * j;
htmlStr += "<div>" + dan + " * " + j + " = " + value + "</div>";
}
htmlStr += "</div>";
}
var gugudan = document.getElementById("gugudan");
gugudan.innerHTML = htmlStr;
};
for문으로 반복문이 구현이 되었다면 while문으로도 구현이 가능하다.
while 문법
초기값;
while(종료조건){
//반복문 동작...
증감식;
}
for문에서는 "( )" 내에서 초기, 종료, 증감값을 정의하여 사용하지만, while문은 종료조건밖에 없기때문에
별도의 변수를 선언하여 초기값을 정하고 종료조건과 증감식을 처리해야 동일하게 동작 시킬 수 있다.
ex) 2단 구구단
<!DOCTYPE html>
<html>
<head>
<title>구구단</title>
</head>
<body>
<script>
var i = 1;
while(i<10){
console.log(i+" * 2 = "+i*2);
i++;
}
</script>
</body>
</html>
for문에서 동작시킨 결과와 동일하게 동작하는 것을 볼 수 있다.
ex) 구구단 gugudan.html
<html>
<head>
<script src="gugudan.js" type="text/javascript" charset="utf-8"></script>
<style>
.gugudan{
width: 100%;
position: absolute;
}
.gugudan div{
width: 10%;
float: left;
margin: 15px;
border: 1px solid black;
}
.gugudan div div{
width: 100%;
position: relative;
text-align: center;
border: none;
margin: 0 auto;
margin-top: 15px;
margin-bottom: 15px;
}
</style>
</head>
<body >
<div id="gugudan" class="gugudan">
</div>
</body>
</html>
gugudan.js
window.onload = function () {
var htmlStr = "";
var dan = 2;
var value;
while(dan < 10){
htmlStr += "<div id='dan-"+dan+"'><div> " + dan + "단 </div>";
var j=1;
while(j < 10){
value = dan * j;
htmlStr += "<div>" + dan + " * " + j + " = " + value + "</div>";
j++;
}
htmlStr += "</div>";
dan++;
}
var gugudan = document.getElementById("gugudan");
gugudan.innerHTML = htmlStr;
};
간단하게 for, while문에 대하여 알아보았다.
do ~ while문도 존재하는데 while문과의 차이점은 무었일까?
do while 문법
초기값;
do{
//반복문 동작...
증감식;
}while(종료조건)
설명보다도 소스 결과로 바로 확인을 해보자.
<!DOCTYPE html>
<html>
<head>
<title>do while</title>
</head>
<body>
<script>
var i = 1;
while(i<1){
console.log("while문입니다.")
i++;
}
/////////////////////////////////////
i = 1;
do{
console.log("do while문입니다.")
i++;
}while(i<1)
</script>
</body>
</html>
while문의 log값은 찍히지 않고 do while문의 log값은 한번 찍힌걸 볼 수 있다.
반복문은 처음 종료조건을 만족하는지 확인하고 동작을 한다.
위 소스의 while문 변수 i는 1이고 종료조건은 1보다 작을때까지 동작하므로바로 종료하지만
do while문은 종료조건을 먼저 보는게 아니라 do문구를 먼저 동작하고 종료조건을 확인 하기 때문에
로그값이 찍힌걸 볼 수 있다.
이러한 특징을 활용하여 반복문이지만 조건에 따라 무조건 한번은 동작해야되는 로직이 필요할 경우 do while문을 활용하면 좋다.
'WEB > Javascript' 카테고리의 다른 글
| Javascript - 배열 값만 복사하기(대입 연사자 사용시 문제점) (0) | 2019.09.08 |
|---|---|
| Javascript - 배열(Array) 선언 및 사용 하기 (0) | 2019.09.06 |
| Javascript - 슬라이드쇼(SlideShow) 만들기 (6) | 2019.09.06 |
| Javascript - Date.prototype을 활용한 날짜 출력 (0) | 2019.09.06 |
| Javascript - 2차원 배열 시계방향 이동 (0) | 2019.09.06 |