- Summary
effect.jsに以下の記述がある.
これはEffectの変化曲線を設定している.
デフォルトの変化曲線はsinカーブと同じ.
Effect.Transitions.sinoidal = function(pos) { return (-Math.cos(pos * Math.PI) / 2) + 0.5; }
new Effect.Move( 'elementId', { x: 100, y: 100, transition : function ( pos ) { return Math.pow( pos, 2 ); } });
- Summary
百聞は一見にしかず!
このメモと 情報視覚化 のページでさっそく利用してみた.
- How to use
1. lightbox.js を <head>内に記述.
<script type="text/javascript" src="lightbox.js"></script>
- 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() | 各テストケースメソッドが実行された後に呼び出される.各テストケースで毎回実行する終了処理等を記述する. |
| print(str) | strを表示 |
| clear() | 画面を消去 |



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; } } }
| ファイル名 | 説明 |
| common.js | Cookie,XMLHttpRequest,ブラウザ判定関連 |
| commontest.html | テスト用HTML |
| JavaScriptUnit.js | JavaScriptUnitの本体 |
| メソッド名 | 説明 |
| initTest() | テスト開始 |
| showResult() | テスト終了,結果表示 |
| assertEquals(テスト名,値1,値2) | 等しいかどうかのテスト |
| assertTrue(テスト名,値) | Trueを返すかどうかのテスト |
| assertFalse(テスト名,値) | Falseを返すかどうかのテスト |
| fail(テスト名) | テスト失敗する |
| debug(メッセージ) | デバッグメッセージを記録(テスト失敗時のみ赤字で表示される) |
<div id="dumparea"></div> <script src="objectdump.js"></script> <script> objectdump( window, document.getElementById( 'dumparea' ) ); </script>
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); }
- 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
- Summary
MigemoのJavaScriptによる実装.
- Reference
JavaScript/Migemo
http://www.oldriver.org/jsmigemo/
- Inner Reference
Migemo [2003-05-29-7]
C/Migemo [2004-11-29-9]
XUL/Migemo [2005-09-27-1]
- Summary
ブラウザ互換性に重きを置いたJavaScriptライブラリ.
- Reference
Cross-Browser.com
http://www.cross-browser.com/
XV: X Library Viewer
http://www.cross-browser.com/x/lib/view.php
- via
Trivial Tracks: Javascriptのクロスブラウザライブラリ
http://network.yasu21.net/diary/2005/12/javascript.html
- Summary
MochiKitを利用した,JavaScriptのインタプリタ.

- Reference
Interpreter - JavaScript Interactive Interpreter
http://rails2u.com/misc/prototype_interpreter/
- via
2nd life - 2005-12-18 - MochiKit
http://d.hatena.ne.jp/secondlife/20051218/1134914780
- Screencast
MochiKit - Screencast
http://mochikit.com/screencasts/MochiKit_Intro-1.html
- Reference
MochiKit - A lightweight Javascript library
http://mochikit.com/
- Reference
Perl Cheat Sheet
http://juerd.nl/site.plp/perlcheat
Perl Cheat Sheet
http://ali.as/devel/cheatsheet.html
Perl Cheat Sheet
http://goldenink.com/perl/perlcheat.html
PHP Cheat Sheet
http://www.ilovejackdaniels.com/php/php-cheat-sheet/
JavaScript Cheat Sheet
http://www.ilovejackdaniels.com/javascript/javascript-cheat-sheet/
CSS Cheat Sheet
http://www.ilovejackdaniels.com/css/css-cheat-sheet/
mod_rewrite Cheat Sheet
http://www.ilovejackdaniels.com/cheat-sheets/mod_rewrite-cheat-sheet/
Vim Commands Cheat Sheet
http://bullium.com/support/vim.html
Cheat Sheet Roundup
http://www.petefreitag.com/item/455.cfm
- 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
- Summary
JavaScriptでCookieを扱う[2005-12-19-5] でCookieの扱いづらさを体験.
そこで cookieクラスを用いる.
どうせなら,Cookieをparseして連想配列で返しても良い気がする.
- Reference
ウェブ木箱:cookie操作
http://www5c.biglobe.ne.jp/~horoau/js_library/cookie.html
クッキーの読み書き
http://www9.plala.or.jp/oyoyon/html/script/cookie.html
- Cookieの取得
var cookie = document.cookie;
document.cookie = 'var1=value1;var2=value2;var3=value3;';
document.cookie = 'var1=value1; expires=Tue, 1-Jan-2030 00:00:00 GMT;';
var xDay = new Date; xDay.setHours(xDay.getHours() + 1); // 有効期限を1時間後に設定 xDay = xDay.toGMTString(); //GMT形式の文字列に変換 document.cookie = "value0=" + + ";expires=" + xDay;
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 }
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; } }
- Summary
マウスオーバーした部分のブロックが色分けされてハイライト.

- Reference
memoization
http://community.schemewiki.org/?memoization
- via
/home/pochi/ChangeLog - JavaScript による Lisp ソースコードのブロック可視化
http://www.pochi.cc/~sasaki/chalow/2005-08-29-4.html
- 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
Under Translation of ECMA-262 3rd Edition
http://www2u.biglobe.ne.jp/~oz-07ams/prog/ecma262r3/
Standard ECMA-262 - ECMAScript Language Specification - 3rd edition (December 1999)
http://www.ecma-international.org/publications/standards/Ecma-262.htm
var hash = new Array(); hash['year'] = 2005; hash['month'] = 12; hash['date'] = 14; var str = ''; for ( key in hash ){ str += key + ":" + hash[key] + "\n"; } alert(str);
var hash = new Object();
- 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
JavaScript::Swell
- via
cl.pocari.org - 2005-11-27 - JavaScript のソースコードを綺麗に整形してくれる Perl モジュール JavaScript::Swell
http://cl.pocari.org/2005-11-27-3.html
YappoLogs: JavaScript::Swell - Web2.0 時代のHackモジュール
http://blog.yappo.jp/yappo/archives/000343.html
- 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
- Reference
prototype.js v1.3.1 の使い方
http://www.imgsrc.co.jp/~kuriyama/prototype/prototype.js.html
- via
cl.pocari.org - 2005-11-24 - prototype.js v1.3.1 の使い方
http://cl.pocari.org/2005-11-24-6.html