はてなブックマーク

組み込みクラス Array の全てのメソッドに apply() メソッドは適用出来るか？ 直前のエントリイ において、Array.prototype.push() メソッドへの apply() メソッドの適用について考えてみました。また、その中で関連して使用した jQuey().get() メソッドについては、こちら ( jQuery()の挙動を解読する。(11) 簡単なインスタンスメソッドいくつか──jQuery解読(19) ) で解読しました。 これらのエントリイで学習したことは、組み込みクラス Array の push() メソッドと slice() メソッドに、apply() 又は call() メソッドを適用することでした。言い換えれば、jQuery インスタンスオブジェクトに対して、組み込みクラス Array の push() メソッドあるいは slice() メソッド を a

それはある人のパソコンのメンテナンスから始まった 3年半前に購入された DEEL Inspiron 1150 （ OS は Windows XP ）が A さんから B さんへと譲渡され、B さんが使うための環境を構築し直した。ここではその際に行った、無料ソフトを使ったパーティションサイズ変更について、感謝と驚愕を込めて記しておく。 3.5 年は PC にとっては一昔も二昔も前であり、1150 NotePC ののハードディスク容量は、今から見れば余りに小さすぎるが、当時では決して過小ではなかった 60 GB 。このことは、僅か 3.5 年の間に、いかに PC の物理的環境条件が激変したかを示す、端的な材料と言えるだろう。 さて、当時の 60GB HD は 2 つのパーティションに区切られていて、C:20GB、D：残りとなっていた。 しかし、Cドライブが 20 GBというのは、現在から見れば

easing 関数＜解読＞ 解読とは大袈裟すぎるかもしれませんが、一見複雑に見える easing 関数式ですが、実は中学生程度の関数の知識があれば十分理解できるものであることを、恥ずかしながら最近納得したばかりなのです。 そこで、easing 関数が実は簡単な代数式であることを改めて整理しておこうと思います。それも中学校で倣う関数の形式に、表現し直してみます。 対象とする easing 関数は jquery.js で定義されている linear 及び swing の他、George Smith 氏による 30 種類の easing 関数です。 以下の表における大前提 数値の正規化大前提として、jquery.js における正規化を踏まえるので、easing 代数式の文字の意味は次のようになります。 t: current time ：これは経過時間ですが、jquery.js においては、t を

jQuery.offset オブジェクト（5785～5854行）の概要 このオブジェクトには 3 つのメソッドが定義されます。 initialize は、ブラウザ特性を把握するために幾つかのプロパティを設定するメソッドです。 この「幾つかのプロパティ」とは次に列挙した 5 つで、これらは、jQuery().offset() メソッド解読において後述するように、要素の正確な位置算出を行うために使われ、それは同時に、各ブラウザの CSS に関する特性を捉えることになります。 jQuery.offset.doesNotAddBorder ： 或るボックスの offsetTop を算出する際に、直上の親ボックスのボーダー値を加算しないか（true）、加算するか（false） jQuery.offset.doesAddBorderForTableAndCells ： table 内の或るセルの of

