程式旅人 - 學習紀事 -: javascript

Two major types of events are added by Microsoft, and in some cases can only be used in Internet Explorer. Others have been implemented as de-facto standards by other browsers.

Clipboard events

Data binding events

Microsoft在自家的ie瀏覽器上，多自訂了以上兩種類型的事件，其中oncopy, onpaste這兩個，上週發現Firefox 3.6, Chrome 6都也可以支援。

document.getElementById(ElementID).addEventListener(eventType, fn);

eventType為'copy' 或是'paste', fn為function.

雖然不是W3C的規格，但這個監視剪貼簿的事件真的不錯用，省去監視keyup/keypress/keydown或是按滑鼠右鍵複製貼上這些實作。

2009年12月2日星期三

[筆記][jQuery] jquery.ajax在 ie6上的問題

引述自該死的JQUERY AJAX函數 - AJAX - web - JavaEye論壇:


"1. IE6在本地非服務器環境下不能提供XML文件的查看功能,所以在非服務器環境下不能將
dataType 設置為xml , 但是可以設置成 json和text html之類的格式..

2. 在服務器環境下使用Jquery獲取XML時,不僅僅是XML,還有JSON,如果格式有問題,將不返回結果和任何錯誤提示.. 如果數據正確, 但是採用XPath來查找元素時 XPATH路徑寫
錯了,不會獲取任何結果,也不會報任何錯誤提示..."

今天遇到 jquery.ajax(...)裡面參數dataType用xml時，在firefox 3.5下正常走success callback，可是ie6卻跑error callback，然後上google查到了前人的經驗… 必要的話，或許還是得架個local server來測試。

2009年12月1日星期二

jQuery Tip : 取得select tag中option

jQuery Tip - Getting Select List Values: jQuery, Tutorial

取得<select id="s1">中選取的<option>方法：

$("select#s1").val();
$("select#s1 :selected").text();

2009年7月14日星期二

[Greasemonkey Script] 自動載入Google圖片搜尋原始圖片

升上了Firefox 3.5後，發現原本用的 Google Image Ripper 失效了，後來找到了這一個 Google Image search Direct results 也有同樣效果的script，而且還多了Checkbox可以切換原始圖，更加方便。

另外，在搭配AutoPager使用下，也可以運作的很正常。 :)

連結: Google Image search Direct results - by Futuros

2009年6月26日星期五

[Bookmarklet] 重新讀取所有失敗的圖片 Reload Images

說明:

在Firefox 2還沒有重新讀取未載入完成的圖片時，我就常常用這個Bookmarklet了，是參考網路上加自己修改而成的。

不重新重新載入頁面，代之的是僅載入失敗的圖片。

下載(拉到書籤工具列):

Reload Images

2009年6月6日星期六

[Bookmarklet] 增加易讀性

網路上有一個"+易讀性"的Bookmarklet，我改了一下我喜歡的背景色。

+易讀性

2009年5月19日星期二

[Bookmarklet] Print Friendly - 還你一個乾淨的可列印網頁

說明:

一個使用強大的YUI(Yahoo! UI)寫的bookmarklet，使用之後可自訂將不要的元素刪掉，然後可選擇另存成PDF檔(不支援中文)，或是直接列印到印表機(可直接印到PDFCreator取代前面不支援中文的缺點)。

心得:

似乎不是所有網頁都通用，可能已經對網頁內容做了自動判斷處理，有些內容會自動不見，這可就糟了。期待它未來會越改越好吧。

下載:

http://www.printfriendly.com/

2009年5月15日星期五

[Bookmarklet] 瀏覽圖片小工具 PopupX

最後更新時間:

2010.02.25 本blog的bookmarklet不再更新，以userscript版本為主

簡介說明:

使用XPath重新撰寫的Bookmarklet，一樣是會在圖片附近顯示出連結的圖片。
另外為了支援Firefox的擴充套件Autopager，增加了一個小按鈕在左上角，點一下可以把沒載入圖片的也載入。

