javascript的程序控制結構及語句------（2）循環控制語句、跳轉語句、對話框

時間 2019-12-13

標籤 javascript 程序控制結構語句循環控制對話框欄目 JavaScript 简体版

原文原文鏈接

1、循環控制語句javascript

循環語句主要就是在知足條件的狀況下反覆執行某一個操做，循環控制語句主要包括while語句、do...while語句 和for語句。java

一、While語句函數

語法：學習

While（條件表達式語句）
{
執行語句塊
}

當「條件表達式語句」的返回值爲true時，則執行大括號「{ }」中的語句塊，當執行完大括號「{ }」的語句塊後，再次檢測條件表達式的返回值，若是返回值還爲true，則重複執行大括號「{ }」中的語句塊，直到返回值爲false時，結束整個循環過程，接着往下執行while代碼段後面的程序代碼。測試

案例：進入網頁時提示五次「請叫我五聲威哥」網站

<title> while語句使用 </title>
 </head>
 <body>
  <script type="text/javascript">
    var x=1;
   while(x<6) {
      alert("請叫我五聲威哥"+x);
      x ++;   //x = x + 1 ;
   }
   alert("over"); /*第6次進入的時候，x爲6,x不小於6，因此while條件不知足，就再也不執行此while裏的代碼，因此這個循環被終止。接下來繼續往下執行其餘代碼。
   */
  </script>

效果圖：spa

》》》》》》3d

二、do...while語句：code

是先執行一遍大括號中的語句，才檢測條件表達式語句的值是真是假。blog

do...while語句語法：

do{

//當條件表達式語句爲true，下面這些是要循環執行的代碼塊:

語句1; 
語句2;
語句3；

}while（條件表達式語句）

代碼從上到下執行的過程當中，若是遇到了do就會先執行一次do的大括號「{}」中的代碼，執行以後再經過while來進行判斷，若是判斷經過那麼再執行一次，若是判斷不經過卻結束循環。

<head>
<title> 簡單粗暴的帳戶驗證 </title>
<script type="text/javascript">
do{
    var username = prompt("請輸入用戶名！");
    var password = prompt("請輸入密碼！");
  }while(username!="laoluo"||password!="222222") //即當用戶名不等於「laoluo」或者當密碼不等於「222222」時，就會再次執行do大括號{}中的代碼，根據當前「輸入」的字符再次while判斷...只有用戶名和密碼都正確才中止循環，接着執行其餘代碼。
    alert('登陸成功');
</script>
</head>
<body></body>

即當用戶名不等於「laoluo」或者當密碼不等於「222222」時，就會再次執行do大括號{}中的代碼，根據當前「輸入」的字符再次while判斷...，
只有用戶名和密碼都正確才中止循環，接着才執行其餘代碼： 「alert('登陸成功');」

效果圖：

》》

三、For循環語句

for語句一般由兩部分組成：一部分爲條件控制部分，另外一部分是循環部分。

For循環語句語法：

     //聲明     //boolean判斷
for(初始條件；判斷條件；循環後條件值更新)
{
執行語句塊
}

案例：

<script type="text/javascript">

//當代嗎從上到下執行到for的時候，代碼會聲明變量y並賦值1，會進行判斷var y = 1分號後面的判斷，判斷y是否小於6，執行下面的循環代碼，
當下面的代碼執行完成以後，再回過來執行y++。這樣就完成了一次循環，進行第二次循環，就不用再次聲明y,只須要判斷y是否小於6就好了，
若是知足，執行下面的代碼，再回來y++。

for(var y=1;y<6;y++)
 { 
  document.write("<p style='font-size:"+y+"0px'>我最敬重的人是威哥！</p>");
 }
 </script>

效果圖：

2、跳轉語句

Javascript支持的跳轉語句主要是continue語句和break語句。

一、break 語句：

用於跳出循環（完全結束循環），break語句的做用是當即跳出循環，即再也不執行後面的全部循環。

語法格式： break ;

用途案例：

