HTML網頁基礎語言

第 3 章 Visual Basic 2012 程式語言 http://www1.chihlee.edu.tw/teachers/chienhua/ 第 3 章 Visual Basic 2012 程式語言 3-0 ASP.NET 網頁程式碼模式 3-1 Visual Basic 的基本撰寫規格 3-2 變數與資料型別 3-3 運算子 3-4 流程控制 3-5 陣列 3-6 程序與函數 Note: Some slides and/or pictures in the following are adapted from slides 2015 旗標出版股份有限公司. 2 3-0 ASP.NET 網頁程式碼模式 3-0-1 單一檔案與程式碼後置模式的架構 3-0-2 選擇是否使用程式碼後置模式 3-0-3 單一檔案模式的檔案內容 3-0-4 程式碼後置模式的檔案內容 3-0-5 兩種模式的比較 3-0-1 單一檔案與程式碼後置模式的架構 在 ASP.NET 中, 網頁是由 視覺 與 程式邏輯 兩個部分所組成的 視覺就是指圖片 靜態文字 HTML 標籤... 等掌控網頁外觀的部分, 而程式邏輯就是 Visual Basic 或是其他程式語言的程式碼, 用來控制網頁的邏輯運作 這兩個部分可以依照您的需求, 合在一起放在同一個檔案內, 稱為 單一檔案模式 (Code-Inline), 也可以分開放置在不同檔案, 稱為 程式碼後置模式 (Code-Behind) 3 4 1

3-0-1 單一檔案與程式碼後置模式的架構 3-0-2 選擇是否使用程式碼後置模式 當您新增 ASP.NET 網頁時, 可以自由選擇要使用哪一種模式 : 5 6 3-0-2 選擇是否使用程式碼後置模式 若選擇使用程式碼後置模式, 則 ASP.NET 會自動建立兩個檔案, 分別用來放置視覺與程式邏輯兩個部分 : 3-0-3 單一檔案模式的檔案內容 下面是使用單一檔案網頁模式時, 檔案的預設內容 : 7 8 2

3-0-4 程式碼後置模式的檔案內容 使用程式碼後置模式時, 相當於將程式邏輯從 aspx 中抽出來 下面是使用程式碼後置模式時, aspx 檔的預設內容 : 3-0-4 程式碼後置模式的檔案內容 以下則是 Ch02-03.aspx.vb 檔案的預設內容 : 在程式碼後置模式下, 程式碼會統一放置於另一個檔案, 與視覺的部分分開 9 10 3-0-5 兩種模式的比較 一般來說, 單一檔案模式的優點如下 : 如果程式碼不多, 放置於單一檔案內, 對於學習 撰寫與維護較為方便 因為只有一個檔案, 所以容易部署至伺服器, 傳送給其他人的時候也較為方便 只有單一檔案, 所以需要更改名稱時直接更改即可 若是程式碼後置模式, 更改 aspx.vb 檔案的名稱之後, 還必須開啟 aspx 檔案修改 CodeFile 屬性, 所以比較麻煩 3-0-5 兩種模式的比較 而下面則是程式碼後置模式的優點 : 將視覺與程式邏輯分開之後, 美工與程式設計人員便能獨立作業, 可以各自修改檔案, 不會互相影響 因為程式邏輯分開為另一個檔案, 所以可以方便地讓多個網頁共用同一個程式邏輯檔案 兩種模式各有其優缺點, 您可以依照環境與需求, 選擇合適的模式來設計 11 12 3

