루프용 자바스크립트
루프는 지정된 횟수만큼 코드 블록을 실행합니다.
JavaScript 루프
같은 코드를 매번 다른 값으로 반복해서 실행하려는 경우 루프를 사용하는 것이 편리합니다.
다음과 같이 배열의 값을 출력할 수 있습니다:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<script>
cars=["BMW","Volvo","Saab","Ford"];
for (var i=0;i<cars.length;i++){
document.write(cars[i] + "<br>");
}
</script>
</body>
</html>인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
다양한 유형의 루프
JavaScript는 다양한 유형의 루프를 지원합니다.
for - 특정 횟수만큼 코드 블록을 반복합니다.
for/in - 코드 블록의 속성을 반복합니다. object
while - 지정된 조건이 true일 때 지정된 코드 블록을 반복합니다.
do/while - 마찬가지로 지정된 조건이 true일 때 지정된 코드 블록을 반복합니다.
For 루프
for 루프는 루프를 만들고 싶을 때 자주 사용됩니다.
다음은 for 루프의 구문입니다.
{
실행된 코드 블록
}
문 1(코드 블록)은 시작하기 전에 실행됩니다.
문 2는 루프(코드 블록)가 실행되는 조건을 정의합니다.
문 3은 루프( 코드 블록)이 실행되었습니다.
인스턴스
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>点击按钮循环代码5次。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
var x="";
for (var i=0;i<5;i++){
x=x + "该数字为 " + i + "<br>";
}
document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>인스턴스 실행»
"인스턴스 실행" 버튼을 클릭하여 온라인 인스턴스 보기
위의 예에서 다음을 볼 수 있습니다.
문 1은 루프가 시작되기 전에 변수(var i=0)를 설정합니다.
문 2는 루프 실행 조건을 정의합니다(i는 5보다 작아야 함).
문 3은 코드 블록이 실행될 때마다 값(i++)을 증가시킵니다.
문 1
일반적으로 문 1을 사용하여 루프에 사용되는 변수를 초기화합니다(var i=0).
문 1은 선택 사항이므로 문 1 없이도 수행할 수 있습니다.
문 1에서 모든(또는 여러) 값을 초기화할 수 있습니다:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<script>
cars=["BMW","Volvo","Saab","Ford"];
for (var i=0,l=cars.length; i<l; i++){
document.write(cars[i] + "<br>");
}
</script>
</body>
</html>인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
동시에 문 1을 생략할 수도 있습니다(예: 값이 루프 시작):
인스턴스
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<script>
cars=["BMW","Volvo","Saab","Ford"];
var i=2,len=cars.length;
for (; i<len; i++){
document.write(cars[i] + "<br>");
}
</script>
</body>
</html>인스턴스 실행»
온라인을 보려면 "인스턴스 실행" 버튼을 클릭하세요. 인스턴스
문 2
보통 문 2는 초기 변수의 조건을 평가하는 데 사용됩니다.
문2도 선택사항입니다.
문 2가 true를 반환하면 루프가 다시 시작되고, false를 반환하면 루프가 종료됩니다.
 | 如果您省略了语句 2，那么必须在循环内提供 break。否则循环就无法停下来。这样有可能令浏览器崩溃。请在本教程稍后的章节阅读有关 break 的内容。 |
|---|
문 3
보통 문 3은 초기 변수의 값을 증가시킵니다.
문3도 선택사항입니다.
문 3은 다양한 용도로 사용됩니다. 증분은 음수(i--)이거나 더 클 수 있습니다(i=i+15).
문 3도 생략할 수 있습니다(예: 루프 내부에 해당 코드가 있는 경우):
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<script>
cars=["BMW","Volvo","Saab","Ford"];
var i=0,len=cars.length;
for (; i<len; ){
document.write(cars[i] + "<br>");
i++;
}
</script>
</body>
</html>인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
For/In 루프
JavaScript for/in 문 개체의 속성을 반복합니다.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>点击下面的按钮，循环遍历对象 "person" 的属性。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
var x;
var txt="";
var person={fname:"Bill",lname:"Gates",age:56};
for (x in person){
txt=txt + person[x];
}
document.getElementById("demo").innerHTML=txt;
}
</script>
</body>
</html>인스턴스 실행»
"인스턴스 실행" 버튼을 클릭합니다. 온라인 인스턴스를 보려면
JavaScript 개체에 관한 장에서 for/in 루프에 대해 자세히 알아볼 것입니다.
While 루프
다음 장에서는 while 루프와 do/while 루프에 대해 설명하겠습니다.
