memo.xight.org

JavaScript

2006-10-08 Sun

ページをなめらかにスクロールさせるJavaScriptライブラリ

- Source

function backToTop() {
	var x1 = x2 = x3 = 0;
	var y1 = y2 = y3 = 0;
	if (document.documentElement) {
		x1 = document.documentElement.scrollLeft || 0;
		y1 = document.documentElement.scrollTop || 0;
	}
	if (document.body) {
		x2 = document.body.scrollLeft || 0;
		y2 = document.body.scrollTop || 0;
	}
	x3 = window.scrollX || 0;
	y3 = window.scrollY || 0;
	var x = Math.max(x1, Math.max(x2, x3));
	var y = Math.max(y1, Math.max(y2, y3));
	window.scrollTo(Math.floor(x / 2), Math.floor(y / 2));
	if (x > 0 || y > 0) {
		window.setTimeout("backToTop()", 25);
	}
}


<a href="#" onclick="backToTop(); return false">
	このページの先頭へ
</a>


- Reference
wg:A (slightly) better technique for "Back to Top" links.
http://web-graphics.com/mtarchive/001659.php

ZEROBASE BLOG - 2005-10-01 - [ajax] ページ内リンクでスムーススクロール
http://zerobase.jp/blog/entry-268.html

- via
SiMPLE*SiMPLE - 2006-09-27 - このページの先頭へ、をちょこっとおしゃれに
http://www.simplexsimple.com/archives/2006/09/post.html

caramel*vanilla - 2006-10-08 - ページ内リンクをわかりやすくするJavaScript
http://caramel-tea.com/2006/10/link_javascript/

2006-09-07 Thu

リンク先の拡張子に応じて自動的に画像を付加

- Summary
<a>タグの href属性の末尾が '.pdf' , '.doc' ,'.zip'の要素をピックアップ．
対象の<a>タグにclass名を付加する．

例では，pdfLink , docLink, zipLinkというclass名を使用．
各々のclassには，拡張子と対応する画像が指定してある．

- Source
リンク先がPDF，Wordファイル，Zipファイルの<a>タグに，class名を付ける．

function fileLinks() {
    var fileLink;
    if (document.getElementsByTagName('a')) {
        for (var i = 0; (fileLink = document.getElementsByTagName('a')[i]); i++) {
            if (fileLink.href.indexOf('.pdf') != -1) {
                fileLink.setAttribute('target', '_blank');
                fileLink.className = 'pdfLink';
            }
            if (fileLink.href.indexOf('.doc') != -1) {
                fileLink.setAttribute('target', '_blank');
                fileLink.className = 'docLink';
            }
            if (fileLink.href.indexOf('.zip') != -1) {
                fileLink.setAttribute('target', '_blank');
                fileLink.className = 'zipLink';
            }
        }
    }
}
window.onload = function() {
    fileLinks();
}


a:hover {
    text-decoration: none;
}
.pdfLink {
    padding-right: 19px;
    background: url(pdf.gif) no-repeat 100% .5em;
}
.docLink {
    padding-right: 19px;
    background: url(doc.gif) no-repeat 100% .5em;
}
.zipLink {
    padding-right: 17px;
    background: url(zip.gif) no-repeat 100% .5em;
}


- Reference
maratz.com - 2005-01-13 - PDF Links Labeling
http://www.maratz.com/blog/archives/2005/01/13/pdf-links-labeling/

maratz.com - PDF Link Labeling Example
http://webdesign.maratz.com/lab/pdf_links_labeling/

2006-09-07 Thu

set.js - JavaScriptでset

- Summary
Pythonのset型を，Arrayを拡張してJavaScriptで実装．
setは要素が重複しないリスト．

格納できる型は，string型, number型, boolean型．
pushを使って要素を追加すると重複してしまう．

- Reference
最速インターフェース研究会 - 2006-09-06 - JavaScriptでPythonのsetみたいなの
http://la.ma.la/blog/diary_200609062338.htm

Python ライブラリリファレンス - 2.3.7 set (集合) 型
http://www.python.jp/doc/release/lib/types-set.html

set data type for javascript
http://la.ma.la/misc/js/set/

http://la.ma.la/misc/js/set/compat.js
http://la.ma.la/misc/js/set/set.js

2006-09-07 Thu

benchmark.js - JavaScriptのベンチマークツール