支援瀏覽器:

Firefox 3, Google Chrome
IE不支援(因為它的ActiveXObject很難用)

目前支援頁面:

Pixnet相簿
無名首頁及個人相簿
無名blog(留言大頭照及誰來我家)
PCHome Photo
Picasaweb
Yam Album
Gamer GNN
NowNews
Flickr

使用方法:

參考此篇

下載:(拉到書籤工具列)

PopupX

For Greasemonkey Version:

http://userscripts.org/scripts/show/49840

2009年5月12日星期二

SyntaxHighlighter 2.0

之前提過的: 讓SyntaxHighlighter幫你網誌內的程式碼上色，今年有新版本2.0，好不容易花了一些時間，把相關的元件都更新了。

雖然說顯示介面上沒有什麼大轉變，但是骨子裡可是大不同了…

老實說，使用的語法變化不少，基本上底層的js檔全部都要換成新的，而原本使用:

<pre name=code class=scriptname>1.5的使用方法</pre>

換成：

<pre class='brush:script_name;'>2.0的使用方法</pre>

改變算很大，如果是1.5升級上2.0的使用者，要使用shLegacy.js這個檔來相容舊的寫法，不然要回頭去改之前的文章內容，那會改到傻眼吧!!!

2009年3月29日星期日

Greasemonkey的一些陷阱

查unsafewindow時剛好讀到這篇:

Avoid Common Pitfalls in Greasemonkey

裡面有提到不少看法，有興趣可以讀一下。

另外順便補個下載: Greasemonkey Hacks (OReilly Ebook) CHM檔

[Greasemonkey] 使用UnsafeWindow呼叫原頁面函數或變動的方法

昨天寫了一個Javascript Script，在jshell測都沒問題，放到Greasemonkey卻跑不正常，後來才發現，因為我有用到原頁面內的變數，而Greasemonkey執行的當下是獨立分開於原頁面的script的，所以跑到一半就失敗了。

google了一下，查到UnsafeWindow這個東西。

原本window下面的變數，透過UnsafeWindow就可以讀取到了。

範例參考:

unsafeWindow.SomeVarInPage = "Testing";
unsafeWindow.SomeFunctionInPage("Test");

2009年3月25日星期三

Javascript 如何將Date()日期格式化輸出

// 日期類型格式化方法的定義
Date.prototype.Format = function(fmt) 
{ //author: meizz 
var o = { 
    "M+" : this.getMonth()+1,                 //月份 
    "d+" : this.getDate(),                    //日 
    "h+" : this.getHours(),                   //小時 
    "m+" : this.getMinutes(),                 //分 
    "s+" : this.getSeconds(),                 //秒 
    "q+" : Math.floor((this.getMonth()+3)/3), //季度 
    "S" : this.getMilliseconds()             //毫秒 
}; 
if(/(y+)/.test(fmt)) 
    fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length)); 
for(var k in o) 
    if(new RegExp("("+ k +")").test(fmt)) 
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length))); 
return fmt; 
}

來源參考: CSDN討論串

2009年3月13日星期五

Bookmarklets的簡略說明與使用方法

什麼是Bookmarklets：

簡單的說，就是直接點書籤來執行一堆javascript，以執行一些方便的功能。通常只對該頁面有用(或是即時改變頁面內容)，也就是說點了其他連結或是上一頁的話，該bookmarklets會失效，要再啟用就得重新執行。

可以參考: Wikipedia - Bookmarklet 或 Bookmarklets.com的About Bookmarklets

使用方法：

先開啟要瀏覽的頁面，再點已經加到書籤的Bookmarklets，即可執行該功能。

下面是加入Bookmarklets的方法!

IE (用ie6示範):

在Bookmarklets連結上按滑鼠右鍵，點選"加到我的最愛"。
跳出對話方塊，按"是"。(因為是javascript:開頭，就會出現此訊息，可略過。謎之音:其實ie本身最不安全…)
跳出"新增我的最愛"，點"確定"。
這時就會在我的最愛裡面，看到剛剛加入的Bookmarklets了。

