memo.xight.org

JavaScript

2006-01-06 Fri

Effect.Transitions - script.aculo.usのEffectの変化曲線を変更する

- Summary
effect.jsに以下の記述がある.
これはEffectの変化曲線を設定している.
デフォルトの変化曲線はsinカーブと同じ.

Effect.Transitions.sinoidal = function(pos) {
	return (-Math.cos(pos * Math.PI) / 2) + 0.5;
}


Effectのコンストラクタでオプションにtransitionをセットすることで,
変化曲線を変更可能.
new Effect.Move( 'elementId', {
		x: 100,
		y: 100,
		transition : function ( pos ) {
		return Math.pow( pos, 2 );
	}
});


- Sample
Sample

- Reference
d.aql - scriptaculousのトランジション
http://d.hatena.ne.jp/aql/20051123/1132725850

2006-01-06 Fri

Lightbox JS - Web2.0ライクな画像サムネイル生成

- Summary
百聞は一見にしかず!
このメモと 情報視覚化 のページでさっそく利用してみた.

- How to use
1. lightbox.js を <head>内に記述.

<script type="text/javascript" src="lightbox.js"></script>


2. <a>タグに rel="lightbox" をつける.
<a href="path/to/image.jpg" rel="lightbox">
  <img src="path/to/image-thumbnail.jpg" />
</a>


- Reference
Lightbox JS
http://www.huddletogether.com/projects/lightbox/
- via
OpenStratus Archive - 2006-01-02
http://openstratus.com/article/52/lightboxjs-web20/

2006-01-04 Wed

JavaScriptのデバッグ方法

- Venkman JavaScript Debugger
FirefoxのExtention.
クリックして拡大

- JSUnit

メソッド 内容
assert([コメント], booleanValue) assertTrueと同じ
assertTrue([コメント], booleanValue) booleanValueがtrueか
assertFalse([コメント], booleanValue) booleanValueがfalseか
assertEquals([コメント], value1, value2) value1 == value2か
assertNotEquals([コメント], value1, value2) value1 != value2か
assertNull([コメント], value) value == nullか
assertNotNull([コメント], value) value != nullか
assertUndefined([コメント], value) value == undefinedか
assertNotUndefined([コメント], value) value != undefinedか
assertNaN([コメント], value) value == NaNか
assertNotNaN([コメント], value) value != NaNか
fail(コメント) 必ずエラーにする

特殊なメソッド
setUp() 各テストケースメソッドが実行される前に呼び出される.各テストケースで毎回実行する初期化処理等を記述する.
tearDown() 各テストケースメソッドが実行された後に呼び出される.各テストケースで毎回実行する終了処理等を記述する.

- JavaScript Shell と Web Development Bookmarklets
FirefoxならBookmarkletから起動可能!
ものすごい大量にあるので一部紹介.
CSSを動的に切り替えるBookmarkletもある.

  Built-in function (抜粋)
print(str) strを表示
clear() 画面を消去

  - JavaScript Shell (Bookmarklet)
クリックして拡大

  - JavaScript Development Environment (Bookmarklet)
クリックして拡大

- JavaScript Code Improver
コード整形ツール.
クリックして拡大
  - 使用前
var i=0,s="",k=0;function foo(){for(j=0;j<10;j++){for(i=0;i<10;i++){s="string1";
k=Math.floor(Math.random()*10);}for(i=20;i>9;i--){s="string2";k=i;}}}


  - 使用後
var i=0,s="",k=0;
function foo()
{
	for(j=0;j<10;j++)
	{
		for(i=0;i<10;i++)
		{
			s="string1";
			k=Math.floor(Math.random()*10);
		}
		for(i=20;i>9;i--)
		{
			s="string2";
			k=i;
		}
	}
}


- JavaScriptUnit
functionテストに.
ファイル名 説明
common.js Cookie,XMLHttpRequest,ブラウザ判定関連
commontest.html テスト用HTML
JavaScriptUnit.js JavaScriptUnitの本体

