2007年08月17日01:15 カテゴリ翻訳/紹介Lightweight Languages 怠翻 - JavaScriptでありがちな9つのシマッタ 私自身結構シマッタしちゃうので。 Nine Javascript Gotchas 尻カンマ注意 以下のコードはFireFoxでは動きますが、Internet Explorer (以下IE)では問題になります。 var theObj = { city : "Boston", state : "MA", } 最後にカンマが入らないよう注意しましょう。 浮気なthisは何を見てるやら 以下のコードで、thisは何を指しているでしょうか。 <input type="button" value="Gotcha!" id="MyButton" > <script> var MyObject = function () { this.alertMess
JavaScript界隈をよく知らないので問題になっているか謎ですが、自分の中では大問題です。 このライブラリ！ 俺の作ったクラス名とかぶってて、知らない間に関数が再定義されて変な動きしてる！ みたいなことが起こってブチキレてオレオレフレームの開発にとりかかる人も多いと思います。 そしてそのフレームワークを使った人がまたブチキレて、開発に着手と永久に続くことになるわけです。YAHOOなんかはそのことに気づいていて、YAHOOという名前空間の下にクラスを定義しているのですが、YAHOO.util.Dom.get()とか毎回書くのは長すぎで、汚染されたくない気持ちと長いのが嫌な気持ちで苦しむことになります。 そこで次のようにするとどちらも解決できるよ！ と思いました。 // 定義する var udp = { jp: { NamedObject: function() { var NamedOb
配列操作の比較表: Ruby, Python, JavaScript, Perl, C++ プログラムを書いていると、他のプログラミング言語の記憶とごっちゃになって、「配列の後ろに要素を追加するのは push だっけ、 append だっけ」などと混乱することがあります。特に Ruby, Python, JavaScript はコードの書き方が似ているので、この問題が起きがちです。 そこで、備忘録として、 Ruby, Python, JavaScript, Perl, C++ の配列操作の比較表を作りました。一番慣れている Ruby を基準にしています。間違いなどがあったらご指摘いただけると助かります。他の言語のもあるといいなあ。 Ruby (Array) Python (list) JavaScript (Array) Perl (@) C++ (std::vector)
最近猛烈にJavaScriptを書く機会が増えたのでvimで整形ツール欲しいなと思っていました。 で、YappoさんのJavaScript::Swellを使ってみることにしました。 CPANでインストールしてこんなラッパー作って ~/bin/js_swell.pl #!/usr/bin/perl use strict; use JavaScript::Swell; my $data; while (<>) { $data .= $_; } close IN; print JavaScript::Swell->swell($data); .vimrcかなんかにこんな風に書いたら map ,jt <Esc>:%! ~/bin/js_swell.pl<CR> こんなコードが var i=0;if(i++){var a=-1;} vimから:,jtでこんな風になりました var i = 0; i
地道な高速化 1 // style も new 時にプロパティにいれておく s6.Constructor = function(element) { this.element = element; this.style = element.style; }; 地道な高速化 2 // コールバックを受ける関数では this // や引数を受けるようにしとく s6.hoge = function() { var shift = Array.prototype.shift; // ↓ Opera ではバグるので回避しなきゃダメ var f = shift.apply(arguments); f.apply(shift.apply(arguments), arguments); }; DOM の空きプロパティ // DOM の要素の空きプロパティの // アクセス速度は普通のハッシュとほとんど変
javascriptの自動インデントがしたいんです。 いまいちなのしかなかったので、自作。ソースは下のほうに。 http://d.hatena.ne.jp/nagaton/20070623/1182580881 このプラグイン使ってたんだけどさ、けっこう精度が低い。 foo(hoge,function(){}) の})あたりで誤マッチしたり、いろいろ。 オートインデントの精度が低いと、悲惨なことになるので、なんとかしたい。 このプラグインをベースに改造。ちょっとはマシになったんだけど、ラベルのインデントをどうやればいいのか分からない。 var x= { name: value, func: function() { hogehoge } //ここで二段ぶん戻さないといけない } みたいなやつ。 マッチする括弧がある行を簡単に取得する方法ってないのだろうか。 これは var x= { nam
サイボウズ・ラボ株式会社に勤めるWebプログラマ。出身は石川県金沢市。21歳でプログラミングに出会い，IT戦士になることを決意。それからというもの，寝ても覚めてもプログラムを書き続け今に至る。はてなでamachangというidでブログを書いてます。 最近，「とんがった」プログラマの間ではJavaScriptがちょっとしたブームです。あちこちの書店で，JavaScriptの書籍を見かけるようになりました。「はてブのホッテントリ」＊1にも，よくJavaScriptの記事が入っています（図1）。 その人気を象徴的に示しているが，Shibuya.js＊2という団体が開催しているJavaScript関連のイベント「Technical Talk」です。1回目は2006年4月，2回目は6月に開催されましたが，いずれの回も予約が殺到し，たった1日で席が埋まってしまいました。これには「JavaScriptの
今まで LDR や LDC を使うと Firebug が壊れて困ってました＞＜ 原因が分かったので エントリーを書いてみました。 原因は Livedoor Reader や Livedoor Clip が parent という名前のグローバル関数を定義していること。 Firebug が parent を無条件に Window オブジェクトと判断していること。 で、修正方法 まず、 Firefox のプロファイルディレクトリに行く。 環境 プロファイルディレクトリ WinVista C:\Users\[ユーザ名]\AppData\Roaming\Mozilla\Firefox\Profiles\[ランダムな文字].default\ WinXP C:\Users\[ユーザ名]\AppData\Roaming\Mozilla\Firefox\Profiles\[ランダムな文字].default\
ほら JavaScript http://ja.doukaku.org/lang/javascript/ Python http://ja.doukaku.org/lang/python/ Ruby http://ja.doukaku.org/lang/ruby/ Perl http://ja.doukaku.org/lang/perl/ Java http://ja.doukaku.org/lang/java/ PHP http://ja.doukaku.org/lang/php/ コード見てもらうことは そのコードを見てもらえないことの 10 倍以上の勉強効果があると思う！ どーせ、 JavaScript のソースは隠せないんだし！ どう書く?.org で色んな人の JS が読みたいです！ うほ！ 目指せ No.1 言語！
pingオブジェクト javascriptでpingできることがわかったのでオブジェクトにまとめてみることにしました．Pingerオブジェクトです． var Pinger = function(){}; Pinger.ipid = {}; Pinger.wmi = GetObject("winmgmts:\\\\.\\root\\CIMV2"); Pinger.prototype.start = function(ip) { this.ping(ip, 0); var tspan = $("select[@name='tspan']").val(); var that = this; Pinger.ipid[ip] = setInterval(function(){that.ping(ip, 0)}, tspan); } ipidとwmiはクラスアトリビュートで，startはインスタンスメ
こんにちはこんにちは！！ タブ開いてますか！ もちろん開いてますよ！ １００まいくらい！！！ (本当だよ！) もうね、SleipnirだとCPUが常時100%、GDIオブジェクトが5000超えとかあたりまえ！ Firefoxなんて目も当てられないよ！ タブ切り替えに何秒待たせますか＞＜ 最近、広告のあたりに変なJavaScriptを多用しだしたmixiなんかだと レンダリング終了まで30秒、その間、ブラウザが完全にフリーズなんですけど…！ うん。まわりのひとはみんな言うよ。 「タブ開きすぎｗｗｗバカじゃないのｗｗｗｗｗｗｗ」 なに言ってんの！ バカはきみたちさ！ タブブラウザは、タブをたくさん開いてこそタブブラウザなんだ！！！ そこでぼく、Sleipnirでタブ100枚ひらいていても サックサクにしちゃう必殺技を編み出しちゃったよ！ やりかたですか！ 超かんたん！ 「セキュリティ」メニュー
9割ぐらいはハッシュ何がハッシュなのかjavascriptで存在するほとんどのオブジェクトの実体はハッシュだよ。 var arr = [0,1,2,3]; とかをみると配列(人によってはリスト)に見えると思う。でも実際は違うんだ。 これは var has = {0:0,1:1,2:2,3:3}; と基本的には等価なんだ。ただちょっと束縛されているメソッド(インターフェイス)が違うだけ。 ためしに arr[4] = 4; arr['x'] = 'string'; arr[-1] = -1; としてみよう。 Firebugで確認してみると[0, 1, 2, undefined, 4]というような値がかえってくるよ。 でもarr[-1]やarr['x']の値は保存されてないのかな？そんなことはないちゃんとアクセスできるんだ。 それどころかarr.xで'string'がかえってくるんだ。 別の例を
ソース読みの準備 本連載ではこれまで、JavaScriptの特徴的な記法をいくつか紹介してきた。そろそろ世に広まっているJavaScriptライブラリのソースコードを読み解いていくことができるはずだ。 今回からは、少し趣向を変えて、JavaScriptライブラリをいくつか挙げながら、ライブラリ利用方法と、その動作メカニズムについて紹介していこう。 今回は、prototype.jsにフォーカスする。現在のJavaScript人気の立役者といっても過言ではないprototype.jsだが、その中身はどうなっているのだろうか。ソースコードを読みながら、メカニズムはもちろん、JavaScript的なコードスタイルも学んでいきたい。 まずはソースコードを読むための環境を整備しよう。prototype.jsは、作者であるSam Stephenson氏が提供するサイトから取得できる。現在の安定最新バージ
米国生活もやっと落ち着いてきたので、暇な時間にJester.jsを改造して遊ぼうか、と思ってたら 早速Ver1.1が出てた 仕事速い（・し・） 変更点は 非同期通信対応 AJAX!! ⇒find()へコールバック関数を投げる。find(id, function)のように User.find(1, function(user){ alert(user.name); }); find("all")で全件取得 ⇒早速来た！配列でオブジェクトが帰ってくる。 find("first")で最初の一件を返す（ActiveRecordでおなじみ） attributes()がオブジェクトの全属性を返す ⇒ore.attributes().email で ore.emailの値が帰る 名詞の複数形をちゃんと対応 ⇒Personの複数形は、Persons じゃなくて People
/* * A JavaScript implementation of the RSA Data Security, Inc. MD5 Message * Digest Algorithm, as defined in RFC 1321. * Version 2.1 Copyright (C) Paul Johnston 1999 - 2002. * Other contributors: Greg Holt, Andrew Kepert, Ydnar, Lostinet * Distributed under the BSD License * See http://pajhome.org.uk/crypt/md5 for more info. */ /* * Configurable variables. You may need to tweak these to
FirefoxであればFirebugで簡単に問題の場所をみつけられますが、IEでjavascriptのエラーが出ると、素っ気ないうえに意味不明な日本語のエラーメッセージが出てきてお手上げなので、エラーが出ている場所の特定すら困難です。 そんなときでもOfficeについているスクリプトエディタ(前はスクリプトデバッガという名前だった気が....)を使うと、Visual Studioのデバッガとおんなじインターフェイスのデバッガを使ってjavascriptのエラーを出している場所をすぐに見つけることができます。Firebugと比べると極めて重たいですが、関数呼び出しをバックトレースすることもできますし、各スコープでの変数の値を調べることもできるので、これを使わない手はありません。 が、いつもどうやってインストールするのかを忘れてしまうのでメモ代わりに書いておきます。 コントロールバネルのプロ
javascriptのprototypeはなかなか理解してもらえないですねぇ。 ここ1年間でマジマジと実感しました。 特に、大規模開発をしているとこだと、いろんな知識が入り乱れていて（ホームページ時代からAjax本を読んだ人とか)が、javascriptが単なる関数型列挙な言語(語弊があるけど)という見方が大多数を占めているように見えます。 そんな中で "String.prototype.trim" みたいなコードを見せても、説明下手なのか中々上手く伝わらないですねぇ。 ということで(?)、僕がjavascriptのprototypeを身に着けるまでやったこと、とか。これも備忘 prototype.jsのソースコードを眺める Array.mapとかEnumerable, Hashは勉強になりますねー。 ただ、prototype継承されすぎて、ちょっと多すぎなこともあります。 var
Fireclipse Installation Instructions and Development Notes FireFox＆EclipseでのJavaScript開発を効率化する「Fireclipse」。 Fireclipseを使えば次のことが可能になります。 FireFoxのJavaScript コンソールの結果を Eclipseのコンソールに送る Eclipse上のエディタで、エラー行に移動する Eclipseのコンソールにメッセージを送る FireBug と連携し、FireBugに Eclipseタブを付けられます FireBug用の各種拡張 Fireclipse自体は、Firefoxの拡張と、FireBugの拡張、Eclipseプラグインから構成されます。 JavaScript開発がますます便利になりそうなツールですね。 今後はFirefox上にエディタ等の開発ツールが直
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
