許願牆 – javaee 項目實戰（2）

一、分類選擇心情圖案

    下面将介紹如何實作分類選擇心情圖案的具體步驟：

    （1）在頁面的合适位置添加用于顯示“愛之語”的類别心情圖案的<div> 标簽，并且應用 jstl 的标簽 <c:forEach> 标簽循環輸出多張心情圖案，具體代碼實作如下：

      <c:forEach>标簽支援兩種不同樣式的疊代，一種是數字索引的疊代（與傳統的 for 循環類似）；另外一種是集合上的疊代（類似于 iterator 或者 foreach 循環）。在知道具體需要循環的次數時，可以應用第一種，其文法格式如下：

     在上面的文法中,begin 和 end 屬性是必須使用的,分别用于指定疊代索引的初始值和終止值,都是正整數.其他屬性都是可選擇的。如果指定了 var 屬性，那麼将會建立一個變量，将每一次疊代的索引值指派給該變量，該變量的作用域為标簽體内。

    <c:foreach> 的另外一種集合疊代形式如下：

    items 指定了要進行疊代的集合，其他的變量的與上文提到的類似，另外補充一下，屬性 begin 的預設值是0，step 的預設值是1.

    另外在 jstl 還有一個标簽具有疊代作用的，那就是<c:forTokens>，各個屬性的使用與<c:forEach>一樣，不同的是，在<c:fortokens>還有一個分界符屬性“delims”，用來指定進行分割的點。下面給出這兩種标簽的使用的Demo：

輸出如下:

    (2)接着繼續談如何完成分類選擇心情圖案，在步驟（1）中建立<div>标簽下再添加幾個<div>标簽，分别用來顯示“新品秀”，“夢幻水晶”和“小破孩”，并使用<c:foreach>标簽循環輸出各張圖檔，另外注意此處 style=”display:none”.這裡隻給出“新品秀”的設計，其它的類似

        （3）在頁面的恰當的位置添加“愛之語”、“新品秀”等超連結，并在 onclick 事件中通過 style 屬性的子屬性控制要顯示的心情圖案。關鍵代碼的設計如下：

二、限制字條内容的長度。

    在使用者填寫許願條時，要限制使用者輸入文本的長度（英文占一個字元，漢子占兩個字元）。在這裡通過一個javascript 函數來實作字元輸出的限制。注意不能簡單通過String對象length屬性來控制，因為length屬性在處理漢子時，也預設為占一個字元。

    效果圖如下：

    具體步驟如下：

    （1）在網頁添加恰當位置添加最多允許文本框，已用位元組文本框，剩餘位元組文本框，注意這三個文本框都不許使用者編輯。代碼如下：

    （2）編寫javascript 函數 countStrByte（），用于判斷使用者輸入的字元數是否大于最大允許輸入的字元數并計算出已用位元組數和剩餘位元組數。

附：String 的charCodeAt（）方法用于傳回字元串中第 n 個字元的Unicode編碼，如果傳回值小于256，則表示是ANSI，占一個位元組，否則占兩個位元組。

    （3）修改字條内容文本域的代碼，在onKeyDown 和 onKeyUp 事件中調用countStrByte，代碼如下：

三、自定義 JSP 随機數标簽

     （1）自定義 JSP 标簽，一般來說，需要引入以下兩個包：

    import javax.servlet.jsp.*;

    import javax.servlet.jsp.tagext.*;

     （2）定義一個标簽處理類（RandomSupportTag）

    （3）建立 tld 檔案

    TLD 是 Tag Library Definition 的縮寫，即标簽庫定義，檔案的字尾是 tld，每個 TLD 檔案對應一個标簽庫，一個标簽庫中可包含多個标簽，TLD 檔案也稱為标簽庫定義檔案。 

    标簽庫定義檔案的根元素是 taglib，它可以包含多個 tag 子元素，每個 tag 子元素都定義一個标簽。通常我們可以到 Web 容器下複制一個标簽庫定義檔案，并在此基礎上進行修改即可。例如 Tomcat，在 webapps\examples\WEB-INF\jsp2 路徑下包含了一個 jsp2-example-taglib.tld 檔案，這就是示範用的标簽庫定義檔案。

    将該檔案複制到 Web 應用的 WEB-INF/ 路徑，或 WEB-INF 的任意子路徑下，并對該檔案進行簡單修改，修改後的 creatRandom.tld 檔案代碼如下：

    （3）在 web.xml 部署 JSP 标簽