2012年

strong { display: inline-block; margin: 1.2em 0; } ※jasmineの公式サイトはこちら。 Spec記述の基本 実際に Spec(テストコード) を書いていきます。 今回はもっとも一般的(？)な正常系の記述をすることで、テストコードの書き方を試してみます。 describe('"g.date.W3CDTF.parse" public static method', function () { it('"YYYY-MM-DDThh:mmTZD"フォーマット文字列からDateオブジェクトへ変換できる ', function () { expect( new Date(1997, 6, 16, 19, 20, 0) ).toEqual( ...

文字列中に指定した文字列が含まれているかどうかを調べるのに"indexOf"を使う。 この indexOf の評価方法で、「指定した文字列が含まれない」ことを調べるのに "<0"を用いた方法ではなく、チルダ（~）を使った方法があるらしい。 "<0" を使った記述 var text = 'As flies to wanton boys are we to the gods, they kill us for their sport.'; if (text.indexOf('gods') < 0) { // 'gods' が含まれない場合 } else { // 'gods' が含まれる場合 } "!~" を使った記述 var text = 'As flies to wanton boys are we to the gods, they kill us for ...

前編からの続き。 後編では、実際にドラッグ＆ドロップのプログラムを作ってみる。 一応、jQueryを使う前提で。 ソースコード ドラッグ機能を有効にするスクリプト。 var g = g || {}; g.ui = g.ui || {}; /** * @public * @constructor * @class */ g.ui.Draggable = function (element) { this.element = element; this.cloneNode = null; this.initialize(); }; /** * フラグとして利用する static 変数 */ g.ui.Draggable.source = null; /** * 初期化処理 */ g.ui.Draggable.prototype.initial ...

HTML5のドラッグ＆ドロップとはちょっと違う… HTMLの任意DOM要素同士でドラッグ＆ドロップしたいんだよね。。 どのイベント使っていいかわからないから、とりあえず「前編」として調査です。 ブラウザ別イベントの発生順序 次のような状況（プログラム）を想定して、IE、Chr(Chrome)、FF(FireFox)において どのような順序でイベントが発生するか調査してみた。 とりあえず、一通りのイベントをドラッグ対象となる任意のDOM要素(source)に追加。 とりあえず、一通りのイベントをドロップ先となる任意のDOM要素(target)に追加。 ドラッグ対象となる任意のDOM要素(source)を mousedown mousedown された 任意のDOM要素(source) のクローン(clone)を作成 作成したクローン(clone)を body 末尾へ ...

javascriptで基本となる「イベントの追加、削除」処理。 ソースコード var g = g || {}; g.event = g.event || {}; /** * 指定した要素にイベントを追加します。 * * @public * @param {DOMElement} element イベントを追加したいDOM要素 * @param {string} type イベント種類 * @param {function} handler コールバック関数 */ g.event.addEventHandler = function (element, type, handler) { var actual; // ブラウザに応じて使える関数を選択 if (wind ...

.post-body .header .title { color: #3F529C; font-size: 2em; } .separator1 { height: 2em; line-height: 2em; border-top: 1px solid silver; border-bottom: 1px solid silver; border-left: 3px solid silver; border-right: 3px solid silver; margin: 2em 0; } .separator1 .title { font-weight: bold; font-size: 1.8em; padding: 0 1em; } .separator2 { height: 2em; line-height: 2e ...

基本的にjasmineのソースコードにあるjsdocコメントを日本語化しています。 補足 or 修正している個所もあります。 日本語が変だったり、補足が変だったりと、不備があるかもしれないので、そういった場合は指摘いただけると幸いです。 .post-body .header .title { color: #3F529C; font-size: 2em; } .separator1 { height: 2em; line-height: 2em; border-top: 1px solid silver; border-bottom: 1px solid silver; border-left: 3px solid silver; border-right: 3px solid silver; margin: 2em 0; } .separ ...

JavaScript で DateオブジェクトからW3C-DTF文字列 へ変換する関数。 var g = g || {}; g.date = g.date || {}; g.date.W3CDTF = {}; /** * DateオブジェクトからW3C-DTFフォーマット文字列へ変換します。 * @param {Date} date Dateオブジェクト * @return {string} W3C-DTFフォーマット文字列 */ g.date.W3CDTF.stringify = function (date) { // 数値をパディングする関数 var paddingNumber = function (number, length) { var source = String(number); var count = ...

JavaScriptのBDD(Behavior Driven Development)をやってみる。 jasmineを用いてBDD。 とりあえず、今回は環境作り。 jasmineのStand Alone版をダウンロード。 ダウンロードページ→ GitHub : pivotal / jasmine(現時点最新「v1.2.0」を取得しました。) ちなみにWebページはこちら→Jasmine(英語 ToT) ダウンロードしたzipを展開。 展開したら次のような構成になっている…ハズ。 + lib + jasmine-1.2.0 - jasmine.css <- スタイルシート - jasmine.js <- 本体 - jasmine-html.js <- HTML描画エンジ ...

JavaScriptで、W3C-DTF形式文字列をDateオブジェクトへ変換する関数 一応、タイムゾーンの違いも計算するものを…￠( ・・)ノ゜ポイ ちなみに、関数名は何となく"JSON.parse"にあわせた作りで(..;) var g = g || {}; g.date = g.date || {}; g.date.W3CDTF = {}; /** * W3C-DTFフォーマット文字列を分割するための正規表現 */ g.date.W3CDTF.regexp = new RegExp("^(\\d{4})-?(\\d{2})?-?(\\d{2})?T?(\\d{2})?:?(\\d{2})?:?(\\d{2})?(\\.\\d+)?(\\+|-|Z)?(\\d{2})?:?(\\d{2})?$"); /** * W3C-DTFフォーマット文字列からDateオブジェクト ...

Syntax Hilighterをどうしても使ってみたくて… ようやく Blogger にコードが貼れるようになった。。。 自分は主に Javascript を扱っているので JavaScript のみ。 function foo () { window.alert('bar'); } やり方自体は、alexgorbatchev.comにあるソースコードを拝借するやり方。