Javascript

$(window).width() と $(document).width() や $(window).height() と $(document).height() がどういう時に違う値を返すかわからなかったので検索したら Stack Overflow に簡潔でわかりやすい説明がされてたので紹介します。 When you have a scrollbar on the webpage. (スクロールバーが表示されてる時) わかりやすいですね。一応念のために書いておくと window が「ブラウザの表示領域」で、document が「ページ全体」です。 参考 jquery – When can $(document).width() and $(window).width() show different values? – Stack Overflow http://stackoverflow.com/questions/8134741/when-can-document-width-and-window-width-show-different-values

lispでmapに初めて触れた時は「何、このめんどくさい関数？」と感じ、正直な話あまり触れたくもなかったのですが慣れてくるとこいつはとても便利な賢いやつです。 さてjavascriptでもmapが使えるか調べてみたらjQueryで提供されてました。 mapを使えば配列全部に関数を適用させて、返り値を配列で受け取れます。for文なんて使わなくてもええんやっ！！ 使い方の例 定番の累乗を求めるサンプル。 arr = [1,2,3]; arr = $.map(arr, function(n,i){return n*n;}); for(i=0;i<arr.length;i++){ alert(arr[i]); } サンプルには良く使われるけど、実際にプログラミングしてて累乗が必要になったことがないですね。まあサンプルなんで実用性よりも分かりやすさが重要だから当然といえば当然の話しですね。 とりあえずこんな感じの動作がmapはできます。 要素をまとめて取得 たとえばこんなhtmlがあって <div>1</div> <div>2</div> <div>3</div> 配列で[1,2,3]が欲しいとする。 そんな時もこの map を使えば一発解決さ！(深夜の外人がやってる通販のノリで) arr = $("div").map(function(){ return $(this).text(); }).get(); これでとれる。注意点は最後の get()。これがなくても配列っぽいのが返ってくるんだけども、これはjQuery-wrapped arrayというものらしく別物とのこと。 for文で実行したり arr[0] で要素のアクセスしたりはできるけどもjoinすると上手く行かない。このjoinがうまくできないのにはまってだいぶ時間を食われました。 arr.constructor でクラスを調べたら function Array() { [native code] } となるべき所が function (a, b) { return new e.fn.init(a, b, h); } になってました。この「get() すればよい」という情報を得るためにどれだけ遠回りしたことか…。 とはいえこれで安心してmapをjavascriptでも使えるようになったのでガシガシ使っていこうと思います。 参考 http://api.jquery.com/map/

Rhinoとは何か？ javascript を記述するときに毎回htmlファイルを作る作業が手間なので何か方法がないか探してみた。 どうやら、JAVAで書かれたjavascript実装のRhinoでやりたい事ができるらしい。 Rhino – MDC Rhino はすべてが Java で記述された JavaScript のオープンソースな実装です。それは一般的には、Java アプリケーション環境へ組み込まれて、エンドユーザーによるスクリプトの記述が可能になります。 Rhinoのインストール方法 J2SE 6には標準で入っているらしいがEverythingで探しても見つからないので今回は http://www.mozilla-japan.org/rhino/download.html からダウンロードして使うことにする。 ダウンロード+解凍して適当なディレクトリに移動する(私の環境ではSugarSyncで共有してるディレクトリ配下のX:\sugarsync\bin\rhino1_7R2)。 スペースや日本語の文字列を含まない場所に置くのが無難だろう。 次に CLASSPATH を設定する。CLASSPATH=x:\sygarsync\bin\rhino1_7R2\js.jar export CLASSPATH # /cygdrive/x/～ の形式では java が認識しない。 これでインストールは完了したので java org.mozilla.javascript.tools.shell.Main と入力すればインタープリタが起動する。 zshrcでエイリアスの設定 しかし毎回これを打つのはあまり現実的ではないため ~/zshrc で alias を設定しておくと良い。alias js=“java org.mozilla.javascript.tools.shell.Main” インタープリタを呼び出さずに直接実行することや、jsファイルを直接指定して実行することもできる。js -e “print(‘hello’)” js -f hello.js これでjavascriptの動作をちょっと確認したいときに簡単に動かせるようになったし、JAVAで実装されているため、JAVAのクラスをjavascript内部で呼び出したりもできるようだ。 色々と遊んでいこうと思う。

