memo.xight.org

日々のメモ

カテゴリ : JavaScript

6ページ目 / 全9ページ

JavaScript 超高速化スクリプト

Posted on | Tagged :

Summary

IT戦記で公開されているスクリプトをすべてのスクリプトよりも前の段階で読み込む．

ライセンスは「寂しがり屋ライセンス」．
IT戦記のエントリにコメントを書くことで使用可能．

Reference

IT戦記 - 複雑で重くなった JavaScript を超高速化する方法。
http://d.hatena.ne.jp/amachang/20060104/1136344836
IT戦記 - 複雑で重くなった JavaScript を超超ちょ〜〜〜高速化する方法。
http://d.hatena.ne.jp/amachang/20060114/1137243389

validate.js と setInterval を利用したフォームの入力チェック

Posted on | Tagged :

Summary

validate.js[2006-01-06-4] を利用してみた．
オートコンプリートからマウスで選択した直後に，validate結果が更新されない．

インフォアクシアのお問い合わせでは setInterval(func,ms) を利用して
定期的に入力フォームのチェックを行っている．

validate.jsでvalidate結果表示を更新するには，Behaviour.apply() を呼び出せばよい．

Source

以下の記述で500ms毎にvalidate結果を更新する．
<body onload="setInterval('Behaviour.apply();',500">
...
</body>


注意

無差別に全フォームのチェックを行ったり，極端にインターバルの時間を短くしたりすると，処理が重くなる．

インフォアクシアのお問い合わせでは，入力内容が変更された時のみ，
入力チェックを呼び出すようにしている．

処理の軽量化

prototype.js を利用しているため $F('elemId') でフォームの内容を呼び出している．
var nameTmp  = '';
var mailTmp  = '';

function isChangeForm(){
	var ret = false;
	if (nameTmp != $F('name') || mailTmp != $F('mail')){
		nameTmp = $F('name');
		mailTmp = $F('mail');
		ret = true;
	}
	return ret;
}

function updateForm(){
	if (isChangeForm()){
		Behaviour.apply();
	}
	return;
}


<body onload="setInterval('updateForm();',500">
...
</body>


Reference

インフォアクシア - お問い合わせ
https://www.infoaxia.co.jp/forms/com/contact/

DrawingCanvas.js - クロスブラウザなベクタグラフィック描画ライブラリ

Posted on | Tagged : ,

サンプル

http://jsgt.org/lib/vector/graph/sliderbar.htm

Reference

Days on the Moon - 2006-09-27 - ブラウザ上でお絵かき
http://nanto.asablo.jp/blog/2005/09/27/89628

DrawingCanvas.js
http://www.ne.jp/asahi/nanto/moon/2005/09/27/DrawingCanvas.js

Realtime validation - 入力値を動的にチェックするライブラリ

Posted on | Tagged : ,

Screen shot

左から 未入力時, 異常値入力時, 正常値入力時．
クリックして拡大クリックして拡大クリックして拡大

Usage

prototype.js とvalidate.js を自分のHTMLに読み込んで
下記の様に正規表現で表示するメッセージを指定するだけで利用可能．

Source - JavaScript

Validator.register({
	"#mail" : {
	"/^([^@\\s]+)@((?:[-a-z0-9]+\\.)+[a-z]{2,})$/": "OK",
	"/^$/": "必ず入力してください",
	"/.*/": "正しいメールアドレスを入力してください" 
	}
});


Source - HTML

<input name="mail" id="mail"/><span id="mail_msg"></span>


Reference

masuidrive - Realtime validation using Ajax
http://masuidrive.jp/validation/

via

masuidrive - 2006-01-05 - Realtime validation using Ajax
http://blog.masuidrive.jp/articles/2006/01/05/validation

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

Posted on | Tagged : ,

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

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

Posted on | Tagged :

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/

JavaScriptのデバッグ方法

Posted on | Tagged : ,

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

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

Posted on | Tagged : ,

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

Cheat Sheets Collection

Posted on | Tagged : , , , , , ,

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

JavaScriptの予約語

Posted on | Tagged :

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

JavaScript で Cookie を簡単に扱うには

Posted on | Tagged :

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

JavaScriptでCookieを扱う

Posted on | Tagged :

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

memoization - JavaScriptによるLispソースコードのブロック可視化

Posted on | Tagged : , ,

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