前回、どちらかと言えばinnerHTMLよりはDOMを使いましょうと書きました。しかしDOMをちょっと使えば、その余りの煩雑さに閉口することでしょう。では可読性を保持しつつ、XSSも考慮して書くにはどうすればいいでしょうか。 ちょっとしたものであれば、HTML中にdisplay:noneで構造を書き出しておき、それをJavaScriptから使う、というアプローチでもカバーできるでしょう。しかし大規模になると限界が見えてきます。描画に必要ない要素を書き出しすぎると、パフォーマンスの問題も発生します。 そこで、JavaScriptでもテンプレートエンジンを使うことになります。 テンプレートエンジンには二大勢力がある E4Xみたいな変態拡張やJadeなどの独自文法系を除くと、Scriptlet系とDOM Builder系の二種類に大きく分けることができそうです。(系統の名前は適当に決めました。正
組み込みクラス Array の全てのメソッドに apply() メソッドは適用出来るか? 直前のエントリイ において、Array.prototype.push() メソッドへの apply() メソッドの適用について考えてみました。また、その中で関連して使用した jQuey().get() メソッドについては、こちら ( jQuery()の挙動を解読する。(11) 簡単なインスタンスメソッドいくつか──jQuery解読(19) ) で解読しました。 これらのエントリイで学習したことは、組み込みクラス Array の push() メソッドと slice() メソッドに、apply() 又は call() メソッドを適用することでした。言い換えれば、jQuery インスタンスオブジェクトに対して、組み込みクラス Array の push() メソッドあるいは slice() メソッド を a
このエントリイは、 jQueryに学ぶJavascriptの基礎(5) 論理演算子の使い方──jQuery解読(23) の続編です。(5)を書いたのが 2007/12/16 ですから、1 年以上間が空いてしまいました。その点からすれば「続編」と言うよりも「再開編」と言うべきかもしれません。 配列のメソッドである push() に apply() メソッドを適用する apply() メソッドは Javascript 初心者には取っつきにくい関数です。それが別の関数を対象に適用され、しかも this キーワードが登場し、更に引数を配列で与えなければならない───このように約束事の多い仕様となっているためでしょう。 一般的に遭遇する fn.apply ( this, [ array ] ) という書式は、最初はなかなか理解しがたいものです。これは this.fn ( [array] ) とほぼ同
jQueryのソースとで下記のような表記を見かけます。(1.4からは push = Array.prototype.push というエイリアスつくってますけど) Array.prototype.push.apply( this, elems ); これはArray likeなオブジェクトを作るときに用いる手法なんですけど、そこら変はとりあえず置いておいて、なんでこれが this.push( elems ); じゃダメなのかがわからなかったんですけど、検証してみたらすぐわかりました。 var obj = {}; obj.push('foo'); // => [error] obj.push is not a function 上記がエラーになるのに対して以下は成功します。 var obj = {}; Array.prototype.push.apply( obj, ['foo'] ); //
こんにちは、太田です。前々回、前回とJavaScriptにおける継承について学習しました。今回はそれに深く関わるthisについて学んでいきます。 JavaScriptのthisはややクセのある動作をするように思えるかもしれませんが、仕組みをしっかり把握すれば実に簡単です。特に重要なのは次の2点です。 thisが何を指すかは関数の呼び出し方で決定する thisは関数スコープに存在する特殊な変数である インスタンスとしてのthis では、まずはコンストラクタ内でのインスタンスとしてのthisを見てみましょう。 コンストラクタとthis function A(name){ this.name = name; } A.prototype.getThis=function(){ return this; }; var a = new A('aaa'); console.log(a); console
気軽にプラグインを追加したい jQuery のプラグインっていうと、モーダルウィンドウやツールチップを表示したり、データをグラフ化したりとそれだけで大きな恩恵を受けられるものが多々ありますが、自分なりのプラグインの定義方法などの汎用的な処理を考えていると、jQuery のメソッドをちょっと拡張したような自分用メソッド郡みたいなものを定義したくなることがあります。 また、複数のパーツで構成される UI 系のプラグインの場合だと各パーツ毎に専用メソッドを持たせたくなったりします。例えばモーダルウィンドウの場合なら、閉じるボタンには winClose メソッド、ウィンドウフレーム部には、winResize メソッドみたいなものです。ところが、 プラグインの追加 = jQuery の prototype オブジェクトへの関数の追加 = jQuery オブジェクトの汚染 と考えると上記のようなケース
ジョン・マッカーシー(John McCarthy, 1927年9月4日 - 2011年10月24日[1][2][3][4][5][6])は、アメリカ合衆国の計算機科学者で認知科学者。マービン・ミンスキーとならぶ初期の人工知能研究の第一人者。1955年に提出した提案書で初めて「人工知能」(Artificial Intelligence)という用語を使用した。また、ALGOL言語の設計に触発され、LISPというプログラミング言語を開発し、タイムシェアリングの概念を一般化させた。 1927年9月4日、マサチューセッツ州ボストンにてアイルランドからの移民の父とリトアニア系ユダヤ人移民の母との間に生まれる[7]。世界恐慌のころは住居を転々としていたが、父が労働組合(Amalgamated Clothing Workers)に職を得て、ロサンゼルスに定住する。都市を中心に活動する共産主義者だった両親[
JavaScript における new 演算子の動作は大まかにいって以下のとおりである。(new F() とした場合。) 新しいオブジェクトを作る。 1 で作ったオブジェクトの [[Prototype]] 内部プロパティ (__proto__ プロパティ) に F.prototype の値を設定する。 F.prototype の値がオブジェクトでないのなら代わりに Object.prototype の値を設定する。 F を呼び出す。このとき this の値は 1 で作ったオブジェクトとし、引数には new 演算子とともに使われた引数をそのまま用いる。 3 の返り値がオブジェクトならそれを返す。そうでなければ 1 で作ったオブジェクトを返す。 ここで「オブジェクトである」というのはプリミティブ値 (文字列、数値、真偽値、undefined 、null) ではないということだ。new Stri
先日、「JavaScriptのオブジェクトについて考察してみた - あと味」を書いてから、chikuraさんからコメントいただいたり、id:dankogaiさんから「404 Blog Not Found:javascript - にはクラスはない」という記事で言及いただいたり、JavaScript: The Good Partsを読み返したりした結果、newについて調べたいという衝動にかられましたので、その調べた結果を書いてみたいと思います。 newを調べようと思ったキッカケを整理 まずは、そのキッカケから整理します。 chikuraさんのコメントより 押さえるべきポイントは、new演算子の際に何が行われるか?だと思うので、こちらのページもぜひ読んでみてください。 JavaScript の new 演算子の意味: Days on the Moon http://nanto.asablo.j
JavaScriptを勉強しているとオブジェクトとはなんぞや?ということがわからなくなってきます。選択肢が増えれば増えるほど。 JavaScriptには、同じように見えて、実は同じではないデータがあります。それらのオブジェクトについて、区別して説明が付けられるように、自分なりに考察してみました。勉強中のアウトプットなので、ここで書いた内容は事実とは大きく外れているものかもしれません。とにかく不明瞭な部分を自分なりに理由づけしたかっただけです。 サンプルコードを試される場合は、FirefoxのFireBugにあるコンソールに貼りつけて実行するか、Safariの開発ツールにあるコンソールに貼りつけて実行してください。それがわからない方は console.log の部分を alert に置き換えて確認してください。 話がややこしくなるので、今回はプロパティしか扱っていません。 名称の定義について
前回までのおさらいと今回のあらすじ 前回は、thisキーワードについて深く解説しました。関数内で使用する「this」は、状況に応じて様々に変化する可能性がある、というお話でしたね。 これでやっと、JavaScriptの関数が持つ様々な機能を説明するための前提知識が整いました! JavaScriptの関数については、当連載でも一度取り上げています。JavaScriptの関数は、単なる手続きの単位ではなくオブジェクトの一種なのだ、と言うことを取り上げたトピックでした。 そう、JavaScript関数の実体は、Functionクラスのオブジェクトです。Functionクラスには、関数を操るための様々なメソッドやプロパティが存在します。今回は、それらを網羅的に解説するとともに、関数内でのみ使用可能な「arguments」オブジェクトについてもお話ししたいと思います。 Functionクラスのメンバ
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
前回の続きです。サンプルコードは前回から続いていると思ってください。 privateは諦めましょう 親のメソッドを呼ぶ コンストラクタ instanceofに対応する ダックタイピングのススメ 今回もobject関数を使うので再掲載。 /* * object - オブジェクトを作る * Object object(BaseObj [, mixinObj1 [, mixinObj2...]]) */ function object(o) { var f = object.f, i, len, n, prop; f.prototype = o; n = new f; for (i=1, len=arguments.length; i<len; ++i) for (prop in arguments[i]) n[prop] = arguments[i][prop]; return n; } ob
JavaScriptが、いま注目を浴びている。 JavaScriptがこれだけの注目を浴びた理由の1つとして、Ajax技術の登場とも相まって、JavaScriptに対する確かな理解の必要性が高まったという事情は否定できない。しかし、それだけでは説明できない急速な注目の理由として、もう1つ、JavaScriptという言語そのものが持つユニークさが開発者の目を引いたという点は看過できないだろう。 もっとも、このユニークさは同時に、多くの開発者が感じているJavaScriptに対する苦手意識と同義でもある。これまでVisual BasicやC#、Javaといった言語でオブジェクト指向構文になじんできた開発者にとって、JavaScriptのオブジェクト指向構文はいかにも奇異なものに映るのだ。ようやくクラスという概念を理解した開発者が、JavaScriptという言語の背後にたびたび見え隠れする「プロ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く