Vixual

「iframe (內置框架)」是用來在網頁中的特定位置嵌入另一個網頁。目前 Facebook、Google+、Twitter...等用來在網頁上顯示社群內容的社群元件，幾乎都是以 iframe 實作出來的。

原本框架是一種很好的應用，但如果是自己辛苦製作的網頁被別人的網站以 iframe 嵌入，因而出現在別人的網站裡，成為別人網站的一部份!!這種感覺就像是自己的心血被別人整碗捧走一樣!!

導回自已網站的方法

方法 1

於網頁的原始碼加入以下 Script:

<script type="text/javascript">
if( top.location != document.location ){
	top.location.href = document.location.href;
}
</script>

以上的 Script 會檢查瀏覽器最上層視窗的網址是否與目前網頁的網址一致，如果不一致，則把最上層視窗的網址改為目前網頁的網址，就醬。

方法 2 (反制辦法)

於網頁的原始碼加入以下 Script:

<script type="text/javascript">
if( top.location != document.location ){
	document.write("<h1 style='color:#FF0000'>未經授權嵌入別人的網頁是可恥的行為!!</h1>(<a href='"+document.location+"' target='_blank'>原站網址</a>)");
}
</script>

以上的 Script 會檢查瀏覽器最上層視窗的網址是否與目前網頁的網址一致，如果不一致，就顯示:

未經授權嵌入別人的網頁是可恥的行為!!
(原站網址)

我比較不喜歡與人家互嗆，所以我通常是用「方法 1」啦!

在網頁界已經有很多的「下拉選單」程式了，不過似乎都搞得太過複雜或太華麗了。

其實下拉選單的原理很簡單，一開始只是先讓「子選單」隱藏，當滑鼠移至「主選單」時再讓子選單顯示。因此，只要能控制網頁元件的 display 樣式屬性就已經成功一半了。

因為本人喜歡重新發明輪子，所以也寫了一個簡易的網頁下拉選單的程式，可以做為初學者入門的參考。

在範例的原始碼中，我儘量讓程式碼看起來淺顯易懂，並且只用 JavaScript，不使用 jQuery 或其它 Framework。我也儘量多寫一些註解，希望 JavaScript 的初學者能看得懂。

Read more

如果想學 jQuery 的話，可以從下列的教學資源開始，讀者應具有 HTML、JavaScript、CSS 的基礎。

網站

上官林傑 - ericsk (2007)

1. jQuery 學習心得筆記 (1) – 前言
2. jQuery 學習心得筆記 (2) – 怎麼使用 jQuery 來寫 JavaScript
3. jQuery 學習心得筆記 (3) – jQuery 的事件(Event)處理
4. jQuery 學習心得筆記 (4) – Ajax (上)
5. jQuery 學習心得筆記 (5) – Ajax (下)
6. jQuery 學習筆記 (6) - 操作 DOM 物件
7. jQuery 學習筆記 (7) - 擴充 jQuery

以上這幾篇是我的 jQuery 啟蒙文章。
Read more

2017/03/21 更新:

可能是之前為了要相容舊版 IE (v9.0 之前) 的緣故，所以沒發現到 JavaScript 還有 querySelector() 與 querySelectorAll() 這兩個函式，它們的功能分別為:

• querySelector(): 回傳第一個符合選擇器規則的元素
• querySelectorAll(): 回傳全部符合選擇器規則的元素

從範例中可以得知，這兩個函式遵循 CSS 語法，可以實現複雜的 CSS 選擇器的層級、屬性、分組、串聯、偽元素...等判斷，功能已不是 getElementById()、getElementsByClassName()、getElementsByTagName() 可以比擬!

當然複雜的 CSS 層級可改由 querySelector() 或 querySelectorAll() 來取得元素，不過若是目標明確，考量效率我還是用 getElementById() 來處理可能會比較好。

自訂函式 $$() 改寫如下:

function $$(element, isFirst){
    if(isFirst === 1){
        // 強制回傳第一筆符合的元素
        return(document.querySelector(element));
    }
    else if(/^\#[\w\-]+/.test(element)){
        // 以 $$("#id") 回傳元素
        return(document.getElementById(element.slice(1)));
    }
    else{
        // 回傳元素陣列
        return(document.querySelectorAll(element));
    }
}

($$() 增加了第二個參數: isFirst，若設為 1 則強制回傳第一筆符合 CSS 選擇器的元素，而非元素陣列)

之前的內容:

自訂函式

JQuery 強大、方便的選擇器 (Selector) 是 jQuery 不可或缺的功能之一。不過如果我們不想載入 jQuery 而只想使用類似 jQuery 選擇器的功能，那可以用自訂函式的方式做到:

function $$(element){
    switch(element.charAt(0)){
    case("#"):
        // 以 $$("#id") 回傳元素
        return(document.getElementById(element.slice(1)));
    case("."):
        // 以 $$(".class") 回傳元素陣列，IE 要 v9.0 之後才支援
        return(document.getElementsByClassName(element.slice(1)));
    default:
        // 以 $$("tag") 回傳元素陣列
        return(document.getElementsByTagName(element));
    }
}

