Linux 下 Eclipse 的 Java 原始碼編碼設定

由於 Eclipse 的 Java 原始碼預設採用 OS 的編碼, 這在中文 Windows 上是 big-5, 但是在 Linux 上卻是 UTF-8, 所以如果在 Linux 上匯入一個原本是在 Windows 上開發的專案, 就可能會遇到 Java 原始碼中的中文顯示亂碼的情況, 這時可以在 Linux 的 Eclipse 上選取『Window/Preferences』開啟 Preferences 交談窗, 接著切換到『General/Appearance/Content Types』後, 在右側點開『Text/Java Source File』, 並在下方的『Default encoding』填入『BIG5』即可, 詳細畫面如下圖：

超簡短的行動裝置瀏覽器 JavaScript 偵測技巧

剛剛看到 stackoverflow 上一篇超讚的回覆, 使用以下的技巧偵測是否行動裝置的瀏覽器：

if(typeof window.orientation !== 'undefined'){...}

由於一般來說, PC 上的瀏覽器都沒有提供 window.orientation 屬性, 因此可以用來快速判別是否為行動裝置的瀏覽器。

當然, 隨著往後 PC 與平版、手機界線的混淆, 也許這個方法會失效, 不過目前應該還堪用, 先學起來！

使用 JavaScript 縮放網頁內容

同事開出了一個需求, 希望專為手機製作的網頁若是在桌機上的瀏覽器觀看時, 能夠自動縮小尺寸,不然以現在手機至少 800X400 點數以上的設計, 在手機上看起來大小適中的圖片, 到了桌機上的瀏覽器都會過大。

為了解決這個問題, 第一步是先能判別是手機還是桌機, 這在 detect mobile browser 網站已經提供有現成的 JavaScript 碼可用。接著就是希望能夠縮放網頁內容, 查了各種解法, 看起來要想透過 JavaScript 直接控制瀏覽器的縮放比例是不可行的, 只能透過 CSS 直接縮放網頁內容, 根據 stackoverflow 上這篇問答, 根據瀏覽器的種類, 可分別處理：

• Firefox 提供有 MozTransform 屬性可以用 scale(1.0) 的格式設定元素的縮放比例, 1,0 就是原尺寸不縮放。
• Chrome 或是 IE 則可用 zoom 屬性, 以 100% 的格式設定縮放比例。

只要將上述屬性套用在body 元素的 CSS 上, 就可以將整個網頁內容縮放成指定的比例。

不過對於 Firefox, 縮放後網頁的上下左右都會留下大塊的空白區域, 使得縮放後的內容不識顯示在瀏覽器的中央上方處, 要解決這個問題, 必須再使用 MozTransformOrigin 屬性設定為 "center top" 才行。

利用上述方式寫成的 JavaScript 碼如下：

window.onload = function(){
    var a = navigator.userAgent||navigator.vendor||window.opera;
    var level = 60;
    if (!(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))) {
     if (navigator.userAgent.indexOf('Firefox') != -1 && parseFloat(navigator.userAgent.substring(navigator.userAgent.indexOf('Firefox') + 8)) >= 3.6){//Firefox)
         document.body.style.MozTransform = "scale(" + level/100 + ")";
         document.body.style.MozTransformOrigin = "center top";
     }
     else {
      document.body.style.zoom = "" + level + "%";
      document.body.style.msTransformOrigin = "center top";
     }
 }   
};

這個解法在 IE 上也有和 Firefox 類似的問題, 就是網頁內容會偏向瀏覽器視窗的左邊, 而不是在中間上方, 目前還沒有找到解決的方法, 很可惜。

CSS 忍者的預載圖檔好威

在 Stackoverflow 上看到 CSS 忍者的這個預載圖檔技巧, 真的是太漂亮了, 只需要 CSS, 不用加上額外隱藏的 div 標籤, 也不需要 JavaScipt,就是利用 CSS generated contnet 在 body 之後產生一些不會顯示的內容, 利用這個功能載入所需的圖檔：

    body:after {
        content: url(img01.jpg) url(img02.jpg) url(img03.jpg);
        display: none;
    }

Even better image preloading with CSS2 | The CSS Ninja - All things CSS, JavaScript & HTML

分享至 Facebook 時自訂網頁的標題、摘要、以及圖片

