素人がプログラミングを勉強していたブログ

プログラミング、セキュリティ、英語、Webなどのブログ since 2008

連絡先: すかいぷ:javascripter_  か javascripter あっと tsukkun.net skypeのほうがいいです

javascript

jQuery.fn.$each

(function ($) { $.fn.$each = function (callback) { return this.each(function () { return callback.call($(this)); }); }; })(jQuery); こういうのを定義しておくと便利。 $("a").$each(function () { /\.jpg/.test(this.attr("href")) && window.open(…

Safari5の拡張を試した

Chromeみたいに必要なときだけステータスバーを表示するSafari5拡張を書いた。 javascripter/smart-status-bar · GitHubに置いた。 同様の拡張はSafari Extensions by Daniel BergeyのInvisible Status Barがあるが、.safariextzをzipとして解凍して中身を確…

幅優先探索

昔流行ったやつ。幅優先探索で迷路の経路を出す時は、ノードをリストにして逆算していくか、マップを0で初期化して、通るたびに0, 1, 2…というように徐々に増やしていって、ゴールについたら一つずつ減っていくような道を探す、という方法が使える。 それぞ…

history.pushState、history.replaceState

HTML5のhistory.pushState、history.replaceStateを試した。 HTML5 pushState/replaceState demoで動かせる。 Minefieldだと完全に意図した通りに動くがWebKitだとURLまわりがうまくいかない。 メインのソースコードは下記の通り。 canvasで適当に壁紙用画像…

某パッ@マン風ゲーム

http://tsukkun.net/tsu/に置いた。メインのプログラムはhttp://tsukkun.net/tsu/main.js。id:uupaaさんのuuCanvas.jsをライブラリとして使用していてIEでも動くが、かなり重い。敵がユーザーを追いかけてくる部分は幅優先探索を使っていて、ようするに、迷…

.sort.call(null)の深淵

発端は javascript:alert([].sort.call(null)) これで window オブジェクト取れるのなんで? http://twitter.com/edvakf/status/9222713572 という投稿。この不可解な挙動を説明することは案外難しい。 まず、ES5のstrict mode以前(つまり、今普通にJavaScri…

FirefoxでのJavaScriptデバッグテク等

obj.watch("prop", function (id, older, newer) { console.log(id, older, newer, arguments.callee.caller); return newer; });obj.propに値を代入してる関数を調べるテクニックの紹介。 下のスクリプトはFC2Blogではてな記法を使えるようにする(デバッグ…

faviconでライフゲーム

The Game Of Lifeに置いた。FirefoxとOperaではfaviconを動的にセットできるが、Safariでは不可能。 単にhrefを変えれば良いというものではなく、appendChild等でDOMツリー上の位置を現在のfaviconより下?にしなければ認識されない。 <html> <head> <title>The Game Of Life</title> </head></html>

JSON判定(構文解析の練習)

そういえばこういうのまともに書いたことないなと思って練習がてらJSONのシンタックスが正しいか判定する関数を作った。 だいたいhttp://www.ietf.org/rfc/rfc4627.txt?number=4627: JavaScript Object Notation (JSON)に沿って書いた。 minus記号を判定する…

ルビをつける

WebKitにrubyタグのレンダリングのサポートが入ったので、新聞社のサイトなどで狡猾(こうかつ)な犯行などと書いてあるものをrubyタグで包むスクリプトを書いた。 // console.time("benchmark"); var r = document.evaluate( './/text()[contains(., "(")]…

HTML5のcanvasでテトリス

canvas thisに置いた。 JavaScriptの部分は下記の通りで、テトリスの画面の二次元配列とブロックの二次元配列を保存して、画面の上にブロックを重ねるように描画するというごく普通の実装。 画面の端を壁にしておくことで、はみだしチェックなどを省くことが…

棒倒し法による自動生成の迷路

JavaScriptによる自動生成迷路に置いた。 function rand(n) { return Math.floor(Math.random() * n); } const width = 33, height = 33; var wall = (1 << (width - 2)) - 1 << 1; var table = [1 << (width - 2)]; var stripe = 0; var i, j; for (i = 1; …

WebKitにObject.getOwnPropertyNamesが入った

ES5のObject.getOwnPropertyNamesが入った。これは何をするメソッドかと言うと、enumerableでないプロパティを含めて全てのプロパティを列挙する物である。 つまり、 alert(Object.getOwnPropertyNames(Array.prototype).join("\n")); /* length,constructor…

Grab and Drag for Google Chrome

MacのChromiumの最新版でしか確認していないのでそれ以外の環境で動くかは未確認。それから、cursor: -webkit-grab等の値は認識されているがカーソルに反映されていないようであり、よくわからないのでそのままにしてある。 乗り遅れないうちに、Google Chro…

クリップボードにコピー

Chromeのcopyは, たしか, 隠しinput[type=text]作ってcopyさせたいものをvalueにいれて, selectionStart/Endをいじって, focusあてて, document.execCommand('copy')すればJSだけでできる. http://twitter.com/Constellation/status/7188365498 これを参考に…

足し算引き算で10を作るゲームと部分和問題、DP

切符の問題 切符の裏に印刷してある4桁の数字を4つの数字と考えて、足し算と引き算だけで10を作るゲームの解き方。 例えば、1,2,3,4の場合は1+2+3+4=10。プログラム的には、 prob([1,2,3,4]); // [{plus: [1,2,3,4], minus: []}] こんな感じに返ってくるよう…

カード配り問題

10分でコーディング|プログラミングに自信があるやつこい!!を見て、僕だったらどう書くかなと考えた。 まず、10分で解くことを目標に急いで書いた物。最後のほう読むの忘れて引数名などをミスった。 function range(start, end) { var a = []; var i; f…

YouTube

javascript:(function () { var get_video_id = function () { return yt.getConfig("VIDEO_ID"); }; var get_title = function () { return yt.getConfig("VIDEO_TITLE"); }; var get_t = function () { return yt.getConfig("SWF_ARGS").t; }; var make_do…

メモ

sprintfっぽい物を先頭に書いておくと、けっこう便利。 function sprintf() { // limited implementation of sprintf. var format = arguments[0], argv = arguments, i = 1; return format.replace(/%([s%])/g, function (all, type) { return type == "%" …

Selectors APIのmatchesSelectorと、動的なページでのイベント処理

Selectors APIのDraftに、matchesSelectorというAPIが定義されていて、現在、WebKitとMinefieldのNightlyに搭載されている。 ただし、ドラフトなのでベンダープレフィックスがついていて、Element#webkitMatchesSelectorやElement#mozMatchesSelectorを使わ…

Firefox trunkにtransitionとかが入った

CSS Transitionsと呼ばれる機能で、CSSでアニメーションとかを実現する物。Safariには前からあった。 <style> body { -moz-transition: 5s all linear 0s; -webkit-transition: 5s all linear 0s; transition: 5s all linear 0s; text-align: center; text-shadow: </style>…

WebKitでサポートされつつあるECMAScript5の新機能たち

最近、WebKitにObject.defineProperty、Object.defineProperties、Object.getOwnPropertyDescriptor等、今まで間接的にしかいじれなかったり、JSからは設定することのできなかった内部プロパティを操作するためのメソッドが入った。現時点のWebKitに入ってい…

location.protocol

location.protocolに変な文字列を入れた場合の挙動。 location.protocol = "javascript://\nalert(1)//" Safariでalertが表示される。XSSAuditorがコメント部分をチェックしないので最近のWebKitでもrefuseされない。 http://twitter.com/javascripter/statu…

classList、relListがFirefoxに入った

HTML5で定義されている、classNameやrelを操作するための新しいAPIがFirefoxのナイトリーに入った。 var p = document.createElement("p"); p.classList.add("foo"); console.assert(p.className == "foo"); p.classList.add("bar"); console.assert(p.class…

GeolocationとGoogle Maps

Personalize Your Homepageからインストールできる。 Firefox等に搭載されているGeolocation API(Geolocation API Specification)を使って、Google Mapsに現在位置を表示する。 マップレットと呼ばれる、Google Maps APIが使えるWidgetのような物を使用する…

query_string

javascripter's gist: 159058 — Gist に置いた。 a=b=cという文字列を["a", "b=c"]に分離するために.split("=")を使うことはできない。あまり使われることのない第二引数のlimitを使って.split("=, 2)としても、["a, "b"]になってしまうので、使えない。 追…

ナイトリーでGreasemonkeyを動かすパッチ&GreasemonkeyでJavaScript1.8

Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.2a1pre) Gecko/20090719 Minefield/3.6a1preで確認。 Illegal valueといったエラーで動かなくなるのを修正する。 (function () {})();で囲っている部分のコードがまずかったようなのでそれを…

wait

同期XMLHttpRequestを使ってJavaScriptでwaitする。 wait.html <html> <head> <title>wait test</title> <script>window.onload = function () { var script = document.getElementsByTagName("script").item(0); var code = document.getElementsByTagName("code").item(0); code.appendChild(</head></html>…

オブジェクトが循環参照を持つかどうか判定する

javascripter's gist: 139376 — Gist に載せた。 function isCircular(obj) { function isCircularWithAncestors(obj, ancestors) { var k; for (k in obj) if (ancestors.indexOf(obj) >= 0 || obj[k] instanceof Object && isCircularWithAncestors(obj[k]…

JSON、8進数

クライアントサイドでjQueryを使う場合にサーバが返すJSONで気をつけないといけないこと - 文殊堂を見て興味が湧いたので調べた。まず、0123のように、0以外で先頭が0の数値はJSONとして不正である。 2.4. Numbers (略) Octal and hex forms are not allowed…