或是單純一點，僅傳回指定 id 的元素就好:

function $$(element){
    return(document.getElementById(element));
}

我把這個自訂的函式命名為 $$()，用以與 jQuery 的工廠函式 $() 做區隔。

但是要注意，以上自訂函式回傳的都是 DOM 元素，與 jQuery 在其它操作上並不相同。

換掉 jQuery 的工廠函式

如有需要也可以用 jQuery.noConflict() 換掉 jQuery 的工廠函式 $()，ex:

var jq = jQuery.noConflict();

這樣就能改用 jq() 來做為 jQuery 操作，而原本的 $() 只要再次重新定義為自訂函式即可使用，不會與 jQuery 衝突。

幫大家試過用 € 與 ¥ 做為自訂函式的名稱，不過都失敗，大家可以不用試了!

參考網頁

• [jQuery]中文的 jQuery 教學資源 | Vixual
• [jQuery]《網頁設計-愛上jQuery》讀書心得及評論 | Vixual

使用 JavaScrip 的程式庫來開發網頁的程式可以加快開發的速度，其中 jQuery 也是頗受歡迎的一員。

不過目前可以買得到的 jQuery 中文書籍實在寥寥可數，以下是最近閱讀《網頁設計-愛上jQuery》這本書的心得及評論 (作者是羅子洋)。 Read more

原本只是要寫一個貸款的計算程式，結果看到了其它的計算公式，就順便寫一寫。版權沒有，想要就自行檢視網頁原始碼，拿去用。

本息平均攤還試算

本息平均攤還法是將本息一起平均在貸款期間償還，每期償還的本利和都一樣，比較方便理財，為最常用之貸款償還辦法。

Read more

國外網站

• gotAPI.com
• MSDN - HTML and DHTML Reference
• WebFX
• Client-Side JavaScript 1.3
• Cross-Browser
• JavaScript Kit

中文網站

• Blielovers
• IT 學習者 - JS 實例寶庫 JavaScript 語言參考手冊
• 藍色理想 - 網頁製作
• 網站建置百寶箱
• 網頁教學網
• tom 科技前沿

其它

• Pingdom Tools測試及分析網站載入的速度

正規表示式 (Regular Expression, 簡寫 regex、regexp 或 RE) 是用於字串比對的小型語言，又稱正則表達式、正規表示法、規則運算式、常規表示法 (Wiki)。

很多程式語言和軟體都會附加「正規表示式」這項功能。在字串的處理上，針對大量、重複、有固定邏輯的文字，正規表示式是非常強而有力的工具! 即便不是程式設計師，在可以在運用到正規表示式的場合 (例如: 文字編輯器)，能幫你節省許多文字處理的時間。但是不同的軟體所附加的正規表示式可能略有差異，這部份就要稍加留意。

不過在初學者的眼中，正規表示式卻又像是天書一樣的難以理解。以下文章針對正規表示式的相關語法做解說，你可到線上測試工具，以實際的例子去做測試。

Read more

我看過太多人都把四捨五入的問題看成是「字串」來處理，實際上，如果把四捨五入做為「數學」來解的話，程式大概只要幾行即可解決。

以四捨五入取整數的例子來講，其原理就是: 任何數值 +0.5 再取整數。

但要注意的是，當四捨五入遇到「負數」時就會變成「五捨六入」，這是因為中間數要往數值大的那邊進位的緣故。所以加上了負數的處理，程式至少又多了一行:
Read more

在編輯網頁時，如果要讓某個超連結 (Link) 開啟在新的瀏覽器視窗，我們可以在超連結加上「href="_blank"」屬性，但如果超連結很多，要一個一個加上去畢竟麻煩!!

以下的程式碼可以幫你把網頁內所有針對「外部」的超連結自動設為在新視窗開啟。

一般網頁

1. 將下列程式碼加到網頁的 <head> 區段:

   <script type="text/javascript">
   function parseLink(){
     var tagA = document.getElementsByTagName( "a" );
     re = new RegExp( "^(http://" + document.domain + ")|(javascript:)", "i" );
     for( var i=0; i < tagA.length; i++ ){
       if( !tagA[i].href.match( re ) ){ tagA[i].target = "_blank"; }
     }
   }
   </script>

2. 在 <body> 標籤內的 onload 事件加入:

   parseLink();

   Ex:

   <body onload="parseLink();">

WordPress 外掛程式

如果你的網站是用 WordPress 架設，可直接在控製台搜尋並安裝「Open external links in a new window」這個外掛程式 (版本: 1.3.1 作者: Kristian Risager Larsen)，這樣就不用添加任何程式碼了。

另外需注意，如果本外掛程式與其它像 LightBox、FancyBox...之類的圖片燈箱特效的程式一起使用，有可能會造成同時顯示燈箱特效，又同時將圖片開啟於新視窗!!