メソッド名 説明
initTest() テスト開始
showResult() テスト終了,結果表示
assertEquals(テスト名,値1,値2) 等しいかどうかのテスト
assertTrue(テスト名,値) Trueを返すかどうかのテスト
assertFalse(テスト名,値) Falseを返すかどうかのテスト
fail(テスト名) テスト失敗する
debug(メッセージ) デバッグメッセージを記録(テスト失敗時のみ赤字で表示される)

- Web Developer
実行環境のコントロールに.

- objectdump
オブジェクトを見やすい形に表示する.
<div id="dumparea"></div>
<script src="objectdump.js"></script>
<script>
objectdump( window, document.getElementById( 'dumparea' ) );
</script>


- FireBug
Firefox で JavaScript を Debug するためのエクステンション

- DebugWindow


- print_r(obj)
ウノウラボより.
function print_r(obj) {
    var count_obj = 0;
    function _output(str) {
        document.writeln(str + "<br/>");
    }
 
    function _print_r(obj, name, level) {
        var s = "";
        if (obj == undefined || level > 4) return;
        for (var i = 0; i < level; i++) { s += " | "; }
        s += " - " + name + ":" + typeof(obj) + "=" + obj;
        _output(s);
        if (name == "document" || typeof(obj) != "object") return;
        for ( key in obj ) {
           if (count_obj++ > 150) return;
           _print_r(obj[key], key, level + 1);
        }
    }
    _print_r(obj, "*", 0);
}


- Reference
Venkman JavaScript Debugger - Development Page
http://www.hacksrus.com/~ginda/venkman/
Getahead - Venkman for Firefox 1.5
http://getahead.ltd.uk/ajax/venkman

JsUnit
http://www.edwardh.com/jsunit/introduction.html
SourceForge - JsUnit
http://sourceforge.net/projects/jsunit/

JavaScript Shell
http://www.squarefree.com/shell/

Web Development Bookmarklets
http://www.squarefree.com/bookmarklets/webdevel.html

JavaScript Code Improver
http://www.jcay.com/javascript-code-improver.html

侍ズム: JavaScript のテストのコツ
http://yusuke.homeip.net/diary/archives/000175.html

Firefox Extensions - Web Developer
https://addons.mozilla.org/extensions/moreinfo.php?id=60

nazoking - nazono.objectdump
http://nazo.yi.org/nazonojs/?name=objectdump
nazoking - nazono.objectdump - Overview
http://nazo.yi.org/nazonojs/js_docs_out/overview-summary-objectdump.js

JoeHewitt.com - FireBug
http://www.joehewitt.com/software/firebug/
Mozilla Update :: Extensions -- More Info:FireBug - All Releases
https://addons.mozilla.org/extensions/moreinfo.php?id=1843&application=firefox

eto.com/d - 0503 - DebugWindow
http://eto.com/d/0503.html#DebugWindow

- Reference 追記[2006-11-24]
ウノウラボ Unoh Labs: JavaScriptのバグを退治する3つの手法
http://labs.unoh.net/2006/11/javascript.html

- via
はてな - JavaScriptプログラマの方にお聞きします…
http://www.hatena.ne.jp/1123227040

nothing but trouble - JavaScript開発のお供に。
http://d.hatena.ne.jp/send/20060120/p2

- via 追記 [2006-08-24]
phpspot開発日誌 - 2006-08-24 - JavaScriptデバッグツール集
http://phpspot.org/blog/archives/2006/08/javascript_24.html

2005-12-31 Sat

JSDoc - JavaScriptでJavaDoc風ドキュメントを

- Summary
JavaScriptのJavaDoc風ドキュメント生成ソフトウェア.
PerlとHTML::Templateが必要.
出力形式は,HTML,XML,XMI(UMLのXML形式).

- Reference
JSDoc Homepage - JavaScript Documentation Tool
http://jsdoc.sourceforge.net/

