| 次のページ >>

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Javascript: オブジェクトからコンストラクタ名(クラス名)を得る

obj.constructor.name で取得できますが MDC では nameプロパティは「非標準」とされています。 ちょっと試してみたところ Firefox、Google Chrome では同じように動きます。

function puts(x){ document.write( x + "\n" ); }

function Foo(){}
var x = new Foo();

puts("<pre>");

puts( typeof x.constructor  ); //=> "function"
puts( x.constructor         ); //=> "function Foo() {\n}"
puts( x.constructor == Foo  ); //=> true
puts( x.constructor === Foo ); //=> true

puts( "----" );

puts( typeof x.constructor.name   ); //=> "string"
puts( x.constructor.name          ); //=> "Foo"

puts( "----" );

puts( ("a").constructor.name          ); //=> "String"
puts( (1).constructor.name            ); //=> "Number"
puts( (Infinity).constructor.name     ); //=> "Number"
puts( ({}).constructor.name           ); //=> "Object"
puts( ([]).constructor.name           ); //=> "Array"
puts( (function(){}).constructor.name ); //=> "Function"
puts( (true).constructor.name         ); //=> "Boolean"
//puts( (null).constructor.name       ); //=> null has no properties
//puts( (undefined).constructor.name  ); //=> undefined has no properties

puts("</pre>");
スポンサーサイト

JsUnit: テスト実行とエラーメッセージ表示をキーボード操作で行う

JsUnit を使う場合、 エディタでコード書く→ブラウザでテストという一連の操作の途中で どうしてもマウス操作が必要になる場面があり、とてもだるいのでどうにかしたい。


自分が使う場合、操作の 9割は (1)テストの実行 (2)エラーメッセージの表示。 の 2つ。その他の操作はたまにしか行わないので、マウス操作でも構わない。


jsunit/app/main-data.html の 以下の行をコメントアウト。

giveFocusToTestFileNameField();

同じく jsunit/app/main-data.html の body 要素の最後に以下を追加。

新たに生成して画面左上に配置した input 要素 keyCapture でキー入力を拾い、 r, a キーでそれぞれテスト実行、エラーメッセージの表示(Show all)を行うようにした。 keyCapture からフォーカスが外れた場合はマウスでフォーカスを戻すかページをリロードする。

<script type="text/javascript">
(function(){
  var keyCapture = document.createElement("input");
  
  (function(rules){
    for(var key in rules){
      keyCapture.style[key] = rules[key];
    }
  })({
    border: "solid 1px red"
  , width: "20px"
  , height: "20px"
  , position: "absolute"
  , left: "10px"
  , top: "10px"
  });
  
  document.getElementsByTagName("body")[0].appendChild(keyCapture);
  keyCapture.focus();
  
  var operateByKeyInput = function(event){
    switch(event.keyCode){
      case 65: // a
        top.testManager.getUiManager().showMessagesForAllProblemTests();
        break;
      case 82: // r
        top.startTests();
        break;
    }
  };
  
  keyCapture.onkeydown = operateByKeyInput;
})();
</script>

あと、ページのロード時に自動でテストを行う方法を 併用すると便利 → testRunner.htmlの引数(js.nice-777.com)

(solved) Javascriptのエラー: Node cannot be inserted at the specified point in the hierarchy / NS_ERROR_DOM_HIERARCHY_REQUEST_ERR

環境

Firefox 3.5.6

状況と原因

appendChild の実行時に
Exception... "Node cannot be inserted at the specified point in the hierarchy" code: "3" nsresult: "0x80530003 (NS_ERROR_DOM_HIERARCHY_REQUEST_ERR)" (略)
といったエラーメッセージが出る。

次のコードで再現する。

foo = document.createElement("p");
bar = document.createElement("p");

// エラーは出ない。
try{
  foo.appendChild( bar );
}catch(e){
  console.log([ 1, e ]);
}

// 循環的な親子関係。エラーが出る。
try{
  bar.appendChild( foo );
}catch(e){
  console.log([ 2, e ]);
}

// 自身へ子として自身を追加。エラーが出る。
try{
  foo.appendChild( foo );
}catch(e){
  console.log([ 3, e ]);
}

このように要素間で階層構造に矛盾が生じる時に出るエラーらしい。 上記以外にもNGなパターンがあるかも。

JavaScript: canvas で点線・破線を描くためのライブラリを作ってみた

Javascript + canvas で点線・破線を描画するためのライブラリです。
Description: A library to draw dotted/dashed line for Javasctipt/canvas.

canvas を使ってちょっとした折れ線グラフを書かせてみようとしたところ、点線・破線が描けないので困りました。 なぜ困るかというと、モノクロ印刷するときに系列の区別を付けにくくなるからです。

