memo.xight.org

日々のメモ

カテゴリ : JavaScript

2ページ目 / 全9ページ

URLParser - JavaScriptのURLパーサークラス

Posted on | Tagged :

Summary

var p = new Poly9.URLParser('http://user:password@poly9.com/pathname?arguments=1#fragment');

/* OUT *
p.getHost() == 'poly9.com'
p.getProtocol() == 'http'
p.getPathname() == '/pathname'
p.getQuerystring() == 'arguments=1'
p.getFragment() == 'fragment'
p.getUsername() == 'user'
p.getPassword() == 'password'
*/

p.setURL('another.url.com');

/* OUT *
p.getHost() == 'another.url.com'
p.getProtocol() == ''
*/


Reference

URLParser - Public code - Trac
https://code.poly9.com/trac/wiki/URLParser

via

phpspot開発日誌 - 2006-11-27 - JavaScriptから使える便利なURLパーサークラス「URLParser」
http://phpspot.org/blog/archives/2006/11/javascripturlur.html

JavaScriptist - javascript/ajax/サンプル/入門/リファレンス/ライブラリ

Posted on | Tagged :

Reference

JavaScriptist - javascript/ajax/サンプル/入門/リファレンス/ライブラリ
http://javascriptist.net/

phpspot開発日誌 - 2006-11-27 - JavaScript入門＆応用＆リファレンス＆ライブラリ紹介サイト「JavaScriptist」を公開
http://phpspot.org/blog/archives/2006/11/javascriptjavas.html

JavaScriptファイルを圧縮して読み込ませる

Posted on | Tagged : , ,

Summary

JavaScriptファイル自体を gzip で圧縮して読み込ませれば良い．
<script type="text/javascript" src="prototype.js.gz"></script>


圧縮されたJavaScriptがSafariで読み込めない問題

圧縮したJavaScriptファイルの拡張子を .jgz とし，
mod_rewriteで .jgz へのアクセスを .js にリダイレクト．

RewriteEngine on
RewriteCond %{HTTP_USER_AGENT} ".*Safari.*" [OR]
RewriteCond %{HTTP:Accept-Encoding} !gzip
RewriteRule (.*)\.jgz$ $1\.js [L]

AddType "text/javascript;charset=UTF-8" .jgz
AddEncoding gzip .jgz


Reference

亜細亜の蛾 - 2006-11-16 - prototype.jsを10KBにする方法
http://asiamoth.com/mt/archives/2006-11/16_2331.php

こぶたのラッパ : 世界の片隅で.jgzと言ってみる
http://smil.exblog.jp/4650470/

Link Indicator - 外部リンクの判別とページ内リンクを視覚的に表現するJavaScriptライブラリ

Posted on | Tagged :

Summary

アンカーに付けられたtarget属性の判別とページ内リンクを視覚的に明示する仕組みを提供する補助スクリプト


Reference

Link Indicator
http://serennz.cool.ne.jp/sb/sp/linkindicator/index_ja.html

via

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

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

Posted on | Tagged :

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/

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

Posted on | Tagged : ,

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/

set.js - JavaScriptでset

Posted on | Tagged :

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

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

Posted on | Tagged :

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

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

Posted on | Tagged : ,

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

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

Posted on | Tagged : ,

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

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

Posted on | Tagged : ,

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

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

Posted on | Tagged :

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