3-1 Visual Basic 程式的基本撰寫規格 3-1-1 命名規則 3-1-2 Visual Basic 的註解 3-1-3 太長的程式碼 3-1-4 程式碼的縮排 3-1-1 命名規則 程式碼除了語言的 關鍵字 (Keywords) 外, 大部分都是程式設計者自訂的元素名稱, 稱為 識別字 (Identifier) 例如 : 變數 類別和函數等 Visual Basic 的命名原則, 如下所示 : 不可使用 Visual Basic 的關鍵字或系統的物件名稱 必須是英文字母或底線 _ 開頭, 如果以底線開頭, 至少需要一個英文字母或數字 名稱長度不可超過 16383 個字元, 不區分英文大小寫, abc 和 ABC 代表同一個名稱 在名稱中間不能有句點. 或空白, 只能是英文字母 數字和底線 在宣告的有效範圍內須唯一, 關於有效範圍的說明, 請參閱本章後的程序和函數 13 14 3-1-2 Visual Basic 的註解 程式註解是程式設計上很重要的部分, 良好註解不但能夠輕易了解程式目的, 在維護上, 也可以提供更多資訊 Visual Basic 程式的註解是以 REM 指令或 符號開始的列, 或程式列上此符號之後的內容, 如下所示 : REM 變數的宣告 ' 大家好 Dim size1,size2 As Integer ' 變數的宣告 3-1-3 太長的程式碼 Visual Basic 程式碼如果太長, 基於程式編排需要, 可以將它分成兩列, 舊版請在第 1 列程式碼最後加上 _ 符號, 如下所示 : Dim size1,size2,size3,size4,size5, _ size6,size7,size8,size9 As Integer 2010 版支援隱含字串連接 (Implied Line Continuation), 可以不用加上 _ 符號, 如下所示 : Dim size1,size2,size3,size4,size5, size6,size7,size8,size9 As Integer 15 16 4

3-1-4 程式碼的縮排 記得使用縮排來編排程式碼, 如此可以輕鬆展示程式碼的邏輯和迴圈架構, 例如 : 迴圈區塊的程式碼縮幾格編排, 如下所示 : For i = 1 To 10 Step 1 total = total + i Next i 3-2 變數與資料型別 3-2-1 變數的資料型別 3-2-2 變數 常數宣告與指定敘述 17 18 3-2-1 變數的資料型別 - 說明 3-2-1 變數的資料型別 - 種類 Visual Basic 變數並沒有強調一定需要宣告資料型別, 如果沒有宣告資料型別, 預設資料型別是 Object Object 是所有 Visual Basic 資料型別的根資料型別, 如果變數是 Object 資料型別, 表示變數可以儲存各種資料型別的資料 19 20 5

3-2-2 變數 常數宣告與指定敘述 - 變數宣告 Visual Basic 變數是使用 Dim 指令宣告 3 個變數, 如下所示 : Dim size Dim size1,size2 As Integer 變數 size 沒有指定資料型別, 預設為 Object 在宣告變數同時可以使用 As 關鍵字指定資料型別 在同一列宣告的 2 個變數可以分別指定資料型別, 如果需要, 也可以定變數初值, 如下所示 : Dim name As String,size3 As Integer Dim name As String,size3 As Integer = 100 3-2-2 變數 常數宣告與指定敘述 - 常數宣告 常數在程式碼中, 只是使用名稱來取代固定數值或字串, 與其將常數視為變數, 不如說它是名稱轉換, 將一些數值的值, 使用有意義的名稱來取代 Visual Basic 本身擁有一些內建常數, 使用者也可以使用 Const 關鍵字建立常數, 常數在宣告時需要指定其值, 如下所示 : Const MAX_SIZE = 100 21 22 3-2-2 變數 常數宣告與指定敘述 - 指定敘述 Visual Basic 變數可以使用指定敘述來更改變數值, 也就是 = 等號運算子, 如下所示 : size = 3 name = " 陳會安 " 上述程式碼指定變數值,2 個變數分別是宣告成整數和字串型別的變數 3-2-2 變數 常數宣告與指定敘述 - 範例網站 ASP.NET 網站 :Ch3-2-2 在 ASP.NET 網頁宣告變數 常數和使用指定敘述指定變數值, 最後將變數值都在 Label 控制項顯示出來, 如下圖所示 : 23 24 6

