http://blog.roodo.com/rss20/topic/topic_article_16810.xml 分享好用的JavaScript範例 zh-tw Roodo Blog System All Rights Reserved Seed 也支援對資料庫的存取，目前只支援 SQLite。 用法也超級簡單... 基本上只有 constructor 跟用來執行 SQL 的 exec()。以下代碼來自源碼裡 (modules/sqlite/example.js)： #!/usr/local/bin/seed Seed.import_namespace("sqlite"); d = new sqlite.Database(Seed.argv[2]); d.exec("create table t1 (t1key INTEGER PRIMARY KEY,data TEXT,num double,timeEnter DATE);"); d.exec("insert into t1 (data,num) values ('This is sample data',3);"); d.exec("insert into t1 (data,num) values ('More sample data',6);"); d.exec("insert into t1 (data,num) values ('And a little more',9);"); d.exec("select * from t1", function(results){Seed.print(JSON.stringify(results))}); 取出資料的作法則是將 callback 傳入，以處理一筆 record。上面是用 JSON 輸出整筆 record 內容，其實你也可以將欄位名稱代入 indexer 來取得該欄內容： d.exec("select * from t1", function(results){Seed.print(results["data"])}); http://blog.roodo.com/thinkingmore/archives/8630949.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Fri, 03 Apr 2009 20:08:40 +0800 GObject、Gio、Gtk、Glib、Clutter 等在範例裡看到的 library，在 Seed 原始碼裡是看不到的， Seed 是利用 GObject Introspection 來跟這些 library 互動。 Cairo、sqlite、readline 的話，因為並沒有使用 GObject 這個 library，所以 Seed 另外寫 Module 來跟這些 library 互動，你可以在 Seed 原始碼的 modules 目錄下看到～ Cairo 實際上是在 Canvas 這個 module 裡，Canvas 裡共有四個主要的類別：CairoCanvas、PDFCanvas、SVGCanvas、ImageCanvas，創建這些 Canvas 以後，基本上都是使用 Cairo 來在這些 Canvas 上繪圖。裡面沒有封裝 cairo_pattern_xxxx、cairo_text_xxxx、cairo_mask...等函數，所以不能用 Cairo 來繪圖或是繪字。 #!/usr/bin/env seed Seed.import_namespace("Gtk"); Seed.import_namespace("Canvas"); Seed.import_namespace("Gdk"); // // Initialize GTK+ // Gtk.init(null, null); // Create the main application window and set the title var window = new Gtk.Window({title: "Canvas Demo"}); var vbox = new Gtk.VBox(); var drawingArea = new Gtk.DrawingArea(); var status = new Gtk.Statusbar(); var hbox = new Gtk.HBox(); var exposeEvent = function() { return true;}; // // create Cairo Canvas // function createCairoCanvas() { var cairo = Gdk.cairo_create( drawingArea.window ); return new Canvas.CairoCanvas( cairo ); } // // Demos from http://cairographics.org/tutorial/ // function strokeDemo() { drawingArea.window.clear(); var canvas = createCairoCanvas(); canvas.strokeStyle = "rgb( 0, 0, 255 )"; canvas.strokeRect( 10, 10, 50, 50 ); canvas.stroke(); return true; } function fillDemo() { drawingArea.window.clear(); var canvas = createCairoCanvas(); canvas.fillStyle = "rgb( 0, 0, 255 )"; canvas.fillRect( 10, 10, 50, 50 ); canvas.fill(); return true; } function fourColorDemo() { drawingArea.window.clear(); var canvas = createCairoCanvas(); canvas.strokeStyle = "rgb( 0, 0, 0 )"; canvas.moveTo( 0, 0 ); canvas.lineTo( 100, 100 ); canvas.moveTo( 100, 0 ); canvas.lineTo( 0, 100 ); canvas.lineWidth = 10; canvas.stroke(); canvas.fillStyle = "rgb( 255, 0, 0 )"; canvas.globalAlpha = 0.8; canvas.fillRect( 0, 0, 50, 50 ); canvas.fillStyle = "rgb( 0, 255, 0 )"; canvas.globalAlpha = 0.6; canvas.fillRect( 0, 50, 50, 50 ); canvas.fillStyle = "rgb( 0, 0, 255 )"; canvas.globalAlpha = 0.4; canvas.fillRect( 50, 0, 50, 50 ); return true; } function pathDemo() { drawingArea.window.clear(); var canvas = createCairoCanvas(); canvas.strokeStyle = "rgb( 255, 0, 0 )"; canvas.beginPath(); canvas.moveTo( 25, 25 ); canvas.lineTo( 50, 37.5 ); canvas.lineTo( 75, 25 ); canvas.arc( 50, 50, 25*Math.sqrt(2), -0.25*Math.PI, 0.25*Math.PI, false ); canvas.bezierCurveTo( 50, 37.5, 50, 62.5, 25, 75 ); canvas.closePath(); canvas.stroke(); return true; } function scaleAndTransformDemo() { drawingArea.window.clear(); var canvas = createCairoCanvas(); canvas.strokeStyle = "rgb( 255, 0, 0 )"; canvas.lineWidth=10; canvas.save(); canvas.scale( 0.5, 1 ); canvas.arc( 50, 50, 40, 0, 2*Math.PI, true ); canvas.stroke(); canvas.translate( 100, 0 ); canvas.arc( 50, 50, 40, 0, 2*Math.PI, true ); canvas.restore(); canvas.stroke(); return true; } // // Demos from http://cairographics.org/samples/ // function arcDemo() { drawingArea.window.clear(); var canvas = createCairoCanvas(); var xc = 128; var yc = 128; var radius = 100; var angle1 = 45 * (Math.PI/180); var angle2 = 180 * (Math.PI/180); canvas.lineWidth = 10; canvas.arc( xc, yc, radius, angle1, angle2, true ); canvas.stroke(); canvas.fillStyle = "rgb( 255, 51, 51 )"; canvas.globalAlpha = 0.6; canvas.lineWidth = 6; canvas.arc( xc, yc, 10, 0, 2*Math.PI, true ); canvas.fill(); canvas.arc( xc, yc, radius, angle1, angle2, true ); canvas.lineTo( xc, yc ); canvas.arc( xc, yc, radius, angle2, angle2, true ); canvas.lineTo( xc, yc ); canvas.stroke(); return true; } function clipDemo() { drawingArea.window.clear(); var canvas = createCairoCanvas(); canvas.arc( 128, 128, 76.8, 0, 2*Math.PI, true ); canvas.clip(); canvas.beginPath(); canvas.fillRect( 0, 0, 256, 256 ); canvas.strokeStyle = "rgb( 0, 255, 0)"; canvas.moveTo( 0, 0 ); canvas.lineTo( 256, 256 ); canvas.moveTo( 256, 0 ); canvas.lineTo( 0, 256 ); canvas.lineWidth = 10; canvas.closePath(); canvas.stroke(); return true; } function curveRectangleDemo() { drawingArea.window.clear(); var canvas = createCairoCanvas(); var x0 = 25.6; var y0 = 25.6; var rect_width = 204.8; var rect_height = 204.8; var radius = 102.4; var x1, y1; x1 = x0 + rect_width; y1 = y0 + rect_height; if( rect_width/2 &lt; radius ) { if( rect_height/2&lt;radius ) { canvas.moveTo( x0, (y0+y1)/2 ); canvas.bezierCurveTo( x0, y0, x0, y0, (x0+x1)/2, y0 ); canvas.bezierCurveTo( x1, y0, x1, y0, x1, (y0+y1)/2 ); canvas.bezierCurveTo( x1, y1, x1, y1, (x0+x1)/2, y1 ); canvas.bezierCurveTo( x0, y1, x0, y1, x0, (y0+y1)/2 ); } else { canvas.moveTo( x0, y0+raius ); canvas.bezierCurveTo( x0, y0, x0, y0, (x0+x1)/2, y0 ); canvas.bezierCurveTo( x1, y0, x1, y0, x1, y0+radius ); canvas.lineTo( x1, y1-radius ); canvas.bezierCurveTo( x1, y1, x1, y1, (x1+x0)/2, y1 ); canvas.bezierCurveTo( x0, y1, x0, y1, x0, y1-radius ); } } else { if( rect_height/2&lt;radius ) { canvas.moveTo( x0, (y0+y1)/2 ); canvas.bezierCurveTo( x0, y0, x0, y0, x0+radius, y0 ); canvas.lineTo( x1-radius, y0 ); canvas.bezierCurveTo( x1, y0, x1, y0, x1, (y0+y1)/2 ); canvas.bezierCurveTo( x1, y1, x1, y1, x1-radius, y1 ); canvas.lineTo( x0+radius, y1 ); canvas.bezierCurveTo( x0, y1, x0, y1, x0, (y0+y1)/2 ); } else { canvas.moveTo( x0, y0+radius ); canvas.bezierCurveTo( x0, y0, x0, y0, x0+radius, y0 ); canvas.lineTo( x1-radius, y0 ); canvas.bezierCurveTo( x1, y0, x1, y0, x1, y0+radius ); canvas.lineTo( x1, y1-radius ); canvas.bezierCurveTo( x1, y1, x1, y1, x1-radius, y1 ); canvas.lineTo( x0+radius, y1 ); canvas.bezierCurveTo( x0, y1, x0, y1, x0, y1-radius ); } } canvas.closePath(); canvas.fillStyle = "rgb( 128, 128, 255 )"; canvas.fill(); // no fill_preserve(), so you won't see the border. canvas.strokeStyle = "rgb( 255, 0, 0 )"; canvas.globalAlpha = 0.5; canvas.lineWidth = 10; canvas.stroke(); return true; } function curveToDemo() { drawingArea.window.clear(); var canvas = createCairoCanvas(); var x=25.6, y=128; var x1=102.4, y1=230.4, x2=153.6, y2=25.6, x3=230.4, y3=128.0; canvas.moveTo( x, y ); canvas.bezierCurveTo( x1, y1, x2, y2, x3, y3 ); canvas.lineWidth = 10; canvas.stroke(); canvas.strokeStyle = "rgb( 255, 51, 51 )"; canvas.globalAlpha = 0.6; canvas.lineWidth = 6; canvas.moveTo( x, y ); canvas.lineTo( x1, y1 ); canvas.moveTo( x2, y2 ); canvas.lineTo( x3, y3 ); canvas.stroke(); return true; } function rotateDemo() { drawingArea.window.clear(); var canvas = createCairoCanvas(); canvas.translate( 128, 128 ); canvas.rotate( 45*Math.PI/180 ); canvas.scale( 0.9, 0.9 ); canvas.fillStyle = "rgb(200,0,0)"; canvas.fillRect( 10, 10, 55, 50 ); canvas.strokeStyle = "rgb( 0, 200, 0 )"; canvas.strokeRect( 50, 50, 155, 150 ); canvas.strokeStyle = "rgb( 0, 0, 255 )"; canvas.arc( 137.5, 137.5, 100, 0, Math.PI*2, true ); canvas.stroke(); return true; } // // routines // function createButton( label, handler ) { var button = new Gtk.Button( {label: label} ); button.signal.clicked.connect( handler ); return button; } function createButtonGroup() { var buttonGroup = new Gtk.VBox(); //var buttonGroup = new Gtk.VButtonBox(); buttonGroup.pack_start( createButton( "Stroke", function() { exposeEvent = strokeDemo; return exposeEvent(); }), true, true); buttonGroup.pack_start( createButton( "Fill", function() { exposeEvent = fillDemo; return exposeEvent(); }), true, true); buttonGroup.pack_start( createButton( "4 color", function() { exposeEvent = fourColorDemo; return exposeEvent(); }), true, true); buttonGroup.pack_start( createButton( "Path", function() { exposeEvent = pathDemo; return exposeEvent(); }), true, true); buttonGroup.pack_start( createButton( "Scale and Transform", function() { exposeEvent = scaleAndTransformDemo; return exposeEvent(); }), true, true); buttonGroup.pack_start( createButton( "Arc", function() { exposeEvent = arcDemo; return exposeEvent(); }), true, true); buttonGroup.pack_start( createButton( "Clip", function() { exposeEvent = clipDemo; return exposeEvent(); }), true, true); buttonGroup.pack_start( createButton( "Curve Rectangle", function() { exposeEvent = curveRectangleDemo; return exposeEvent(); }), true, true); buttonGroup.pack_start( createButton( "Curve To", function() { exposeEvent = curveToDemo; return exposeEvent(); }), true, true); buttonGroup.pack_start( createButton( "Rotate", function() { exposeEvent = rotateDemo; return exposeEvent(); } ), true, true); return buttonGroup; } // // Events // function drawingArea_ExposeEvent() { return exposeEvent(); } // // Main // // Make the program terminate when the window is closed window.signal.hide.connect(Gtk.main_quit); drawingArea.signal.expose_event.connect( drawingArea_ExposeEvent ); hbox.pack_start( createButtonGroup(), false, false); hbox.pack_start( drawingArea, true, true ); vbox.pack_start( hbox, true, true ); vbox.pack_start( status, false, false, 0); window.add(vbox); window.show_all(); window.resize( 640, 480 ); // Start the main GTK+ loop and initiate the program Gtk.main(); 關於這個例子，大部分都是從 Cairo 網站上的範例搬來的，也幾乎演示了所有的函數，但還是有少數函數與屬性沒有涵蓋到，如 transform、setTransform、clearRect、quadraticCurveTo...等～ 有需要再自己去翻 seed-canvas.c 看吧～ http://blog.roodo.com/thinkingmore/archives/8345465.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Fri, 20 Feb 2009 18:22:23 +0800 最近使用了 jquery.ingrid 這個 jQuery 的插件，這裡分享幾點心得： 官方文件 提供的資訊極有限，所以原始碼沒事最好要看一下。 Client 端的 html 只要在 &lt;table&gt; 裡面放 &lt;thead&gt;, &lt;thead&gt;, &lt;th&gt; 即可，不需要放別的。另外最好用一個 &lt;div&gt; 包起來，這樣可以比較方便於作 requery，因為在呼叫 ingrid() 之後，DOM 會作必要的改變，因此原來你使用 selector 指定到的 element，可能就再也找不到了。使用 &lt;div&gt; 包起來的好處是，可以藉由 html() 重新指定 &lt;div&gt; 的內容。這樣就能再次使用 selector 找到要改變的 table。 Server 端需要處理 page, sort, dir 三個參數，這是由 Client 端的 ingrid() javascript 送出的，此外，如果 dataType 是 HTML (預設也是) 的話，只要輸出 &lt;table&gt;、&lt;tbody&gt;與&lt;td&gt;即可。如果你還需要指定其他的參數，可以藉由複寫 extraParams 來達到你的目的： var options={ url: 'remote.html', extraParams: {param1: 'param1', param2: 'param2' } }; $("#grid").ingrid( options ); 記得要指定 colWidths，有幾個 column，就要指定幾個，這是官方文件沒提及的部份。如果不指定，會很殘忍的給你錯誤。 $("#grid").ingrid( { // other stuff... colWidths: [ 225,225,225,225 ], // other stuff... }); 此外它還有排序、調整欄寬...等等的功能，整體來說，是個相當不錯的插件。 http://blog.roodo.com/thinkingmore/archives/5628631.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Mon, 03 Mar 2008 17:39:04 +0800 關鍵字： insertRow、insertCell、deleteRow、javascript動態表格、動態表格語法、html動態表格、動態增加表格、動態新增表格範例、動態新增表格 說明： 將 table 的一些操作方法，整合成一個簡單的表格處理類別，以簡化表格的操作。 使其能動態地產生表格，或改變表格的內容。 (閱讀全文) http://blog.roodo.com/xinchin/archives/5611621.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Fri, 29 Feb 2008 01:59:34 +0800 最近一直在看這個 AJAX blog, http://ajaxian.com/ 裡面的內容很豐富. 突然好像找回來寫程式的樂趣. 哈哈. 真好玩. http://blog.roodo.com/wlsloi/archives/4998343.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Thu, 17 Jan 2008 23:14:40 +0800 流程編輯器。使用 JavaScript 實作的使用者介面，未附伺服端儲存與載入功能源碼。 使用 wz_jsgraphics.js 繪製線條。當時曾試過 SVG ，但效果與瀏覽器相容性皆不理想，所以還是用 wz_jsgraphics.js 。它是以 1px 大小的 div node 為畫素，構成圖形。 http://blog.roodo.com/rocksaying/archives/4036079.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Tue, 28 Aug 2007 17:32:07 +0800 &nbsp;之前因為要弄懂一些 CSS 在不同瀏覽器上位置計算的問題，寫了些程式，後來覺得要是網頁上可以跑支簡單的尺出來，或許很多位置會比較容易檢查些。如果你看過之前我寫的 有關 CSS 的實驗 ，我想你應該看過 那堆亂七八糟的線 了... 對! 那就是我寫的尺! 我這幾天把那些功能稍微 做了些整理 ，如果你剛好需要用的話，就 自己去抓 吧。 要是用了覺得好用，麻煩你不要把程式裡我的名子刪掉... ㄟ... 基本上你要是刪了，我也不能對你怎樣... ，要是喜歡的話，留個言給我。要是用了有問題，也留個言給我。要是有問題，也留個言給我。要是覺得有什麼可以改進的，也留個言給我。要是你改過裡面的程式，把功能加強了，願意跟我分享，也留個言給我。總之，留言是一種禮貌，也是推行 open source 的一個重要動作。 &nbsp; &nbsp; &#187; 看應用範例 &nbsp; &nbsp; &#187; 程式碼 另外，功能我只在 IE7 和 Firefox 2.0.0.6 上測過，要是其他瀏覽器有問題，你就得先自己看看到底是什麼問題啦，還有，要是你看到 Firefox 上的 Error Console 抓到有關 filter 的警告，那是因為我的 CSS 裡有個 IE 專用的半透明效果，那不會影響 JavaScript 在 FireFox 上的執行。 http://blog.roodo.com/wsjeng/archives/3926155.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Tue, 14 Aug 2007 03:48:47 +0800 最近常因為瀏覽器對 XHTML 裡物件的位置計算搞到有點瘋掉，但是因素實在太多了，只好先寫些簡單的工具來檢查啦，單然， 尺 是最重要的工具啦! 我用 &lt;div&gt; 畫了個尺的功能，有興趣的就 自己去看看 有沒有用吧。 http://blog.roodo.com/wsjeng/archives/3898395.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Thu, 09 Aug 2007 23:52:45 +0800  因為昨天有人要我改一下 CSS 寬度的設定，好讓我網頁上那不需要出現的橫向捲軸可以不見， 讓我有了些動力好好把有關 寬度的計算方式好好的實驗一下。基本上，我已經忘記當初為什麼只是為了在網頁上弄個框的效果需要搞那些寬度 99%, 98% 的設定了。總之，現在看來感覺這樣的方法有點蠢，因為那樣的設定在我的 case 看來實在是很多餘... » 看實驗結果 http://blog.roodo.com/wsjeng/archives/3883857.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Wed, 08 Aug 2007 05:37:21 +0800 追蹤滑鼠游標移動的位置似乎在很多時候需要用到，但是因為懶惰，所以從來沒有真正去好好了解一下，所以今天來把觀念搞清楚： 在 IE 裡，event 物件可以隨時擷取的到；但在 Firefox 上就必須要有事件(如：click, MouseOver, MouseOut... 等等)產生時，event 物件才會行成。因此，在 Firefox 上如果有function 需要擷取游標的位置，event 物件就必須在事件產生時以參數的方式傳進 function 裡才行 Firefox 只支援 event.clientX(Y) 和 event.screenX(Y): clientX(Y) 的值是以瀏覽器視窗內左上角為原點；screenX(Y) 當然就是以你的螢幕左上角為原點所取出的值啦。 IE 另外還支援了 event.x(y) 和 event.offsetX(Y) - event.x(y) 和 event.clientX(Y) 相同，offsetX(Y) 則是以每個框框 (像 &lt;div&gt; 包住的範圍就是一個框框) 的左上角為原點。 說了一堆定義， 自己去看範例 吧 什麼？不知道原點是什麼？(x, y) = (0, 0) 就是原點... http://blog.roodo.com/wsjeng/archives/3875071.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Tue, 07 Aug 2007 01:48:49 +0800 上次在寫完有關 JavaScript 的小技巧時，突然發現我應該從檢查瀏覽器的相容性相關資訊開始，雖然有些人根本不在乎他們的網頁是否跟 IE 以外的瀏覽器相容... 我沒有別的意思啊，很多時候，尤其是像公司內部的 web-based 管理工具，我也不怎麼在乎它是不是跟所有大家常用的瀏覽器相容，原因很多，就不在這裡囉唆啦。 總之咧，在寫網頁程式時，尤其現在 AJAX 又被廣泛運用的時代，我覺得還是需要注意某些簡單的資訊，至少讓那些不是用 IE 的人可以知道他們用的瀏覽器沒辦法看到完整的內容。一般最常用的方法，當然就是用 window.navigator.userAgent 囉： if (navigator.userAgent.indexOf("MSIE") > 0) &nbsp; &nbsp; // 做跟 IE 相容可以做的事 else &nbsp; &nbsp; // 做跟 IE 不相容時該做的事，例如：叫他去裝 IE... 很簡單吧? 當然你也可以用 document.all 或 某個 div 物件的 filters element 來做檢查， 自己去看詳細內容... http://blog.roodo.com/wsjeng/archives/3873267.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Mon, 06 Aug 2007 19:12:58 +0800 當我們在利用 JavaScript 讀取某一個在 HTML 裡的物件位置時，通常會用 object.style.top 和 object.style.left 來抓物件的設定值，如： var targetObject = document.getElementById("someObject"); if (targetObject) &nbsp; &nbsp; &nbsp; topPos = parseInt(targetObject.style.top); 但如果把 top 和 left 的値設定在 &lt;style type="text/css"&gt;...&lt;/style&gt; 或是連結的外部 CSS 檔案當中，而不是用 inline style (就是直接寫在標籤的 style 屬性裡，類似 &lt;div style="..."&gt; 的 )， 抓的就會是空値。當然，要解決這個問題的方法就是用 inline style 啦。 另外，我知道會有人要問為什麼不用 object.style.posTop 和 object.style.posLeft - 這個只有 IE 可以用，雖然它可以直接取出整數。 &#187; 看範例 http://blog.roodo.com/wsjeng/archives/3860841.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Sat, 04 Aug 2007 04:45:27 +0800 以前總是用 setTimeout 加 recursive 的方法做一些類似顯示時間 或是 loading... 動畫的功能，雖然知道 setInterval 但是不知道為什麼從來沒去用，最近終於有時間把這兩個 methods 搞清楚了，哈哈‧‧‧ setInterval 裡設定的程式只會被重複觸發，直到執行了 clearInterval 為止 setTimeout 裡設定的程式只會被觸發一次 setInterval 和 setTimeout 都是利用時間去觸發某個動作的執行；並且下一行程式不會因為時間設定的長短而被延遲或影響；也就是說當 setInterval 和 setTimeout 那行程式被執行的時候，那個觸發的動作就被交給 window 物件去處理了，其他的程式會被繼續執行，不會受到影響 setInterval 和 setTimeout 在執行時都會產生 timerID 以便在某些狀況下需要用 clearInterval 和 clearTimeout 去取消那些觸發的動作 http://blog.roodo.com/wsjeng/archives/3661667.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Sun, 15 Jul 2007 06:13:57 +0800 利用JSON的確可以打造一個輕量給的Embedded web server. 使用JSON只需要你的系統支援以下功能 假設Client是IE5.5和Firefox 1.0以上 Web server可以支援GET method CGI Web server最好有HTTP 1.1 modified的功能(optional)&nbsp; http://blog.roodo.com/wlsloi/archives/3394245.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Sun, 03 Jun 2007 20:28:27 +0800 Tags: 匿名函數 Closure jaceju 在 Anonymous functions in PHP 說某個 PHP 研討會討論了匿名函數 (anonymous function) 在 PHP 中的需求性。 jaceju 注明 Jim Wilson 說匿名函式和 closure 是完全不一樣的東西，而他自己看不出兩者的差別。 我在寫 JavaScript 時，常常碰到這個問題。用 JavaScript 也比較容易說明兩者的差異。 http://blog.roodo.com/rocksaying/archives/3337623.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Thu, 24 May 2007 14:35:43 +0800 Tags: YUI tooltip 請問滑鼠指到某一列，可以出現說明文字? ( TWPUG::JavaScript討論區 ) Just HTML. 不需要用到 JavaScript. 任何網頁元件只要具有 title 屬性，當滑鼠停留在其上方時就會出現提示文字(tooltip)，顯示 title 所指定的文字內容。See also: HTML 4.01 Specification: The title attribute . http://blog.roodo.com/rocksaying/archives/3283943.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Mon, 21 May 2007 15:19:33 +0800 Tags: 偵測URL ajax Ka-Yue 說: JavaScript have onerror event too . Good question. PHP 的偵測動作是在 server-side ，它可能增加 Server 不必要的網路負荷。如果改由 JavaScript 進行偵測動作，就可以把偵測動作分派給 client 去做。這是一種 Ajax 的應用。 http://blog.roodo.com/rocksaying/archives/3216885.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Thu, 10 May 2007 16:36:18 +0800 Tags: ajax javascript webdev 資安 日前 Fortify 發表了一份文件《 Fortify Software Documents Pervasive and Critical Vulnerability in Web 2.0 》，描述惡意網站如何透過瀏覽器取得基於 Ajax 及 JSON 規範傳遞之跨網域的隱密資料。它將此方式稱之為 JavaScript Hijacking 。詳細的 Hijacking 內容請至《 JavaScript Hijacking Vulnerability Detected 》下載文件。 本文將說明 JavaScript Hijacking 概念以及一個範例。 http://blog.roodo.com/rocksaying/archives/2955557.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Wed, 04 Apr 2007 15:55:04 +0800 ajax webdev 《老子》有云「不善人者善人之資」。了解不適當與錯誤的方式，也是學習中重要的一環。在程式設計的領域中亦如是，好的設計方式會 patternalization ，壞的設計方式也會。Jack D Herrington 于 Ajax and XML: Five Ajax anti-patterns 列舉了 5 種常見的 Ajax anti-patterns 。這5種確實常見，我個人也有不少經驗可與之聯繫。 http://blog.roodo.com/rocksaying/archives/2917219.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Tue, 27 Mar 2007 11:28:08 +0800 Tags: javascript ajax 前一陣子根據老闆要求，寫了一個重點商品銷售統計報表的程式，每天統計各門市到昨天為止的重點商品銷售統計，將結果輸出到網頁讓每個門市都可以瀏覽查看。這程式運作了一段時間後，老闆覺得還不錯，就要我改成暢銷商品銷售統計，納入上千項商品為暢銷商品。因為上千項商品的報表很長，老闆就要我加上排序功能。 要排序當然OK啊。只是我很懶，不想為了視覺效果去修改統計程式，更不想為了更新排序結果而要伺服端再回傳一次頁面。於是我打算以動態網頁的方式，直接用 JavaScript 對網頁上的統計表格排序。 http://blog.roodo.com/rocksaying/archives/2854997.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Wed, 14 Mar 2007 23:55:55 +0800 javascript 繼《 重新認識JavaScript 》後，再介紹便於學習與測試的互動模式工具。 動態語言強調立即反應，最好使用者輸入什麼敘述，執行環境就立即顯示結果，發生錯誤亦可立即修改。然而 JavaScript 傳統的執行環境 (host) 是在瀏覽器上，所以我們通常習慣將 JavaScript 程式碼編輯儲存在檔案中，再開啟瀏覽器執行。這方式在學習時有些缺點，像是訊息輸出便非常麻煩。試想，如果你要練習用迴圈顯示一個九九乘法表，在上述環境中你可無法直接 print 、puts 或 echo 在瀏覽器上啊。最簡單的方式也要先指定一個文件節點，然後設定其 innterHTML 屬性才行。 http://blog.roodo.com/rocksaying/archives/2795505.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Fri, 02 Mar 2007 23:56:47 +0800 javascript 說到 JavaScript ，大概每個程序員都會寫一點，但真正把 JavaScript 當作一個程式語言認真學習過的人卻不算多。還是有人分不清 Java 和 JavaScript 的差別，還是有人把 JavaScript 當作 Java 在寫。你知道 JavaScript 如何實現封裝與繼承 嗎？你知道 JavaScript 如何作 Reflection 嗎？你知道 JavaScript 如何實現匿名遞迴 嗎？如果你無法理解上述內容或者發覺它看似熟悉卻又如此陌生時，那麼就應該拋棄以前的錯誤認知，重新認識 JavaScript 這個老夥伴的真實面貌。 http://blog.roodo.com/rocksaying/archives/2793545.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Fri, 02 Mar 2007 11:36:35 +0800 Tags: ajax, javascript 在 developerWorks 上看到《 Flip for Flapjax 》介紹 Flapjax ，聲稱是比 JavaScript 更好的 Web 應用程式語言 (better-than-JavaScript programming language for modern Web applications) 。官方網站上提到 Flapjax 的特色為： http://blog.roodo.com/rocksaying/archives/2772183.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Mon, 26 Feb 2007 10:15:15 +0800 Tags: ajax json web2.0 我在 網路服務與純 JavaScript 應用之 JSON 資料包裹解決方案 提到的概念，其實最初也是在 Google 上看到這種概念。只是我那時寫著寫著，卻忘了 Google 的方式... 網友忘幽谷提醒才想起。 Google 查詢服務回傳的資料格式是它自家的 GData 文件 ( GData uses either of two standard XML-based syndication formats: Atom or RSS ) 。為了讓使用者能建立純 JavaScript 應用， Google 就提供了將 GData 資料內容改用 JSON 格式包裹在 JavaScript 程式碼中的服務方式。 http://blog.roodo.com/rocksaying/archives/2760853.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Fri, 23 Feb 2007 10:30:58 +0800 Tags: ajax json web2.0 在 Web 2.0 的浪潮下，有愈來愈多的網路服務推出，如網路相簿、網路書籤、網路書櫃等等。大多數網路服務都有提供 Blog 使用的小工具 (或稱 Badge) ，從軟體設計的觀點來看，這些小工具才是我們在談的「網路服務」、「服務元件 (service compoent)」。 我最近在玩網路書籤提供的這些服務元件，就我觀察這些服務元件主要分兩種形式：一、以一段固定的 JavaScript 程式碼輸出網頁內容；二、僅提供 XML/JSON 資料，讓使用者自己處理程式邏輯。這兩種形式各有限制。第一種包辦了資料和程式邏輯，使用者只需／只能用 CSS 調整外觀；而且因為包含了 JavaScript 的程式邏輯，所以不同服務者提供的服務元件放在同一個頁面時可能會相衝，有我無他、或者大家一起掛。第二種則受限於 XMLHttpRequest 的安全性限制，基本上不能做成純 JavaScript 的應用。 http://blog.roodo.com/rocksaying/archives/2749975.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Tue, 20 Feb 2007 23:58:24 +0800 Tags: ajax javascript 在《 Load and Execute JavaScript on Demand 》一文中，我說明了利用 XMLHttpRequest 動態載入外部 JavaScript 程式的技巧。然而那技巧是用於應付某些特殊情境之手段，其限制與特點如下列所示： 受限於 XMLHttpRequest 之安全性管制，不能載入不同主機的外部程式。 易於掌握載入狀況及執行順序。 執行方式較具彈性，甚至可以選擇性執行片段。例如《 Load and Execute JavaScript on Demand 》之範例程式第74-79行之註解內容，原意是截取夾雜在一般 HTML 文件中的 JavaScript 程式碼，且僅僅執行此片段程式。此亦為該程式實作之最初用途，因為外部 JavaScript 程式碼並非位於純粹 .js 文件中，而是夾雜在網誌的文章中。 http://blog.roodo.com/rocksaying/archives/2741057.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Sat, 17 Feb 2007 14:42:42 +0800 javascript 我在前文《 The practice of anonymous recursion function in JavaScript, 》寫完之後，又到 Google 找尋是否有其它解法，結果讓我找到用 callee 的作法。這作法更簡單。 http://blog.roodo.com/rocksaying/archives/2721669.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Tue, 13 Feb 2007 21:54:16 +0800 javascript 匿名遞迴函數在 JavaScript 中之實踐途徑。所謂遞迴函數即函數在其內部調用自己的函數，為了能夠自我調用，我們通常會為函數命名以便以名稱調用之。然而在某些語言中，其語言特性足以實踐匿名函數之遞迴。 在 JavaScript 中欲實踐此技法，須具備三個 ECMAScript/JavaScript 知識基礎：一、理解什麼是 Function object 及匿名函數；二、理解 operator() 的用法；三、理解如何以 Function.call()/Function.apply() 改變 this 的指涉對象。 http://blog.roodo.com/rocksaying/archives/2718420.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Tue, 13 Feb 2007 00:30:34 +0800 ajax javascript xmlhttprequest 這是一個使用在本部落格的技巧，用於因應樂多部落格系統之限制。 傳統上，我們執行 JavaScript 程式的方式是靜態的，在 HTML 文件中以 &lt;script type="text/javascript" src="example.js"&gt;&lt;/script&gt; 的敘述載入並執行外部 JavaScript 程式。若我們無法使用上述方式時，就需要動態載入與執行。另一種需要動態載入與執行 JavaScript 程式的時機為，存在幾個相當龐大的 JavaScript 程式但不全部都用得到的情形，為了降低瀏覽器載入的時間，此時我們需要依某些條件決定那些 JavaScript 程式需要載入。 http://blog.roodo.com/rocksaying/archives/2716520.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Sun, 11 Feb 2007 23:18:12 +0800 ajax javascript dom opera tag bug 前幾天我在寫用 JavaScript 自動轉換 Tag 註記的工具時 ( See also: 輕鬆在文章中加入「Tag, 標籤」連結 ) ，發現 Opera 瀏覽器在操作 Unknown HTML 元素 (即自定元素) 的 DOM 方法中有 bug ，不能正確取代或插入其他節點在 Unknown HTML 元素之節點後。如果用取代方法 ( replaceChild ) 甚至會切斷 DOM 結構。 我設置了一個最簡單的測試環境，使用三種瀏覽器: MSIE 6, Firefox 1.5, Opera 9.1 (build 8679) 測試操作取代及插入動作。 MSIE 和 Firefox 都如預期般正確操作，唯 Opera 有錯誤。 http://blog.roodo.com/rocksaying/archives/2704403.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Tue, 06 Feb 2007 22:39:41 +0800 DOM IE DHTML bug 我又來談 IE 的 bug 了，這次是關於 IE 處理動態產生之表格的問題。這事有段時間了，我看到 Thinker 在《 jQuery 的使用 innerHTML 的問題 》提到當他使用 jQuery 裡的 JavaScript library 產生頁面內容時碰到這問題 ，這才讓我想起來。這問題說來有趣，我之前是在 MSDN 裡找到答案，見《 How to Build Tables Dynamically 》。我看了 MSDN 的文章會想笑，又一個把 IE 的 bug 當技術文章的案例。 http://blog.roodo.com/rocksaying/archives/2690905.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Fri, 02 Feb 2007 23:58:59 +0800 javascript regexp Regular Expression (以下簡稱 REGEX) 是以一組特定字元符號描述字串樣式規則的記述語法。簡單地說， REGEX 用於表達字元符號在字串中出現的規則。舉個例子說明，在 REGEX 中，字元 '^' 放在第一個位置表示字串開頭位置，當我寫下 ^A 的記述時，便表示必須是一個開頭為 A 的字串，如 Adam ，才符合此一規則。這個表達規則通常稱為 pattern 。 ECMAScript/JavaScript 以內建的 RegExp Object 提供 REGEX 功能。 See also: ECMA-262 15.10 - RegExp Objects http://blog.roodo.com/rocksaying/archives/2670695.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Thu, 25 Jan 2007 23:26:57 +0800 這是本人一時興起的試驗作品，寫完之後發現... 這是「惡意」的表單動作。因為我可以在使用者毫無所覺的情形下，記錄使用者瀏覽網站的每一個動作。 原始動機起於我想要在每一個連結上加上「點擊即自動加入書籤」的功能。作法是為網頁上每一個連結都加上點擊事件 (click event) 。當使用者點擊連結時，事件處理函數會自動產生一個表單 (form) ，將連結的網址及標題 (連結標籤中的文字) 填入，再自動將表單送往 黑米共享書籤 (Hemidemi) ，即完成加入書籤的動作。整個過程中，表單是不可見及不可察覺的。瀏覽器仍然會載入連結，而使用者不會察覺到表單送出動作。 http://blog.roodo.com/rocksaying/archives/2665954.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Tue, 23 Jan 2007 22:56:14 +0800 JSON 是 JavaScript 語言的子集合，在 JavaScript 中透過 eval() 喚醒 JSON object 。但 eval() 是個泛用性功能，一句不當的 eval() 操作，足以讓惡意人士在 JSON 內容中植入可執行性敘述達成破壞目的。 此安全性狀況只發生在 JavaScript 中，而其他程式語言由於語法不同兼且多數透過專屬函數編碼與解碼 JSON ，反而無此顧慮。 http://blog.roodo.com/rocksaying/archives/2636558.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Wed, 10 Jan 2007 21:48:30 +0800 騎車經過七星潭，路上看到了這個奇怪的標誌，很鮮，就給他拍了下來XD http://blog.roodo.com/aqueous/archives/2390734.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Mon, 30 Oct 2006 23:50:42 +0800 原始碼 &lt;html&gt; &lt;head&gt; &lt;title&gt;Sample&lt;/title&gt; &lt;script type="text/javascript"&gt;&lt;!--function dispTime(){ var dateObj = new Date(); var h = dateObj.getHours(); var m = dateObj.getMinutes() + 1; var s = dateObj.getSeconds(); document.tForm.timeData.value = h+"時"+m+"分"+s+"秒";} timerID = setInterval("dispTime()",1000);// --&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt;即時顯示時間。&lt;form name="tForm"&gt; &lt;input type="text" name="timeData"&gt;&lt;/form&gt; &lt;/body&gt; &lt;/html&gt; 程式範例 http://blog.roodo.com/run26kimo/archives/2368885.html info@blog.roodo.com<info@blog.roodo.com> 網路/3C Thu, 26 Oct 2006 11:01:42 +0800