ページを移動する前にメッセージを出すには、
ウインドウがアンロードされる前に発生するイベントonbeforeunloadを利用して
以下のようにかきます。

■ノーマルJavaScript
window.onbeforeunload = function(e) {
    e.returnValue = '任意のメッセージ';
}

■jQuery
$(window).on('beforeunload',function(e){
    return "任意のメッセージ";
});

しかし、
このままだとフォームから実行する際にもメッセージがでてしまいます。
回避するにはreturnValueまたはreturn を通らないようにイベント処理を書くか、
onbeforeunloadイベントを上書きします。

↓上書きする場合の例

input の場合
<input type='submit' value='送信' onclick='window.onbeforeunload=null'/>

a の場合
<a href='' onclick='window.onbeforeunload = null'></a>

jQueryだとこんな感じにもかけます。
$('a,:input').bind('click', function(){　window.onbeforeunload = function(e) {};);

Notesの場合結構な頻度であるあるですが、
jQuery を使用できない環境の場合どうやってかけばいいよと教えてくれるサイト

YOU MIGHT NOT NEED JQUERY
http://youmightnotneedjquery.com/

You Don't Need jQuery
http://qiita.com/tatesuke/items/b9548dd484b01b139b74

久しぶりにJavaScript触って躓いたのでメモ代わりに。

要素を取得して存在しているかを確認したいとします。

まずは、アイテムの取得をします。
var itm = document.getElementById('ID')　// ノーマルJavaScript
または
var itm = $('#ID') //jQuery
などなど。

次に本題の存在する場合に処理に入りたいときの処理の書き方です。

昔は下の書き方でいけたのですが、
if (itm){ ・・・処理・・・}
これでは今は何故か処理が通らない。

if ( ! itm ){ ・・・処理・・・}
で「存在しない」というのは昔も今もかわらないが、
イチイチ else で拾うのもなんか格好悪い。

そこでひらめきました。

if( !! itm ) { ・・・処理・・・}
と、! を2つづづけることで否定の否定としてやることで、
変数の中身(要素)が存在している場合に～としてやることができました。
IE6.ｘでも動いたので、おそらくすべてのブラウザで対応しています。

原因は、昔と比較すると、
ブラウザが厳密に判定するようになっているため、のようです。

前回　のがちょっと使いにくかったので、
回避をJavaScriptで行ってみたいと思います。

【 ↓　続きを表示する　↓ 】

【　続きを閉じる　】

この方法だとHTMLコードを汚すことはありませんので便利です。
submitボタンとtextareaのみEnterキーが有効にしています。
お好みでbuttonでもEnterキーを有効にしてもよいかもしれません。

// イベントを追加する
function addEvent(evt, func, cap) {
  if (this.addEventListener){
    this.addEventListener(evt, func, cap);
  } else if (this.attachEvent){
    this.attachEvent('on' + evt, func);
  } else {
    alert('ご使用の環境では、このスクリプトはご使用できないです');
  }
}
Object.prototype.addEvent = addEvent;
HTMLDocument.prototype.addEvent = addEvent;
Element.prototype.addEvent = addEvent;

// イベント発生元の要素を取得する
function getTarget() { return this.srcElement || this.target; }
Event.prototype.getTarget = getTarget;

// イベント発生時のキーコードを取得する
function getKeyCode() { return ( this.charCode ) ? this.charCode : (( this.which ) ? this.which : this.keyCode ) ; }
Event.prototype.getKeyCode = getKeyCode;

// エンター無効
function onEnter(evt){
  var keycode = evt.getKeyCode();
  var elem = evt.getTarget;
  if ( Number(keycode) == 13 ){
    //submitとtextarea以外はエンター無効
    if( elem.type !="submit" || elem.type !="textarea" ){ return false ; };
  }
}

// ウィンドウ ロードでイベントを登録します
addEvent('load',
  function (evt) {
    //すべてのタグを取得します
    var tags = document.getElementsByTagName("*");
    for( var cnt = 0 ; cnt <= tags.length ; cnt++ ){
      var elm = tags.item(cnt);
      var elmname = elm.tagName;
      //form タグのみとします(最初のgetElementsByTagNameで"form"としても同じです) 
      if( elmname.toLowerCase() == "form" ){
        elm.addEvent('submit', onEnter, false);
      }
    }
  },
  true
);

HTML5のcanvasという要素をつかいます。

↓解説サイト
Canvas(hTML5.jp)
http://www.html5.jp/canvas/index.html

canvas でグラフをつくるには、以下の手順になります。

1)まず、canvas要素をつくります。

<canvas id="a1" width="640" hight="480">
このコンテンツはお使いのブラウザでは表示できません
</canvas>

範囲（描画領域）= 幅（width属性）と高さ（height属性）を指定します。
非対応ブラウザ対応としてタグの中にメッセージを記載しておいてください。

2)つぎに、JavaScriptで要素に命令を与えます。

function drow(){
  //要素を取得します
  var canvas = document.getElementById('a1');
  if( ! canvas || ! canvas.getContent) { return false };
  var ctx = canvas.getConrext('2d');
  //ctxに対して命令を指定します
　・
　・
　・
}

idを使用して要素を取得します。
getConrectは'2d'以外指定できません。

基礎は以上、
実際はcanvasの要素（エレメント）生成からライブラリを使ったほうが楽で早いです＾＾；

今回はFlotr2の紹介。

↓本家
Flotr2
http://www.humblesoftware.com/flotr2

↓説明サイト
HTML5のcanvas機能で綺麗なグラフが作れる！「Flotr2」を試してみた(LIG)
http://liginc.co.jp/designer/archives/6023

↓developerWorks（アドレスが長いのでそのままリンク）
・XPagesでFlotr2を使ってグラフを書く（前編)
・XPagesでFlotr2を使ってグラフを書く（後編）

同じようなJavaScriptライブラリであるdojoを使用した方法は
次回以降で少し解説してみます。