3-3 運算子 3-3-1 運算子的優先順序 3-3-2 算術與字串連接運算子 3-3-3 比較運算子 3-3-4 邏輯運算子 3-3-5 指定運算子 3-3 運算子 在 Visual Basic 指定敘述的等號右邊, 可以是運算式或條件運算式, 運算式是由運算子和運算元所組成 Visual Basic 提供完整算術 比較 連接和邏輯運算子, 如下所示 : A + B 1 A >= B A < B And A > 1 上述運算式的變數 A B 和數值 1 是運算元, + - < >= 和 > 為運算子 25 26 3-3-1 運算子的優先順序 3-3-2 算術與字串連接運算子 如果運算子沒有優先順序的差異, 運算式依照出現的順序, 由左到右依序的執行 括號內比括號外的先執行, 在括號內仍然依照正常優先順序 當運算式擁有多種運算子時, 算術運算子最先, 接著是比較運算子, 最後才是邏輯運算子, 其優先順序如下所示 : 算術運算子 > 比較運算子 > 邏輯運算子 比較運算子都擁有相同的優先順序 算術運算子的加和減法優先順序相同, 乘和除法擁有相同的優先順序, 乘除高於加減, 如下所示 : ^ 指數 > (-) 負號 > */ 乘除 > \ 整數除法 > Mod 餘數 > +- 加減 > & 邏輯運算子的優先順序, 如下所示 : Not > And, AndAlso > Or, OrElse, Xor Visual Basic 字串連接運算子 & 的優先順序在算術運算子之後, 但是在比較運算子之前, 如下表所示 : 27 28 7

3-3-3 比較運算子 比較運算子並沒有優先順序的分別, 通常都是使用在迴圈和條件敘述作為判斷條件 Is 和 IsNot 運算子並非比較物件, 而是檢查 2 個物件是否參考相同物件, 或不是參考相同的物件, 如下表所示 : 3-3-4 邏輯運算子 Visual Basic 迴圈和條件敘述的判斷條件如果不只一個, 可以使用邏輯運算子來連接多個條件運算式, 以便建立更複雜的判斷條件, 如下表所示 : 29 30 3-3-5 指定運算子 指定運算子除了使用在指定敘述 = 外, 還可以配合其他運算子來簡化運算式, 建立簡潔的算術運算式, 如下表所示 : 3-4 流程控制 3-4-1 是否選和二選一 3-4-2 多選一的條件敘述 3-4-3 For/Next 迴圈 3-4-4 Do/While 與 Until/Loop 迴圈 3-4-5 Continue 與 Exit 敘述 31 32 8

3-4 流程控制 流程控制是使用條件運算式來進行判斷, 以便執行不同區塊的程式碼, 或重複執行指定區塊的程式碼 流程控制指令主要分成兩類, 如下所示 : 條件控制 : 條件控制是一個選擇題, 可能是單一選擇或多選一, 依照條件運算式的結果, 決定執行哪一個區塊的程式碼 迴圈控制 : 迴圈控制可以重複執行指定區塊的程式碼, 而且在迴圈中擁有結束條件, 可以結束迴圈的執行 3-4-1 是否選和二選一 - If/Then 條件敘述 If/Then 條件敘述只是決定是否執行區塊內的程式碼, 如果 If 條件為 True, 就執行 Then/End If 間的程式碼, 如下所示 : If grade >= 60 Then lbloutput.text = " 陳會安成績及格 <br/>" End If 若 If 條件 True 時只會執行一列程式碼, 我們還可以省掉 End If, 如下所示 : If grade >= 60 Then lbloutput.text &=" 陳小安及格 <br/>" 33 34 3-4-1 是否選和二選一 - If/Then/Else 條件敘述 If/Then 條件只是執行或不執行選擇的單一選擇, 如果條件是擁有排它性的 2 個執行區塊, 需要二選一 If/Then 條件只需加上 Else 關鍵字,If 條件為 True 時執行 Then/Else 間的程式碼,False 執行 Else/End If 間的程式碼, 如下所示 : If grade >= 60 Then lbloutput.text &=" 江小魚成績及格 <br/>" Else lbloutput.text &=" 江小魚成績不及格 <br/>" End If 3-4-1 是否選和二選一 - 範例網站 ASP.NET 網站 :Ch3-4-1 在 ASP.NET 網頁使用 If 條件指令建立是否選和二選一的條件敘述, 以便在網頁顯示成績是否及格, 如下圖所示 : 35 36 9

