Web Service 怎麼寫

Web Service 初探(一)

Web Service入門 #1，透過VS 2005/2008/2010 撰寫一個Web Service

WebService是放在IIS上提供給Client做資料存取、交換用的

撰寫的方式很簡單，上面兩個教學很輕鬆讓你撰寫出來
也誠如其名，他跟WINDOWS服務一樣，永遠等待著、服務著，只是在網路上而已


而WCF是WebService的一種，更進化的，推出之後，讓大家更多一種選擇，而且WCF更強大，他甚至不用跑在IIS之上，可以在任何程式中把這個WCF給new出來，就讓這個程式提供這個服務，可以跟其他人交換，機制上也更完整，更安全。

NO	功能	Web Service	WCF (原名 Indigo)
	.NET Farmework	.NET 1.1 以上	.NET 3.5 以上
	Hosting	可建置於 IIS	可建置於 IIS, Windows Activation Service, Self-hosting, Windows Service
	Programming	定義 [WebService] Attribute 於類別	定義 [ServiceContract] Attribute 於類別
	Model	使用 [WebMethod] Attribute 公開可見的方法	使用 [OperationContract] Attribute 公開可見的方法
	Operation	One-Way, Request - Response 於 Web Service 中支援各種操作	One-Way, Request - Response, Duplex 於 WCF 中支援不同類型的操作
	XML	使用 System.Xml.Seriallzation 命名空間進行序列化	使用 System.Runtime.Serialization 命名空間進行序列化
	Encoding	XML 1.0, MTOM(Message Transmission Optimization Mechanism), DIME, Custom	XML 1.0, MTOM, Binary, Custom
	Transports	透過 HTTP, TCP, Custom 溝通	透過 HTTP, TCP, Named Pipes, MSMQ, P2P, Custom 溝通
	Protocols	配合 WSE 可支援 WS-*，提供安全性	支援 WS-*，提供安全性、可靠性、交易
	State Management	無狀態	可管理狀態
	Other		整合 Enterprise Sevices(COM+)、.Net Remoting、Web Service(ASMX)、WSE3.0 和 MSMQ

RIA是什麼？

Rich Internet Application是一種在網際網路上運行的應用程式，有著如同桌面應用程式的行為、功能、快速回應、直覺與體驗，也融合了網際網路應用程式的容易開發的與低成本的特性。RIA結合桌面應用程式與網路的優點。(Macromedia, 2003)

Q:RIA和Flash網站有什麼不同？
A:Flash網站與RIA的最大差異在於RIA能夠操作資料並與之互動，而傳統的Flash網站僅止於視覺化的呈現。(McMullin, J. & Skinner, G., 2003)

Q:RIA有什麼好處？
A:
對企業的好處：
提高交易量
應用更夠更快的上線
降低應用開發與維護成本

對資訊部門的好處：
降低基礎設施建置成本
提昇開發效率
支援工業標準

對使用者的好處：
互動而即時的體驗能夠降低使用者挫折
降低新手的學習曲線
單一畫面的使用者介面能夠節省時間
(Macromedia, 2003)

什麼是響應式設計？

拜行動裝置上網普及，因此目前 Responsive Web Design 響應式設計 這個 Web 設計方式很熱門，而要做到這個設計，必須要先認識CSS3 Media Queries，這個可以讓你根據裝置或瀏覽器的長寬不同，而可以有不同的CSS呈現，比方，當夠寬的時候，會呈現三個Column（不是真的欄，是排版的欄）。縮小的時候，可能剩下兩個或甚至一個，而原本有橫向的多個選項，也可能被合併成一個按鈕或LIST，點了才會展開，......等等

所以，什麼是響應式設計呢？就是會彈性的根據你裝置的尺寸不同，呈現不同的外觀，相同的內容，並讓使用者在最適當的、最少需要用手指放大滑動的一種設計概念。

JS的Timer

JS給了網頁兩種Timer，其實是一樣的東西，只是用法跟行為有一點點不同罷了


setInterval()跟一般常見的Timer沒有太大的差異，就是持續的間隔一段時間就執行一段程式（一個函式）
setTimeOut()則是隔一段時間之後，一段程式（一個函式）會被執行一次，就這麼一次。