HTML::Template

- via
MOONGIFT - JSDoc
http://oss.moongift.jp/intro/i-935.html

MOONGIFT - JSDoc レビュー - オープンソースによるIT戦略支援 -
http://oss.moongift.jp/review/i-960.html

2005-12-26 Mon

Cheat Sheets Collection

2005-12-22 Thu

JavaScriptの予約語

- List
abstract
boolean
break
byte
case
catch
char
class
comment
const
continue
debugger
default
delete
do
double
else
enum
export
extends
false
final
finally
float
for
function
goto
if
implements
import
in
instanceof
int
interface
label
long
native
new
null
package
private
protected
public
return
short
static
super
switch
synchronized
this
throw
throws
transient
true
try
typeof
var
void
volatile
while
with

- 備考
JavaScript1.3の初期バージョンから,comment, debugger, enum, export, label が追加
ECMA-262でvolatileが追加され,commentは削除されたため,それ以後のJavaScript1.3はこれに準拠し変更されている.
false, null, true はECMA-262では予約語とされていないが,NetscapeもMicrosoftも予約語としている.

startという名前の関数をイベントから使用するとIE系でエラーが出る.
colorという名前の関数を使用するとエラーが出る.
start, color とも予約語ではないが,使用は避けた方が良い.

- Reference
SMART! ウェブ講座 - JavaScript - 予約語
http://www.rfs.jp/sb/javascript/01/04.html
JavaScript laboratory - 予約語一覧
http://www004.upp.so-net.ne.jp/sekiuchi/js/help/keywords.html

2005-12-22 Thu

2005-12-19 Mon

JavaScriptでCookieを扱う

- Cookieの取得

var cookie = document.cookie;


- Cookieの設定
document.cookie = 'var1=value1;var2=value2;var3=value3;';


- Cookieの有効期限を指定する
document.cookie = 'var1=value1; expires=Tue, 1-Jan-2030 00:00:00 GMT;';


- Cookieの書き込み (有効期限を1時間後に指定)
var xDay = new Date;
xDay.setHours(xDay.getHours() + 1); // 有効期限を1時間後に設定
xDay = xDay.toGMTString();          //GMT形式の文字列に変換
document.cookie = "value0=" + + ";expires=" + xDay;


- Cookieの読み込み
function loadCookie(arg){ //argはデータ識別文字列
	if(arg){
		var cookieData = document.cookie + ";"; //文字列の最後に「;」を追加
		var startPoint1 = cookieData.indexOf(arg);
		var startPoint2 = cookieData.indexOf("=",startPoint1);
		var endPoint = cookieData.indexOf(";",startPoint1);
		if(startPoint2 < endPoint && startPoint1 > -1){
			cookieData = cookieData.substring(startPoint2,endPoint);
			cookieData = cookieData;
			return cookieData;
		}
	}
	return false
}


- Cookieの削除
有効期限を過去に設定することでCookieは削除される.
function deleteCookie(arg){ //argはデータ識別文字列
	if(arg){
		var yDay = new Date;
		yDay.setHours(yDay.getHours() - 1); // 有効期限を1時間前に設定
		yDay = yDay.toGMTString();          //GMT形式の文字列に変換
		document.cookie = arg + "=xxx" + ";expires=" + yDay;
	}
}


- Reference
とほほのCookie入門
http://www.tohoho-web.com/wwwcook.htm#CookieWrite
From DFJ - DHTML/JavaScript Index - Cookieの利用
http://www.fromdfj.net/javascript/cookie.html
クッキーの読み書き
http://www9.plala.or.jp/oyoyon/html/script/cookie.html

2005-12-16 Fri

JavaScriptでビルトインオブジェクトハック (Dateクラス編)

- Summary
最速インターフェース研究会の「実践JavaScriptリファクタリング」に触発されてDateクラスに手を加えてみた.

