Home > Javascript Archive

Javascript Archive

シャッフルシャッフル!

シャッフルっつうか、ようはリストからランダムにいくつかピックアップしたかったんです。Javascriptで。
5個から3個選ぶ場合、Perlなら


@list = (1, 2, 3, 4, 5);

for (0 .. 2) {
   $index = int(rand($#list));
   push(@selected, $list[index]);
   splice(@list, $index, 1);
}

ってやるんですけど(ひさびさに書いたんで間違ってるかも)、Javascriptだとどうやるんだろうと。
悩んだ挙句、下のようにやってました。


var list = new Array(1, 2, 3, 4, 5);

for (i = 0; i < 5; i++) {
   var index = Math.floor(Math.random()*list.length);
   swap(list, i, index);
}
var selected = list.slice(0, 3);

function swap(target, index_a, index_b) {
   b = target[index_b];
   target[index_b] = target[index_a];
   target[index_a] = b;
}

これでまあ、selectedにはランダムっぽいのが入ってくるんで一瞬満足してたんですが、よく考えたら等確率になってない。
listが3つくらいのときを考えれば簡単だけど、例えば1~3の数字からランダムに選んで
selected = [1, 2, 3]
になる確率は1/6だけど上記の方法で
list = [1, 2, 3] ⇒ selected = [1, 2, 3]
になる確率は4/27だ。
というわけでどうしたもんか、めんどくさいなーと思っていたら、Javascriptにもspliceあるじゃないか!(いつのバージョンからあるのかは知らんけど)
そういうわけで下記のように変更しました。


var list = new Array(1, 2, 3, 4, 5);
var selected = new Array(3);
for (i = 0; i < 3; i++) {
   selected[i] = list.splice(Math.floor(Math.random()*list.length), 1);
}

以上

IEのキャッシュ

IE7のキャッシュがすごい。
AJAX的な感じで動的に読み込んでるにもかかわらずキャッシュされて更新されない。
例えばhttp://red-treasure.com/monitor/
なんというめんどくさいブラウザ。
インターネットオプションの全般→閲覧の履歴で「Webサイトを表示する度に確認する」にチェックをつけたら更新されるようになった。

以上

jQueryでサウンド

先日、念願のビーフストロガノフを摂食いたしました。
某YAWARA!でその存在を知ってからいつか食べたい、いつか食べたいと熱望していたんですがとうとう夢がかないました。
その感想は・・・・・・・・これなんてビーフシチュー?
いつか本当のビーフストロガノフを満喫したい、ビーフストロガノフで溺れたいと思います。

そういうわけでJavascriptでサウンドを使うにはどうしたらいいのか。音出してえよ音。効果音とかBGMとか鳴らしてえよ。
prototype.jsでそういうプラグインあるらしいんでjQueryでもあるんじゃないの?と思って探してみたらありました。
http://groups.google.com/group/jquery-en/browse_thread/thread/3154fc7febd0993a
なんかまだ正式じゃないって言うか、もっと大きいプラグインの一部っぽいですが。
すごい簡単に使えます。


$.sound.play("hogehoge.wav");

一定時間で終了させるには


$.sound.play("hogehoge.wav", {timeout: 4000});

音楽ファイルのトラックのことはよく知らんのですが、トラックがある場合はトラックを指定して再生することもできるみたいです。
まあ、ファイルの先頭に使い方載ってるし、簡単だ。
サンプルページ:http://red-treasure.com/monitor/

以上

javascriptでjsonのパース

またjsonか。いちいちつまづくのでメモ。

例えばjQueryでajaxを以下のようにして使うことを考える。


function display(data) {
    // dataがきっとJSON!
}
$.get("hoge.php", null, display);

上記の場合、display()がコールバック関数での第一引数(data)にはhoge.phpの出力が入ってくる。
hoge.phpが例えば


[100,200,300]

って返すようになっているとき、display()でdataをJSONとして使うには


function display(data) {
   jsondata = eval(data);
   if (jsondata[0] == 100) {
      ~~~
      ~~~
   }
}

見たいな感じで使う。dataには文字列として入ってくるので


data = "[100,200,300]"

となってるから注意。
もしhoge.phpが


{"a":100,"b":200,"c":300}

な感じで連想配列になっている場合は、


jsondata = eval("("+data+")");

って感じで丸カッコを両端にくっつけた上でevalすればいいっぽい。

以上

Googleマップレット

一部で使ってくれている人も居るようなのでそろそろ白状すると、マップレット一個作ってみました。
集合場所決定ツール
地図上の複数の点の中心点を求める簡単なマップレットです。

だいぶ前のエントリで書きましたが、Google Developer Day 2007に参加し、「マップレットおもろそう~」と思ったので練習がてら「えいやっ!」と作ったやつです。それで満足してしまいそれっきりですが。
中心点が集合場所というわけですが、本当は電車での移動時間を使って同じ時間で集合できる場所を決定したかったりします。
GoogleトランジットがAPI化されればバージョン2として作成したいと思ってます。

ソースの変数とかコメントのつづりが間違ってたりするのであんま見ないでね(笑)。

以上

簡単ドラッグ可能領域

これ簡単。
ドラッグできる領域を作る。なに使うかはしらんけど。
EasyDrag


easydrag()って呼ぶだけ。

以上

jQueryトリビアルメモ3 idとJSON?

前に書いたような気がするけど、チラッと見ても出てこないからもう一度書いておく。

jQueryでHTMLのエレメントを取得する場合、IDの場合は


$("#id_name");

なわけですが、idに「:」(半角コロン)を含むとだめ。上手く動かない。


$("#id:name");

HTMLの仕様上は半角コロンを含んでもOKのようですが。
jQueryではどうもJSONぽく扱われるようで、コロンで展開されてしまいます。
また、CSSの仕様では半角コロンを含んだidのものは設定できないらしいです。


#id:name {
    width:100px;
}

上記は無理っぽいです(FireFoxでは無理だった)。
CSSの場合はピリオドもだめですね。

idの仕様

以上

特定の要素の上でマウスホイールのイベントを取る。(jQuery)

jQueryのマウスホイール・イベントを取ってくれるプラグイン
その要素の上でだけ取ってくれます。
つまり下のような感じ。黒いところでマウスホイールをくりくりすると数字が変わります。(はず)

ソースは下記。mousewheel()で追加するだけです。


<style>
#test_area {
	background-color: #000000;
	width: 100px;
	height: 15px;
	color: #ffffff;
}
</style>
<script type="text/javascript">
	var count = 0;
	$(function() {
		$('#test_area')
			.mousewheel(function(event, delta) {
				if (delta > 0)
					$('#test_area').html(--count);
				else if (delta < 0)
					$('#test_area').html(++count);
				return false; // prevent default
			});
		});
