[習題]ASP.NET製作網頁版的[小]計算機 #1 -- 使用 ViewState or Session

雖然這不是一個好範例 (因為這題目有點悶,不實用、不有趣),

但對於初學者來說,是可以學到東西的小範例。

尤其是「變數」在不斷的運算中,必須不斷修改數值。

對於初學者來說,有認真思考過,會學到一些東西喔!





我在 Yahoo知識+上面(ASP版)看到一個問題,

對方想作一個網頁版的計算機

 

我看了以後,第一個反映是嗤之以鼻(這問題也好意思拿出來問

但今天早上我搭車上班時,想了一下,我發現在 ASP.NET上面要做出計算機的功能,

真的有一點小難度!

 

因為網頁程式是一種「無狀態(Stateless)」的程式設計

對於習慣傳統Windows程式的人來說,很難接受的!

或許這習題在VB上面撰寫 Windows Form並不難,但在網頁上撰寫,就會出現不同的狀況了。

................................................................................................................................................................................. 

建議您先看過這一篇([習題]三個數字相加....(使用TextBox,很基礎的題目) ),難度比較低。

再來觀看下面文章。

.................................................................................................................................................................................

這個小範例,我只完成一小部份(+、=的按鈕是可用的,其他的應該會自己寫了,就改一下而已。)

這個範例對初學者來說,有幾個小重點:

1.    可以讓學生練習「按下 Button按鈕,便會啟動 Button_Click()事件

2.    初學者最容易遇見的程式問題,就是變數的值,在這範例中將會不斷變化。

    因為VB語法的「等於」與「給予變數一個值」,都用了相同的「=」符號。 

    C#與比較嚴謹,「== (等於)」與「= (給予變數一個值)」是不同的意思。

    學慣了N年數學的程式初學者,第一次遇見(VB語法)程式裡面的「=」去修改 / 更換變數值,是很難適應的。要花一點時間。    例如: 
    Dim A as Integer = 0     '--A的初始值是 0
          A = 888        '--又把A的值改成888了!
          A = A + 222

    最後的答案,A是多少?
    初學者第一次寫程式,真的很難適應這一段變化。(或許是我不聰明,我當初很不適應這件事)

    後來我把它 "翻譯" 如下,才過了這一關。
    A <= 888    (註:把888 塞到A變數裡面)
    A <= A + 222  (註:把A變數加上222的「成果」,塞到A變數裡面)

3.    但要記錄下運算的過程,我用了狀態管理中的 ViewState(用Session也行啦)。

       方法很多,說不定您作得更好。

=======================================================

 

HTML設計畫面用了很多按鈕,剛好是一個很好的練習。

除了按鈕之外,我也用了 TextBox 與 Label,都是最基礎的東西。 

先說好,我偷懶,只完成上面「有顏色」的按鈕功能

其他的請自己改。

 

後置程式碼如下(VB語法):

2012/5/7修改後的程式:

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not Page.IsPostBack Then
            '--第一次執行程式
            ViewState("cal_input") = ""      '-- 使用者輸入的數字
            ViewState("cal_singal") = "0"   '-- 有無按下運算符號(+ / - / * / %)
            ViewState("cal_sum") = 0       '-- 運算後的結果
        End If

        '-- 寫程式的時候,我會即時把[變數值]列印到銀幕上,觀察程式有無寫錯。
        'Response.Write(ViewState("cal_input").ToString() & "
")
        'Response.Write(ViewState("cal_singal").ToString() & "
")
        'Response.Write(ViewState("cal_sum").ToString() & "
")
    End Sub


    Protected Sub ButtonCE_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles ButtonCE.Click
        ViewState("cal_input") = ""
        ViewState("cal_singal") = "0"
        ViewState("cal_sum") = 0
        '-- 按下 [CE清除]按鍵,數字歸零

        TextBox1.Text = "0"    '-- 畫面歸零"
        Label1.Text = "歸零"
    End Sub


    Protected Sub ButtonEnd_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles ButtonEnd.Click
        '-- 運算完畢,輸入「=」計算出結果。
        Label1.Text = "運算完畢 !!"

        If ViewState("cal_singal").ToString() <> "+" Then
            ViewState("cal_sum") = Convert.ToInt32(ViewState("cal_sum")) + Convert.ToInt32(ViewState("cal_input"))
            TextBox1.Text = ViewState("cal_sum").ToString()
        End If

        '--運算完畢,按下「=」符號後,如果要繼續運算的話....
        ViewState("cal_input") = Convert.ToInt32(ViewState("cal_sum"))
        ViewState("cal_singal") = "0"
    End Sub


    Protected Sub Button_x1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button_x1.Click
        '--加法--
        Label1.Text = "加法(+)運算"
        TextBox1.Text = ViewState("cal_input").ToString()

        If ViewState("cal_singal").ToString() = "0" Then
            '-- 第一次按下「+ 加法」按鈕
            ViewState("cal_sum") = Convert.ToInt32(ViewState("cal_input"))
        Else
            ViewState("cal_sum") = Convert.ToInt32(ViewState("cal_sum")) + Convert.ToInt32(ViewState("cal_input"))
        End If

        TextBox1.Text = ViewState("cal_sum").ToString()  '--畫面更新

        ViewState("cal_singal") = "+"  '-- 「非」第一次按下「+ 加法」按鈕
        ViewState("cal_input") = ""      '--數字歸零,等待下一次輸入
    End Sub




    '== 數 字 ============================================================
    '== 以下程式的重複性太高,可以濃縮在一起。請看下一個範例 Web_Calculator_sender.aspx。

    Protected Sub Button0_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button0.Click
        ViewState("cal_input") = ViewState("cal_input").ToString() & "0"
        TextBox1.Text = ViewState("cal_input").ToString()
    End Sub

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
        ViewState("cal_input") = ViewState("cal_input").ToString() & "1"
        TextBox1.Text = ViewState("cal_input").ToString()
    End Sub

    Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button2.Click
        ViewState("cal_input") = ViewState("cal_input").ToString() & "2"
        TextBox1.Text = ViewState("cal_input").ToString()
    End Sub

作者註解:以下重複且累贅,便省略。下一篇文章會針對此處修正!

 

 

舊版程式 (2008/12/17),僅供比對。不建議學習。

01     Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
02         If Not Page.IsPostBack Then
03             '--第一次執行程式
04             ViewState("cal_input") = ""      '-- 使用者輸入的數字
05             ViewState("cal_singal") = "0"   '-- 有無按下運算符號(+ / - / * / %)
06             ViewState("cal_sum") = 0       '-- 運算後的結果
07         End If
08
09         '-- 寫程式的時候,我會即時把[變數值]列印到銀幕上,觀察程式有無寫錯。
10         'Response.Write(ViewState("cal_input").ToString() & "<br>")
11         'Response.Write(ViewState("cal_singal").ToString() & "<br>")
12         'Response.Write(ViewState("cal_sum").ToString() & "<br>")
13     End Sub

14
15     Protected Sub ButtonCE_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles ButtonCE.Click
16         ViewState("cal_input") = ""
17         ViewState("cal_singal") = "0"
18         ViewState("cal_sum") = 0
19         '-- 按下 [CE清除]按鍵,數字歸零
20
21         TextBox1.Text = 0    '-- 畫面歸零
22         Label1.Text = "歸零"
23     End Sub

24
25     Protected Sub ButtonEnd_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles ButtonEnd.Click
26         '-- 運算完畢,輸入「=」計算出結果。
27         Label1.Text = "運算完畢 !!"
28
29         ViewState("cal_sum") = CInt(ViewState("cal_sum")) + CInt(ViewState("cal_input"))
30         TextBox1.Text = CInt(ViewState("cal_sum"))
31
32         '--運算完畢,按下「=」符號後,如果要繼續運算的話....
33         ViewState("cal_input") = CInt(ViewState("cal_sum"))
34         ViewState("cal_singal") = "0"
35     End Sub

36
37     Protected Sub Button_x1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button_x1.Click
38         '--加法--
39         Label1.Text = "加法(+)運算"
40         TextBox1.Text = CInt(ViewState("cal_input"))
41
42         If ViewState("cal_singal") = "0" Then
43             '-- 第一次按下「+ 加法」按鈕
44             ViewState("cal_sum") = CInt(ViewState("cal_input"))
45         Else
46             ViewState("cal_sum") = CInt(ViewState("cal_sum")) + CInt(ViewState("cal_input"))
47         End If
48
49         TextBox1.Text = ViewState("cal_sum")  '--畫面更新
50
51         ViewState("cal_singal") = "+"
52         ViewState("cal_input") = "0"   '--數字歸零,等待下一次輸入
53     End Sub

54
55
56
57     '== 數 字 ============================================================
58     Protected Sub Button0_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button0.Click
59         ViewState("cal_input") = ViewState("cal_input").ToString() & "0"
60         TextBox1.Text = CInt(ViewState("cal_input"))
61     End Sub

62
63     Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
64         ViewState("cal_input") = ViewState("cal_input").ToString() & "1"
65         TextBox1.Text = CInt(ViewState("cal_input"))
66     End Sub

67
68     Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button2.Click
69         ViewState("cal_input") = ViewState("cal_input").ToString() & "2"
70         TextBox1.Text = CInt(ViewState("cal_input"))
71     End Sub

72
73     Protected Sub Button3_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button3.Click
74         '--以此類推,以下省略!!!
75     End Sub

76
77         '--以此類推,以下省略!!!

 

雖然這不是一個好範例 (因為這題目有點悶,不實用、不有趣、不會主動吸引人去作),

但對於初學者來說,是可以學到東西的小範例。

尤其是「變數」在不斷的運算中,必須不斷修改數值。

對於初學者來說,有認真思考過,會學到一些東西喔!

 

2008/12/22補充上面的程式,因為使用了 ViewState(或Session),加上變數之間不斷傳遞數值,

                                所以非常紊亂。   我們可以參考這兩篇文章加以改進:

 

2012/ 5/ 7補充上面的程式,後續的數字按鈕,程式過份重費且累贅,改寫如下:

請看下一篇文章:[習題]ASP.NET製作網頁版的[小]計算機 #2 -- 事件裡面的 參數 sender

http://www.dotblogs.com.tw/mis2000lab/archive/2012/05/07/web_calculator_asp_net_sender.aspx

 

 

 

 想要計算超長位數,請參閱這篇文章:http://tw.myblog.yahoo.com/shege-1975/article?mid=1456&next=1259&l=f&fid=8

 

 

 完畢(The End)

 ----------- 分 隔 線 (下面有美女圖)-----------------------------------------------------------------------------------------------------------------------------

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

今日值班正妹,柚木 Rio。很可愛喔!是愛情動作片的女優..........

圖片:http://images.google.com/images?hl=zh-TW&rls=com.microsoft:zh-TW:IE-SearchBox&rlz=1I7GGIH_zh-TW&q=%E6%9F%9A%E6%9C%A8%20Rio&lr=&um=1&ie=UTF-8&sa=N&tab=wi

 

 

 

(謎之聲:為什麼講完範例以後,很不搭嘎地出現AV女優的圖片啊?  這不會破壞形象嗎?

    嗯......我只能說,你願意看柚木Rio的圖呢?還是底下這張「撕髮佈公」的圖?

 

我個人是對於「高雄馬英九」的撕髮不公,沒啥興趣啦。

      關於號稱「高雄的馬英九」資料來源如下---- http://www.wretch.cc/blog/corndesu/17842180

      這篇文章很難找了,你一定要看啊...  http://rebirth.pixnet.net/blog/post/1735973

圖片來源:http://images.plurk.com/1856775_5b7fa44bce5e857a456849099e7e8f1e.jpg

 

 

我將思想傳授他人, 他人之所得,亦無損於我之所有;

猶如一人以我的燭火點燭,光亮與他同在,我卻不因此身處黑暗。----Thomas Jefferson

寫信給我,不要私訊 --  mis2000lab (at) yahoo.com.台灣  或  school (at) mis2000lab.net



ASP.NET遠距教學、線上課程(Web Form + MVC)。 第二門 課程「四折」-- 以MVC課程 作優惠。
第一天課程, "完整" 試聽。  如不滿意  全額退費!
................   facebook社團   https://www.facebook.com/mis2000lab   ......................

................  YouTube (ASP.NET) 線上教學影片  http://goo.gl/rGLocQ

*********************************************************************************************

*** ASP.NET MVC線上課程 第一天 免費看 (5.5小時) *** 

************************************************************(歡迎索取,免費申請)*****

 

Blog文章 "附的範例" 無法下載,請看 這裡 ...... https://dotblogs.com.tw/mis2000lab/2016/03/14/2008_2015_mis2000lab_sample_download

請看我們的「售後服務」範圍(嚴格認定)

......................................................................................................................................................

...................................................................................................................................................... 

[遠距教學、教學影片] ASP.NET (Web Form) 課程 上線了!MIS2000Lab.主講

事先錄製好的影片,並非上課時側錄!   觀看影片時,有如我「一對一」跟您面對面講課

 

    MIS2000 Lab.  線上教學影片(YouTube) **免費觀賞**