随筆prototype

新しくウィンドウを開いてそこに何かを表示する系の Bookmarklet を作ろうと思ったけど、JavaScript のそういう機能はあまり使わないので覚えられない。そこでちょっとメモしてみることにした。

……と思ったけど、自分で整理する前に、以下の 4つのページでだいたい事が足りるような。

・http://developer.mozilla.org/ja/docs/DOM:window.open
・http://developer.mozilla.org/ja/docs/DOM:document.open
・http://developer.mozilla.org/ja/docs/DOM:document.write
・http://developer.mozilla.org/ja/docs/DOM:document.close

そして以下は自分用のまとめ。

var WOR;//WindowObjectReference
WOR = window.open('', '適切な名前');
//WOR.closed に、ウィンドウが既に閉じられたかどうかの真偽値が入っている。
var d = WOR.document;
d.open();
d.write('hogehoge');
d.close();//ブラウザにページの読み込みの終了を伝える

window.open の第一引数には URL を指定するんだけど、空文字列の場合は about:blank がロードされる。

window.open の第二引数には名前を指定するんだけど、この名前はリンクのターゲット (HTML の A要素の target属性で指定するやつ)に使われる。'_blank' という特別な名前が使える。

window.open の第三引数で、オプションを指定できる。私はとりあえず何も指定しなくていいやと思うので、省略。

document.write() するときに、document.open() されていないと、自動的に document.open() されるらしい。ただし HTML文書中に直接埋め込まれている document.write() はのぞく。

Firefox で about:config を開いて、javascript.options.strict を true にすると、JavaScript のエラーだけではなく、警告もエラーコンソールに出してくれることを知る。記事の下の画像は、エラーコンソールのスクリーンショットです。

私が書いたスクリプトには function hogehoge does not always return a value という警告が。いつもキッチリ return するようにしないと警告されるのは、なぜ？警告というのは、不都合な事態にならないように前もって注意を与えておくことなので、おそらく、function で戻り値を返さないと不都合な事態が起こりうるんですよね。一体それは何？

return; でも警告される。return true; と書けば警告されない。return undefined; と書いても警告されない。return; と return undefined; は何が違うの？

JavaScriptで何かを作って、万が一それを MacIE5 に対応させたいのであれば、気をつける点。

・Array.push 未サポート。※1
・createElement() で要素を生成するとブラウザの動作が不安定になる場合もある。※2
・Function.call 未サポート。
・addEventListener() 未サポート。window.attachEvent と document.attachEvent はあるらしい。※3
・MacIE5 の Jscript のバージョンは 5.0 なので 5.5 以降に導入された機能は使えない(※4)。JScript 言語の機能と、各機能が最初に導入されたバージョンの一覧の表は
http://msdn2.microsoft.com/ja-jp/library/2z6exc9e(VS.80).aspx
にある。

※1
・http://www.tanaka.tc/archives/000040.html
さらに、push だけではないみたい。
・http://havana.2-d.jp/diary/?date=20050902

※2
・http://cssbug.at.infoseek.co.jp/detail/macie/b040.html

※3
・http://d.hatena.ne.jp/t-uchima/20051003/p1

※4
・http://aligach.net/diary/20060606.html

http://developer.mozilla.org/ja/docs/Core_JavaScript_1.5_Guide:Predefined_Core_Objects:Math_Object

＞他の多くのオブジェクトとは異なり、決して自分用の Math オブジェクトを作成してはいけません。常に定義済みの Math オブジェクトを使用してください。

これは、var foo = new Math(); みたいにやっちゃだめってことでしょうか。やったことないけど。ってことで、試してみました。
http://www.squarefree.com/bookmarklets/webdevel.html#shell
を使用。

js> var foo = new Math();
TypeError on line 1: Math is not a constructor

エラーが出ました。もし自分用の Math オブジェクトを作ることができたら、どのような便利な局面があるのかなぁと思いました。たぶん、無いと思う。

http://developer.mozilla.org/ja/docs/Core_JavaScript_1.5_Guide:Values

＞数値と文字列が + 演算子で結合された式では、JavaScript は数値を文字列に変換します。
＞他の演算子がある式では、JavaScript は数値を文字列に変換しません。

＞"37" - 7 // 30 を返す
＞"37" + 7 // "377" を返す

変換しないっていうのを知りませんでした。もしくは忘れていました。でも考えてみると、もしかしたら今までときどき意識せずにこのトリックを使っていたかも。37 - "7" でも 30(Number) を返し、演算子が * や / や % でも数値を返すようです。

javascript:
　var e=document.getElementsByTagName('PRE')[0];
　var s=e.innerHTML;
　e.innerHTML=s;
　focus();

WinIE6 で PRE要素がある適当な HTML文書を開いてたとえば上記のような JavaScript を実行すると PRE要素の改行が消えるのはなぜだろう。e.innerHTML='あ\nい';とかe.innerHTML='あ\rい';とかでも改行されない。仕方が無いから改行文字を<br>に置き換えるか。