Firefox:

在Bookmarklets連結上面按滑鼠右鍵，點選"此連結加入書籤"。
然後出現加入書籤的方塊，按確定。
在書籤工具列就會看到該Bookmarlets了。

例如: PhotoViewer 就是小弟撰寫的一個看網路相簿的小Bookmarklets工具，可以參考看看。

2009年3月11日星期三

[Bookmarklets] 關於游標的client/page/screen坐標

以下是我的個人理解：

這邊指的都是游標目前所在位置。

clientY: 相對於可視區域最上方
pageY: 相對於該頁面最上方
screenY: 相對於螢幕最上方

另外，pageY = clientY + window.pageYOffset，而pageYOffset這個屬性不是每個瀏覽器都有(ie沒有)。

最後，自己寫了一個Bookmarklets: CursorPos，將body框線，並顯示滑鼠游標位置的坐標。

2009-03-11_164313

[Javascript] 取得視窗的顯示內容的尺寸

最近用javascript取視窗的大小時，遇到不同瀏覽器無法偵測的問題。後來找到下段這段程式碼，可以分辨出視窗大小。

<script type="text/javascript">
<!--

 var viewportwidth;
 var viewportheight;
 
 // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
 
 if (typeof window.innerWidth != 'undefined')
 {
      viewportwidth = window.innerWidth,
      viewportheight = window.innerHeight
 }
 
// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

 else if (typeof document.documentElement != 'undefined'
     && typeof document.documentElement.clientWidth !=
     'undefined' && document.documentElement.clientWidth != 0)
 {
       viewportwidth = document.documentElement.clientWidth,
       viewportheight = document.documentElement.clientHeight
 }
 
 // older versions of IE
 
 else
 {
       viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
       viewportheight = document.getElementsByTagName('body')[0].clientHeight
 }
document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');
//-->
</script>

來源: Get viewport size (width and height) with javascript

2009年3月10日星期二

[Bookmarklets] PhotoViewer 快速瀏覽網路相簿的工具

說明:

將滑鼠游標移至圖片上，會自動秀出將該圖片連結的原始的圖片。

支援相簿或網站:

PCHome、無名小站、Pixnet、巴哈姆特的GNN、PicasaWeb

可使用瀏覽器(目前僅測試windows平台):

IE 6, 7, 8
Firefox 3, 3.1 beta 3

使用方法:

開啟要支援的網路相簿頁面後，點這個Bookmarklet，啟可開啟快速瀏覽功能，如果沒效果可以再重按一次。每換一頁要即用這個效果，要重點一次。
搭配Firefox的AutoPager，等所有頁面都載進來後使用，效果更好，可一次看所有頁面的照片。
Bookmarklet: (加到最愛或或拉到書籤列，Bookmarklets是什麼可參考此篇使用說明):

PhotoViewer

擷圖:

Firefox 3-

IE7-

Firefox 3.1b3-

IE8-

原本我是使用Greasemonkey的Splash album viewer來看照片，但搭配AutoPager會沒法運作在新的頁面，想說順便分享給其他非Firefox的朋友使用，所以我試寫了一個bookmarklets，讓IE,Firefox可以在免安裝外掛(or Extension)下快速瀏覽網路相簿。

測試了一下，目前Safari跟Chrome還沒法運用，連jQuery掛上去都怪怪的…功力不夠。用Firefox及IE瀏覽器的人可以試試。
當然，如果是Firefox愛用者，直接使用Greasemonkey+Splash album viewer會方便許多。

Changelog:

2009.03.25

新增測試Firefox 3.1b3, IE 8的環境能正常運作。
支援網站加入PicasaWeb 及無名blog的大頭圖(包含個人資料、誰來我家、回應)。

2009.03.23