3-4-2 多選一的條件敘述 - If/Then/ElseIf 條件敘述 If/Then/ElseIf 條件敘述是 If/Then 條件敘述的擴充, 只是新增 ElseIf 關鍵字來建立多選一條件敘述, 如下所示 : If dayvalue = 1 Then lbloutput.text &=" 星期日 <br/>" ElseIf dayvalue = 2 Then lbloutput.text &= " 星期一 <br/>". ElseIf dayvalue = 7 Then lbloutput.text &=" 星期六 <br/>" Else lbloutput.text &=" 無法分辨是星期幾 <br/>" End If 3-4-2 多選一的條件敘述 - Select Case 條件敘述 Select Case 多選一條件敘述比較清楚明白, 撰寫的程式碼也比較簡潔, 可以依照符合的條件執行不同區塊的程式碼, 如下所示 : Select Case dayvalue Case 1: lbloutput.text &= " 周日假期 <br/>" Case 2, 3, 4 To 6 lbloutput.text &=" 工作天 <br/>" Case 7: lbloutput.text &=" 周末假日 <br/>" Case Else lbloutput.text &=" 無法分辨是星期幾 <br/>" End Select 37 38 3-4-2 多選一的條件敘述 - 範例網站 ASP.NET 網站 :Ch3-4-2 顯示變數 dayvalue 值為 5 是星期幾, 和是否是工作天, 如下圖所示 : 3-4-3 For/Next 迴圈 - For/Step/Next 迴圈 For/Step/Next 指令敘述執行的迴圈是固定次數, 以 Step 值來增加或減少, 如果 Step 為 1 可以省略 Step 關鍵字 例如 : 使用 For/Step/Next 迴圈, 每次增加 1, 執行 1 到 10 次相加的迴圈, 如下所示 : Dim i, sum As Integer For i = 1 To 10 Step 1 sum += i Next i 使用負數的 Step, 如下所示 : For i = 10 To 1 Step -1 sum += i Next i 39 40 10

3-4-3 For/Next 迴圈 - For Each/In/Next 迴圈 For Each/In/Next 迴圈和 For/Step/Next 迴圈敘述十分相似, 不過這種迴圈通常是使用在物件和集合物件, 可以顯示集合中的所有物件元素,, 如下所示 : Dim objname As New ArrayList Dim name As String objname.add(" 陳會安 ") objname.add(" 江小魚 ") objname.add(" 陳允傑 ") For Each name In objname lbloutput.text &= name & <br/> Next 3-4-3 For/Next 迴圈 - 範例網站 ASP.NET 網站 :Ch3-4-3 在 ASP.NET 網頁使用 For/Step/Next 迴圈計算 1 加到 10 的總和, 然後使用 For Each/In/Next 迴圈顯示 ArrayList 集合物件的內容, 如下圖所示 : 41 42 3-4-4 Do/While 與 Until/Loop 迴圈 - 說明 Do 迴圈是執行迴圈到條件為 False 為止, 可以在迴圈開始或結束使用 While 或 Until 關鍵字來測試迴圈條件 如果在迴圈尾測試條件, 迴圈至少執行一次, 請注意!Do 迴圈需要自己處理迴圈的結束條件和計數器的增減 3-4-4 Do/While 與 Until/Loop 迴圈 - While 當條件成立時 Do/Loop 迴圈如果使用 While 條件, 條件是在迴圈開頭檢查, 如下所示 : Dim sum As Integer = 0 Dim counter As Integer = 1 Do While counter <=10 sum += counter counter += 1 Loop 43 44 11

3-4-4 Do/While 與 Until/Loop 迴圈 - Until 直到條件成立 Do/Loop 迴圈如果使用 Until 條件, 結束條件是在迴圈尾檢查, 如下所示 : Dim sum As Integer = 0 Dim counter As Integer = 1 Do sum += counter counter += 1 Loop Until counter > 10 3-4-4 Do/While 與 Until/Loop 迴圈 - 範例網站 ASP.NET 網站 :Ch3-4-4 在 ASP.NET 網頁使用兩層 Do While/Loop 和 Do/Loop Until 迴圈來計算數字的總和, 如下圖所示 : 45 46 3-4-5 Continue 與 Exit 敘述 - Continue Visual Basic 的 Continue 敘述可以在迴圈中馬上執行下一次迴圈, 如下所示 : For counter = 0 to 100 If counter Mod 2 = 0 Then Continue For Next 上述 For/Next 迴圈當 If 條件成立時, 馬上執行 Continue For 繼續下一個迴圈, 換句話說, 如果是偶數, 就不會執行 If 條件之後的程式碼 Do/Loop 迴圈是使用 Continue Do 來馬上執行下一次迴圈 3-4-5 Continue 與 Exit 敘述 - Exit 在迴圈尚未到達結束條件時, 我們可以使用 Exit 敘述強迫跳出迴圈來結束迴圈的執行, 如下所示 : For counter = 0 to 100 If counter > 10 Then Exit For Next 上述 For/Next 迴圈中, 使用 If 條件判斷是否已經執行到 10, 如果是, 執行 Exit For 敘述中斷迴圈的執行 Do/Loop 迴圈是使用 Exit Do 來中斷迴圈執行 47 48 12