- Summary
JavaScriptのベンチマークツール．
連想配列の関数を渡せば利用可能．
benchmark()しか汚染しない．
FireBugのコンソールに表示することも可能．

- 使用上の注意
1. 計測はグローバル領域で行なうこと．
2. 軽すぎる関数は正確な値が出ないことがある．

- Usage

benchmark({
  'test1': function() {
    // do something
  },
  'test2': function() {
    // do something
  },
  'test3': function() {
    // do something
  }
});


- Usage (FireBugを利用)
benchmark.at('firebug')({
  'test1': function() {
    // do something
  },
  'test2': function() {
    // do something
  },
  'test3': function() {
    // do something
  }
});

- Sample (http://sample.ecmascript.jp/benchmark.html)
benchmark({
  'getElementById': function() {
    document.getElementById('target');
  },
  'getElementsByTagName': function() {
    document.getElementsByTagName('target');
  },
  'Prototype\'s $ function': function() {
    $('target');
  }
});


- Reference
IT戦記 - ベンチマークツール公開
http://d.hatena.ne.jp/amachang/20060906/1157571938

Benchmark Demo
http://sample.ecmascript.jp/benchmark.html

ソース
http://sample.ecmascript.jp/benchmark.js

2006-08-30 Wed

JavaScriptで配列をシャッフルする方法リファクタリング

- Reference
最速インターフェース研究会 2006-08-30 - 実践JavaScriptで配列をシャッフルする方法リファクタリング
http://la.ma.la/blog/diary_200608300350.htm

hail2u.net - Weblog - 2006-08-28 - JavaScriptで配列をシャッフル
http://hail2u.net/blog/coding/shuffle-array-in-javascript.html

Flash非公式テクニカルノート - FN0212002 - 配列をランダムに並替えるメソッドを定義する[上級テクニック]
http://www.fumiononaka.com/TechNotes/Flash/FN0212002.html

Flash非公式テクニカルノート - FN0212003 - 配列を偏りなくランダムに並替える
http://www.fumiononaka.com/TechNotes/Flash/FN0212003.html

2006-08-25 Fri

CSS と JavaScriptを利用した訪問済み，未訪問サイトを分析

- Demo
Tapping into your browser history
http://icant.co.uk/sandbox/nickhistory.html

- Reference
techfoolery - 2006-08-21 - A New Way of Tracking Users' Browsing Habits
http://techfoolery.com/archives/2006/08/21/2042/

- via
phpspot開発日誌 - 2006-08-25 - CSS＆JavaScriptを使ってサイト利用者の訪問済みor未訪問サイトを分析
http://phpspot.org/blog/archives/2006/08/cssjavascriptor.html

2006-08-22 Tue

JavaScript Lint - JavaScriptの文法をチェックするソフトウェア

- Summary
JavaScriptの文法をチェックするソフトウェア．

- JavaScript Lint が検出する一般的な誤り
o 行末にセミコロンが無い行
o ifやfor，while等のないところにあるブレース("{}")など
o returnやthrow，continueやbreakによって，実行されることが無くなってしまっているコード
o break文が無いcase文
o 数値の前や後についている小数点
o A leading zero that turns a number into octal (base 8).(?)
o コメント内にあるコメント
o Ambiguity whether two adjacent lines are part of the same statement.
o 一つの文なのかそうじゃないのか分からない，繋がった文
o 何もしていない文

- JavaScript Lint が検出する，そこまで一般的でない誤り
o バーレンやアサインメント，コロンやカンマが前に来ていない正規表現
o セミコロンではなくカンマで区切られてしまっている文
o おかしな場所でのインクリメントやデクリメント
o void が使われている時
o "x+++y" や "x---y" の様に連続している "+" や "-"
o while や for ループの中で labeled ステートメントが使われいる部分
o ブレースが使われていないif, for, while

- Reference
JavaScript Lint
http://www.javascriptlint.com/

The Online Lint (JavaScript Lint Online版)
http://www.javascriptlint.com/online_lint.php

Out of Hanwell (JavaScript Lint開発者のblog)
http://www.outofhanwell.com/blog/

7korobi8oki.com - 2005-08-19 - "JavaScript Lint"でJavaScriptの文法を細かくチェックする
http://www.7korobi8oki.com/mt/archives/000080.html

2006-08-22 Tue

WebFX - グラフを描くためのJavaScriptライブラリ

- Sample

<html>
	<head>
		<script type="text/javascript" src="includes/iecanvas.js"></script>
		<script type="text/javascript" src="includes/chart.js"></script>
		<script type="text/javascript" src="includes/canvaschartpainter.js"></script>
		<link rel="stylesheet" type="text/css" media="screen" href="includes/canvaschart.css" />
	</head>
	<body>
		<div id="chart" class="chart" style="width: 400px; height: 200px;"></div>
	</body>
</html>


function draw() {
	var c = new Chart(document.getElementById('chart'));
	c.setDefaultType(CHART_AREA | CHART_STACKED);
	c.setGridDensity(5, 5);
	c.setVerticalRange(0, 100);
	c.setHorizontalLabels(['mon', 'tue', 'wed', 'thu', 'fri']);
	c.add('Spam',            '#4040FF', [ 5, 10, 20, 10, 40, 52, 68, 70, 70, 60]);
	c.add('Innocent',        '#8080FF', [ 8,  7, 12, 20, 24, 16, 36, 28, 28, 45]);
	c.add('Missed Spam',     '#A5A5FF', [ 8,  7, 12, 20, 24, 16, 36, 36, 18,  5]);
	c.add('False Positives', '#DEDEFF', [ 1,  2,  3,  2,  1,  4, 18, 12,  8,  7]);
	c.draw();
}
 
window.onload = function() {
	ieCanvasInit('includes/iecanvas.htc');
	draw(); 
};


- Reference
Chart Usage (WebFX)
http://webfx.eae.net/dhtml/chart/usage.html

- via
phpspot開発日誌 - 2006-08-22 - JavaScriptでグラフを描画出来るライブラリ『WebFX』
http://phpspot.org/blog/archives/2006/08/javascriptwebfx.html

2006-08-16 Wed

PlotKit - Canvas, VML, SVG でグラフを描画するためのJavaScriptライブラリ

- Summary
グラフを描画することに特化したJavaScriptライブラリ．

<table> 内の数値をデータとして扱うことも可能．

MochiKit を利用して開発されている．
Internet Explorer でも Canvas をエミュレートして，ベクターな画像が表示可能．

- グラフを扱うライブラリなど
XML/SWF Charts, PHP/SWF Charts[2005-03-10-6]

- クロスブラウザなベクタグラフィック描画ライブラリ
DrawingCanvas.js [2006-01-10-12]
wz_jsgraphics.js[2006-07-03-9]

- Reference
liquidx.net - PlotKit - Javascript Chart Plotting
http://www.liquidx.net/plotkit/

2006-08-09 Wed

incsearch.js - インクリメンタルサーチライブラリ

- Summary
JavaScriptによるインクリメンタルサーチを行うためのライブラリ
creative commons (帰属 2.1 日本) ライセンス．

- 利用例
Enjoy×Study - del.icio.us IncSearch - del.icio.usをインクリメンタルサーチ
http://www.enjoyxstudy.com/javascript/bookmarklet/delicious_incsearch/

Enjoy×Study - hatebu IncSearch - はてなブックマークをインクリメンタルサーチ
http://www.enjoyxstudy.com/javascript/bookmarklet/hatebu_incsearch/

- Reference
Enjoy×Study - incsearch.js - インクリメンタルサーチライブラリ
http://www.enjoyxstudy.com/javascript/incsearch/

Enjoy×Study - incsearch.jsを使って、del.icio.us direc.torのようなものを作ってみた
http://d.hatena.ne.jp/onozaty/20060319/p1

2006-08-09 Wed

glayer.js - グレーアウト表示させるためのJavaScriptライブラリ

- Summary
Lightbox などのように，背景全体をグレーアウト表示させるためのライブラリ
creative commons (帰属 2.1 日本) ライセンス．

- Reference
Enjoy×Study - glayer.js - グレーアウト表示ライブラリ
http://www.enjoyxstudy.com/javascript/glayer/

Enjoy×Study - 背景をグレーアウト表示するためのライブラリを作ってみました。
http://d.hatena.ne.jp/onozaty/20060807/p1

- via
phpspot開発日誌 - グレーアウト表示ライブラリ:glayer.js
http://phpspot.org/blog/archives/2006/08/glayerjs.html