顯示具有 JavaScript 標籤的文章。 顯示所有文章
顯示具有 JavaScript 標籤的文章。 顯示所有文章

2011年5月19日 星期四

Adobe Acrobat Javascript Example Codes

用 JavaScript 的方式語法較簡單。

修改 UI

利用 app。如 app.addMenuItem

重要的參數包括:

  1. cName: The language-independent name of the menu item. This name can be used by other methods (for example, hideMenuItem) to access the menu item.
  2. cUser: (optional) The user string (language-dependent name) to display as the menu item name. If cUser is not specified, cName is used.
  3. cParent: The name of the parent menu item. Its submenu will have the new menu item added to it. If cParent has no submenu, an exception is thrown.
  4. nPos: (optional) The position within the submenu to locate the new menu item. The default behavior is to append to the end of the submenu. Specifying nPos as 0 adds the menu to the top of the submenu.
  5. cExec: An expression string to evaluate when the menu item is selected by the user.

quads 應用

quads 回傳的內容為 4 組 (x, y) 的座標內容。舉例來說,
quads: [[43],[756],[78],[756],[43],[745],[78],[745]],
代表的是如下圖的座標:

image

的座標。

下面是動態建立一個 quads 與 Annotation 的範例:

var quads1=this.getPageNthWordQuads(p, startIndex);
var quads2=this.getPageNthWordQuads(p, endIndex);
var quads=[[quads1[0][0], quads1[0][1], quads2[0][2], quads2[0][3], quads1[0][4], quads1[0][5], quads2[0][6], quads2[0][7]]];
var annot = this.addAnnot({page: p, type: "Highlight",
                                      quads: quads, author: annotator
                                     });

上面的程式碼要注意換行的情況。

Resources

2009年6月27日 星期六

在 Javascript Array 中插入元素

方法是利用 splice;這個方法除了一般用法外,可以接受如下三個參數: Array.splice(index, howMany, [element1][, ..., elementN])
  • 第一個參數是開始移除元素的 index(從 0 開始)
  • 第二個參數是要移除多少個元素
  • 之後的參數就是要插入的元素
所以若是我們要在陣列的開頭位置插入一個元素“23",我們可以用如下的方式達成:
// info 為一個 Array
var new_array=info.splice(0,0,"23");

2008年12月10日 星期三

使用 clueTip plugin 的注意事項

clueTip 是一個相當實用的 jQuery tip 外掛。在使用上有一些要注意的地方:
  1. clueTip 並不是呼叫後就會顯示工具提示;跟其它的 tips library(如 Walter Zorn 的 DHTML Tooltips)在使用上的概念有差異。我們不需要將它放在 mouseover 或是滑鼠其它事件中。其會自動的 bind 到指定的 HTML 標籤上。
  2. clueTip API 中的 onActivate: 的目的是要決定是否要顯示 tip;傳給 onActivate 的是 function 參考,該 function 可以依情況決定要回傳 true(表示顯示工具提示)或 false(不顯示)
  3. 若是 titleAttribute bind 到的 attribute 是動態決定的,記得要在 bind 到的 attribute 值設定前,將值先設定好,才對該 HTML 標籤呼叫 clueTip();!否則可能會出現滑鼠第一次移動到該 HTML 標籤時,並未正確顯示,第二次移到標籤上,才正常顯示(第一點似乎也可能造成這個問題)

2008年12月1日 星期一

移植 Greasemonkey script 到 IE7Pro

主要 IE7Pro 的 API 參考可以參考 http://www.iescripts.org/help/

jQuery

直接引用即可,不需透過 unsafeWindow。

getElementsByClassName

參考 http://www.robertnyman.com/2008/05/27/the-ultimate-getelementsbyclassname-anno-2008/

2008年11月10日 星期一

GM_xmlhttpRequest 和 unsafeWindow 的限制

詳細的限制請參考 http://wiki.greasespot.net/0.7.20080121.0_compatibility 的描述。主要的症狀是你會發現錯誤訊息出現:
Greasemonkey access violation: unsafeWindow cannot call GM_xmlhttpRequest. 

解決方法如下:

unsafeWindow.someObject.registerCallback(function(asin) {
  window.setTimeout(function() {  // 重點是利用 window.setTimeout
    GM_xmlhttpRequest({
       method: "GET",
       url: "http://www.amazon.com/asin/" + asin;
    });
  }, 0);    // <<<
});