IEとMozilla系でgetYear(),setYear()の仕様が異なるため,
getFullYear(),setFullYear()を使うことで,年の扱いを4ケタで統一.

- Source

/*
連想配列を返す
return Array
*/
Date.prototype.toHashArray = function(){
	var dateArray = new Object();
	dateArray["year"]	= this.getFullYear();
	dateArray["month"]	= this.getMonth();
	dateArray["date"]	= this.getDate();
	dateArray["day"]	= this.getDay();
	dateArray["hour"]	= this.getHours();
	dateArray["minute"]	= this.getMinutes();
	dateArray["second"]	= this.getSeconds();
 
	return dateArray;
}
 
/*
その年が閏年かどうか
return boolean
*/
Date.prototype.isLeapYear = function(){
	var year = this.getFullYear();
	return (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0));
}
 
/*
その日が引数と同じ日付かどうか
return boolean
*/
Date.prototype.isSameDate = function(d){
	var arr		= this.toHashArray();
	var arr2	= d.toHashArray();
 
	return ((arr["year"] == arr2["year"]) && (arr["month"] == arr2["month"]) && (arr["date"] == arr2["date"]));
}
/*
その時間が引数と同じ時間かどうか
return boolean
*/
Date.prototype.isSameTime = function(d){
	var arr		= this.toHashArray();
	var arr2	= d.toHashArray();
 
	return ((arr["hour"] == arr2["hour"]) && (arr["minute"] == arr2["minute"]) && (arr["second"] == arr2["second"]));
}
/*
その時間が引数と同じ日付、同じ時間かどうか
return boolean
*/
Date.prototype.equals = function(d){
	return (this.isSameDate(d) && this.isSameTime(d));
}
 
/*
その日が今日と同じ日付かどうか
return boolean
*/
Date.prototype.isToday = function(){
	return this.isSameDate(new Date());
}
 
/*
時間を 00:00:00に設定
*/
Date.prototype.resetTime = function(){
	this.setHours(0);
	this.setMinutes(0);
	this.setSeconds(0);
 
	return;
}
 
/*
その月の日数を取得
return int
*/
Date.prototype.getDayNumber = function(){
	var year = this.getFullYear();
	var month = this.getMonth();
 
	var dayNumber = 
		(month == 0 || month == 2 || month == 4 || month == 6 || month == 7 || month == 9 || month == 11) ? 31 :
		(month == 3 || month == 5 || month == 8 || month == 10) ? 30 :
		(this.isLeapYear()) ? 29 :
		28;
 
	return dayNumber;
}
 
/*
その月の週の数を取得
return int
*/
Date.prototype.getWeekNumber = function(){
	var dayNumber = this.getDayNumber();
	var weekOfTheDay = this.getDay();
 
	var weekNumber = Math.ceil((weekOfTheDay + dayNumber) / 7);
 
	return weekNumber;
}
 
/*
閏年を考慮して前の月のDateを返す
(3月29日,30日,31日の前の月は2月28日 or 29日)
return Date
*/
Date.prototype.getPreviousMonth = function(){
	var year      = this.getFullYear();
	var month     = this.getMonth();
	var date      = this.getDate();
 
	var prevYear  = year;
	var prevMonth = month;
	var prevDate  = date;
 
	if (month == 0){
		prevMonth = 11;
		prevYear--;
	} else if (month == 1 || date > 28){
		prevDate = (this.isLeapYear()) ? 29 : 28;
		prevMonth--;
	} else {
		prevMonth--;
	}
	var retDate = new Date(prevYear,prevMonth,prevDate);
	retDate.resetTime();
 
	return retDate;
}
 
