Google AJAX APIs (2) - Using Google's AJAX APIs

Getting Started:
Google 有一系列的 AJAX APIs, 可以不需要寫 server side code, 直接使用在網頁上, 像是 Maps API, AJAX Search API, 還有 AJAX Feed API. 只需要在網頁的最上方 include 一個 <script> tag, 以及提供 Google API key 就可以使用了.

<script type="text/javascript" src="//www.google.com/jsapi?key=ABCDEFG"></script> Google AJAX APIs script 載入之後, 在頁面上使用 google.load 來指定要使用的模組. <script type="text/javascript"> google.load("maps", "2"); google.load("search", "1"); </script> 上面的範例載入了, 第2版 Maps API, 和第1版 AJAX Search API. 執行了 google.load 之後, 就可以在頁面上使用已經讀取過的模組了. 另外可以使用 google.setOnLoadCallback 去指定 document load 的處理函數. 請看底下範例: &lt;html> &lt;head> <script type="text/javascript" src="//www.google.com/jsapi?key=ABCDEFG"></script> <script type="text/javascript"> google.load("maps", "2"); google.load("search", "1"); // 當網頁讀取之後, 呼叫這個函式. function initialize() { var map = new google.maps.Map2(document.getElementById("map")); map.setCenter(new google.maps.LatLng(37.4419, -122.1419), 13); var searchControl = new google.search.SearchControl(); searchControl.addSearcher(new google.search.WebSearch()); searchControl.addSearcher(new google.search.NewsSearch()); searchControl.draw(document.getElementById("searchcontrol")); } google.setOnLoadCallback(initialize); </script> &lt;/head> &lt;body> <div id="map" style="width: 200px; height: 200px"></div> <div id="searchcontrol"></div> &lt;/body> &lt;/html>
Detailed Documentation:
google.load
Google AJAX APIs <script> 載入一個google.load 方法, 透過它來載入個別的 AJAX APIs, 它的寫法:

google.load(moduleName, moduleVersion, optionalSettings)

moduleName: 是 API 的名稱(例如: "maps", "search"). 模組名稱同時也是 API 的 namespace.
modileVersion: 指定 API 的版本. 這是一個必要的參數.
optionalSettings: 用來設定 API 其它選項, 例如, 你可以直接指定 Maps API 使用日文 UI. google.load("maps", "2", {"language" : "ja_JP"}); 或是指定不要使用 API 預設的 CSS: google.load("feeds", "1", {"nocss" : true}); 使用這些選項請參考各 API 的文件.

API Namespaces:
API 的模組名稱同時也是它的 namespace. 所以 "maps" 模組的方法, 全部在 google.maps 底下, 以前的 Google AJAX APIs 像是 Maps API 的 classes 和 常數, 使用 G 當作字首, 依照新的命名原則, class 不會再是 G 開頭了. 例如: GMap2 變成 google.maps.Map2 現有使用 G 當字首的 APIs 會繼續同時支援新舊兩種命名方式. 但是新的 APIs 只會支援 google.moduleName

API Versioning:
google.load 的第二個參數是 API 的版本. 每個 AJAX API 都有一個主要版本和修定版本. AJAX APIs 更新的非常頻繁, 為了保持穩定性, 所有的 AJAX Apis 都有一個有效的 stable version與 test version. 例如: 最新的2.24版, 前一個修定版本 2.23 會變成這個 API 的 stable version. 而 2.24 則會是 test version. 如果你要求 version 2的 API, 而且沒有指定修定版次, 你會自動的取得 stable version 2.23. 如果你需要 test version, 你可以明確的指定 version 2.24, 或是你可以使用特別的通配字元 2.x, 這個會指定到 API 的 test version 2.24. 直到有一個更新的版次出現.

Dynamic Loading:
AJAX API loader 可以動態的引用到網頁上. 如果你不想要網頁讀取的時候就使 API 生效, 這是非常有用的. 例如: 使用者在執行搜尋或是其他動作, 才執行 API.
這可以使用第三個參數 callback 來完成, 範例如下: function mapsLoaded() { var map = new google.maps.Map2(document.getElementById("map")); map.setCenter(new google.maps.LatLng(37.4419, -122.1419), 13); } function loadMaps() { google.load("maps", "2", {"callback" : mapsLoaded}); } 當你呼叫 loadMaps(), 他會載入 Maps API 並且在 API 準備好之後執行 mapsLoaded. 確定 DOM 準備好了之後, 當你呼叫 google.load 與 callback 參數, 它會試著在 DOM 加上一個 element. 隨著載入 Maps API 之後, 會立即執行所提供的 callback, 而且你不需要擔心同樣的 API 會載入多次的問題.