<body>
    <p>點擊按鈕，測試帶有 break 語句的循環。</p>
    <button onclick="myFunction()">點擊這裏</button>
    <p id="demo"></p>

    <script>
    function myFunction()
    {
    var x="",i=0;
    for (i=0;i<10;i++)
      {
      if (i==3)
        {
        break;
        }
      x=x + "The number is " + i + "<br>";
      }
    document.getElementById("demo").innerHTML=x;
    }
    </script>

 </body>

效果圖：

二、continue語句

Continue語句和break語句相似，區別在於，continue語句的做用是中止正在執行的循環，直接進入下一次循環。彈出的對話框(包括一個肯定按鈕和一個取消按鈕)。

Continue語句只能用在while、for、do...while、switch語句當中。

案例：

<body>
<p>點擊下面的按鈕來執行循環，該循環會跳過 i=3 的步進。</p>
    <button onclick="myFunction()">點擊這裏</button>
    <p id="demo"></p>
    <script>
    function myFunction()
    {
    var x="",i=0;
    for (i=0;i<10;i++)
      {
      if (i==3)
        {
        continue;
        }
      x=x + "The number is " + i + "<br>";
      }
    document.getElementById("demo").innerHTML=x;
    }
    </script>
   </body>

效果圖：該例子跳過了值 3。

3、對話框

在javascript中有三種樣式的對話框，可分別用做提示、肯定和輸入，對應三個函數：alert、confirm、prompt。

（1）「alert」對話框

在訪問網站的時候，有時會忽然彈出一個小窗口，上面寫着一段提示信息文字。若是你不點擊「肯定」，就不能對網頁作任何操做，這個小窗口就是使用 alert實現的。

「alert」對話框只用於提醒，alert彈出消息對話框（包含一個肯定按鈕)，但對腳本不會產生任何變化。它只有一個參數，即爲須要提示的信息，沒有返回值。

案例：

<title> alert提醒 </title>
 </head>
 <body>
 <script type="text/javascript">
      function ale()
      {//彈出一個提醒的對話框
       alert("你好，byebye！")
      }
 </script>
 <p>提醒對話框</p>

 <p>
      <input type="submit" name="Submit" value="提交" onclick="ale()"/>
 </p>

 <p>只是提醒，不能對腳本產生任何變化；</p>

 </body>

效果圖：

（2）Confirm：

該消息對話框，一般用於容許用戶作選擇的動做，彈出此對話框裏包含一個肯定按鈕和一個取消按鈕。

案例：

<title> comfirm提醒 </title>
 </head>
 <body>
 <script type="text/javascript">
     function firm()
      {//利用對話框返回true或者false
       if(confirm("你確認要轉去老羅江湖首頁？"))
          {//若是是true，那麼就把頁面轉向老羅江湖首頁
          location.href="http://www.cnblogs.com/KTV123/";
          }
          else{
          alert("不想走？那就呵呵咯！"); //按了《取消》按鈕後，系統返回false。
          }
      }
</script>
<p>確認對話框 </p>
  <p>
      <input type="submit" name="Submit2" value="提交" onclick="firm()" /> 
  </p>
 <p>通常用於確認信息，返回true或者false</p>
 </body>

效果圖：

（3）Prompt：

一般用於詢問一些須要與用戶交互的信息，彈出的對話框的包含一個肯定按鈕、取消按鈕與一個文本輸入框。

該對話框能夠進行輸入，並返回用戶輸入的字符串。它有兩個參數，第一個參數顯示提示信息，第二個參數用於顯示輸入框（和默認值）。

案例：

<title> prompt提示 </title>
 </head>
 <body>
 <script type="text/javascript">
 function prom()
  {
  var name=prompt("請輸入您的名字","");//將輸入的內容賦給變量name
  if(name==老羅江湖)//若是返回的有內容
      {
         alert("歡迎您："+name);
      }
   else
  }
 </script>
 <p>要求用戶輸入，而後給個結果</p>
  <p>
    <input type="submit" name="Submit3" value="提交" onclick="prom()" /> 
  </p>
 <p>一個帶輸入的對話框，能夠返回用戶填入的字符串</p>
 </body>

效果圖：點「提交」

以上的內容部分來自「javascript從零開始學」和我的學習筆記，轉載請註明出處！謝謝合做！