/*
閏年を考慮して次の月のDateを返す
(1月29日,30日,31日の次の月は2月28日 or 29日)
return Date
*/
Date.prototype.getNextMonth = function(){
	var year      = this.getFullYear();
	var month     = this.getMonth();
	var date      = this.getDate();
 
	var nextYear  = year;
	var nextMonth = month;
	var nextDate  = date;
 
	if (month == 11){
		nextMonth = 0;
		nextYear++;
	} else if (month == 0 || date > 28){
		nextDate = (this.isLeapYear()) ? 29 : 28;
		nextMonth++;
	} else {
		nextMonth++;
	}
	var retDate = new Date(nextYear,nextMonth,nextDate);
	retDate.resetTime();
 
	return retDate;
}
 
/*
その月の最初の日付を返す。時間は00:00:00にリセット。
return Date
*/
Date.prototype.getFirstDate = function(){
	var year      = this.getFullYear();
	var month     = this.getMonth();
 
	var retDate = new Date(year,month,1);
	retDate.resetTime();
 
	return retDate;
}
 
/*
読みやすい形式で日付の文字列を出力
return String
*/
Date.prototype.toReadableString = function(){
	var dateArray = this.toHashArray();
	var displayMonth = dateArray["month"] + 1;
 
	var ret = '';
	ret += dateArray["year"] + '/' + displayMonth + '/' + dateArray["date"];
	return ret;
}
 
/*
読みやすい形式で日付と時刻の文字列を出力
return String;
*/
Date.prototype.toLongReadableString = function(){
	var dateArray = this.toHashArray();
	var day		= this.getWeekOfTheDay();
 
	var ret = '';
	ret += this.toReadableString();
	ret += '(' + day + ')' + dateArray["hour"] + ':' + dateArray["minute"] + ':' + dateArray["second"];
 
	return ret;
}
 
/*
読みやすい曜日を返す
return String;
*/
Date.prototype.getWeekOfTheDay = function(){
	var day = this.getDay();
	var ret = this.weekOfTheDay[day];
	return ret;
}
 
/*
読みやすい曜日表示の設定
引数は "7つの要素を持つArray"
return boolean;
*/
Date.prototype.setWeekOfTheDayArray = function(arr){
	var state = (arr.length == 7) ? true : false;
	if (state){
		this.weekOfTheDay = arr;
	}
 
	return state;
}
 
Date.prototype.weekOfTheDay = new Array("日","月","火","水","木","金","土");
// Date.prototype.weekOfTheDay = new Array("Sun","Mon","Tue","Wed","Thu","Fri","Sat");


- Reference
最速インターフェース研究会 - 2005-10-06 - 実践JavaScriptリファクタリング
http://la.ma.la/blog/diary_200510060733.htm
最速インターフェース研究会 - 2005-10-06 - 実践JavaScriptリファクタリング、その2
http://la.ma.la/blog/diary_200510062243.htm

2005-12-14 Wed

マウスホイールイベントの登録

- Summary
prototype.js を読み込んだ後に wheel_event.js を読み込むと,
mousewheelイベントを扱えるようになる.
イベントハンドラの第二引数にホイールカウント(1 or -1)が入ってくる.

Event.observe(element, 'mousewheel', function(element, wheel_count){
	wheel_count == 1 ? alert('wheel up') : alert('wheel down');
});


- ブラウザのホイールを無効にする
event.preventDefault ? event.preventDefault() : (event.returnValue = false);


- Reference
mouse wheel event demo
http://rails2u.com/misc/wheel_event/
- via
2nd life - 2005-12-08 - prototype.js with mousehweel event
http://d.hatena.ne.jp/secondlife/20051208/1134020332

2005-11-25 Fri

text-hatena.jsを利用したはてな記法ワープロ

- Summary
Text::HatenaのJavaScript移植版.

- Reference
はてな記法ワープロ
http://tech.nitoyon.com/javascript/application/texthatena/wordpro/

text-hatena.js 公開 [tech.nitoyon.com]
http://tech.nitoyon.com/javascript/application/texthatena/download.html

Text::Hatena

- via
cl.pocari.org - 2005-11-23 - Text::Hatena の JavaScript 移行版 text-hatena.js
http://cl.pocari.org/2005-11-23-5.html