你也可已經由建立一個 script element 動態的載入 Google AJAX API loader, 同樣設定他的來源 URL "http://www.google.com/jsapi?...", 加上一個查詢參數 callback. 這個 callback 會在 loader 準備好之後呼叫. 範例如下: function mapsLoaded() { var map = new google.maps.Map2(document.getElementById("map")); map.setCenter(new google.maps.LatLng(37.4419, -122.1419), 13); } function loadMaps() { google.load("maps", "2", {"callback" : mapsLoaded}); } function initLoader() { var script = document.createElement("script"); script.src = "http://www.google.com/jsapi?key=ABCDEFG&callback=loadMaps"; script.type = "text/javascript"; document.getElementsByTagName("head")[0].appendChild(script); }

Google AJAX APIs (1) - What are the AJAX APIs?

Google's AJAX APIs 目前提供了六個專案, 可以輕鬆的在網頁上面, 用簡單的幾行 Javascript 在畫面上加上 map, dynamic search box, 或是 download feeds. 目前提供的六種產品有 :

• Google Maps API
• Google AJAX Search API
• Google AJAX Feed API
• Google Visualization API
• Google AJAX Language API
• AJAX Libraries API

Prettify - syntax highlight

mikesamuel 做的 syntax highlight 也是使用 Javascript & CSS 完成的 - google-code-prettify
支援的語言包含 C系列, Java, Python, Bash, SQL, HTML, XML, CSS, Javascript, 還有Makefiles. 而 Ruby, PHP, Awk, Perl 表現也還可以, 但是因為註解符號的關係無法使用在 Smalltalk, Lisp-like, CAML-like上.

使用方法 :
1. include .js & .css

&lt;link href="prettify.css" type="text/css" rel="stylesheet"/> <script type="text/javascript" src="prettify.js"></script> 2. 在 document.onload 的時候加上 prettyPrint(); 就可以了 <script type="text/javascript"> $(function() { prettyPrint(); }); </script> 3. 喔, 差點忘了說, 把要 highlight 的 syntax 放在 <pre class="prettyprint"> // 這裡 </pre> <code class="prettyprint"> // 或是這裡 </code> 範例 :
<pre class="prettyprint"/> (有框框):

#!/bin/bash

# Fibonacci numbers
# Writes an infinite series to stdout, one entry per line
function fib() {
  local a=1
  local b=1
  while true ; do
    echo $a
    local tmp=$a
    a=$(( $a + $b ))
    b=$tmp
  done
}

# output the 10th element of the series and halt
fib | head -10 | tail -1

<code class="prettyprint"/> (沒有框框): /** * nth element in the fibonacci series. * @param n >= 0 * @return the nth element, >= 0. */ function fib(n) { var a = 1, b = 1; var tmp; while (--n >= 0) { tmp = a; a += b; b = tmp; } return a; } document.write(fib(10));

Javascript Console

剛剛在右手邊加上了一個可以線上執行 Javascript 的功能, 臨時沒有找到類似的 libs, 所以做了一個超簡單的版本, 因為我有把 jQuery & prototype include 進來, 所以可以直接使用 jQuery 的 $jq(jQuery) 與 prototype 的 $ 來用.

Fix background image

將圖片固定在左上角:

<style type="text/css"> <!-- body { background-image : url(picture.gif); background-repeat : no-repeat; background-attachment : fixed; background-position :0% 0%; } --> </style> 修改 background-position :0% 0%; 就可以改變位置

Extend Pattern of jQuery

<script type="text/javascript"> (function($){ $.extend({ repeat: function(str, i) { if (isNaN(i) || i == 0) return ""; return str + $.repeat(str, i-1); } }) })(jQuery); </script> 使用這個 pattern 寫 jQuery plugin, 當與 prototype 同時使用的時候, 不會有衝突問題.

Recursive Pattern

<script type="text/javascript"> function repeat(str, i) { if (isNaN(i) || i <= 0) return ""; return str + repeat(str, i-1); } </script>

jQuery UI Datepicker

Marc Grabanski & Keith Wood 製作的 calendar script : jQuery UI Datepicker
目前版本 : jQuey UI Datepicker v3.4.3