修改無名相簿的部份，現在支援相簿首頁及相簿列表了。

2009年3月4日星期三

[Blogger] 免手動修改圖片連結，讓lightbox也能正常運作的方法

有用lightbox的人，也許會遇到這個問題。

本文的效果為：當網頁載入而未完畢前，點圖片連結會另開新(分)頁來顯示圖片，而javascript載入完成後，lightbox可以正常運作。

原本我以為是Windows Live Writer的問題，當文章內的圖片上傳到blogger後(picasa的相簿內)後，無法讓有使用lightbox的<a>標籤正常使用lightbox來開啟影像(會變成讀取不到圖片)。

當初我自己測試是，把影像連結內的/s1600-h 或是/s800這段文字給刪除掉，lightbox即可正常運作。

但是每次發表完文章，還要上draft.blogger.com去修改文章原始碼，實在耗時費力！當初靈機一動，何不用jQuery直接把href也改成能正常使用的字串呢?

這個東西去年就想弄了，至少拖了有半年以上，之間有讀到Abin一篇相關的文章: Blogger 和 Picasa 的圖片上傳和外連限制，我才知道原來是Google Picasa的做的小詭計，加個"-h"就可避免讓圖片被外連。原來我之前一直錯怪WLW了。

雖然有想法，但是我拖到剛剛才來試寫這個script，沒想到幾分鐘就完成了…

這邊跟大家分享一下我的作法。

函式原始碼:

//用來避免lightbox無法正常連結圖片
//做法是將s1600-h，改為s1600
function ReplaceImageLink()
{
    lightboxLinks = $('a.lightbox');
    for(i=0; i<lightboxLinks.length; i++)
    {
      if (lightboxLinks[i].href.match(/s1600-h/))
        lightboxLinks[i].href = lightboxLinks[i].href.replace(/s1600-h/g, 's1600');
    }
}

因為我的blogger有掛上jQuery，於是我在document.ready裡面，lightbox函式執行之前，加上了ReplaceImageLink()這個函式，內容就變成下面這樣：

<script type='text/javascript'>
$(function(){

//修改符合a.lightbox的href
ReplaceImageLink();

$('.lightbox').lightBox();
});
</script>

這樣就算完成啦。當lightbox執行之前，圖片中有s1600-h的，都會被改成s1600，然後lightbox就可以正常執行。

另外，也可以改成把/s1600-h給整個去掉，一樣是可以正常運作。

2008年11月14日星期五

讓SyntaxHighlighter幫你網誌內的程式碼上色

寫程式又上網google的人，應該常常看到很多網頁或是blog，都會把code依文法上色，或是設計一些css來表現出程式碼的部份。

也有不少線上高亮度語法的服務，讓你貼上原始碼，選好程式語言，就做好html碼給使用者。或是給一段script，在網頁內直接即時產生出code。

今天介紹的是SyntaxHighlighter是只要將下載回來的script檔，找個空間放好，再修改一下自己網誌的樣本檔，然後每次要發佈程式碼時，加上對應的name跟class即可。

因為我個人希望的要求是:

在撰寫文章時不會太麻煩，可以直接用簡單的<pre>來區分貼上的程式碼，不用每次都要另外找線上服務來轉html。
文章從RSS發佈出去，能看到正常的內容即可。像一些用script即時產生方式就不適合，在rss裡面就看不到程式碼。

剛剛把工具設定好了，這邊分享一下我的經驗。

下載SyntaxHighlighter_1.5.1.rar，然後讀一下Usage。
把下載回來的檔案解壓出來，將裡面Scripts目錄下面的所有檔案，都傳到自己固定的網路空間，這邊我是使用Google Pages。(其實js傳自己會用到的語法就可以。)

將下面這一段，貼到你的網誌樣本檔的header裡面。