先介紹setInterval()吧，常用兩種呼叫型態，一個是就直接把要做的程式，寫在參數裡function()中，通常要做的事情應該不多才會這樣寫吧，不然不美觀啊。底下的範例，就是每三秒鐘執行一次alert。

var MyTimer = setInterval(function(){alert("Hello")},3000);

另外一個，則是先把函式寫好然後以函式呼叫當成參數。比方底下的例子就是每五秒呼叫一次 doSomething()看裡面要做什麼事情。


var MyTimer = setInterval( "doSomething()", 5000 );

function doSomething ( )
{
  // (do something here)

}


怎麼清除或停掉這個Timer呢？很簡單，就是 clearInterval( MyTimer );對，就在剛剛你疑惑的地方，呼叫函式其實setInterval()其實會傳回一個 Timer物件（或ID）就是用來當你想清除或停掉他的時候用的。





相同的寫法，可應用在setTimeOut()上，非常的簡單。我就不重複寫了

更改 JQuery UI Dialog 的標題 Title （在已經 Create 了之後）

第一時間想到的是更改該 Div 的 Title 屬性，但是，不是這樣用的，也就是說


<div class = "Div_Message" title = "我是訊息對話框" >

</div>

這個對話框在經過以下建立過程之後

$( '.Div_Message' ).dialog( 
{
autoOpen: false,
resizable: false,
width:500,
height:300,
modal: true
         } );

被$('.Div_Message').dialog( 'open' );把視窗叫出來之前
即便用了$( '.Div_Message' ).prop( "title",  "我把訊息改掉" );也沒有用



因為語法不是這樣用的
被$('.Div_Message').dialog( 'open' );把視窗叫出來之前
應該要$('.Div_Message').dialog('option', 'title', '我把訊息改掉'); 才對

2 3 4 5

// getter var title = $( ".selector" ).dialog( "option", "title" ); // setter $( ".selector" ).dialog( "option", "title", "Dialog Title" );

網頁的ComboBox的使用方式

基本上，已經有人寫了非常完整又圖文並茂的介紹了，我就不用再贅述了，請看下拉選單ComboBox詳細介紹文但是怕那天原文刪除，或其他因素，所以我還是會在底下稍微的更簡單的說明一下語法。


1.怎麼做出下拉選單，如下利用HTML語法，可做出三個選項的下拉選單：

 <select id = "ComboBxMonth" >
       <option value = "1" >1月份</option>
       <option value = "2" selected = true >2月份</option>
       <option value = "3" >3月份</option>
 </select>
           

2.下拉選單如何設定預選項目到某一個選項，以及怎麼讓某個項目看得到但是不能選？如下，就會讓1月份無法被選，以及預設選擇2月份：

 <select id = "ComboBxMonth" >
       <option value = "1" disabled="disabled" >1月份</option>
       <option value = "2" selected = "true">2月份</option>
       <option value = "3" >3月份</option>
 </select>
           

3.選取目前下拉選單的選取值，或選項文字：

$('#ComboBxMonth option:selected').val();                                      // 取得數值

$('#ComboBxMonth option:selected').text();                                    // 取得文字


4.指定或取得目前下拉選單元件選到第幾個選項：
$('#ComboBxMonth option:[index=3]').attr('selected', true);      // 設定
$('#ComboBxMonth option:selected').index();                                // 取得