ユニークでない id と getElementById() の続きっぽい。

質問者の要望が、DocumentFragment (以下DFと呼んだりする) によって見事(？)に解決されていました。私にはできない回答でしたし、DF の使い方もより少し分かった気がします。これは良い機会なので、DOM仕様書に目を通してみました。

・http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#ID-B63ED1A3
・http://doraneko.org/misc/dom10/19981001/level-one-core.html#ID-B63ED1A3

DocumentFragmentインターフェイス は Nodeインターフェイス を継承するので、その属性やメソッド群を使えます(？)。DOM のインターフェイスというのは、Java言語のクラスのようなものだと思っています。

DOM のインターフェイスの定義は、IDL というもので書かれています。IDL の文法については、以下が参考になります。

・http://www.techscore.com/tech/CORBA/chapter5.html
・http://www.techscore.com/tech/CORBA/chapter6.html

・http://q.hatena.ne.jp/1156425849

XPath のことはよく知らない。DOM (もあまりよく知らないが) では、無理じゃないかなー。getAttribute() で調べてみるのはどうだろうか？ というわけで、似非HTML文書を作って実験してみました。

<!--HTML文書ではない-->
<title>test</title>
<div id="Unique1"><div id="NotUnique">123</div></div>
<div id="Unique2"><div id="NotUnique">456</div></div>
<div id="Unique3"><div id="NotUnique">789</div></div>

そして Firefox で上の HTML文書もどきを開いて JavaScript Shell 1.4 を起動して、まずは質問者が言ってることが本当かどうか確認。

js> var TargetDiv = document.getElementById("Unique2");
js> TargetDiv.getElementById("NotUnique");
TypeError on line 2: TargetDiv.getElementById is not a function
js> TargetDiv;
[object HTMLDivElement]
js> TargetDiv.innerHTML;
<div id="NotUnique">456</div>

次に、実験の本題です。

//JavaScript
str = '6994';
num = 0;
t1 = new Date();
for(i = 0; i < 100000; i++) {
　num += Number(str);
}
t2 = new Date();
t = t2 - t1;
document.write('<p>Number()……' + t + '</p>');

num = 0;
t1 = new Date();
for(i = 0; i < 100000; i++) {
　num += parseInt(str, 10);
}
t2 = new Date();
t = t2 - t1;
document.write('<p>parseInt()……' + t + '</p>');
[EOF]

文字列を数値にする2つの関数、Number() と parseInt()(※)。どっちが速いか気になったので、てきとーに調べてみました。くだらね。上のようなコードだと、私の環境の WinIE6 では Number() の方が若干速いかなという感じで、Firefox 1.5 と Opera 8.5 と Opera9 では、parseInt() の方が若干速いかなという感じです。Operaを起動したら、アップデート告知があったので、アップデートして両方でやってみましたが、特に違いがない結果が出ました。

※あと、parseFloat() があったり、eval() を使ったり後ろに 0 を足したりしてもできたりしますけど。

RPGのキャラ作成みたいなのをオブジェクト指向で の続き。職業毎の経験値とレベルを持たせるなど少し変わっていますが、前エントリは内容を単純にしていて、今回のが本来やりたかった形です。

var jobData = {
　'Hero' : [ 8, 8, 8, 6, 6, 7, 6],
　'Fighter' : [10, 4, 9, 4, 6, 4, 6],
　'Grappler' : [ 8, 5,10, 8, 7, 3, 6],
　'Magician' : [ 5,10, 3, 7, 4,10, 8],
　'Priest' : [ 7, 9, 5, 6, 5, 8, 6],
　'Dancer' : [ 6, 7, 4,10, 4, 6, 7],
　'Thief' : [ 7, 6, 6, 9, 5, 5, 5],
　'Trader' : [ 9, 5, 7, 3, 6, 9, 5],
　'Goof_off' : [ 6, 6, 4, 5, 4, 4,10]
};

var paramOrder = ['HP', 'MP', 'str', 'dex', 'def', 'clv', 'luc'];

