99-2中台資管 - 進階網頁程式設計 - 期末考

99-2中台資管 - 進階網頁程式設計 - 期末考



考題如下： Link or Download


Hint:
Cookie, Session 換行方式：
輸出時換行：: Replace("%0a", "\n");




○製作完成

• 請確保程式能執行
• 請勿作弊，若copy別人程式則兩人都0分
• 請存於目錄之下並壓縮上傳，目錄名稱:  [學號][姓名][期末考]
  ex: [1234567][王老師][期末考].zip
• 請上傳至以下網址：  [ Link ]

99-2中台資管 - 進階網頁程式設計 - JQuery

jQuery

介紹：Link

下載：jQuery Regular (179kb)

使用方式：

1. 下載jQuery   Ex: jquery-1.6.1.js
2. 開啟網站專案 (ASP .NET, C#)
3. 加入現有項目，加入js檔
4. 使用：

    ＜script type="text/javascript" src="jquery.js" ＞

Plug-in　練習

1. jQuery UI - Tab
• 介紹 : http://jqueryui.com/demos/tabs/#default
• 下載：http://jqueryui.com/download
• Steps
• 加js
• 加UI
• 加Themes
• 加CSS
2. jQuery UI - Slider
• 介紹 : http://jqueryui.com/demos/slider/#rangemin
• Range with fixed minimum
• Multiple silders
• Simple scrollbar
3. jQuery UI - Hide
• 介紹 : http://jqueryui.com/demos/hide/
• Range with fixed minimum
4. jQuery UI - Progressbar
• 介紹 : http://jqueryui.com/demos/hide/
• http://jqueryui.com/demos/progressbar/#animated
5. ThickBox 3.1
• 介紹 : http://jquery.com/demo/thickbox/
• Download
   thickbox.js or thickbox-compressed.js, ThickBox.css, and the loading graphic (loadingAnimation.gif) to your local machine (or cut and paste the code from the tabs). Along with these three files, a copy of the jQuery JavaScript library is needed. For this site, and ThickBox, I am using the compressed version of jQuery.
6. TableSorter
• 介紹 : http://tablesorter.com/docs/
• Demo:http://tablesorter.com/docs/example-option-sort-key.html
• 下載：http://tablesorter.com/docs/#Download

99-2中台資管 - 進階網頁程式設計 - Cookie作業 : 備忘錄

99-2中台資管 - 進階網頁程式設計 - Cookie作業 : 備忘錄

説明：
請利用Cookie製作一個備忘錄程式，
可以輸入：

• 時間
• 待辦事項

並製作一個按鈕，將輸入內容儲存後紀錄至Text中並存入Cookie

例原本Text與Cookie內容為

2011.06.03 : 作業繳交
2011.06.07 : 銀行繳費
2011.06.10 : 網頁程式設計上課

輸入：

• 2011.06.17
• 網頁程式設計小考

結合之前內容後顯示

2011.06.03 : 作業繳交
2011.06.07 : 銀行繳費
2011.06.10 : 網頁程式設計上課
2011.06.17 : 網頁程式設計小考

注意事項：

• 每次開啟都會讀取cookie後顯示於Text
• Cookie設定為30天

○製作完成

• 請確保程式能執行
• 請存於目錄之下並壓縮上傳，目錄名稱:  [學號][姓名][Cookie作業-備忘錄]
  ex: [1234567][王老師][Cookie作業-備忘錄].zip
• 請上傳至以下網址：  [ Link ]

BP 2011.06.10

99-2中台資管 - 進階網頁程式設計 - RegularExpression 基礎

 RegularExpression 基礎

• [0-9] : 限定只能輸入0~9
• [a-z] : 限定只能輸入小寫a~z字母
• [A-Z] : 限定只能輸入大寫A~Z字母
• [a-zA-Z]  : 限定只能輸入小寫a~z字母與大寫A~Z字母
• [a-zA-Z0-9] : 限定只能輸入小寫a~z字母與大寫A~Z字母與0~9
• [^0-9] : 限定不能輸入0~9數字
• {3} : 限定只能輸入3個字母
• {3,7} : 限定只能輸入3~7個字母
• {3,} : 限定只能輸入3~無限長個字母
• \. : 限定一定要輸入符號 . 
• ? : 選擇性顯示

• Example
• [0-9]{3}([0-9]{2})? : 郵局3+2郵遞區號
• [A-Z]{1}[0-9{9} : 身分證長度檢測

99-2中台資管 - 進階網頁程式設計 - 網頁物件介紹

網頁物件介紹

• Response
• HttpResponse Class
• 由Server端傳來的資料與訊息
• Detail : Link
• Exercise :
• 顯示資料於網頁：Response.Write();

• Request
• HttpRequest Class
• 由Client端傳過去的要求
• Detail : Link
• Exercise:
• 取出URL查詢字串 : Request.QueryString[ " " ]
• 網頁傳值格式 : 網址?[變數名稱1]=[值1]&[變數名稱2]=[值2]&[變數名稱3]=[值3]
• 取出表單傳送欄位： Request.Form[ " " ]

• Server 
• HttpServerUtility Class
• Detail : Link

• Cookie
• HttpCookie Class
• Detail : Link
• 使用方式
• 重要屬性與方法
• Expires
• Value
• 設定範例
• Response.Cookies["UserName"].Value = TextBox1.Text;
• Response.Cookies["UserName"].Expires = DateTime.Now.AddSeconds(100);.
• 取出範例
• TextBox2.Text = Request.Cookies["UserName"].Value;

• Session
• HttpSessionState Class
• Detail : Link

延伸閱讀

• 範例下載： Link
• FORM標籤介紹 - Link
• form 的 Post 和 Get - Link
• 課本介紹 Link

99-2中台資管 - 進階網頁程式設計 - 05/27 測驗

99-2中台資管 - 進階網頁程式設計 - 05/27 測驗

題目： 星座運勢

説明：

1. 請提供一個 textbox物件，讓使用者輸入其出生年, 月, 日 ：例  1982/06/02
2. 按下確定後，取出其月份，日 並轉為數字
3. 判斷其所屬星座 
• 依其所屬月份判斷即可，如水瓶座 1月,  雙魚座 2月, 牡羊座3月........依此類推 
4. 顯示其本週運勢，運勢內容請見 - Yahoo星座 -link
5. 針對不同星座顯示不同圖片
6. 輸出方式請自行設計，不設限
• 例

• 雙子座
 05/21 ~ 06/21

• 本月優勢：
  工作學習主動性強，競爭意識強烈。
  本月弱勢：
  對待愛情自信不足，幸福很容易因此而溜走。
  貴人方位：西北方向  開運物品：小木馬吊飾 ; 休閒解壓：水吧

○製作完成

• 請確保程式能執行
• 請存於目錄之下並壓縮上傳，目錄名稱:  [學號][姓名][0527測驗]
  ex: [1234567][王老師][0527測驗].zip
• 請上傳至以下網址：  [ Link ]

BP

99-2中台資管 - 進階網頁程式設計 - Blogger 網站設計

99-2中台資管 - 進階網頁程式設計 - Blogger 網站設計

請同學利用Blogger ( blogspot )來設計一個自己的網站樣版，
相關網站如下：

• Blog網站 Blogger - Link
• 模板網頁 BTemplate - Link

作業要求

• 請將內容修改完整
• 請持續更新
• 完成者請將你的網址填入下表單：
• 作業繳交： Link

BP

99-2中台資管 - 進階網頁程式設計 - 字串處理 , 亂數處理

String 類別- MSDN 介紹： Link

• Equals
• IndexOf
• Substring
• LastIndexOf
• Insert
• Remove
• Replace
• Split
• Trim
• ToLower
• ToUpper

Random 類別 - MSDN 介紹： Link

• Next

99-2中台資管 - 進階網頁程式設計 - 0513測驗

考題在此：  LINK

NOTE:

• 請確保程式能執行
• 請存於目錄之下並壓縮上傳，目錄名稱:  [學號][姓名][0513測驗]
  ex: [1234567][王老師][0513測驗].zip
• 繳交作業者
• ex: [1234567][王老師][0513測驗-作業].zip
• 請上傳至以下網址：  [ Link ]

99-2中台資管 - 進階網頁程式設計 - C# 練習 (Method, argument)

Method 建立與使用

• 建立原則與方式
• 引數串列
• 實引數 ( Actual Argument ) : 傳值呼叫
• 需引數 ( Dummy Argument ) : ref : 參考、傳址呼叫 
• 多載 (Overloading)
• 練習1 : 
• 計算方程式 :   f = 3X^2 +  4Y + 5
• 透過void方取出輸入值
• 透過方法計算方程式結果 F
• 透過void方法顯示結果
• 練習2:
• 潤年計算 (傳址版)
• 潤年 : http://zh.wikipedia.org/zh-tw/%E9%97%B0%E5%B9%B4
• 練習3:
• 次方函式  mypower()
• 單一引數為平方
• 兩個引數，其第二個為次方項

ArrayList Class

• 可以動態增減的好東西
• Implements the IList interface using an array whose size is dynamically increased as required.
• Properties and Methods :  Doc

99-2中台資管 - 進階網頁程式設計 - iFrame

iframe可用於網頁的鑲嵌，可以將目前的網頁插入一個指定的網頁

〈iframe〉〈/iframe〉


其參數如下：

• src=""     : 目標網頁
• name=""   : 此框架名稱
• align=""   : 此框架對齊方式 
• width="" height=""   : 寬度與高度，單位 pixel
• marginwidth="1" marginheight="1"    : 文件與邊界的大小
• frameborder="1"     :  匡線粗細
• scrolling="Yes"   : 是否包含捲軸

範例：

結合 Google Docs 表單

99-2中台資管 - 進階網頁程式設計 - 作業:個人介紹

作業:個人介紹

請同學利用以下元件製作個人介紹：

• Label
• TextBox
• image
• Hyperlink
• Button

需要製作的項目有：

• 個人照片
• 個人介紹
• 列出常觀注的網站 * 5 個
• 製作一個個人留言版

BP

99-2中台資管 - 進階網頁程式設計 - 04/01

請同學設計一個核能電廠基本資料程式，

主要讓同學學習將UI, Function, Data三者分離的實作。

當中將程式分為三個結構，

• 流程控制頁面 ( ASP頁面對應c#)
• 查尋動作 ( query ) 
• 電廠資料 ( plant )

當中包含之內容與其規劃為

• 流程控制頁面
• 建立電廠物件
• 取出電廠資訊
• 查尋動作 ( query ) 
• 存取電廠物件

• 資料儲存 ( plant )
• 紀錄電廠資料

需要儲存之資訊：

• 電廠名稱
• 建廠年份 (民國年份)
• 使用年限(幾年)
• 機組數量
• 員工數量

預計查尋資料，每一個皆為獨立Method，3,4需兩個Method

1. 取出名稱並顯示至 Label
2. 傳回機組數量並顯示
3. 取出建廠年份 ( 西元 )並顯示
4. 給予一個年份值，判斷是否超出年份 (是，傳回yes,否，傳回No)並顯示

請建立兩座電廠！

範例：

注意事項：

• 請勿作弊！請勿作弊！請勿作弊！
• 若網站無法執行，請勿上傳!
• 請建立一個目錄存放程式檔，名稱為： 學號姓名 , 例：  A12345魯夫
• 請將你的個人目錄壓縮後上傳
• 製作完成請上傳至以下網址：  [ Link ]

BP: 請同學加油吧！

99-2中台資管 - 進階網頁程式設計 - 基礎ASP.NET元件

99-2中台資管 - 進階網頁程式設計 - 基礎ASP.NET元件

• Label
• Textbox
• TextMode : 
• SingleLine
• MultiLine
• Password
• HyperLink
• NavigateUrl
• Target
• ImageURL
• Text
• Image
• ImageUrl
• Visible
• imageButton
• Panel
• Checkbox
• Checked
• Radiobox
• Listbox
• DropDownList
• CheckboxList
• 重要屬性:
• Items.Count
• Items[i].Selected
• Items[i].Text
• RadioButtonList
• SelectedIndex
• 矩陣概念，第一個位址為 0 
• SelectedText
  SelectedValue
• Items
• RepeatColumns
• RepeatDirection

99-2中台資管 - 進階網頁程式設計 - C# 練習

99-2中台資管 - 進階網頁程式設計 - C# 練習

• Try-Catch
• http://msdn.microsoft.com/zh-tw/library/0yd65esw(VS.80).aspx
• FormatException
• Exception
• Array[]
• http://msdn.microsoft.com/zh-tw/library/system.array(VS.80).aspx
• Random
• http://msdn.microsoft.com/zh-tw/library/system.random(VS.80).aspx
• int.TryParse()
• http://msdn.microsoft.com/zh-tw/library/system.int32.tryparse(VS.90).aspx
• Convert.ToInt32( char )

99-2中台資管 - 進階網頁程式設計 - 物件導向作業

2011.03.18 作業

請模擬一個銀行帳戶，
可以以網頁建立帳戶，存入以下資料

• 姓名
• 電話
• 存款金額

並可以做以下操作：

1. 利用網頁輸入上面三個內容
2. 顯示  <姓名> : <存款>
• ex:   bp : 10000

程式功能：

利用以下四個方式存取：

1. 網頁輸入資料
2. 網頁.cs 檔控制流程
3. 新增 account.cs 儲存資料
4. 新增 accountProc.cs 進行資料存取
• 建立以下方法：
• NewOneAccount( String Name , String Tel , int Money)
• getPostMsg( Account a1 )

BP

99-2中台資管 - 進階網頁程式設計 - 流程 / 功能 / 資料 分離練習

流程 / 功能 / 資料 分離練習

請同學完成新增人員的練習，
功能為：

• 新增一個人員姓名、狀態、訊息
• 製作公告
• 印出公告

請完成以下三版本：

1. 簡易版

• 承接網頁ASP.NET資料
• 設定變數儲存
• 將變數內容做成PostMsg
• 顯示PostMsg

2. 資料分離版本

• 承接網頁ASP.NET資料
• 建立Human物件儲存資料
• 將Human內容做成PostMsg
• 顯示PostMsg

3.資料/功能皆分離版本

• 承接網頁ASP.NET資料
• 建立HumanFunction物件並以此建立Human物件儲存資料
• 透過HumanFunction物件做成 PostMsg
• 顯示PostMsg

範例下載：

• Version - 01
• Version - 02
• Version - 03
• Version - 04 - BMI 版

NOTE:

• 03/25 測驗資料/功能皆分離版本

BP 2011.03.18

資訊救災最佳範例

資訊救災最佳範例

Google :尋人工具: 2011 日本地震

身為資訊人，你可以貢獻世界很多很多！

99-2中台資管 - 進階網頁程式設計 - 練習

練習一：

請完整複製一個資管系網站，並且修改其Tag使其能順利顯示於本機中。

• 資管系網頁：
• http://mgis.ctust.edu.tw/front/bin/home.phtml

練習二：

Class, Object, Method, Constructor練習

請建立一個 Human類別 (class)，可以用來儲存一個個人的資訊。

當中含有：

• 變數
• 姓名
• 性別
• 身高
• 體重
• 出生日期年(西元)

• 建構子 (constructor) 
• 預設輸入兩個字串參數姓名 , 性別

• 方法 (method)
• 設定性別 void setSex( String insex )
• 設定身高 
• 設定體重
• 取出性別 String getSex()
• 設定出生年分 (西元)
• 取出出生年分 (民國)

• 顯示方法： 
• Response.write()

• 實體化：以Human建立兩個物件並設定資料
• guy2
• guy1

範例下載： [ Download ]

中台 - 99-2 網路程式設計 - Class, Object, Method, Constructor練習

Class, Object, Method, Constructor練習

請建立一個 WebSite類別 (class)，可以用來儲存一個網站的資訊。
當中含有：

• 變數
• 網頁本文 String content_text
• 圖片的網址 String pic_url
• IP位址 String IP   
• 網址 String DomainName
• 網站title String Title

• 建構子 (constructor) 
• 預設輸入兩個字串參數 IP , 網站名稱(title)

• 方法 (method)
• 設定網域名稱(Domain Name) :  setDomainName()

• 顯示方法： System.out.println( 變數或字串 );

• 實體化：以WebSite建立兩個物件
• website1
• IP: 193.123.121.1
• Title : facebook
• website2
• IP: 191.33.121.1
• Title : Yahoo

範例下載： [ Download ]