<link href='http://nio127.googlepages.com/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script src='http://nio127.googlepages.com/shCore.js' type='text/javascript'/>
<script src='http://nio127.googlepages.com/shBrushCss.js' type='text/javascript'/>
<script src='http://nio127.googlepages.com/shBrushXml.js' type='text/javascript'/>
<script src='http://nio127.googlepages.com/shBrushPython.js' type='text/javascript'/>
<script src='http://nio127.googlepages.com/shBrushCSharp.js' type='text/javascript'/>
<script src='http://nio127.googlepages.com/shBrushJScript.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
dp.SyntaxHighlighter.ClipboardSwf = 'http://nio127.googlepages.com/clipboard.swf';
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
});

這邊除了shCore.js之外，其他就看個人需求來加了。src那個後面改成自己的空間。

到這邊設定就完成了，之後要放程式碼的話，只要使用以下語法放到文章內文: <pre name='code' class='javascript'> [程式碼] </pre> 到時網頁載入後，SyntaxHighlighter就會幫你把程式碼的部份即時轉換了。

這邊有幾點要注意的:

Blogger的使用者，在要加上BloggerMode()，如下:

dp.SyntaxHighlighter.ClipboardSwf = '/flash/clipboard.swf';
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');

我上面有使用到jQuery的語法，所以要加上:

<script src='http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js' type='text/javascript'/>

不同類型的程式語言，就在class裡面來決定要使用何種類型。

Language	Aliases
C++	`cpp`, `c`, `c++`
C#	`c#`, `c-sharp`, `csharp`
CSS	`css`
Delphi	`delphi`, `pascal`
Java	`java`
Java Script	`js`, `jscript`, `javascript`
PHP	`php`
Python	`py`, `python`
Ruby	`rb`, `ruby`, `rails`, `ror`
Sql	`sql`
VB	`vb`, `vb.net`
XML/HTML	`xml`, `html`, `xhtml`, `xslt`

這樣應該就可以輕鬆的在blogger貼程式碼了。

補充一下SyntaxHighlighter的額外用法:

`nogutter`	Will display no gutter.
`nocontrols`	Will display no controls at the top.
`collapse`	Will collapse the block by default.
`firstline[value]`	Will begin line count at `value`. Default value is 1.
`showcolumns`	Will show row columns in the first line.

nogutter 是把左邊的數字條拿掉。
nocontrols 是把上面的bar拿掉。
collapse 是預設變成合起來的，上面的bar會多一個+展開。
範例: <pre name="code" class="html:nocontrols:nogutter">...</pre>
其他請自行參考。

訂閱：文章 (Atom)

2012年1月5日 星期四

2010年10月6日 星期三

2010年10月4日 星期一

2009年12月2日 星期三

2009年12月1日 星期二

2009年7月14日 星期二

2009年6月26日 星期五

說明:

下載(拉到書籤工具列):

2009年6月6日 星期六

2009年5月19日 星期二

說明:

心得:

下載:

相關閱讀:

2009年5月15日 星期五

最後更新時間:

簡介說明:

支援瀏覽器:

目前支援頁面:

使用方法:

下載:(拉到書籤工具列)

For Greasemonkey Version:

2009年5月12日 星期二

2009年3月29日 星期日

2009年3月25日 星期三

2009年3月13日 星期五

IE (用ie6示範):

Firefox:

2009年3月11日 星期三

2009年3月10日 星期二

說明:

支援相簿或網站:

可使用瀏覽器(目前僅測試windows平台):

使用方法:

擷圖:

Changelog:

2009年3月4日 星期三

2008年11月14日 星期五

2012年1月5日星期四

2010年10月6日星期三

2010年10月4日星期一

2009年12月2日星期三

2009年12月1日星期二

2009年7月14日星期二

2009年6月26日星期五

2009年6月6日星期六

2009年5月19日星期二

2009年5月15日星期五

2009年5月12日星期二

2009年3月29日星期日

2009年3月25日星期三

2009年3月13日星期五

2009年3月11日星期三

2009年3月10日星期二

2009年3月4日星期三

2008年11月14日星期五