function Person(job) {
　this.job = job;
　this.exp = { 'Base': 0 };
　this.level = { 'Base': 1 };
　for(var i in jobData) {

//JavaScript です。
function Person(job) {
　this.job = job;
　this.level = 1;
}

上のようなやつを new して作った Person オブジェクト(インスタンス)に、ジョブに応じて、力とか素早さなどのパラメータに初期値を与えることをしたいわけですが、どのように書くのがエレガントなのか。

引数 job に入る文字列は、'Hero', 'Fighter' など、9 種類で、力とか素早さなどのパラメータは、7 種類です。パラメータの初期値は、ジョブ毎に用意されているレベルアップ時の各パラメータ値の上昇率から求めます。上昇率は1から10までの10段階の数値で表します。たとえば 'Hero' のパラメータ値の上昇率は、{ 'HP':8, 'MP':8, 'str':8, 'dex':6, 'def':6, 'clv':7, 'luc':6 } です。'HP' と 'MP' の初期値は、上昇率の2倍前後になり、他のパラメータの初期値は上昇率と同じぐらいになります。

上の文章はずいぶんくどいですが、私は以下のように書きました。

Person.prototype.setParamByJob = function() {
　switch(this.job) {
　　case 'Hero':
　　　this.growth_rate = {
　　　　'HP':8, 'MP':8, ……, 'luc':6
　　　};
　　　break;
　　case 'Fighter':
　　　this.growth_rate = {

http://www5e.biglobe.ne.jp/~bill/samp/20060514/samp.html

超テキトー。こういうの、なんていうんだ？

マウスストーカー(笑)をオブジェクト指向で、という試み。まだよく分かっていないし、無駄が多いと思う。

function ap_mouseChaser() {//コンストラクタ
this.msg = 'マウスチェイサーだよーん';
this.size = 12;//(単位はpx)
this.color = '#F00';
}

ap_mouseChaser.prototype.set = function() {
var i, len, span, style;
var d = document;

this.charArray = this.msg.split('');
len = this.charArray.length;
this.x = new Array(len);
this.y = new Array(len);
this.elm = d.createElement('DIV');

for(i=0; i<len; i++) {
this.x[i] = 0;
this.y[i] = this.size * (-10);

http://web.archive.org/web/20011015024906/http://www.geocities.co.jp/SweetHome/4572/moji.js

function makesnake() {
if (flag==1 && document.all) {
for (i=message.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+step
ypos[i]=ypos[i-1]
}

Arrayオブジェクトのunshift()メソッドとかpop()メソッドを使った方が、何してるか直感的に分かりやすいのかも。

昨日書いていて気持ちが悪いと思った。

var d = document;
var arg = 'section_a';
if(location.hash) {
　var id = location.hash.split('#')[1];
　if(id) {
　　var node = d.getElementById(id);
　　if(node) {
　　　if(node.className=='section') {
　　　　arg = id;
　　　}
　　}
　}
}
change(arg);

javascript:(function(){
var d=document;
var _body=d.createElement('body');
var _frameset=d.getElementsByTagName('frameset')[0];
_body.innerHTML = top.frames[1].document.body.innerHTML;
d.documentElement.replaceChild(_body,_frameset);
})();

・HEAD要素とかは考慮していない。
・フレーム定義している文書のドメインとフレームセル内に読み込んでいる文書のドメインが異なる場合には処理されない例外が。
uncaught exception: Permission denied to get property HTMLDocument.body

JavaScript Tip #1: Speed Up Object Detection
・http://dean.edwards.name/weblog/2005/12/js-tip1/

目から鱗。書いてることを大まかに説明します。

イベントを追加する関数を例にしています。functionの中でオブジェクトを持っているかどうかを判別すると、その関数を呼び出す度に判別をすることになるわけですけど、それよりもっと効率が良い方法があって、それはオブジェクトの判別を行ってから関数を定義するというものです。そうすることで関数の中身は枝分かれしていないものになり、判別の処理をいちいちしなくなります。

ってかこれはシリーズ化するのかな？楽しみです。

何と呼ぼうが、全ては進むべきより良い方向なのです
JavaScriptの、ランダム文字列生成関数
WinIEでOPTION要素のイベントハンドラが動かない
教える君@2005-06-13
JavaScriptでドラクエ
OperaとJavaScriptのブラウザ判別
Googleキャッシュじゃなくてもハイライト
Trixie
IEとsetAttirbute()とイベントハンドラと
Mouseover DOM Inspector
IEDocMon
JavaScriptの処理時間を計る。
10 good JavaScript practices
addEventListener()
敗北の予感
insertBefore
よく分からないけど
わからん…

JavaScriptから使えるXMLHttpRequestという名前のやつとか昨今のAjaxブームとかを受けてデータのやりとりをするにはXMLを使わないといけないのかなぁと何となく思っていたけど、そうではなくて他のフォーマットも扱える(？)っぽい。JSONというのがある。

・http://www.crockford.com/JSON/

JavaScriptのサブセットなので、JavaScriptで手軽に扱えるのがよいところか。汎用性ではXMLの方が上だろうな。読みやすさでは、私には同程度に見えるが、ややXMLの方が上かな。

テキストエリアの中身をJavaScriptで処理すると、ところどころに勝手に改行文字が入る場合があって困った＠Firefox 1.0.7。

テキストエリアの中には、長々とした文字列が入っており、そのテキストエリア要素には、あらかじめ変数tでアクセスできるようにしているものとして、

var v = t.value;
alert(v);//ここではまだ改行文字になってない。
var txt = document.createTextNode(v);
alert(txt.nodeValue);//まだ大丈夫。
var elm = document.createElement("p");
elm.appendChild(txt);
alert(elm.innerHTML);//アウアウ。

もしくは、

var v = t.value;//セフセフ。
var elm = document.createElement("p");
alert( elm.innerHTML=v );//アウアウ。

innerHTMLに書き込むとき、もしくは、innerHTMLを読み出すときのあたりが怪しい。それならば、innerHTMLに頼らなければよい。

var v = t.value;