2012年10月30日

正規表示式線上自動產生器(以Javascript舉例)

相信正規表示式對很多學習 js 的人而言是頭痛的一塊,而我也不例外。各種參數的定義已經夠難記了,還有各種符號及括號要分辨、還有需要使用反斜線的字元要注意,就算這次記住了,等下次要用時大概也差不多忘了。

直到最近發現國外有高手寫了個正規表示式的「線上自動產生器」,總算讓我不再苦惱,趕快把這個工具的使用方法記錄起來,方便以後查詢。

以下提供兩個操作此工具來產生正規表示式的實例,相信對上手有很大的幫助。使用這個工具另外的好處是,自己操作的範例看多了之後,一些常用的參數自然而然就能記起來了。

2012年10月24日

Blogger 最新回應+留言者頭像(更新版)__留言內容收合


(Pic from: softicons.com,freepik.com,all-free-download.com)
一方面「原版本」 發現了一些 bug,因此需要出更新版;一方面也是讀了「Javascript 設計模式」 之後,剛好來練習新的 Javascript 撰寫模式,例如只用一個全域變數、規律的空格與縮排、集中 var,以及後面章節會提到的 HTML、CSS、Javascript 分離。由於撰寫模式變動很多,本篇的程式碼可說是近乎重寫。

2012.11.26 補充

如果需要顯示最新留言的文章標題,請參考另一個版本「
Blogger 最新回應+留言者頭像+文章標題


一、修正 bug 及更新要點

1. 刪除內容之留言:前陣子發現在原版本之下,若 "留言內容" 被「留言者」或「站長」刪除,但該則留言尚未被站長永久刪除時,最新回應的某個變數讀不到資料會導致當掉;本更新版修正了此 bug。

2. 含超連結之留言:在原版本之下若留言內有超連結,且留言摘要結束處截斷了超連結語法,會造成最新回應的該則留言與下則留言顯示格式錯誤;更新版修正了此 bug,且顯示留言全文時,超連結仍可正常作用。

3. 處理無留言的狀態:若部落格一篇留言都沒有時,原版本會顯示 "讀取中" 的動畫圖案,且永遠不會停止;更新版修正了此 bug,並加上 "目前尚無留言" 字樣。

4. 新增留言全文開合功能:按下留言內容、或各處的提示開合圖案,均可方便迅速的開合留言內容。可看右邊側邊欄的「最新回應」小工具測試效果。

5. 改變留言頭像圖案的真實尺寸:前陣子使用 Google 的「PageSpeed」測試網頁讀取速度時發現某些留言者的頭像圖案檔案很大,雖然原版本有將頭像 img 圖案的 width 參數改小,但實際上網頁還是會去讀取原本尺寸的圖案,因此會拖慢載入速度;更新版可自動將頭像圖案的 "真實尺寸" 改小

2012年10月19日

Javascript 設計模式(筆記)__(1) 精要

「Javascript 設計模式」不是一本初學者的書,作者自言這是給 "專業程式開發者" 看的,而我這業餘愛好者並不屬於此領域。但這本書對於 Javascript 寫了一段時間的人還是有很大的幫助,可以讓程式「寫得更有效率、執行得更有效率、dubug 的時間縮短、日後維護更方便」,以上這幾點對我而言有深刻的體驗。

只是礙於實力不夠,書中大概有一半的章節看不懂,也可以說還沒寫到那麼複雜的程度,因此筆記只能節錄自己可理解、以及好歸納的部分,適合已經學習 Javascript 一段時間的讀者參考,而高手則建議請直接買書來看吧,因為這是一本高手推薦的參考書籍!

本系列內容摘要採用正常字體,而自己的筆記、註釋使用斜體。

2012年10月17日

Blogger「留言欄訊息」自訂版面及樣式的方法__兼談留言字詞驗證


(Pic from: designdownloader.com,solarxsarasota.com)
撰寫 Blogger 的「留言欄訊息」(就是留言欄上方的張貼意見)時,長期以來一直有幾個困擾:

1. 只有少數幾個 HTML 標籤可使用(例如 <a>、<b>、<i>)。
2. <a> 標籤無法使用 target="_blank" 屬性。
3. 訪客不太會注意這些內容。

關於第 3 點,如果字很少一點的話或許訪客會瞄一眼;只要字一多、看到密密麻麻的一片,相信沒幾個人會去細讀。

2012年10月12日

Chrome 開發人員工具__調整部落格版面實作


(Pic from: developers.google.com)
主流瀏覽器的體積大、吃記憶體兇、功能包山包海,如果只拿來上網是有點可惜。既然已經佔用系統那麼多資源,是該讓他多做點事,以 Chrome 為例,可「收信」、「記事待辦」、或「其他功能」。如果純上網的話,其實可用輕量、不佔資源、速度快的瀏覽器,如「K-Meleon」即可。

本篇介紹的 Chrome 附加功能 "開發人員工具",主要是用來協助 debug、分析網頁程式碼。可惜這工具能 google 到的教學網頁很少,畢竟是屬於進階的功能,想瞭解大略的功能操作可參考「這個網頁」。其實想真正學會這個工具的完整功能,光靠參考網頁是不夠的,說不定得等有人出書;而本文的內容為,藉由調整部落格版面配置的操作過程,來一窺這個強大工具的冰山一角;另外閱讀本文內容之前,最好先具備一點 HTMLCSS 概念。

2012年10月5日

[教學]讓網頁使用各種特殊文字區塊__(2) 實作範例「公告+修訂區塊」(CSS 技巧)


(Pic from: psdgraphics.com)
寫完「第一篇」後,覺得內容稍微硬了一些,如有個實作的例子相佐會比較容易吸收,奈何文長已經無法再塞入舉例內容,因此就把實例留到本篇了。

一般文章常見的特殊文字區塊有公告區、修訂(增補、註釋)區、參考資料區等等,而本站的 "參考資料區塊"(可參考「這篇文章」的文末)、"系列文區塊"(可參考「這篇文章」的文末),其作法與"程式碼區塊"雷同,可參考「第一篇」的 CSS 設定以及那塊程式碼區域的樣式即可;以下要詳述的是本站 "公告區塊" 與 "修訂區塊" 的作法。