3-4-5 Continue 與 Exit 敘述 - 範例網站 ASP.NET 網站 :Ch3-4-5 在 ASP.NET 網頁使用 Exit For 中斷 For/Next 迴圈, 然後使用 Continue For 馬上執行下一次迴圈, 以便計算數字 1 加至 10 的奇數總和, 如下圖所示 : 3-5 陣列 - 說明 陣列是一組同型別變數的集合, 如果程式需要使用多個相同資料型別的變數時, 就可以直接宣告一組變數的陣列, 而不用宣告一堆變數 陣列是使用陣列索引來存取指定陣列元素的值 49 50 3-5 陣列 - 一維陣列 Visual Basic 陣列同樣是使用 Dim 指令宣告, 我們可以在宣告時指定陣列尺寸 例如 : 一維整數陣列的宣告, 如下所示 : Dim grades(2) As Integer Dim arr(0 To 2) As Integer 上述程式碼宣告 2 個一維陣列, 括號值是陣列的最大索引, 也可以指定最小索引值 0 To 2 因為索引值是從 0 開始, 所以索引值是 0~2 共有 3 個元素 3-5 陣列 - 陣列初始設定 陣列初始設定就是指定陣列的初值, 我們可以在宣告陣列的同時指定陣列初值, 如下所示 : Dim grades() As Integer = {53, 76, 65} 上述程式碼宣告的一維陣列 grades 並沒有指定尺寸, 其尺寸就是後方初值的個數 陣列索引的最大值是初值個數減一, 也就是 2 Visual Basic 2010 可以直接使用 Dim 宣告且指定初值, 而不用指定資料型別,Visual Studio 會自動依初值來判斷資料型別, 如下所示 : Dim grades = {53, 76, 65} 51 52 13

3-5 陣列 - 存取陣列元素 陣列如果在宣告時沒有指定初值, 我們還可以使用指定敘述來指定陣列值, 如下所示 : arr(0) = 53 arr(1) = 76 arr(2) = 65 程式碼是使用指定敘述和陣列索引值來指定陣列元素的值, 取出陣列值的程式碼, 如下所示 : Dim grade As Integer grade = grades(1) 上述程式碼取得陣列索引 1 的值, 也就是陣列的第 2 個元素 3-5 陣列 - 多維陣列 多維陣列擁有多個索引, 二維陣列擁有 2 個索引 ; 三維陣列有 3 個, 依序類推 事實上, 只需是表格編排的資料, 就可以建立多維陣列來儲存這些資料 例如 : 學生成績的二維陣列, 其宣告如下所示 : Dim Students(3, 2) As String 53 54 3-5 陣列 - 動態陣列 Visual Basic 陣列可以使用 ReDim 指令, 在程式執行時重新指定尺寸, 不過,ReDim 指令並不可以宣告陣列, 只能更改現有陣列的尺寸, 如下所示 : ReDim grades(4) 上述程式碼將前面宣告的 grades 陣列尺寸改為 5 個元素 如果陣列已經有內容, 可以使用 Preserve 指令保留原陣列的內容, 如下所示 : ReDim Preserve grades(4) 因為是放大陣列尺寸, 所以資料並不會遺失 ; 如果縮小陣列, 陣列裁減部分的資料就會遺失 3-5 陣列 - 範例網站 ASP.NET 網站 :Ch3-5 在 ASP.NET 網頁宣告一維陣列儲存學生的成績資料, 更改陣列尺寸後, 使用 For/Next 迴圈顯示陣列元素, 如下圖所示 : 55 56 14

