- 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
bytefx :: F.A.Q & API
http://www.devpro.it/bytefx/
MYCOMジャーナル - わずか3KB コードも1行でイカス! エフェクト - bytefx (1)
http://journal.mycom.co.jp/articles/2006/09/29/bytefx/
- Reference
Real Time Syntax Highlighting Code Editor JavaScript
http://www.txt.org/rtshjs/
- via
ブラウザ上で動作するWebエディタ作成Javascriptライブラリ:phpspot開発日誌
http://phpspot.org/blog/archives/2006/09/webjavascript.html
- 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; }
- 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
- Summary
JavaScriptのベンチマークツール.
連想配列の関数を渡せば利用可能.
benchmark()しか汚染しない.
FireBugのコンソールに表示することも可能.
- 使用上の注意
1. 計測はグローバル領域で行なうこと.
2. 軽すぎる関数は正確な値が出ないことがある.
- Usage
benchmark({ 'test1': function() { // do something }, 'test2': function() { // do something }, 'test3': function() { // do something } });
benchmark({ 'getElementById': function() { document.getElementById('target'); }, 'getElementsByTagName': function() { document.getElementsByTagName('target'); }, 'Prototype\'s $ function': function() { $('target'); } });
鷹の島 2006-07-17 - JavaScript ミニライブラリ
http://espion.just-size.jp/archives/06/198181103.html
- 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
- Reference
鷹の島 - 2006-08-25 - テキストエリアとかリサイズ可能にする JavaScript
http://espion.just-size.jp/archives/06/237175908.html
- 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
- Reference
Collection & Copy - JavaScriptソースを整形して表示するGreasemonkeyスクリプト、外部スクリプトのキャッシュ
http://d.hatena.ne.jp/brazil/20060820/1156022719
- 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
- 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
qooxdoo
http://qooxdoo.org/
MOONGIFT - qooxdoo
http://oss.moongift.jp/intro/i-2260.html
MOONGIFT - qooxdoo レビュー
http://oss.moongift.jp/review/i-2263.html
- Reference
Scriptio - A JavaScript Presentation Framework
http://www.scriptio.us/
Scriptio - Examples
http://www.scriptio.us/examples.php
- via
ユビキタスの街角 - 2006-07-14 - ボーっと読めるブログ
http://pitecan.com/blog/2006/07/blog-post.html
- 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/
- Reference
Days on the Moon - 2006-08-12 - JavaScript 1.7 の新機能
http://nanto.asablo.jp/blog/2006/08/12/481381
Hawk's Laboratory - 2006-08-13 - JavaScript 1.7の新機能
http://blog.hawklab.jp/item-84.html
- 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
- Summary
JavaScriptで入力補完を手軽に行うためのライブラリ
creative commons (帰属 2.1 日本) ライセンス.
- Reference
Enjoy×Study - suggest.js - 入力補完ライブラリ
http://www.enjoyxstudy.com/javascript/suggest/
- 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