JS의 핵심인 ECMAScript가 명시하는 흐름 제어문은 다른 프로그래밍 언어와 상당히 유사합니다.
에서 살펴볼 몇 가지 실제 사례를 선택해 보겠습니다.
이 문장들을 보세요. 여기서는 더 이상 순차 구조를 언급하지 않고 조건, 루프 및 기타 명령문에 대해서만 설명합니다.
1. 조건부 선택 구조
조건 선택문은 다양한 조건에 따라 다양한 작업을 수행하는 데 사용됩니다. 일반적으로 코드를 작성할 때 다양한 결정에 대해 항상 다른
을 수행해야 합니다.
작업, 코드에서 조건문을 사용하여 이 작업을 수행할 수 있습니다.
JavaScript에서는 다음 조건문을 사용할 수 있습니다.
if 문: 지정된 조건이 true인 경우에만 코드를 실행하려면 이 문을 사용하세요
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JS流程控制语句</title> </head> <body> <p>如果时间早于 20:00,会获得问候 "Good day"。</p> <button onclick="myFunction()">点击这里</button> <p id="demo"></p> <script type="text/javascript"> var time=new Date().getHours(); document.write("当前北京时间:"+time); function myFunction() { var x=""; if (time<20) { x="Good day"; } document.getElementById("demo").innerHTML=x; } </script> </body> </html>
실행 결과는 다음과 같습니다.
if...else 문: 조건이 참일 때 코드 실행, 조건이 거짓일 때 다른 코드 실행
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JS流程控制语句</title> </head> <body> <p>如果时间早于 20:00,会获得问候 "Good day"。如果时间晚于 20:00,会获得问候 "Good evening"。</p> <button onclick="myFunction()">点击这里</button> <p id="demo"></p> <script type="text/javascript"> var time=new Date().getHours(); document.write("当前北京时间:"+time); function myFunction() { var x=""; if (time<20) { x="Good day"; } else { x="Good evening"; } document.getElementById("demo").innerHTML=x; } </script> </body> </html>
실행 결과는 다음과 같습니다.
if...else if....else 문: 실행할 여러 코드 블록 중 하나를 선택하려면 이 문을 사용하세요.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JS流程控制语句</title> </head> <body> <p>如果时间早于 10:00,会获得问候 "Good morning"。</p> <p>如果时间早于 20:00,会获得问候 "Good day"。</p> <p>如果时间晚于 20:00,会获得问候 "Good evening"。</p> <button onclick="myFunction()">点击这里</button> <p id="demo"></p> <script type="text/javascript"> var time=new Date().getHours(); document.write("当前北京时间:"+time); function myFunction() { var x=""; if (time<10) { x="Good morning"; } else if (time<20) { x="Good day"; } else { x="Good evening"; } document.getElementById("demo").innerHTML=x; } </script> </body> </html>
실행 결과는 다음과 같습니다.
switch 문: 실행할 여러 코드 블록 중 하나를 선택하려면 이 문을 사용하세요. 스위치 문은 다양한 조건에 따라 다양한 작업을 수행하는 데 사용됩니다
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JS流程控制语句2</title> </head> <body> <p>点击下面的按钮来显示今天是周几:</p> <button onclick="myFunction()">点击这里</button> <p id="demo"></p> <script type="text/javascript"> var d=new Date().getDay(); document.write("今天的星期代表数字:"+d); function myFunction() { var x; switch (d) { case 0: x="Today it's Sunday"; break; case 1: x="Today it's Monday"; break; case 2: x="Today it's Tuesday"; break; case 3: x="Today it's Wednesday"; break; case 4: x="Today it's Thursday"; break; case 5: x="Today it's Friday"; break; case 6: x="Today it's Saturday"; break; } document.getElementById("demo").innerHTML=x; } </script> </body> </html>
실행 결과:
기본 키워드 사용
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JS流程控制语句2</title> </head> <body> <p>点击下面的按钮来显示今天是周几:</p> <button onclick="myFunction()">点击这里</button> <p id="demo"></p> <script type="text/javascript"> var d=new Date().getDay(); document.write("今天的星期代表数字:"+d); function myFunction() { var x; switch (d) { case 6: x="Today it's Saturday"; break; case 0: x="Today it's Sunday"; break; default: x="Looking forward to the Weekend"; } document.getElementById("demo").innerHTML=x; } </script> </body> </html>
실행 결과는 다음과 같습니다.
2. 루프 구조
루프는 지정된 횟수만큼 코드 블록을 실행할 수 있습니다.
JavaScript는 다양한 유형의 루프를 지원합니다.
(1) for 문: 코드 블록을 특정 횟수만큼 반복
for(var box=1;box<=10;box++) { document.write("box="+box+"<br/>"); }
실행 결과는 다음과 같습니다.
(2) for...in 문: 객체의 속성을 반복합니다.
var box={ name:"张三", age:24, sex:"男" }; for(x in box) { document.write(box[x]+"<br/>"); }
실행 결과는 다음과 같습니다.
(3)while 문: 지정된 조건이 true일 때 지정된 코드 블록을 반복합니다. 먼저 판단한 다음 진술을 실행하는 것이 더 실용적입니다.
var box=1; while(box<=5) { document.write("box="+box+"<br/>"); box++; }
실행 결과는 다음과 같습니다.
(4)do...while - 지정된 조건이 true일 때 지정된 코드 블록을 유사하게 반복합니다. 일단 한번 실행해보고 판단하세요
var box=1; do{ document.write("box="+box+"<br/>"); box++; }while(box<=10)
运行的结果为:
三、其他语句
(1)break语句:用于跳出循环。
for(var box=1;box<=10;box++) { if(box==5) { break;//强制退出整个循环 } document.write("box="+box+"<br/>"); }
运行的结果为:
执行到第四次循环时不再继续执行,跳出了真个循环,,输出的少了box=5以后的循环。
(2)continue语句:用于跳过循环中的一个迭代。
for(var box=1;box<=10;box++) { if(box==5) { continue;//退出当前循环,还会继续执行后面的循环 } document.write("box="+box+"<br/>"); }
运行的结果为:
执行到第四次循环时,跳出第五次循环,继续向下面执行,输出的少了box=5。
(3)with语句:将代码的作用域设置到一个特定的对象中
先来看一般我们是怎么样输出对象的属性的值的:
var box={ name:"张三", age:24, sex:"男" }; var n=box.name; var a=box.age; var s=box.sex; document.write(n+"<br/>"); document.write(a+"<br/>"); document.write(s);
运行的结果为:
改用with语句来写:
var box={ name:"张三", age:24, sex:"男" }; with(box){ var n=name; var a=age; var s=sex; }; document.write(n+"<br/>"); document.write(a+"<br/>"); document.write(s);
运行的结果为:
从三大方面介绍了JavaScript的流程控制语句,希望大家仔细阅读,数量掌握JavaScript流程控制语句的使用方法。