</script>
<div id="test_area">0</div>

以上

jQueryトリビアルメモ2 (prototype.jsとかと共存、jQuery.jsの複数回読み込みについて)

昨日のエントリーがあまりにもひどいので追記。

1.複数回読み込み
jQuery.jsの複数回の読み込み自体は別に問題ないようですね。


<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.shadow.js"></script>
<script type="text/javascript" src="jquery.js"></script>

なんでそんなことがしたかったのかというと、ブログのエントリごとに読み込みたいから。

2.prototype.jsとかとの共存
共存できるんでしょうか?よくは知らない。
ただ、$()の衝突を避けたい場合、


 jQuery.noConflict();

を実行しておけば、


$("div").fadeTo("fast", 0.5);

とする代わりに、


jQuery("div").fadeTo("fast", 0.5);

と書けます。で、prototype.jsを読み込んでいる場合、$()はprototypeの仕様で使えます。

あるいは


 var j = jQuery.noConflict();

としておけば、


j("div").fadeTo("fast", 0.5);

でOKです。

以上

ネタに困ったらjQuery

jquery.jsを同一ページで何回も読み込んだらどうなるんだろう?
というわけでやってみます。

大丈夫なようです。

以上

Home > Javascript Archive

Search
Feeds
Meta
 合計:018987
 今日:0126 昨日:0157

Return to page top