これら 2 つの jQuery インスタンスメソッドは、共に読み取り専用で、返値は共に座標オブジェクトですが、座標系と計測箇所が異なります。 offset メソッドがドキュメント座標における対象要素のボーダー辺の座標値を取得するのに対して、position メソッドは、対象要素の margin 辺の、基準要素（ offsetParent ）内における座標値を取得します。つま、offset メソッドによる座標値は対象要素の margin 値を含むのに対して、position メソッドによる座標値は margin 値を含みません。 しかし、position メソッドは offset メソッドを利用して基準要素から margin 辺までの offset 座標値を算出します。 jQuery().position() コード解読 5857:jQuery.fn.extend({ // jQuery p

無線ランのセキュリティと iPhone 無線ランのセキュリティ（不正利用防止・情報流出防止・情報傍受防止・犯罪利用防止）対策は少なくとも基本的に３つあるようだ。 通信の暗号化キー設定、ESSID （ Extended Service Set-IDentifier ）ステルス設定、そして MAC アドレス制限だ。そして書籍や関連サイトとでは、一般にこれらの三重のセキュリティ対策を講じることが推奨されている。 ここでは、我が家の WiFi 通信親機 WZR-HP-G300NH（ Buffalo 製 ）と、その子機としての iPhone との、無線通信におけるセキュリティ対策の設定方法を記録としてまとめておきたい。 AOSS を使用しない まず、何よりも重要なことは AOSS（AirStation One-Touch Secure System) を使わないことである。 購入直後には誰しもそうす

無線ランのセキュリティと iPhone 無線ランのセキュリティ（不正利用防止・情報流出防止・情報傍受防止・犯罪利用防止）対策は少なくとも基本的に３つあるようだ。 通信の暗号化キー設定、ESSID （ Extended Service Set-IDentifier ）ステルス設定、そして MAC アドレス制限だ。そして書籍や関連サイトとでは、一般にこれらの三重のセキュリティ対策を講じることが推奨されている。 ここでは、我が家の WiFi 通信親機 WZR-HP-G300NH（ Buffalo 製 ）と、その子機としての iPhone との、無線通信におけるセキュリティ対策の設定方法を記録としてまとめておきたい。 AOSS を使用しない まず、何よりも重要なことは AOSS（AirStation One-Touch Secure System) を使わないことである。 購入直後には誰しもそうす

jQuery 解読作業を進めるにつれ、Javascript の基礎が如何に分かっていないか、ほぼ毎日のように痛感させられます。その意味では jQuery 解読は無謀なチャレンジであった訳ですが、それでも誤謬を犯すマイナスを埋め合わせて遙かに余りあるプラスがあることも毎日自覚されるので、恥を忍んで引き続きjQuery解読を進めるつもりでいます。 しかし、基礎の基礎が余りに分かってない自分に嫌気が指してきてしまい、匙を投げ出すような醜態は演じたくありません。そこで、自戒を込めて敢えて誤解していたこと、理解していなかったこと、不十分な理解に留まっていたことなどについて、つらつらと記述していきたい、と思います。 本稿の目的とは関係ないが・・・return の 返値 四則計算のような簡単な関数の場合、return で返される値は余りに明白です。return a*b ならば a に b を乗じた計算結

jQuery().animate() メソッド───その 2（ 逐次実行と併行実行 ） このエントリイでは animate メソッドによって、複数のアニメーションを起動する 2 つの方法について考察します。複数アニメーションを、1 つずつ順番に起動する方法と、恰も同時に引き起こされているかのように並行して表示する─── こうした 2 つの異なるアニメ起動方法について、その差異をもたらすコード進行過程を考えてみます。 アニメーションの逐次起動はどのように行われるか？ 【 opt.queue!==false （ opt.queue が true か undefined の時 ）のコード進行 】 逐次実行アニメーションサンプル 本題に入る前に逐次実行アニメーションのサンプルを見てみます。 逐次実行アニメの一例 アニメの逐次実行とは、複数のアニメーションを 1 つずつ順番に実行することです。例えば

▲ToTop 連続的な Ajax 通信による結果取得の困難性 以前のエントリイタイトル、最新のエントリイタイトル、そして以後のエントリイタイトル───Ajax 通信によるこれらの 3 つのフェースの情報取得をずっと試みる中で、特に躓いた点は過去/未来のエントリイタイトル取得、それもそれぞれに 10 個の、合計 20 個のエントリイタイトルを一発で取得する Ajax 通信でした。 もっと具体的に言えば、1回のコード進行で過去/未来の 20 個のエントリイタイトルを取得することは出来たのですが、それらの取得後可及的速やかにそれらを表示することがどうしても巧くいかなかったのです。 例えば、20個の取得を指示しても、過去エントリイは 3 つしか表示できないのに、未来エントリイは 10 個表示できたり、その逆だったり、二度目に実行すると必ず 20 個全てのタイトルを表示取得できたり、結果取得が非常に