という訳であまり出来の良くない再発明っぽいですが作ってみました。 ベタに書いてみただけなのでパフォーマンスとかはあまり良くない(アニメーションなどさせると辛い)と思います。

Firefox でしか動作確認していません。

円弧やベジェ曲線は描けません(自前で何とかする必要があります)。

パスを閉じることはできません。たとえば三角形を描くと始点と終点が重なっていても lineJoin が効きません。

ライセンスは MITライセンスです。
License: MIT license

ダウンロード / Download

sonota's anbt-dashed-line.js at master - GitHub
このページの「download」ボタンからどうぞ。

サンプル / Sample


<canvas id="canvas" width="400px" height="400px" />

<script type="text/javascript" src="anbt-dashed-line.js"></script>
<script type="text/javascript">
var cv = document.getElementById("canvas");
var ctx = cv.getContext("2d");

var lineStyle = {
  color: "#a00"
, pattern: "*****-"
, scale: 200
, width: 10
, cap: "butt" // butt, round, square
, join: "bevel" // round, bevel, miter
};

var vertices = [
  [  0,   0]
, [100, 200]
, [110, 150]
, [200, 300]
];

var adl = new AnbtDashedLine();
adl.drawDashedPolyLine(ctx, vertices, lineStyle);
</script>

その他

線の終端の形状(lineCap) と線の接合部(lineJoin)のスタイルについては スタイルと色を適用する - MDC を参照してください。


追記 20091125:
作った後で ActionScript のライブラリを探して移植すれば良かったかも、と思い至りました……という訳で以下参考までに。


追記 20100627:
この記事を書いた時点では SVG が標準になる気配がなかったので canvas 用に書いたのですが、 その後 IE が SVG 対応することが明らかになり、状況が変わりました。 そして、SVG には破線のための API があります。

そこで、特に canvas にこだわらないのであれば、 SVG を使うのも良いと思います。
参考: SVG vs. Canvas? « HTML5.JP ブログ

また、ここで公開しているライブラリを改造する場合や 新たに自作する場合は SVG 用の API とインターフェイスを揃えると良いかもしれません。

アニメーションのデモ / Animation demo

2011-09-08 追記 / 上で「パフォーマンスとかはあまり良くない(アニメーションなどさせると辛い)」と書きましたが、 ものは試しとデモを作ってみました。

anbt-dashed-line.js demo - jsdo.it - share JavaScript, HTML5 and CSS

参考(外部リンク)

Lisp/Scheme のコメント・文字列・括弧に色を付ける簡易ツール(Javascirpt)

  • ブログなどに貼った Lisp/Scheme 系のソースコードを google-code-prettify のように強調表示(ハイライト)するツールを探してみたのですが、ちょうどいいのが見つけられず……というわけで簡単なのを作ってみました*1 *2
  • キーワードや関数名、シンボルなどには色は付きません。 Lisp/Scheme っぽいものにそのまま使いまわせるようにしたかったのと、 なるべく処理が重くならないようにしたかったので、あまり複雑にならないようにしました。
  • Common Lisp とかはよく知らないのでとりあえず Emacs Lisp を想定してます……
20100417 追記
*1: これを書いたときは見つけられなかったのですが、その後 highlight.js というのを見つけました。こっち(highlight.js)の方がおすすめです。
20120513 追記
*2: これまた見つけられていなかったのですが、google-code-prettify も Lisp に対応しているようです。 README に「LISPy languages are supported via an extension: lang-lisp.js.」とあり、Change Log によれば 2008年に加わったようです。

ダウンロード

gist: 228735 - GitHub からどうぞ。

サンプル

こんな感じで色が付きます。

(defun factorial (x)
  "Calculate factorial." ; 関数の説明
  (if (= x 1)
      1
    (* x (factorial (- x 1))))) ; 再帰呼び出し

動作チェック

;; ダブルクォート文字列
aa "bb" cc
aa "b\"b" cc ; バックスラッシュでエスケープ
aa "b\\b" cc
aa "b;b" cc  ; セミコロン
aa "b(b" cc  ; 括弧
aa "b)b" cc

;; 一行コメント
aa ; bb
; aa"bb ; ダブルクォート
; aa\bb ; バックスラッシュ
; aa)bb ; 括弧
; aa(bb

;; 括弧
aa(bb)cc

;; 記号
(1 . 2)
'()

;; HTMLの文字参照
a < b
a > b
a & b

;; 最後のダブルクォートが不整合
"aa

参考(外部リンク)



** ホームに戻る

| 次のページ >>
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。