項目十八 流程控制
Javascript可以放在網頁的任何地方（Body或Head）中，還可以將Javascript程序放到一個後綴名為.js的文本文件裡。不過最好儘可能將所有的腳本代碼放在Head部分裡，以使所有腳本代碼集中放置。而且可以確保調用腳本代碼之前，所有的腳本代碼都已經被讀取並解碼。
Javascript 中提供了多種用於程序流程控制的語句，這也是本章學習的重點。
教學目標
1. 瞭解什麼是賦值語句；
2. 熟悉if語句；
3. 熟悉for循環語句；
4. 熟悉while循環語句；
實踐目標
1、 掌握JS程序語句的用法
2、 能熟練運用JS程序語句
知識儲備
課前預習
1、請預習本章內容，瞭解下面名詞的意義及作用
變量：
_______________________________________
賦值：
_________________________________
If語句：
_____________________________________________
2、請簡要回答以下問題：
1）常見的Javascript程序語句有哪些？
2）if語句的含義是什麼？
3）循環語句的作用是什麼？
一、Javascript 的賦值語句
跟其他編程語言一樣，Javascript 中也包含一些基本的語句。這些語句主要可分為3種：賦值語句、條件語句和循環語句。其中條件語句和循環語句能夠在程序中控制程序的流程。
賦值語句的作用是將一個數據賦給一個變量。在Javascript 中，賦值語句就是一條賦值表達式。其一般形式為：變量 = 表達
其中，變量可以是數值變量，也可以是字符串變量。同樣，表達式可以是數值型表達式或字符串表達式。但變量的類型應與表達式的類型一致。例如，以下代碼聲明一個變量，並給變量a賦值1。
示例：
一個變量聲明後，可以在任何時候對其賦值。其中"="叫"賦值符"，它的作用是把右邊的值賦給左邊的變量。
在Javascript 中，聲明一個變量時，可以同時賦予變量初始值。同時聲明多個變量，並且賦予這些變量初始值，變量之間用逗號相隔。在Javascript 中，多個變量賦予相同的值時，不能寫為變量 = 變量 = … = 表達式的形式，應該逐個賦值。
示例：
HTML 源代碼：
代碼解析：
1） 第6-7行:插入一段JS腳本語言；
2） 第7行：聲明一個變量a，給a賦值為10，聲明一個變量b，給b賦值20，聲明一個變量c，給c賦值為30；
3） 第8行：輸入a=a的值，換行；
4） 第9行：輸入b=b的值，換行；
5） 第10行：輸出c=c的值。
效果預覽：
圖：Javascript 賦值語句
二、Javascript 流程控制語句
在一般情況下，程序語句的執行是按照其書寫順序來執行的。前面的代碼先執行，後面的代碼後執行。但是這種簡單的自上而下的單向流程只適於用一些很簡單的程序。大多數情況下，需要根據邏輯判斷來決定程序代碼執行的優先順序。要改變程序代碼執行的先後順序，任何編程語言都需要用到條件語句和循環語句，Javascript 也不例外。
本節主要介紹Javascript 條件語句。
1、If語句
在if語句中，當判斷是的值為true時，將執行if語句後面的一行語句，否則什麼也不執行。
If條件語句的語法如下：
Javascript 語法格式：
這句語法的含義是，如果符合expression條件，就執行statement1代碼，反之，則不執行statement1代碼。
HTML 源代碼：
代碼解析：
1） 第6-10行:插入一段JS腳本語言；
2） 第7行：聲明一個變量a，給a賦值為5；
3） 第8行：如果a大於10,則輸出a=a的值，以及"a大於10"；
4） 第9行：如果a小於10，則輸出a=a的值，以及"a小於10"；
效果預覽：
圖：Javascript if語句
1、If...else語句
If...else語句是javascript中最基本的控制語句，通過它可以改變語句的執行順序。Javascript支持if條件語句。在if語句中將測試一個條件，如果該條件滿足測試，執行相關的javascript編碼。
Javascript 語法格式：
語法說明：當表達式的值為true，則執行語句1，否則執行語句2。若if後的語句有多行，則必須使用花括號將其括起來。
HTML 源代碼：
代碼解析：
1） 第7行:聲明一個變量name,給name賦值為Administrator；
2） 第8行：如果name不等於Administrator；
3） 第10行：則輸出name值，並且字體為藍色；
4） 第12-15行：否則輸出name值，並且字體為紅色；
效果預覽：
圖：if else語句
2、for循環語句
循環語句的作用是重複執行程序代碼。循環可以分為3類：一類在條件變為False之前重複執行語句，一類在條件變為True之前重複執行語句，另一類按照指定的次數重複執行語句。
for 循環語句指定了一個計數器變量，一個測試條件，和更新計數器的行為。每次循環重複之前，都要測試條件。如果測試成功，則執行循環內的代碼；如果測試不成功，則不執行循環內的代碼，而是執行緊跟在循環後的第一行代碼。當執行該循環時，計數器變量在下次重複循環前被更新。
for循環語句的語法如下：
Javascript 語法格式：
說明：
1.功能：實現條件循環，當條件成立時，執行語句集，否則跳出循環體。
2.初始化參數告訴循環的開始位置，必須賦予變量的初值；條件：是用於判別循環停止時的條件。若條件滿足，則執行循環體，否則跳出。增量：主要定義循環控制變量在每次循環時按什麼方式變化。
HTML 源代碼：
代碼解析：
1） 第6-12行:插入一段JS腳本語言；
2） 第7行：定義一個for循環語句，聲明一個變量i,並給i賦初始值為0，i小於等於5，i就自加；
3） 第9行：輸出i；
4） 第10行：輸出一個換行；
效果預覽：
圖：Javascript for循環語句
3、While循環語句
while 循環和 for 循環類似。其不同之處在於，while 循環沒有內置的計數器或更新表達式。如果你希望控制語句或語句塊的循環執行，不只是通過 "運行該代碼 n 次"這樣簡單的規則，而是需要更復雜的規則，則應該用 while 循環。
while循環語句的語法如下：
Javascript 語法格式：
當條件為真時，重複循環，否則退出循環。
HTML 源代碼：
代碼解析：
1） 第6-13行:插入一段JS腳本語言；
2） 第7行：給變量i賦初始值為0；
3） 第8行：當i小於等於5；
4） 第10行：輸出i自加後的值並換行；
5） 第11行：i自加；
效果預覽：
圖： while循環語句
小結：
HTML是目前網絡上應用最為廣泛的語言，也是構成網頁文檔的基本語言。瞭解HTML基礎，文件結構以及常用的基本標籤是學習好HTML語言的基礎，同時為後面網頁設計與開發以及製作更復雜的網頁打下良好的基礎。
項目實踐
在前面我們學習用CSS+DIV製作日曆，但是大家可以發現，用CSS+DIV製作出來的日曆代碼相對來說十分臃腫。實際上我們運用javascript也可以製作出同樣的效果出來。下面我們就用javascript來製作同樣的日曆。
任務一：製作日曆
任務描述：
運用學到的javascript語言將前面我們運用CSS+DIV製作的日曆js化。效果圖如下:
圖：js日曆
任務要求：
1. 運用for循環制作日曆
2. 日曆背景色為灰色#CCC，月份以及日期背景色為白色；
3. 日曆寬430像素，高250像素；
4. 月份寬410像素，高30像素，文本居中顯示，行高30像素；
5. 日期寬50像素，高30像素，文本居中顯示；
實踐目標：
1. 熟悉javascript程序語句的運用；
2. 瞭解如何運用循環語句製作小程序；
參考步驟：
1、 搭建HTML框架，分別定義三個DIV塊，並依此命名id為"yl"、"yf"、"rq"；
2、 將id為"rq"的DIV用for循環語句輸出，聲明一個變量i，並給i賦初始值為1，i小於32時，i自加，輸出
i的值
；3、 定義"yl"、"yf"、"rq"的CSS樣式；
HTML 源代碼：
本章總結：
Javascript種提供了多種用於程序流程控制的語句，這些語句可以分為選擇和循環兩大類。本章除了介紹了賦值語句，重點介紹了流程控制語句的用法，以及流程控制語句的循環和判斷控制語句；還著重講解了if語句、for語句以及while語句。
作業：
一、簡答題
1.Javascript 中有哪些基本語句？
2.寫出聲明一個變量a,並且對其賦值？
3.什麼是賦值語句？有哪些作用？
4.列舉出Javascript 語言中主要條件語句。
5.列舉出Javascript 語言中主要循環語句。
二、操作題
1.請完成用條件語句輸出"Good Morning"字符，要求進行判斷，獲取當前時間小於早上10點時顯示此字段，否則什麼都不顯示。
2.寫出由for語句循環，在頁面中顯示出10以內的數字。