このエントリイは、 jQueryに学ぶJavascriptの基礎(5) 論理演算子の使い方──jQuery解読(23) の続編です。(5)を書いたのが 2007/12/16 ですから、1 年以上間が空いてしまいました。その点からすれば「続編」と言うよりも「再開編」と言うべきかもしれません。 配列のメソッドである push() に apply() メソッドを適用する apply() メソッドは Javascript 初心者には取っつきにくい関数です。それが別の関数を対象に適用され、しかも this キーワードが登場し、更に引数を配列で与えなければならない───このように約束事の多い仕様となっているためでしょう。 一般的に遭遇する fn.apply ( this, [ array ] ) という書式は、最初はなかなか理解しがたいものです。これは this.fn ( [array] ) とほぼ同

このエントリイは、jQuery() の挙動を解読する(24) jQuery 1.2.2 における jQuery 定義コードを分析する──jQuery解読(36) の続編です。続編と言うよりも改訂編と言うべきかもしれません。上記エントリイには未解明な問題もあり、改めてこのエントリイで詳述することにしました。 jQuery定義と酷似する構造の簡易なコードを作成して解析する jQuery の定義コードへの理解を深めるために、それに類似した短いコードを作成して解析してみました。 jQuery 定義コードを解読するための簡単な類似コード 1: (function(){ 2: // block-A 3: var R = window.R = function(a,b){ 4: return new R.prototype.init(a,b); 5: } 6: // block-B 7: R.proto

初稿：2007/10/31改訂：2007/11/19……thisに関する記述追加、用語の統一化再改訂：2007/11/23……何カ所かの基礎的なミスを修正再改訂：2007/12/3……表現等を抜本的に見直した再改訂：2009/2/22……Ver1.3.2 対応に改訂 init()メソッドの概要解読 このエントリイでは、init コンストラクタによるインスタンスの初期化過程について概要解読を行います。 jquery.js のインクルード完了時には、直ぐにコード全体を包含する無名関数が起動され、インスタンスオブジェクトが作成され、その初期化を int() メソッドが担います。 まず該当箇所のコードを抜粋すると以下の通りです。 （ 行数はVer1.3.2による ） コード表示／隠蔽 24: jQuery = window.jQuery = window.$ = function( selecto

初稿：2007/12/13 Update1：2007/12/23 Window下部への popup 飛び出し補正対策を実装。 Update2：：2007/12/24 popupボックスの「採寸」が各起動要素毎に、一度だけで済むように工夫 Update3：2007/12/31 popupされる文字列取得も一度だけで済むように工夫 Update4：2010/7/25 全面的な改訂（プラグイン化） 上の画像がここでいう popup を表示させた例です。濃い緑色のボックスとその中の白い文字が popup です。黄緑色のボックス内にマウスカーソルをオーバーさせ、 popupが表示 されるようにして、その状態のスクリーンショットを画像化したものです。マウスカーソルの右下に popup ボックスが表示されていることが分かります。 また、この実例部分にも popup 要素を付けましたので、マウスオーバーと

HTMLの表示/隠蔽 <!--表示/隠蔽用のボタンとその操作対象となる PRE タグを包含する div タグ を設け、その class 名を "togglePRE" として、ボタンと PRE タグのセットを 全て取得する。 --> <div class="togglePRE"> <button style="dicplay:block;">ボタン説明文字列</button> <pre style="display:none;">表示/隠蔽内容</pre> </div> コードの表示/隠蔽 (function(){ 1:　var togglePRE = $(".togglePRE"); //当該クラス要素がない場合には何もしない。 2:　if (togglePRE.length == 0) return; //個々のクラス対象毎にイテレート 3:　togglePRE.each(functio

$(document).ready(fn) - bindReady() - $.ready() $(document).ready(fn) が bindReady() を、そしてそこから $.ready() が呼び出される三層構造で、これらのメソッドが機能します。 それぞれの役割は、順に以下のようになります。 $(document).ready(fn)……(1/2) DOM読み込み完了通知イベントの登録（ bindReady()メソッドの実行 ） $(document).ready(fn)……(2/2) DOM 読み込み完了時の fn の実行と DOM 読み込み完了時に実行させる関数の登録、 bindReady()……(2) DOM 読み込み完了のチェックと完了時の jQuery.ready()呼び出し jQuery.ready()……(3) DOM 読み込み完了を記録するプロパティの設定

jQuery解読作業を進めるにつれ、Javascriptの基礎が如何に分かっていないか、ほぼ毎日のように痛感させられます。その意味ではjQuery解読は無謀なチャレンジであった訳ですが、それでも誤謬を犯すマイナスを埋め合わせて遙かに余りあるプラスがあることも毎日自覚されるので、恥を忍んで引き続きjQuery解読を進めるつもりでいます。 しかし、基礎の基礎が余りに分かってない自分に嫌気が指してきてしまい、匙を投げ出すような醜態は演じたくありません。そこで、自戒を込めて敢えて誤解していたこと、理解していなかったこと、不十分な理解に留まっていたことなどについて、つらつらと記述していきたい、と思います。 thisとは何か？ 「this」──Javascriptを始めたばかりの素人は、直ぐに「thisって何？」と躓きます。しかも度々、あちこちで登場するので、どうも役割がいくつかあるらしいと気がつくと

業務繁忙故、ブログ投稿が出来ない日々が続いてしまいました。10日ぶりの投稿です。 jQueryの特徴(1)───僅か2つのグローバルオブジェクト定義 jQueryはその全体がたった１つの無名関数で定義され、かつインクルード時にその無名関数が実行されるフレームワークです。それ以前は異なった定義方法でしたが、確かver1.1.4から無名関数による定義スタイルになりました。 そして重要な点は、インクルード時に実行される無名関数によって定義されるグローバル変数が僅か２つ──「jQuery」とそれへのショートカットである「$」──に留まることです。（cf. prototype.jsの場合にはインクルード直後に定義されるGlobal変数は26に達します。） このGlobal変数を僅か２つしか定義しないことが、jQueryの大きな特徴の１つではないでしょうか。このGlobal変数の少なさは、任意のscr

それは簡単にできることでした jQueryを使ってコンテンツの移動を試してみました。それは或るコンテンツをクリックしたら当該コンテンツを移動するというものです。 以下がそのサンプルです。 画像をクリックするとまずその画像が横に広がり、そして元のサイズに戻ります。 次にゆっくりと２回スライドし、その後ゆっくりと画像が消えた後には、その位置で画像が表示された後に、ゆっくりと元の位置に戻ります。 なお、この animation は初期位置と初期表示状態に戻るように作成されており、繰り返しクリックすれば、何度でもアニメーションを繰り返し再現することが出来ます。 ※　 この連続Animationにおいて、jQuery固有の「メソッドチェーン」を活用していることは言うまでもありません。いかようにもアニメーションを連続して指定出来ることは魅力的なことです。また、ここでは画像の伸縮が終了するのを待って、そ

関連エントリイ in this Blog jQuery（）活用（2) Popup Tips を自作する──jQuery解読(22) popup メソッドは２年半前に一度作成していた 2007年12月。PopupTips と題して、jquery.js を最小限度使用してポップアップを作りました。お陰様で 6 件の拍手を戴きましたが、パソコンの高速化がますます定着し、加速されている今、jquery.js をフル活用したコードでも、描画に大きな支障は出ない程度にまでパソコン性能が... 「jQuery解読によるJavascript学習」関連エントリイ一覧 in this Blog 何回かに分けて Traversing に分類されているインスタンスメソッドの解読を行います。 全体の項目とこのエントリイの項目 eq()、slice()、is()、filter()、closest()、not()、ad

02 | 2024/03 | 04 S M T W T F S - - - - - 1 23 4 5 6 7 8 910 11 12 13 14 15 1617 18 19 20 21 22 2324 25 26 27 28 29 3031 - - - - - -

▲ Browsing MENU Archives 2020年03月 (1)2019年09月 (1)2019年02月 (1)2018年12月 (1)2018年09月 (2)2018年06月 (1)2018年05月 (1)2017年03月 (2)2017年01月 (1)2016年12月 (1)2016年06月 (1)2016年04月 (1)2015年09月 (1)2015年06月 (2)2014年05月 (1)2014年03月 (1)2014年01月 (1)2013年09月 (1)2013年07月 (1)2013年06月 (2)2013年01月 (1)2012年12月 (1)2012年11月 (2)2012年10月 (1)2012年08月 (1)2012年06月 (1)2012年05月 (1)2012年03月 (2)2012年02月 (2)2012年01月 (2)2011年12月 (1)201

jQuerifyブックマークレットを改訂 jQueryを勉強する上で、Firebugは欠かせないツールです。そしてFirebugを利用して、任意のサイト上でjQueryを試すことの出来るjQuerify.jsブックマークレット（Learning jQuery ：jQuerify Bookmarklet）は大変重宝する優れものです。 元々FirebugはFirefoxのアドオンとして開発されましたが、IEやOperaでも一部の機能を利用できるFirebug Liteが開発されている（Firebug Lite）ので、jQuerify.jsブックマークレットもこれらのBrowserでも利用できます。 但し、オリジナルのjQuerify.jsブックマークレットは名前空間を汚染する可能性があり、またリンク先のjQueryのバージョンは1.1.3.1であり、既に1.1.4が公表されているため、次のよう

それは10日夜からの足かけ5日間の苦悩の末に突如開けた！ jQueryの使い方は簡単ですが、そのコードを理解することは私にとっては大変難しいものでした。そうなのです。過去の4日間、「どうしてあのようにしてobjectを拡張できるのだろうか？」───とずっと悶々としてきました。 それが極めて初歩的な方法ですが、jQueryのコードの中で分かりにくい箇所にalert関数を追加し、その進行過程を取りだし分析する、と言う方法で解明することが出来ました。嬉しい！！ ここでは解明できた、jQuery におけるobjectそのものの拡張方法について綴ってみようと思います。 まず苦闘してきたコードの該当箇所を抽出しておきます それは次の2つのコードです。jQuery オブジェクト自身を拡張している箇所です。最初は、prototypeプロパティにおいて引数を操作し、かつそれをjQuery.extendメソッ

02 | 2024/03 | 04 S M T W T F S - - - - - 1 23 4 5 6 7 8 910 11 12 13 14 15 1617 18 19 20 21 22 2324 25 26 27 28 29 3031 - - - - - -

結論概要 通常配置要素の絶対座標上の位置を取得するJavascriptコードは、ウエブ上や書籍でかなり流布されている。しかし、それらは正しく絶対座標を提供しないものが多い。 だから仕方なく、コードの進行過程をチェックし、ブラウザ毎に必要となる補正を行うコードを追加し、確実に正しい座標値を得る方法を確立した。そのコードはこのエントリイの末尾に掲載し、検討経過を克明に下記にまとめた。 なお、改訂したコードが対応するブラウザはIE7、FF2及びOpera9であり、safariは検証する術がなかった。 object.offset○○は大変便利なプロパティ それは位置と大きさを与えてくれる。それはマイクロソフトが定義し、Mozzillla系も随随した便利この上ない属性だ。 さて、これらの４つのプロパティは片や位置を、片や大きさを取得する。異なる属性取得を同じoffsetで行うのだ。しかも嫌がらせとし