5.增加一個選項：（第一種寫法的JQuery Selector目前還看不懂）
$('#ComboBxMonth).append( $('<option></option>').val('9').text('Test') );

$('#ComboBxMonth).append( '<option value = "9" >Test</option>' );


6.增加一個選項到特定位置：
$('#ComboBxMonth option:eq(2) ).after( $('<option></option>').val('9').text('Test') );

$('#ComboBxMonth option:eq(2) ).after( '<option value = "9" >Test</option>' );


7.如果有某個資料跟下拉選單相符合，則把元件選到該選項：
$('#ComboBxMonth option[ value = ' + "2月份" + ']' ).prop( "selected", "true" );

紅色的部分，非常容易寫錯，因為夾雜了變數進去串

8.清除所有選項：
$('#ComboBxMonth option').remove();

9.清除第幾個選項：
$('#ComboBxMonth option:eq(2)').remove();

10.清除特定Value的那個選項：
$('#ComboBxMonth option[ value = 2 ]').remove();


11.想清除符合某個文字的選項？目前找到沒有方便的作法....

網頁上要透過JS取得物件的left或top，請先讓他出現在畫面上

如果該物件（比方div、img、h4）的狀態是被hide起來，並沒有顯示在畫面上
那麼透過JQuery去取得該物件的位置，比方$(this).position().left將會得到0
你一定要先讓物件show()在畫面上，才能去取得或設定他的位置。

Javascript的array排序（包含2維array）

JS的array怎麼宣告使用？如下，宣告array時不用告知長度，就要多少用多少。

var MyArray = [];
MyArray[0] = 10;
MyArray[1] = 20;



那二維array怎麼用呢？如下，同樣的概念，要多少用多少，然後告知那個位址是個array就好

var MyArray = [];
MyArray[0] = [];
MyArray[1] = [];
MyArray[0][0] = 10;

MyArray[0][1] = 15;

MyArray[1][0] = 20;

MyArray[1][1] = 30;

不過二維array有個指定用法，說明如下，一樣是二維array，但是，用的是指定該column的名稱的方式，這樣在後續使用的時候，可以不用記得是第幾維，只要指定正確的column名稱就好了。

var MyArray = [];
MyArray[0] = [];
MyArray[1] = [];
MyArray[0]["id"] = 10;

MyArray[0]["id"] = 15;

MyArray[1]["Email"] = 20;

MyArray[1]["Email"] = 30;

準備工作完成，瞭解JS的array使用方式之後，來看看排序吧

一維array很簡單，就呼叫MyArray .sort()，就這樣（如果想瞭解工作的原理，請看本文最下方的補充。）MyArray就會變成排序完成的Array（所以如果要保留原本的Array，請利用 var SourceMyArray = MyArray.slice(0);這個函式）

二維就比較複雜一些。要告訴sort()函式，我要用哪一維來排序，方法為何。這個寫法上就是：

MyArray.sort( function(a,b)

{

return a["id"].toUpperCase() < b["id"].toUpperCase() ? -1 : ( a["id"].toUpperCase() > b["id"].toUpperCase() ? 1 : 0 );

//return a["id"].toUpperCase() > b["id"].toUpperCase(); 錯誤的寫法，漏掉了等於的情況

});

大概的意思就是告訴排序函式幫我用id這個欄位幫我做排序，排序方法則是拿兩者比大小，並根據結果傳回-1或1或0。其中有個有趣的發現，當你用了上面我註解掉的那一行的錯誤的寫法，在10筆資料內的排序都會正確，一旦超過10筆，就會排序錯誤，為什麼？還真研究不出來，日後若有人知道原因，煩請告訴我喔。

這個範例程式放在這裡

可以自行貼到http://jsfiddle.net/或者是http://htmledit.squarefree.com/來做測試喔

補充說明JavaScript的Sort：

• sort 在適當的位置排序陣列的元素。

var a = ['Wind', 'Rain', 'Fire'];
a.sort();
print(a); // Fire,Rain,Wind

sort 也可以接受 Callback 函數來決定如何排序陣列的內容。這個函數會對兩個值做比較，並返回下列三個值其中之一︰

• 如果 a 在排序系統中小於 b，返回 -1（或任意的負數）
• 如果 a 在排序系統中大於 b，返回 1（或任意的正數）
• 如果 a 和 b 被認為是相等的，返回 0。

例如，下面的例子會以字串的最後一個字母來排序︰

var a = ['Wind', 'Rain', 'Fire'];
function sortFn(a, b) {
  var lastA = a[a.length - 1];
  var lastB = b[b.length - 1];
  if (lastA < lastB) return -1;
  if (lastA > lastB) return 1;
  if (lastA == lastB) return 0;
}
a.sort(sortFn);
print(a); // Wind,Fire,Rain

jquery-1.10.2.min.map not found

最近更新了JQuery的使用版本，從1.7改用到1.9、1.10
發現了一些影響不大的DEBUG的訊息
比方：「 jquery-1.10.2.min.map not found 」

上網查詢了一下
這是因為我有漏（或是亂刪）該存在的檔案
而這個.map的檔案，是用來讓DEBUG的時候可以看懂JQuery的程式碼，因為通常jquery-1.10.2.min.js這種.min.js的JQuery的JS檔是經過壓縮的，而.map檔案就是紀錄著被壓縮的TAG的位置，這可以讓Chrome瀏覽器可以使用這個檔案，把被壓成了沒有籪行的、無法識別的亂碼在DEBUG模式之下還能看到程式的原有格式。

$.browser這個物件在JQuery 1.9版過後就被拿掉了

$.browser這個物件在JQuery 1.9版過後就被拿掉了，變成以其他的Plug-in的方式存在，有人提到，這可能是一種建議，希望避免開發者去偵測判斷瀏覽器。

如果引用了JQuery 1.9版之後的版本，在瀏覽器（特別指Chrome）執行並偵錯時，會看到以下錯誤的。
$.browser.msie cannot read property 'msie' of undefined

$(function() 是甚麼意思？

之前一直看不懂$(function() ，所以很多JQuery UI也都沒有在用，現在終於瞭解了，$(function() 等同於$(document).ready()


$(function() 
{
    $( "#datepicker" ).datepicker();
});

等同於

$(document).ready(function() 
{
    $( "#datepicker" ).datepicker();
});

也就是網頁好了之後，立刻執行的Function。

設計範本：網頁篇

http://v2.2a-archive.com/flashindex.htm2Advance V2（Flash的極致表現）

http://v3.2a-archive.com/flashindex.htm2Advance V3（Flash的極致表現）

http://v4.2a-archive.com/flashindex.htm2Advance V4（Flash的極致表現）

http://v5.2a-archive.com/2Advance V5（Flash的極致表現）

如何讓一個DIV包含另外一個DIV ------ 如何控制網頁元素（Tag element）讓元素從原本的位置（指的是親子位置）變更到其他位置

我在設計網頁的時候，經常會需要用一個Design的DIV來試著排版，但這內容可能在一開始得隱藏，並且之後是在按下按鈕之後才出現在PAGE的主要DIV當中，所以得用JS來動態的在按鈕事件中將物件元素搬移或加入到另外一個DIV中。

原本以為會用到的是 JQuery 的 add()，但是跟想像的有所差異

add()是用來把指定的元素加入自己所在的集合，然後一起去做什麼事情。比方說
這個例子，他是把所有的DIV加上邊框，之後包含著<P>元素來做把背景變成黃色。然而，<P>元素本身並不會變更其親子關係，也就是<P>元素如果在其他DIV中，這個關係不會變。




應該要用 JQuery 的 append(), prepend(), after(), before()來做，才是真正的把元素加到某個元素中。差異說明（請先下載範例）：




畫面被分割成上、中、下：Div_Header、Div_Content、Div_Footer三個區塊，每個區塊各自放了一些方塊，而「我會被搬走」這個方塊則是在按下上方的按鈕之後，會被移動，可從上方的藍色框線看出Div_Header的範圍，進而判斷出是否DivAdd01在Div_Header之中。

1.比方我要把DivAdd01這個ID的DIV放到Div_Header中，則該使用append(),跟prepend(),兩個函式，會把DivAdd01加到Div_Header中，並決定放置在最後或最前面的位置。

2.另外，after(), before()則是會把DivAdd01加到Div_Header的父親層，讓DivAdd01跟Div_Header處於同一層，然後差異也在於放在之前或之後。

3.按下add按鈕，則會把left連同Top_left，具有這兩個class的元素都會被設定為被景色白色。

顏色的基礎知識

顏色的基礎知識

常用Photoshop的人應該都對於一些色彩相關用詞不陌生才是，顏色有三個屬性

色相：色彩的外相，比方紅、藍、黃、綠這樣的表現方式。

明度：就是顏色的亮度。

彩度：顏色的鮮豔度，彩度越高越鮮豔。

而色調，就是以明度跟彩度的組合來表示，通常只要掌握度色調的統一，即便用了多色相，也不至於讓顏色混亂不協調。只不過，高彩度的色調使用上要特別謹慎，顏色太重且太多的話，容易失焦。

就像黑白對比強烈一般，利用互補色，經常可以達到很好的視覺效果，而互補色在色表上以16進位來呈現時，恰巧可以發現實用的特性：比方 #00ffff 跟 #ff0000就是視覺對比強烈的互補色，#0080ff跟 #ff8f00也是一對互補色。

在配色上，通常除非是天才，不然，通常會遵照一些範本或規範。通常有主要的基準色（目的鮮明，比方跟水有關的網站，可能會用藍色當基準），以及一些輔助色。

版面設計的基礎知識

版面設計的基礎知識：

網頁是用來呈現資訊的，資訊的量通常不小，要讓來看網頁的人能有好的吸收能力才行，要傳達的資訊有視覺元素與文字元素兩大類，將資訊做好分類、群組之後，藉由底下的技巧，達成良好吸收的目的。

1.      讓關連性高的元素靠在一起。藉由改變形狀、顏色差異、加入區隔線、對齊等等方法來區分各個不同群組。

2.      除非精心設計過，否則不建議使用置中對齊，會造成視覺流程障礙，多半使用靠左對齊為佳。

3.      利用字體大小、影像形狀的大反差，來做出對比，做出強調，引導使用者的視覺

4.      相同的呈現理念，就可以反覆的一致的應用在同樣的元素上，讓使用者習慣並很快的吸收變成經驗，看到這種呈現，就知道會是甚麼類型的資訊。

5.      版面大小有兩種設計：

l   一種是固定寬度設計，內容版面的位置不會因為拉大縮小視窗而改變，但是，當使用者的螢幕（解析度）太大或大小或瀏覽器視窗拉大拉小，會導致周圍的空白太多而顯眼，或者是導致橫向捲軸出現，這兩種狀況都可能讓使用者不愉快。

l   另外一種則是動態寬度設計，會隨著螢幕（解析度）或瀏覽器視窗拉大拉小而改變整個版面寬度，但設計上內容元素如果也是要動態寬度高度才比較適合，但，這會限制某些設計的發揮，因為長寬無法固定，比例也無法固定，某些圖文的比例會失控。

6.      首頁的任務：大多數人都知道，首頁是跟其他內容頁面有絕大的不同，他是使用者第一眼見到的頁面，要強調網站的風格、種類就必須在這邊呈現出明確、鮮明的目的，比方有些網站是以提供大量資訊為目的，就會一次呈現大量的分類資訊，比方Yahoo，而有的是萬分明確的告訴你目的，畫面元素簡單到不行，比方Google，其他比方有企業常用的設計方式，鮮明企業形象的視覺元素，透過導覽列來逐一挑選使用者想看的內容，通常注重在衝擊力的設計。比方ASUS，Acer。

7.      導覽列的任務：導覽列肩負著引導使用者方向的重要功能，所以在可用性的注重上，會高過外觀的設計。導覽列設計上大至有分四種：

l   圖像化項目分類型：圖像化有比較好的視覺效果，但是一旦日後需要增加項目，則可能造成版型設計困難崩壞。

l   文字連結型：通常會在入口網站、購物網站使用，由於每天或經常性的更新內容，所以文字連結來當導覽項目較為容易修改。

l   收納型：就是列出大項目，滑鼠滑過去之後會列出第二層項目的設計方式。對於項目眾多，變動性不高的網頁，很適合這種作法，因為設計耗時。

l   麵包屑分層指引型：這個算是一種輔助的類型，在項目有多層之下，麵包屑指的是網頁上會有地方列出目前所在位置，通常用這種方式來表示：「首頁>產品>主機板」。

8.      版面配置並沒有一定制式的規定，但是，通常有一些常用的型，從「上方導覽型」、到「上方加左方導覽型」、到「三欄式」都是最常見的。也有一些充滿設計感的自由版型，通常越自由，就越考驗著設計師的功力就是了。