xyzzyから直接javascriptを使う 今回の記事はRhinoのインストールが行われてる事と xyzzy で jscript-mode がインストールされている事が前提条件になります。 RhinoのWindowsでのインストール方法については前回の記事『[Windows(cygwin+zsh)環境でRhinoを使う][1]』を参考にしてください。 今回の記事の設定を行うと xyzzy から直接Rhinoを呼び出して下の画像のように簡単なスクリプトを気軽に書けるようになります。 下記のlispはruby-modeから引っ張ってきて少し修正を加えたもので、これを ~/.xyzzy や siteinitl. に貼りつければjscript-mode で C-c C-x すれば現在編集中のバッファの javascript が実行されます。 ;;jscript-mode(for Rhino) (setf \*js-prog\* "java org.mozilla.javascript.tools.shell.Main") (setf \*js-classpath\* "X:/sugarsync/bin/rhino1\_7R2/js.jar") (defun js-run-script-immediate () (interactive) (js-run "")) (defun js-run (args) (let ((tempfile (make-temp-file-name "\_\_temp\_" "js" (default-directory)))) (write-file tempfile t nil (buffer-fileio-encoding) (buffer-eol-code)) (command-execution (concat \*js-prog\* " -f \"" tempfile "\" " args)) (delete-file tempfile :if-does-not-exist :skip))) (defun command-execution (command) (interactive "sCmmand:") (let ((proc nil)(buffer (selected-buffer))) (with-output-to-temp-buffer ("\*cmd\*" 5) (unwind-protect (setq proc (make-process command :environ \`(("CLASSPATH" . ,\*js-classpath\*)) :output(selected-buffer) :exec-directory (default-directory buffer))))) (while (eq :run (process-status proc)) (sit-for 0.05)(do-events)) (if (= 0 (point-max)) (let ((buff (selected-buffer))) (other-window) (delete-buffer buff) (delete-other-windows)) (other-window)) (message (concat " '" command "' ended.")))) (add-hook 'ed::\*jscript-mode-hook\* #'(lambda () (define-key ed::\*jscript-mode-map\* '(#\C-c #\C-x) 'js-run-script-immediate))) *js-classpath* と define-key は好みに合わせて適宜変更の事。 ...

MS のブラウザ選択のバグに関する説明が、全くわかってない人が書いてるとしか思えない内容だったので javascript の sort について少し解説をしようと思う。 MS、Webブラウザ選択画面にアルゴリズム上のバグか － ＠IT JavaScriptの配列の並べ替え（sort）は比較関数を渡すことで柔軟な並べ替えが行える。ここではMath.rand()で半々の確率で正負の値を返しているので、隣り合う要素の並べ替えはランダムに起こる。これで結果もランダムになるように思えるが、実際に意味のある並べ替えを行うためには、並べ替えた後の配列が一定の基準に従っている並べられていることが不可欠で、例えば「a＞b」であれば「b＜a」、「a＜bかつb＜c」であれば「a＜c」でなければならない。これは、隣り合う要素同士をただランダムに入れ替えるだけでは達成できないのだという。 この「並べ替えた後の配列が一定の基準に従っている並べられていることが不可欠」という意味の分からない部分はおそらく下記を訳した物と思われる。 Doing the Microsoft Shuffle: Algorithm Fail in Browser Ballot Sorting requires a self-consistent definition of ordering. The following assertions must be true if sorting is to make any sense at all: だから正しい訳は「並べかえには首尾一貫した"大小の定義"が必要である。」になる。 実際にどのようなバグがあったかを説明するにはコードで示すのが一番わかりやすいので直接書いていこう。 問題の、 javascript の sort 関数では引数に比較関数を取れる。例えばfunction comp(a, b){ return a < b; //降順で並べる } function sortnum(){ return [0,3,5,6,-6].sort(comp); } //=>6,5,3,0,-6 function comp(a, b){ return a < b; //昇順で並べる } function sortnum(){ return [0,3,5,6,-6].sort(comp); } //=>-6,0,3,5,6 ...