因為工作上的需要, 趕緊上網找了一下, 在以下這個網頁找到了答案：

Facebook 設定分享網頁的標題 + 內文 + 圖片 @ 小雕雕的家 :: 痞客邦 PIXNET ::

只要填入以下的 metatag, 就可以自訂許多分享的項目, 而不是由 facebook 的分享程式自己抓了：

另外, 因為分享時 Facebook 會使用 scraper 剪貼程式到要分享的網頁上搜尋摘要資訊, 並暫存下來, 如果您如上修改之後, 在分享時看到的仍是舊的摘要, 請記得到 Facebook Developer Tools 下的 debug 頁面, 輸入要分享的網址, 就可以清除 Facebook 中暫存的資料了。

StateCounter 網路分析服務的智慧型手機市佔

Source: StatCounter Global Stats - Mobile OS Market Share

JavaScript 的 var

今天有同事問我 JavaScript 變數有加 var 宣告跟沒有有什麼差？我聽了也是一愣, 後來去查了文件才發現, 原來 var 不 var 可有差了, 主要大概可以歸納為這兩點：

1. JavaScript 是以 function 來建立新的變數 scope, 只要是在 function 之外宣告的變數都是全域變數, 也就是全域物件的屬性, 而只有全域變數可以不用加 var 宣告, 就可以直接使用。
2. 有加 var 宣告的全域變數是全域物件 (在瀏覽器中就是 window) 的 non-configurable 屬性, 比如說你就無法使用 delete 刪除以 var 宣告的全域變數。

舉例來說, 以這個 html 檔為例：

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
  <div id="da"></div>
  <div id="db"></div>
  <div id="dc"></div>
  <div id="dd"></div>
<script>
i = 10;
var j = 20; 
this.i = 100;
this.j = 200;

$("#da").text(i);
$("#db").text(j);
$("#dc").text(this.i);
$("#dd").text(window.j);
</script>
 
</body>
</html>

實際輸出的結果就是：

100
200
100
200

你可以看到不論是用 i 或是 this.i 都是同一份資料, 這是因為 this 指向全域物件, 所以也可以用 window.j 以存取 j, 因為在瀏覽器中, window 就是全域物件。

如果你在剛剛的 JavaScript 程式中插入兩航程式, 嘗試用 delete 刪除 i 與 j：

i = 10;
var j = 20; 
this.i = 100;
this.j = 200;

delete this.i;
delete this.j;

$("#da").text(i);
$("#db").text(j);
$("#dc").text(this.i);
$("#dd").text(window.j);

在瀏覽器的 JavaScript console 中就會看到以下的錯誤訊息：

Uncaught ReferenceError: i is not defined

這是因為 i 並沒有使用 var 宣告, 是全域物件的 configurable 屬性, 因此可以用 delete 刪除, 所以當執行到底下存取變數 i 的值時, i 變數就已經不存在了。

事情還沒完, 如果你是使用 node.js, 那麼又複雜了一點, 使用 var 宣告的全域變數實際上不是真的全域, 而只能在模組 (可簡單看成是檔案) 內存取, 出了模組, 就無法存取了。以底下的程式為例：

i = 10;
var j =20;

console.log(global.i);
console.log(global.j);
console.log(i);
console.log(j);

執行結果如下：

10
undefined
10
20

透過 node.js 的全域物件 global 可存取到沒有使用 var 宣告的 i 變數, 這是真正全域的變數。可是透過 global 物件嘗試存取 j 變數時, 就會看到 global.j 是未定義的屬性, 這表示 j 並不是真正全域的變數。

如果另外寫個程式把剛剛的測試程式當成模組載入：

var tv = require("./testvar.js");

console.log("global==============");
console.log(i);
//console.log(j);

輸出結果如下：

10
undefined
10
20
global==============
10

可以看到在程式中可存取到在另一個檔案中宣告的變數 i, 的確是全域變數無誤。若是把程式中最後一行的註解拿掉, 嘗試存取 j, 就會看到：

10

D:\mee\My Box Files\practice\jswebapp\testvar2.js:5
console.log(j);
^
ReferenceError: j is not defined
at Object. (D:\mee\My Box Files\practice\jswebapp\testvar2.js:5:13)

可以看到 j 並未定義, 這是因為 j 是用 var 在其他檔案中宣告的變數, 不是全域變數, 所以無法存取。