最速インターフェース研究会 :: 実践JavaScriptリファクタリング
同じ事をやるにも、いろんな書き方があるわけでいかにして短くてわかりやすいコードを書くかというノウハウを紹介します。 例として"abcde"を80回繰り返した文字列を作るとして実際に自分のコーディングスタイルがどんな風に変化していったのか、という。 短くなるのは確かなんだけどわかりやすいかというと、人によるかもしれない。 グローバル関数を定義2年前なら、多分こういう具合だった。 //ふつうに関数として定義する function x(str,num){ var tmp = ""; for(var i=0;i<num;i++){ tmp += str; } return tmp; } x("abcde",80) Stringのメソッドとして定義1年前だとこんな感じ。 //Stringのメソッドとして定義する String.prototype.x = function(num){ var tmp
檜山正幸のキマイラ飼育記 - プログラマのためのJavaScript (0)
ジジイの手習いで、JavaScriptを勉強中でございます。その動機は「結局、ブラウザベースRIAかよ」のようなこと。非ブラウザベースのリッチクライアントへの期待を失ってしまったんですね。短期的・現実的な策としては、Ajax的な手法によるRIAなのかなぁ、という気分。ただし、「短期的」が“1年”と“5年”ではえらい違いです。今のところ僕には、「短期的」の実際の期間はわかりません。 僕のJavaScript調査の結果は、「初心者でも使えてプログラマでも困惑するJavaScript 」などに書きました。これらの続きとして、「プログラマのためのJavaScript (*)」というタイトルで書こうかと予定してます。あくまで予定、気まぐれでモノグサな僕のことだから、…… “プログラマのための”というのは、C, C++, Java, C#など“普通の”プログラミング言語にある程度慣れていることを前提に
web newbie - Javascript初心者からみたprototype
http://d.hatena.ne.jp/amachang/20070413/1176421425 勉強会のあと、そしてこの記事の後、 もう一度自分の中でprototypeについてまとめてみた。 下の実行結果を見て、首をかしげた人は是非とも読んでいただければと思う。 （って、首をかしげるのは僕だけか？！） var Box = function(size){ this.size = size; }; Box.prototype = { color: "red" }; var box = new Box(10); alert(box.color); // red Box.prototype = { color: "blue" }; alert(box.color); // red var box2 = new Box(11); alert(box2.color); // blue Box.p
最速インターフェース研究会 :: 実践JavaScriptリファクタリング、その2
連載すんの？ リファクタリングとか嘘で実は実践ビルトインオブジェクトハックなんだけど。 例題 配列 a = [3,5,4,2,1] から一番小さな値と、一番大きな値を取り出すにはどうすればいいか。 多分昔はこんな風に書いてたと思うんですよ。 a = [3,5,4,2,1]; for(i=0;i<a.length;i++){ if(i == 0){ min = a[0]; max = a[0]; } if(min > a[i]){min = a[i]} if(max < a[i]){max = a[i]} } 模範解答として、後先考えないやり方を提示しておく。 a = [3,5,4,2,1]; min = a.sort().shift();// 1 max = a.sort().pop(); // 5 短い。ただし、これをやるとaの内容は並べ替えられて最初と最後の要素が取り除かれる。 a /
関数一発でプロトタイプチェーンに繋げて、オブジェクトをクローンする。 - IT戦記
最近、プロトタイプ的継承の話しが盛り上がっています。 http://blog.livedoor.jp/dankogai/archives/50662064.html http://labs.cybozu.co.jp/blog/kazuho/archives/2006/10/javascript_string.php http://blog.livedoor.jp/dankogai/archives/50662606.html 最終形がやたら複雑になっています でも、実際はあそこまで複雑に書かなくても、できると思います ^^; そう思う理由 P 関数は object 関数の中でローカルのものである。コンストラクタとして使える必要はない。なので、 Atomic な場合でも P は function(){} でいい。 method 関数では P.prototype のプロパティに関数が代入されて
DOM オブジェクトとメモリリーク: Days on the Moon
IE でのメモリリーク ちょこちょこと紹介されているので知っている人も多いと思うが、IE には DOM ノードに絡んだメモリリークの問題がある。これに関しては Microsoft 自身の記事である「Understanding and Solving Internet Explorer Leak Patterns」に詳しいが、簡単にいえば DOM ノードオブジェクトに関する循環参照を作ると、IE を終了させるまでそのオブジェクトが解放されないというものだ。記事によればメモリリークには以下のようなパターンがあるという。 1. 単純な循環参照 ある DOM ノードオブジェクトのプロパティをたどっていくと自分自身に行き着く場合。以下のようなパターンが考えられる。 element.property == element element1.property1 == element2, element2
Site Cooler NZ | Points to Note When Shopping for a Washing Machine
Points to Note When Shopping for a Washing Machine There are different washing machines brands in New Zealand. When shopping, therefore, you need to ensure that first, you get a quality machine; a machine that will last through many years without breaking down. You check product warranties and reviews when shopping to ensure a machine is a good quality. The material of the drum can be enamel, plas
ReJax - Easiest Regular Expression Tester. Ever.
Have a pattern you want to test? Give it a shot. ReJax does one thing and one thing well: pattern testing. Updated June 27th, 2007 ReJax has been down for a while, but is back up now. Sorry for the trouble :) Supported languages: JavaScript PHP 5 PCRE PHP 5 POSIX Ruby - BETA!! PERL 5 UNIX Shell Pattern It is not necessary to enter the beginning and ending slashes in the pattern field. Not all modi
そろそろきっちりJavaScript | コラム | エンタープライズ | マイコミジャーナル
新着記事一覧 田中麗奈、初舞台で「嫁姑仲は順調です」 - 舞台『思い出トランプ』 [11:00 10/11] 【レポート】ソーシャルレンディングサービスの気になるメリット・デメリット-- maneoの妹尾賢俊社長に聞く [09:00 10/11] 【レポート】秋葉原アイテム巡り - 「マクロス」シリーズが秋葉原をジャック! 歌は世界(秋葉原)を救う!? [04:36 10/11] 「ロックマン9 アレンジサウンドトラック」のインストアイベントが開催決定 [03:25 10/11] DS『流星のロックマン3』、PR貴族に"髭男爵"が就任! 楽曲タイアップも決定 [03:03 10/11] ゼンリン、600カ所の紅葉スポットの情報を提供 - 色づき具合を15段階で表示 [02:46 10/11] TVアニメ『ドルアーガの塔〜the Sword of URUK〜』、2009年1月放送
javascriptを理解するためのたった2つの大切なこと:改
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'がかえってくるんだ。 別の例を
Collection & Copy - JavaScriptにおけるプライベートメンバ
JavaScriptにおけるプライベートメンバ 翻訳 原文：Private Members in JavaScript Copyright 2001 Douglas Crockford. All Rights Reserved Wrrrldwide. JavaScriptはJavaScript: 世界で最も誤解されたプログラミング言語です。JavaScriptのオブジェクトが、プライベートなインスタンス変数およびインスタンスメソッドを持てないため情報を隠蔽する能力が欠けていると思われることがあります。しかし、これは誤解です。JavaScriptのオブジェクトは、プライベートメンバを持つことができます。その方法は以下です。 オブジェクト JavaScriptはオブジェクトを基礎としています。配列はオブジェクトです。関数もオブジェクトです。オブジェクトもオブジェクトです。それならば、オブジェク
javascript [paulownia.jp]
Java等のオブジェクト指向はクラスベースのオブジェクト指向と呼ばれる。一方、JavaScriptはプロトタイプベース、あるいはインスタンスベースオブジェクト指向と呼ばれる。 クラスベースは、まずクラスを定義し、クラスを型とするインスタンスを作成することでプログラミングする。プロトタイプベースによるオブジェクト指向では、クラスの定義は必須ではなく場合によってはクラスという概念自体が存在しない。既存のオブジェクトのクローンとして新しいオブジェクトを作成し、そのオブジェクトに独自の性質を付加してプログラミングする。 JavaScriptのオブジェクトの性質は動的に変更可能。Java等では一度決定したオブジェクトの振る舞いは変更できないが、JavaScriptでは実行中の任意の場所でメソッドの動作を変更したり、新しく追加したり、削除したりすることができる。
Greasemonkeyで永続的に外部スクリプトを利用する - 技術メモ帳
GM_setValue / GM_getValue + unsafeWindow.eval を使って 永続的に外部スクリプトを利用する方法を考えてみた。 わざわざ DOM で script要素 を毎回注入するよりも 速いんじゃないかと思う。 Greasemonkeyには、GM_setValue / GM_getValue というのがあって、 GM_setValue("キー", "値") 上記のように入力してあげる事によって、たとえ、 Firefoxを終了させたとしても消えないデータを作成する事が出来る。 そして、それを利用して、 初回のみ XmlHttpRequest で外部スクリプトデータを取得して、 GM_setValue でスクリプトデータを永続化しておき、 二回目以降は、それを GM_getValue して eval するようにした。 以下は、永続的に prototype.js を
Part3 JavaScriptに学ぶ「言語の拡張性」：ITpro
サイボウズ・ラボ株式会社に勤めるWebプログラマ。出身は石川県金沢市。21歳でプログラミングに出会い，IT戦士になることを決意。それからというもの，寝ても覚めてもプログラムを書き続け今に至る。はてなでamachangというidでブログを書いてます。 最近，「とんがった」プログラマの間ではJavaScriptがちょっとしたブームです。あちこちの書店で，JavaScriptの書籍を見かけるようになりました。「はてブのホッテントリ」＊1にも，よくJavaScriptの記事が入っています（図1）。 その人気を象徴的に示しているが，Shibuya.js＊2という団体が開催しているJavaScript関連のイベント「Technical Talk」です。1回目は2006年4月，2回目は6月に開催されましたが，いずれの回も予約が殺到し，たった1日で席が埋まってしまいました。これには「JavaScriptの
(function(var){..............})(var) と function(var){............} の違い。つまり、クロージャ。 - それ図解で。・・・tohokuaikiのチラシの裏
<script> (function(v){alert(v)}("aa")); hoge=function(v){alert(v)}; </script> ってやった場合、ローディングが終わったら alert("aa") が実行される。 ただし、 <script> (function(v){alert(v)}("aa")); hoge=function(v){alert(v)}; hoge("bb"); </script> ってやった場合、ローディングが終わったら alert("aa"); alert("bb") が実行される。 function全体を()でくくった場合は、それ自体を無名関数化して1回実行させる。 じゃあ、(function(){})は何を返すか？ <script> hoge=(function(v){alert(v)})("aa"); alert(hoge); </scr
Unicodeエスケープ - sawatのブログ
付箋紙Greasemonkeyで、GM_setValueに登録した日本語の文字化け対策にencodeURIをつかったけど、encodeURIはURIをエンコードするための関数なのであんまり褒められた使い方ではないですね。しかも、encodeURIのようなURLエンコーディングは文字列をUTF-8にしてから、エンコード対象の各バイトを%xx形式*1で表現するので、日本語１文字をあらわすのにたいていの場合ASCII9文字が必要になって効率が悪いです。*2 なので、前述のような単に非ASCII文字をエスケープしたいだけのようなケースではUnicodeエスケープを使った方がよいです。Javaのpropertiesとかnative2asciiとかのやつです。 Unicodeエスケープは\uxxxx*3の形式であらわすので、たいていの日本語１文字はASCII6文字になって、URLエンコーディングに比べ
最速インターフェース研究会 :: JavaScriptのデザインパターン - Singleton
JavaScriptじゃねえと書けねえよ、ってやり方でデザインパターンを実装してみるコーナー。とはいってもデザインパターンとか良くわからないので適当に覚えながら作る。 間違ってる箇所あったらつっこんでくれるとありがたいです。 わかりやすい文章を書く能力が欠如してるのでデザインパターンって何だとかそういうのはこっち参照。 http://d.hatena.ne.jp/naoya/20050813/1123924312 JavaScriptのコンストラクタはPerl同様自在に定義できます。returnでobjectを返してやれば、newの結果としてそいつを使います。 普通にシングルトンなクラスを実装するにはこんな感じだと思います。 function Singleton(){ var self = arguments.callee; if(self.instance == null){ this.
Enjoy*Study - undefined
変数、プロパティが定義されていない(undefined)かの判定処理を、その時々で適当いろいろな書き方をしてしまっているので、自分の中で整理してみます。 良く使う/見かけるのは、下記の3つです。 (!x) (x == undefined) (typeof x == 'undefined') 上記はそれぞれ成立する条件が異なりますので、下記にそれぞれ記載します。 (!x) コード一番短くて済むので多用するのですが、、 !xが成立するのは、xがundefinedの場合だけじゃなくて、多岐にわたるので使用時に注意が必要だと思います。 !xがtrueになるようなものには下記があります。 (思いつくままに挙げてみたので、これもそうだよ！！とかあったらコメントいただけると助かります) undefined null false 0 NaN '' (空文字) プロパティが存在するかどうかで、数値(Numb
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
XPath でぐりもんだもん / Shibuya.js Technical Talk #1
ページの閲覧者にGreasemonkeyを使用させない方法 - 技術メモ帳