實際例子

$("span[name!=NOT_AVAILABLE]").click(function(){
  GM_openInTab(entrezGene+$(this).attr("name"),1);
}).mouseover(function(){
  var url=url+$(this).attr("name")+".htm";
  window.setTimeout(function(ref){
    GM_xmlhttpRequest({
      method: "GET",
      url: url+"",
      onload: 
      function(xhr) {
 ref.attr("title","Information from Entrez Gene|"+xhr.responseText).cluetip(
 {width:400,splitTitle: '|',arrows: true,dropShadow: false, cluetipClass: 'gene', waitImage: true}
        );
      }
    });
  },0,$(this));  // 用這種方法可以將 $(this) 傳進去
});

2008年8月24日 星期日

jQuery 筆記:用 jQuery 快速選取元素

完整的文件可以參考官方網站。以下摘錄重點:

$("div").addClass("special");
$ 記號是 jQuery 的物件(其實是 jQuery 函數的縮寫),使用 $("div") 就是用 jQuery 來選取元素,這個範例可以選取文件內所有的 <div> 元素。後面接著的 .addClass("special") 就是用來做一些事情,這個範例是將先前所選取到的所有元素都加上一個名為 "special" 的 class。也就是透過 $("div").addClass("special") 的語法,可以一次幫文件上有的 <div> 元素都加入 special 的 class。

這和原本使用 JavaScript 來寫程式有很大的差異,原本自己寫可能會需要用到迴圈之類的語法,而 jQuery 的函數大多具有批次處理的功能! $ 記號 $ 是使用 jQuery 過程中最重要的函數,可以用來用來找元素;使用方式只要把參數帶入即可。下面的範例,結果將會和上面的範例一模一樣:

jQuery("div").addClass("special");
如前述,$ 是 jQuery 函數的縮寫。

選取元素

前面的例子使用 $("div") 來選取元素,帶入的參數 div 表示要找的元素,這是 CSS 選擇器(CSS Selector)的語法,如同 CSS 在做排版和外觀所使用的選擇器語法一樣。jQuery 所支援的 CSS Selector 包含了 CSS 1、CSS2 以及仍未正式發佈的 CSS3,透過 plugin 還可支援常用的 XPath 語法。

這是一段原始的 HTML: 以下用一連串的範例,以展示基本的語法與文件中會被選取的元素。

$("#body")
  • 選取到:<div id="body">
  • 解釋:選取 id 為 body 的元素

$("div#body")
  • 選取到:<div id="body">
  • 解釋:選取 id 為 body 的 <div>

$("div.contents p")
  • 選取到:<p>...</p><p>...</p>
  • 解釋:選取 class 為 contents 的 <div> 元素所包住的所有下層的 <p>

$("div > div")
  • 選取到:<div class="contents">
  • 解釋:選取被 <div> 包住的下一層 <div>

$("div:has(div)")
  • 選取到:<div id="body">
  • 解釋:選取至少有包住一個 <div> 的 <div>

2008年8月14日 星期四

JSMin 瘦身 JavaScript

JSMin 幫忙替 JavaScript 檔案瘦身。

驗證 JavaScript 程式:JSLint

JSLint 提供了線上驗證 JavaScript 語法的服務。

2008年8月13日 星期三

在 blogger 中高亮度顯示程式原始碼

JSPWiki 移轉到 Blogger 以來,最大的困擾除了語法不能像 Wiki 那麼簡潔之外,另一個問題就是程式碼在顯示上不能像 JSPWiki 有一些 plug-in 可使用。

一個方式大概就是利用 Format My Source Code For Blogging 的服務,可以產生格式化的語法。然後貼到 Blogger 上。

但是這種方式其實只是把原始碼稍微排版一下而已(近似於原本 Wiki 的 {{{、}}} 語法)。另一種方式就是利用類似 Hightlight Code Coverter: 將排版後的程式碼轉換成 HTML 輸出 的工具輸出 HTML 後再貼上。

不過這些方式都要繞一大圈才能。這裡介紹一種或許比較好的方式(支援高亮度顯示);利用 syntaxhighlighter

syntaxhighlighter 支援了大部分常見的程式語言,如 C++、Java、C# 等(完整列表見此列表)。

