習作一 : 第一個 Visual Basic 程式 習作一 : 第一個 Visual Basic 程式 Visual Basic 2010 Express Edition 是一個免費程式 它可在以下網頁下載 : http://www.microsoft.com/express/downloads/ 第一步 : 建立新的 Visual Basic 專案我們需要在每一個新的 Visual Basic 程式, 新增一個專案 1. 按檔案 新增 專案 Windows Form 應用程式為 預設的選擇 2. 填寫相應的專案名稱 ( 例如 :Task 1) 3. 按確定 第二步 : 建立用戶界面我們可在工具箱中加入控制項 ( 例如 : 按鈕 文字框 ) 以建立用戶界面 1. 選擇工具箱 2. 拖放 Label Textbox Button 及 WebBrowser 在表單上 第 1 頁
習作一 : 第一個 Visual Basic 程式 第三步 : 加入程式碼 1. 雙按按鈕 程式碼視窗會被開啟, 我們可在此視 窗內鍵入程式碼 2. 鍵入以下程式碼 : WebBrowser1.Navigate(Textbox1.Text) 第四步 : 執行程式 1. 按偵錯 開始偵錯或 F5. 這個動作會執行你的程式 2. 在 Textbox 內鍵入一個網址 ( 例如 :http://hk.yahoo.com/) 並按下按鈕 第五步 : 儲存及發行專案儲存專案 : 1. 按檔案 全部儲存 我們可以發行專案讓其他人士使用你的程式 2. 按專案 發行 [ 專案名稱 ] 這個動作會製造檔案 Setup.exe 及其他相應檔案讓其他人士安裝你的程式 自我反思 這個程式有甚麼優點及缺點? 你可以怎樣改善這個程式? 第 2 頁
習作一 : 第一個 Visual Basic 程式 第六步 : 自訂外觀和行為以改善用戶界面 在屬性視窗屬性視窗中, 我們可以更改不同控制項的屬性以自訂外觀 1. 拖放 Panel 在表單上 2. 將 Label Textbox 及 Button 移至 Panel 上 3. 選擇 Panel 4. 在屬性視窗中的 Dock, 選擇最上方的方塊 ( 即 Top) 這個動作會令 Panel 在表單上方自動延伸 5. 選擇 WebBrowser 6. 在屬性視窗中的 Dock, 選擇中間的方塊 ( 即 Fill) 這個動作會令 WebBrowser 在表單上自動填滿 第 3 頁
習作一 : 第一個 Visual Basic 程式 7. 選擇 Button 8. 在屬性視窗中的 Text, 刪除 Button1 及鍵入 Go! 9. 同樣地, 我們亦更改 Label1 的屬性 Text 為 Address 10. 我們可以更改 Font 及 ForeColor 屬性以改變文字的字型及顏色 11. 根據你的喜好改變其他控制項的位置及大小 自我反思 這個程式有甚麼優點及缺點? 你可以怎樣改善這個程式? 第 4 頁
習作一 : 第一個 Visual Basic 程式 獎勵部分你可以在網頁瀏覽器中加入以下額外功能 1) 上一頁及下一頁 提示 : 瀏覽 Webbrowser1 可使用的功能 2) 書籤 提示 : 加入按鈕到指定網頁 3) 按 Enter 時瀏覽輸入網址的網頁 提示 : 在適當的事件中輸入程式 4) 當視窗改變大小時, 在右邊對齊 Go! 按鈕 5) 當視窗改變大小時, 自動調校網址列的長度 6) 網址列顯示最新的網址 7) 其他合適的功能 第 5 頁
習作二 : 自動販賣機 習作二 : 自動販賣機 你將會製作一個自動販賣機程式, 售賣你喜愛的產品 A. 用戶界面設計以下是一個自動販賣機的樣本用戶界面 : 以上界面使用了 Visual Basic 的哪個控制項? 我們可以更改按鈕屬性 BackgroundImage, 加入圖像 我們亦可更改按鈕屬性 BackgroundImageLayout 控制圖像位置及大 小 你可以從以下網頁下載合適的圖像 http://office.microsoft.com/en-us/images 第 6 頁
習作二 : 自動販賣機 B. 程式編寫 算術運算 Visual Basic 常用的運算符有 : 加 + 減 - 乘 * 除 / 注意 計算右邊的計算結果會放傳送到左邊 a = 1 + 3 執行後 :a 變為 b = 9 3 * 2 執行後 :b 變為 變量電腦會將數據 ( 例如 : 數字 文字 ) 儲存於變量中 在使用變量前, 我們會透過以下方式指示電腦我們會使用變量 : Dim total As Integer = 0 以上程式碼會指示電腦分配位置給變量位置名稱 : 儲存種類 : 預設值 : 試想想 這個自動販賣機程式需要哪些變量? 第 7 頁
習作二 : 自動販賣機 輸入語句 我們可由 Textbox 讀取用戶輸入, 程式碼如下 : Dim paid As Integer = 0 paid = Textbox1.Text 輸出語句 我們可改變 Label 的 Text 屬性, 從而輸出訊息 程式碼例子如下 : Label1.Text = "Hello!" ' 顯示文字訊息 Dim amount As Integer = 30 Label1.Text = amount ' 顯示數字訊息 Label1.Text = "You have to pay $" & amount ' 顯示文字及數字訊息 習作 : 就以上所學, 編寫一個自動販賣機 自我反思 這個程式有甚麼優點及缺點? 你可以怎樣改善這個程式? 第 8 頁
習作二 : 自動販賣機 獎勵部分你可以在自動販賣機中加入以下額外功能 1) 列出所有售出項目的數量 2) 讓買家輸入共付了多少及計算找贖金額 3) 讓買家清除所有內容並重新開始 4) 其他合適的功能 第 9 頁
習作三 : 猜數字遊戲 習作三 : 猜數字遊戲 你將會製作一個猜數字遊戲 A. 遊戲規則 猜一個由 至 的神秘數字 界面會顯示數字範圍以作提示用戶 決定上下界是 / 不是包括在範圍之內 B. 用戶界面設計 以下是一個猜數字遊戲的樣本用戶界面 : 以上界面使用了 Visual Basic 的哪個控制項? C. 程式編寫 試想想 這個猜數字程式需要哪些變量? 你需要做甚麼令遊戲可以執行? 第 10 頁
習作三 : 猜數字遊戲 隨機數生成器以下程式碼會產生個一個由 1 至 9 的隨機數, 並會儲存在變量 secret ( 注意 : 以下程式碼並不會不會產 10) Dim RandomClass As New Random() secret = RandomClass.Next(1, 10) 關聯運算符 我們會使用以下運算符來測試某些條件是否符合 試就以下每一例子圈出正確答案 運算符 意義 例子 結果 > 大於 12 > 6 True / False >= 大於或等於 1 >= 9 True / False 3 >= 3 True / False < 小於 10 < 33 True / False <= 小於或 等於 7 <= 3 True / False 8 <= 8 True / False = 等於 6 = 4 True / False <> 不等於 8 <> 2 True / False 條件賦值我們可以指示電腦只在只在符合某些條件時執行一些語句 以下程式碼只會檢查一個條件, 若該條件為符合時, 則執行在 If Then 和 End If 中的語句 If a > 4 Then 執行語句 a > 4 否 End If 是 語句 第 11 頁
習作三 : 猜數字遊戲 試想想 就以上猜數字遊戲而言, 我們需要檢查多少個條件? 就每一條件, 我們需要做甚麼? 我們怎樣顯示用戶已勝出遊戲? 自我反思 這個程式有甚麼優點及缺點? 你可以怎樣改善這個程式? 第 12 頁
習作三 : 猜數字遊戲 獎勵部分 1) 當我們輸入一個超越範圍的數字, 上下界或會被重設 ( 如下圖 ) 試解決這個問題 2) 讓用戶只可在指定次數 ( 例如 :10 次 ) 猜數字, 若未能估中, 則顯示 你輸了 3) 讓用戶決定神秘數字的範圍 ( 例如 :1 至 200) 4) 其他合適的功能 你或許需要以下布爾運算符或條件語句以完成以獎勵部分 布爾運算符 當符合兩個條件為符合時, 運算符 AND 會輸出 True 的結果 操作例子 意義 結果 3 > 1 AND 4 > 2 True AND True True 3 > 1 AND 2 > 4 True AND False False 1 > 3 AND 4 > 2 False AND True False 1 > 3 AND 1 > 4 False AND False False 當其中一個條件符合為符合時, 運算符 OR 會輸出 True 的結果 操作例子 意義 結果 3 > 1 OR 4 > 2 True OR True True 3 > 1 OR 2 > 4 True OR False True 1 > 3 OR 4 > 2 False OR True True 1 > 3 OR 1 > 4 False OR False False 運算符 NOT 會輸出相反的結果 操作例子 意義 結果 NOT 1 > 3 NOT False True NOT 3 > 1 NOT True False 第 13 頁
習作三 : 猜數字遊戲 條件語句 ( 續 ) 以下程式碼會檢查一個情況, 若條件為符合時, 會執行語句 1, 否則, 執行語句 2 If a > 4 Then 執行語句 1 a > 4 否 Else 執行語句 2 是 語句 1 語句 2 End If 以下程式碼會檢查兩個情況, 若該條件為符合時, 會執行語句 1 否則, 會再檢查第二個情況, 若該條件為符合時, 會執行語句 2, 否則, 執行語句 3 If a > 4 Then 執行語句 1 a > 4 否 ElseIf b > 5 Then 執行語句 2 是 b > 5 否 Else 執行語句 3 語句 1 YES 語句 2 語句 3 End If 你可以加入多於一個 Else If Then 語句 另外, 我們亦可以省去 Else 語句 第 14 頁
習作四 : 繡曲線 習作四 : 繡曲線 你將會編寫一個繪畫直線的程式 A. 簡介 我們可以指示電腦準確及重覆地繪畫多條線條, 如下圖 : B. 用戶界面設計 以下是一個樣本用戶界面, 請將背景顏色轉為白色, 以助你繪畫及清除 第 15 頁
習作四 : 繡曲線 C. 程式編寫 Visual Basic 的座標就以下各點, 填寫它們的座標 (x, y) 0 100 200 300 x 100 (, ) (, ) (, ) 200 (, ) (, ) (, ) y 繪畫直線在繪畫直線前, 我們需要定義筆的顏色及大小 下面的程式碼指示電腦建立一支筆, 其資料為 Dim mypen As Pen = New Pen(Color.Red, 3) 顏色 : 大小 : 我們可以指示電腦就所提供兩個的端點座標, 將它們連接為一直線, 例如 : Me.CreateGraphics.DrawLine(myPen, 100, 200, 300, 100) 第一點 第二點 試在下圖畫出該直線 : 0 100 200 300 x 100 200 y 清除我們可以將整個畫面填滿白色以清除所有直線, 相應的程式碼如下 : Me.CreateGraphics.Clear(Color.White) 第 16 頁
習作四 : 繡曲線 程度 1 繪畫正方形我們需要繪畫 條直線以完成一個正方形 0 100 200 x 試就左圖所繪畫的正方形, 填寫相應的程式碼 : Dim mypen As Pen = New Pen(Color.Red, 3) 100 200 y Me.CreateGraphics.DrawLine(myPen,,,, ) Me.CreateGraphics.DrawLine(myPen,,,, ) Me.CreateGraphics.DrawLine(myPen,,,, ) Me.CreateGraphics.DrawLine(myPen,,,, ) 繪畫三角形試在你的程式繪畫一個三角形 程度 2 繪畫正方形 ( 不同大小 ) 我們可以從 Textbox 所輸入的大小, 繪畫相應尺寸的正方形 提示 : 我們先要設定一個變量以儲存所讀取的尺寸大小 : Dim len As Integer len = Textbox1.Text 0 50 100 150 200 50 100 150 200 y x 就左圖所示, 當正方形的尺寸改變, 假定其中一點的座標為固定, 則另外三點的座標會隨著尺寸改變隨著尺寸改變 嘗試改變以上正方形的程式碼, 繪畫相應大小的正方形 提示 : 第一行的程式碼為 Me.CreateGraphics.DrawLine(myPen, 50, 50, 50, 50+len) 第 17 頁
習作四 : 繡曲線 程度 3 繪畫平行平行線若要繪畫 10 條平行線 ( 如右圖 ), 我們可以重覆 10 次使用 DrawLine 語句 在每一句 DrawLine 語句, 我們需要分別設定各端點的座標 : Me.CreateGraphics.DrawLine(mypen, 100, 100, 100, 200) Me.CreateGraphics.DrawLine(mypen, 110, 100, 110, 200) Me.CreateGraphics.DrawLine(mypen, 120, 100, 120, 200) Me.CreateGraphics.DrawLine(mypen, 130, 100, 130, 200) Me.CreateGraphics.DrawLine(mypen, 140, 100, 140, 200) Me.CreateGraphics.DrawLine(mypen, 150, 100, 150, 200) Me.CreateGraphics.DrawLine(mypen, 160, 100, 160, 200) Me.CreateGraphics.DrawLine(mypen, 170, 100, 170, 200) Me.CreateGraphics.DrawLine(mypen, 180, 100, 180, 200) Me.CreateGraphics.DrawLine(mypen, 190, 100, 190, 200) 我們亦可以使用以下語句完成以上的工作 : Dim mypen As Pen = New Pen(Color.Chocolate, 3) Dim i As Integer For i = 100 To 190 Step 10 Me.CreateGraphics.DrawLine(mypen, i, 100, i, 200) Next i 的值 第一個 i: 第二個 i: 第十個 i: 繪畫格線嘗試修改以上語句並繪畫右圖 程度 4 繡曲線就右圖所示, 試找出首五條直線的端點座標, 並填寫以下程式碼 : Me.CreateGraphics.DrawLine(myPen,,,, ) Me.CreateGraphics.DrawLine(myPen,,,, ) Me.CreateGraphics.DrawLine(myPen,,,, ) Me.CreateGraphics.DrawLine(myPen,,,, ) Me.CreateGraphics.DrawLine(myPen,,,, ) 試修改平行線的程式碼, 繪畫以上的曲線 第 18 頁
習作四 : 繡曲線 獎勵部分嘗試在你的程式繪畫以下圖形 : 第 19 頁
專題研習 題研習一 : 捉貓兒 專題研習題研習一 : 捉貓兒 這是一個簡單的遊戲, 讓用戶按下按鈕 以捕捉貓兒 用戶按下愈多次數的按鈕, 代表他的反 應愈好 當按下 新遊戲 按鈕, 有貓兒圖像的 按鈕會在指定時間移至不同的位置 當預設時間過去, 遊戲會自動停止 我們可以按下 重設 按鈕來重新開始 遊戲 檢查點一 : 貓兒可跳到不同位置 當我們按下按鈕, 貓兒可移到一個新的位置 1. 利用隨機數生成器 ( 參照習作三 ), 產生新位置的隨機數 2. 我們可以使用以下語句移動 Button1 到一個隨機位置 ( 例如 :30, 50): Button1.Location = New Point(30, 50) 試想想 就每一個位置, 我們需要多少個隨機數? 隨機數的範圍應是多少, 以避免按鈕會移動到離開畫面? Page 20
專題研習 題研習一 : 捉貓兒 檢查點二 : 貓兒可在指定時間跳到不同位置 當按下 新遊戲 按鈕, 有貓兒圖像的按鈕會在指定時間 ( 例如 :0.5 秒 ) 移至不同的位置 1. 我們可使用 Timer 控制 2. 當 Timer 被啟用, 它會在指定時間自動指示電腦進行工作 ( 即執行 Timer1_Tick 內的程式碼 ) 以下是啟用及停止 Timer 的程式碼 Timer1.Enabled = True Timer1.Enabled = False ' Timer1 開始計時 ' Timer1 停止計時 3. 我們可以改變 Timer 的屬性 Interval 改變執行工作的指 定時間 Interval 所用的單位是千分之一秒 例如 : 500 = 0.5 秒 1000 = 1 秒 5000 = 5 秒 4. 我們可以雙按 Timer 進入編寫在 Timer_Tick 內的程式碼 Private Sub Timer1_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Timer1.Tick ' 插入移動按鈕到新位置的程式碼 End Sub 檢查點三 : 限制遊戲在 10 秒內完作 當預設時間 ( 例如十秒 ) 過去, 遊戲會自動停止 1. 加入另一個 Timer 以計算遊戲的剩餘時間 2. 顯示剩餘時間, 並將時間每一秒減去一 3. 當剩餘時間為零時, 停止移動 貓 按鈕 Page 21
專題研習 題研習一 : 捉貓兒 檢查點四 : 更新按下次數 1. 當用戶按下按鈕時, 更新按下次數 2. 當遊戲停止時, 我們不應再讓用戶可以按下 貓 按鈕 我們可用以下的程式碼, 改變按鈕的屬性 Button1.Enabled = True Button1.Enabled = False ' 可以按下 Button1 ' 不可以按下 Button1 檢查點五 : 重設遊戲 我們可以按下 重設 按鈕來重新開始遊戲 1. 更新文字標記及按鈕的狀態 2. 停止 Timer 自我反思 這個程式有甚麼優點及缺點? 你可以怎樣改善這個程式? 獎勵部分 你可以讓用戶更改 1) 遊戲的預設時間 2) 貓 按鈕移動的時間 3) 按鈕的圖像 4) 其他合適的部份 Page 22
專題研習 題研習二 : 簡單計算機 專題研習題研習二 : 簡單計算機 你將會編寫一個簡單計算機 你可以在互聯網上搜尋不同計算機的設計以作參考 右圖顯示一個樣本用戶界面以方便作討論 檢查點一 : 數字按鍵 1. 當按下數字按鍵, 我們應在顯示加入所按數字 我們可使用以下程式碼 : TextBox1.Text = TextBox1.Text * 10 + 1 2. 不過, 當我們按下算術按鍵 (+, -, *, /) 之 後, 應重設畫面以顯示新數字 Press = Y 否 3. 我們可以參考右邊的流程圖以明白何時重設 顯示 是 顯示新數字 加入新數字 Press = N 試想想 我們需要甚麼變數? 第 23 頁
專題研習 題研習二 : 簡單計算機 檢查點二 : 算術按鍵 (+, -, *, /) 當我們按下算術按鍵, 我們需要記錄上一個數字及所選擇的算術 試想想 以上步驟需要使用那些變數? 檢查點三 : 等號及重設按鍵 當用戶按下等號按鍵, 我們需要計算及顯示結果 根據以下數據, 計算結果 : 上一個儲存的數字 所選擇的算術 文字格內的數字 當用戶按下重設鍵, 我們應刪除所有顯示的內容及重設所有變數 自我反思 這個程式有甚麼優點及缺點? 你可以怎樣改善這個程式? 獎勵部分你可以讓用戶在計算機上進行 1) 小數運算 ( 例如 :3.5 + 4.8) 2) 多於一次的運算 ( 例如 : 1 + 2-3 + 4) 3) 特別的運算 ( 例如 :sin cosine 平方) 提示 : 我們可以利用 VB 中 Math 類別的函數 4) 記憶功能 ( 例如 :M+, M-, MR, MC) 5) 其他合適功能 第 24 頁