安裝步驟:
1. 首先當然是最重要的 jQuery

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> 2. 接著include Datepicker 的 CSS & Javascript files <style type="text/css">@import url(ui.datepicker.css);</style> <script type="text/javascript" src="ui.datepicker.js"></script> 3. 如果需要的話, 可以設定 Datepicker 的 global default values $.datepicker.setDefaults({ showOn: 'both', buttonImageOnly: true, buttonImage: 'calendar.gif', buttonText: 'Calendar' }); 4. 呼叫 $.datepicker(); $('#date1').datepicker(); $('#date2').datepicker({defaultDate: +7}); 範例:
date1:
date2:
其他參數: showOn: 'both', // 指定何時顯示日曆, 'focus', 'button', 'both' 三種參數 buttonText: '打開日曆', // 日曆圖片的 alt buttonImage: 'calendar.gif', // 日曆圖片位置 buttonImageOnlt: true, // !!?? firstDay: 1, // 每週開始日期, 1~7 代表 一~日 changeMoneth: true, // 可否改變月份 changeYear: true, // 可否改變年份 minDate: new Date(2005, 1-1, 26), // 最小日期, 放入 Date, int, 與 String maxDate: '30d', // 最大日期, 文字參數 d/w/m/y for days/weeks/months/years dateFormat: 'yyyy/MM/dd', // 日期格式 rangeSelect: true, // 範圍選擇 numberOfMonths: 2, // 顯示多少個日曆, int, [int, int](矩陣方式顯示) stepMonths: 3, // 每次跳幾個月份 prevText: '&lt;&lt;Prev Months', // 配合跳多月份使用 nextText: 'Next Months>>', // 配合跳多月份使用 defaultDate: 2, // 預設日期 // include 語言包 <script type="text/javascript" src="ui.datepicker-zh-TW.js"></script> // inline config <input type="text" size="10" class="inlineConfig" onchange="showDay(this);" date:closeAtTop="false" date:firstDay="1" date:appendText="which is a"/>

jQuery Puzzle

可以輕鬆的將圖片製作成拼圖, 來源在這裡
範例:

Javascript: <script src="//wxy.googlecode.com/svn/trunk/blogger/jquery/jquery.puzzle.js" type="text/javascript"></script> <script language="javascript"> (function($) { $(".puzzle").puzzle(61); })(jQuery); </script> HTML: <div class="puzzle"><img src="Orz.jpg"/></div> 收工, 搞定!!

update1: 如果這個外掛想要與 prototype 使用, 要稍微修改一下 .js, 把裡面的 $ 改成 jQuery 或是包在(function($) {/* code here */})(jQuery); 裡面.

Pretty date

John Resig 製作的一個 format date script: pretty.js

使用方法很簡單, 只要這樣...

<script language="javascript"> prettyDate("2008-01-28T20:24:17Z") // => "2 hours ago" prettyDate("2008-01-27T22:24:17Z") // => "Yesterday" prettyDate("2008-01-26T22:24:17Z") // => "2 days ago" prettyDate("2008-01-14T22:24:17Z") // => "2 weeks ago" </script>

而且這個library實作起來也不麻煩..
不過我個人喜歡把 line: 8 改成 return time;
這樣取得 return value 的時候才不需要再次判斷, 是否有值.

<script language="javascript"> function prettyDate(time){ var date = new Date((time || "").replace(/-/g,"/").replace(/[TZ]/g," ")), diff = (((new Date()).getTime() - date.getTime()) / 1000), day_diff = Math.floor(diff / 86400); if ( isNaN(day_diff) || day_diff < 0 || day_diff >= 31 ) return; // 改成 return time; return day_diff == 0 && ( diff < 60 && "just now" || diff < 120 && "1 minute ago" || diff < 3600 && Math.floor( diff / 60 ) + " minutes ago" || diff < 7200 && "1 hour ago" || diff < 86400 && Math.floor( diff / 3600 ) + " hours ago") || day_diff == 1 && "Yesterday" || day_diff < 7 && day_diff + " days ago" || day_diff < 31 && Math.ceil( day_diff / 7 ) + " weeks ago"; } </script>

測試 syntaxhighlighter

<script language="javascript"> (function($) { $(function() { // syntaxhighlighter dp.SyntaxHighlighter.ClipboardSwf = 'clipboard.swf'; dp.SyntaxHighlighter.HighlightAll('code'); }); })(jQuery); </script> update1: Orz...本來把 css 檔案放在 Google Page Creator, 結果被封鎖起來了, 現在改放到 http://geocities.yahoo.com/ 這邊了.

update2: 嘿嘿解決了, 把所有的 static file 放到 Google Code 上面去, 不過用 svn 把檔案送上去之前, 要指定 mime-type, 設定方法參考這裡 http://code.google.com/p/flexlib/wiki/HowToBuild, 另外 http://dean.edwards.name/weblog/2007/03/google-it/ 的第 27 個 comments 也說明, 這樣做應該是可以的.