使用方法
  1. 首先到 syntaxhighlighter 下載 StyleHighlighter 原始碼
  2. 將壓縮檔內的 Scripts 和 Styles 目錄解壓到可公開存取的網站目錄內
  3. 修改您的 Blogger 的範本,加入如下程式碼
    <link type="text/css" rel="stylesheet" href="css/SyntaxHighlighter.css"></link>
    <script language="javascript" src="js/shCore.js"></script>
    <script language="javascript" src="js/shBrushCSharp.js"></script>
    <script language="javascript" src="js/shBrushXml.js"></script>
    <script language="javascript">
    window.onload = function(){
    dp.SyntaxHighlighter.ClipboardSwf = '/flash/clipboard.swf';
    dp.SyntaxHighlighter.HighlightAll('code');
    }
    </script>
  4. 最後在以下列語法修改包含原始碼的 HTML 片段:
    1. 利用 <pre> tag,並設定 name 屬性為 code、class 屬性為對應的程式語言代碼(參考此表
      <pre name="code" class="c-sharp">
      ... some code here ...
      </pre>
    2. 利用 <textarea> tag。
      <textarea name="code" class="c#" cols="60" rows="10">
      ... some code here ...
      </textarea>
      
範例
<html>HTML 測試</html>
collapse
nogutter
注意事項
  • 使用 <pre> 來包含程式碼時,中若是程式碼中有 < 符號,則必須將其置換為 &lt;,否則原始碼可能會被截斷。
  • 在 class="xxx" 中可以利用「:」指定額外的控制參數。詳細控制參數列表參考此表

2008年8月5日 星期二

由 Greasemonkey script 直接產生 Firefox extension

參考這個線上工具。將 script 檔

// ==UserScript==

之後的所有原始碼直接貼上,即可產生 xpi 檔。
注意事項

==UserScript== 區塊中請把空白欄位去除。比如

// @include http://www.example.idv/*
// @exclude
^^^^^^^^^^^^^
 移除此欄

JavaScript 的 Sound API

SoundManager 2 補足了 JavaScript 欠缺的 Sound API。

2008年7月29日 星期二

DOM 操作範例

下拉式選單

要在 select 或是 dropdown 元件中加入新的項目:

optionItem = new option(text, value, defaultSelected,
                         selected)

或是

  var opt = document.createElement(‘option’);
  opt.value=value;
  opt.text=text;
  select.options.add(opt, index);
動態建立表格

下面的程式碼示範如何取得表格目前的列數(row)。
若是表格目前沒有任何一列,則設定為 0。

   var lastRow = tbl.rows.length;
   var row = tbl.insertRow(lastRow);
   var cellLeft = row.insertCell(0);

接著下面示範如何動態加入表格內容:

  var totalRows='1'; //假設要完成的總列數為 1 列
  var totalCols='2'; //            總行數為 2 行
  var intRow;
  var intCol;
  for(intRow=0;intRow<totalRows;intRow++)
  {
     var row = tbl.insertRow(intRow);
     for(intCol=0;intCol<totalCols;intCol++)
     {
        var cellLeft = row.insertCell(intCol);
     }
  }
TextArea

下面示範如何動態建立一個文字區塊,並設定列數和行數

  var sample=document.getElementById('sample');
  var el = document.createElement('textarea');
  el.id="sample";
  el.rows=20; // 列數
  el.cols=20; // 行數
  el.style.backgroundColor="#FFFFFF";
  el.style.width="120px" ;
  el.style.height="120px";
  sample.appendChild(el);
動態加入文字

利用 text node 來加入文字內容:

 var textNode = document.createTextNode('hi');
 document.appendChild(textNode);

2008年7月26日 星期六

escape、encodeURI、encodeURICompoent 方法的差異

最近在進行一個小的 FF Greasemonkey project。發現用 encodeURI 後在 POST 出去的資料只要遇到 < 符號就會被截斷,直覺上就是編碼的關係。 查了一下 Google,才發現 escape、encodeURI、encodeURICompoent 方法上的差異(可參考 http://xkr.us/articles/javascript/encode-compare/
  • escape: 採用 ISO Latin 字符集對指定的字符串進行編碼。所有的空格符、標點符號、特殊字符以及其它非 ASCII 字符都將被轉化成 %xx 格式的字符編碼(xx 等於該字符在字符集表裡面的編碼的 16 進制數字)。比如,空格符對應的編碼是 %20。unescape方法與此相反。不會被此方法編碼的字符: @ * / +
  • encodeURI: 把 URI 字符串採用 UTF-8 編碼格式轉化成 escape 格式的字符串。不會被此方法編碼的字符: ! @ # $& * ( ) = : / ; ? + '
  • encodeURIComponent: 把 URI 字符串採用 UTF-8 編碼格式轉化成 escape 格式的字符串。與 encodeURI 相比,這個方法將對更多的字符進行編碼,比如 / 等字符。所以如果字符串裡面包含了 URI 的幾個部分的話,不能用這個方法來進行編碼,否則 / 字符被編碼之後 URL 將顯示錯誤。不會被此方法編碼的字符: ! * ( )

2008年3月21日 星期五

在 eclipse 中撰寫 script,並利用 script 控制 eclipse platform

  1. 下載 eclipse
  2. Help→Software Updates→Available Software 中加入 Europa Discovery Site 的下載網址: http://download.eclipse.org/releases/europa/
  3. 如下圖,在 Other Tools 中選取安裝 Eclipse Monkey
  4. 安裝完後,重新啟動 eclipse,應該會在選單列中看到一個新的選單:Scripts

參考

2008年1月3日 星期四

JavaScript 的 Hashtable 實作

JavaScript 的 Hashtable 實作
/*******************************************************************************************
 * Object: Hashtable
 * Description: Implementation of hashtable
 * Author: Uzi Refaeli
 *******************************************************************************************/
//======================================= Properties ========================================
Hashtable.prototype.hash   = null;
Hashtable.prototype.keys  = null;
Hashtable.prototype.location = null;

/**
 * Hashtable - Constructor
 * Create a new Hashtable object.
 */
function Hashtable(){
 this.hash = new Array();
 this.keys = new Array();
 this.location = 0;
}

Hashtable.prototype.keySet = function(){
 return this.keys;
}

/**
 * put
 * Add new key
 * param: key - String, key name
 * param: value - Object, the object to insert
 */
Hashtable.prototype.put = function (key, value){
 if (value == null)
  return;

 if (this.hash[key] == null)
  this.keys[this.keys.length] = key;

 this.hash[key] = value;
}

/**
 * get
 * Return an element
 * param: key - String, key name
 * Return: object - The requested object
 */
Hashtable.prototype.get = function (key){
  return this.hash[key];
}

/**
 * remove
 * Remove an element
 * param: key - String, key name
 */
Hashtable.prototype.remove = function (key){
 for (var i = 0; i < this.keys.length; i++){
  //did we found our key?
  if (key == this.keys[i]){
   //remove it from the hash
   this.hash[this.keys[i]] = null;
   //and throw away the key...
   this.keys.splice(i ,1);
   return;
  }
 }
}

/**
 * size
 * Return: Number of elements in the hashtable
 */
Hashtable.prototype.size = function (){
    return this.keys.length;
}

/**
 * populateItems
 * Deprecated
 */
Hashtable.prototype.populateItems = function (){}

/**
 * next
 * Return: true if theres more items
 */
Hashtable.prototype.next = function (){
 if (++this.location < this.keys.length)
  return true;
 else
  return false;
}

/**
 * moveFirst
 * Move to the first item.
 */
Hashtable.prototype.moveFirst = function (){
 try {
  this.location = -1;
 } catch(e) {/*//do nothing here :-)*/}
}

/**
 * moveLast
 * Move to the last item.
 */
Hashtable.prototype.moveLast = function (){
 try {
  this.location = this.keys.length - 1;
 } catch(e) {/*//do nothing here :-)*/}
}

/**
 * getKey
 * Return: The value of item in the hash
 */
Hashtable.prototype.getKey = function (){
 try {
  return this.keys[this.location];
 } catch(e) {
  return null;
 }
}

/**
 * getValue
 * Return: The value of item in the hash
 */
Hashtable.prototype.getValue = function (){
 try {
  return this.hash[this.keys[this.location]];
 } catch(e) {
  return null;
 }
}

/**
 * getKey
 * Return: The first key contains the given value, or null if not found
 */
Hashtable.prototype.getKeyOfValue = function (value){
 for (var i = 0; i < this.keys.length; i++)
  if (this.hash[this.keys[i]] == value)
   return this.keys[i]
 return null;
}


/**
 * toString
 * Returns a string representation of this Hashtable object in the form of a set of entries,
 * enclosed in braces and separated by the ASCII characters ", " (comma and space).
 * Each entry is rendered as the key, an equals sign =, and the associated element,
 * where the toString method is used to convert the key and element to strings.
 * Return: a string representation of this hashtable.
 */
Hashtable.prototype.toString = function (){

 try {
  var s = new Array(this.keys.length);
  s[s.length] = "{";

  for (var i = 0; i < this.keys.length; i++){
   s[s.length] = this.keys[i];
   s[s.length] = "=";
   var v = this.hash[this.keys[i]];
   if (v)
    s[s.length] = v.toString();
   else
    s[s.length] = "null";

   if (i != this.keys.length-1)
    s[s.length] = ", ";
  }
 } catch(e) {
  //do nothing here :-)
 }finally{
  s[s.length] = "}";
 }

 return s.join("");
}

/**
 * add
 * Concatanates hashtable to another hashtable.
 */
Hashtable.prototype.add = function(ht){
 try {
  ht.moveFirst();
  while(ht.next()){
   var key = ht.getKey();
   //put the new value in both cases (exists or not).
   this.hash[key] = ht.getValue();
   //but if it is a new key also increase the key set
   if (this.get(key) != null){
    this.keys[this.keys.length] = key;
   }
  }
 } catch(e) {
  //do nothing here :-)
 } finally {
  return this;
 }
};

2007年4月13日 星期五

變數的宣告

JavaScript 的區域性變數通常是在函數中宣告,必須使用 var 宣告之;全域性變數則無須使用 var 宣告。

  • 區域性變數僅於所在函數中有效。
  • 全域性變數於該文件的所有 <script> 標籤中均有效。

範例:

<script>
var arms = 2   //arms是全域變數
legs = 2   //legs是全域變數
function init() {
 var heads = 1  //heads是區域變數
 eyes = heads * 2 //eyes是全域變數
}
init()
document.write("手臂有",arms,"隻<BR>")
document.write("腿有"+legs+"條<BR>")
document.write("頭有",heads,"個<BR>")
document.write("眼睛有"+eyes+"粒<BR>")
</script>

上例只會印出:

手臂有2隻
腿有2條

因為當執行到「頭有 1 個」的時候,JavaScript 會發生錯誤,而無法繼續執行下去!

  • 在函數外宣告的變數,無論是否使用保留字 var 宣告,均稱為全域變數。
  • 在函數內宣告的變數,如使用 var 宣告,則為區域變數;未使用 var 宣告,則仍視為全域變數。

function 定義

function 為結構化程式設計的基礎,定義的 function 代表一段副程式。利用關鍵字 function 宣告函式名稱。 function 函式名稱(引數) {敘述} 若有多個引數(argument),須用逗號隔開。引數的個數可以用以下變數來取得: 函數名稱.arguments.length 引數的值可以用以下變數取得: 函數名稱.arguments[x]

2006年12月26日 星期二

用 JavaScript 讀寫檔案

除非你開放存取權限,通常因為安全上的顧慮,JavaScript 並不能夠存取你電腦上的檔案系統。

這裡介紹兩種方式來利用 JavaScript 存取檔案系統:
  1. 使用 JavaScript extension(如從 JavaScript Editor 中執行)
  2. 使用微軟的 ActiveX 物件(只適用於 Internet Explorer)
使用 ActiveX 讓我們擁有很大的談行,但是有一些限制:
  • 你必須要有一個網頁來執行你的 JavaScript;
  • ActiveX 物件只被 IE 支援
當使用 JavaScript Editor 時,你需要選取選單中的「Build / Execute」,並載入下面介紹的語法的 script 檔即可。

範例 1(使用 JavaScript Editor 讀取檔案)

  1. 執行 JavaScript Editor
  2. 複製下列的程式碼Copy and paste the code below
  3. 將其儲存為 FileRead.js
  4. 從選單中選取「Build / Execute」

範例 2(使用 JavaScript Editor 列出目錄內的檔案)

  1. 執行 JavaScript Editor
  2. 複製下列的程式碼Copy and paste the code below
  3. 將其儲存為 FolderExample.js
  4. 從選單中選取「Build / Execute」

範例 3(使用 ActiveX 列出所有的磁碟機代號)

  1. 複製下面的程式碼
  2. 將檔案儲存為 DriveList.htm
  3. 在瀏覽器中檢視該頁面

範例 4(用 ActiveX 物件寫入檔案)

參考

Windows Script