3-6 程序與函數 3-6-1 程序 (Procedure) 與函數 (Function) 3-6-2 變數的有效範圍與參數的傳遞 3-6-3 Visual Basic 常用的內建函數 3-6-1 程序與函數 -Sub 副程序 Sub 程序是一個程式區塊的 Visual Basic 程式碼, 使用 Sub 和 End Sub 包圍, 程序並沒有傳回值, 如下所示 : Sub addonetofive() Dim i, sum As Integer For i = 1 To 5 Step 1 sum += i Next i lbloutput.text &= "1 加到 5 的和 : " & sum & "<br/>" End Sub 57 58 3-6-1 程序與函數 -Function 函數 Function 函數是使用 Function 和 End Function 包圍, 函數擁有傳回值, 傳回方式是使用 Return 關鍵字, 如下所示 : Function addoneton(maxvalue As Integer) Dim sum As Integer = 0 Dim counter As Integer = 1 While counter <= maxvalue sum += counter counter += 1 End While Return sum End Function 3-6-1 程序與函數 -Call 關鍵字呼叫程序與函數 Call 關鍵字可以呼叫函數或程序, 正確的說, 只有在呼叫程序時, 才需要使用 Call, 如下所示 : Call addonetofive() addonetofive() 上述程式碼沒有使用 Call 也可以 函數擁有傳回值, 所以呼叫函數通常是在運算式指定敘述的右邊, 如下所示 : sum = addoneton(100) 59 60 15

3-6-1 程序與函數 - 範例網站 3-6-1 程序範例 ASP.NET 網站 :Ch3-6-1 在 ASP.NET 網頁建立 addonetofive() 程序和 addoneton() 函數, 然後在 Button1_Click() 事件處理程序呼叫程序與函數來顯示總和, 如下圖所示 : 61 62 3-6-1 函數範例 3-6-2 變數的有效範圍與參數的傳遞 - 有效範圍 Visual Basic 迴圈和條件指令程式碼都是 程式區塊 (Blocks), 程序與函數也是程式區塊 宣告變數的有效範圍, 也就是程式碼可以存取此變數的範圍, 如下所示 : 區塊變數範圍 (Block Scope): 使用 End Loop 和 Next 結束的流程控制屬於程式區塊, 在程式區塊內宣告的變數, 只能在區塊內使用, 如果在區塊外就不能使用 區域變數範圍 (Local Scope): 程序和函數內宣告的變數, 只能在此程序或函數間使用, 稱為區域變數 全域變數範圍 (Global Scope): 如果變數是在程序和函數外宣告, 在程式的各程序和函數都可以使用此變數, 稱為全域變數 63 64 16

3-6-2 變數的有效範圍與參數的傳遞 - 有效範圍 3-6-2 變數的有效範圍與參數的傳遞 - 參數傳遞 在程序和函數傳入參數的傳遞方式分為兩種, 如下表所示 : 65 66 Subroutine Parameter Passing Subroutine Parameter Passing Call by value If the function or procedure is able to assign values to its parameters, only the local copy is assigned, i.e., anything passed into a call is unchanged in the caller's scope when the function returns. x a 5 y 10 5 / 10 b 10/ 5 t 5 void swap(int a, int b) { int t; t=a; a=b; b=t; } main ( ) { int x=5, y=10; swap (x,y); Printf( %d,%d.x,y); } Formal parameter Actual parameter 67 Call by reference A function receives an implicit address to the argument, rather than a copy of its value. This means that the function can modify the argument, what will be seen by its caller. 1000 1500 x 5/ 10 y 10 / 5 a 1500 / 1000 b / 1500 1000 t 1000 address void swap(int a, int b) { int t; Formal parameter t=a; a=b; b=t; } main ( ) Actual parameter { int x=5, y=10; swap (x,y); Printf( %d,%d.x,y); } 68 17

3-6-3 Visual Basic 常用的內建函數 在 ASP.NET 網頁可以直接使用 Visual Basic 函數來處理日期 / 時間 數學運算和資料型別轉換, 而不用自己辛苦撰寫程式碼來建立這些函數 日期 / 時間函數 資料型別檢查函數 資料轉換函數 亂數與四捨五入函數 Reading Assignment Chapter 3 of ASP.NET 4.5 網頁製作徹底研究, 陳會安 69 Slides developed by Chien-Hua Tsai 70 18