2014年4月9日水曜日

jQuery リストから最大値を取得する

jQuery を（一部）使ってリストの中から最大値を取得するコード例です。
Math ライブラリなどを使えばもっと省コードで記述できると思いますが、読みやすいしまずはこれから。
each 文の中の 変数 this は、リストの各アイテムになります。

// var list はアイテムコレクションを保持し、 //アイテムのプロパティとして Value を保持しています。 var max; $(list).each(function () { if (!max) { max = this.Value; } else if (max < this.Value) { max = this.Value; } });
on 0 件のコメント:
ラベル: ,

2014年4月8日火曜日

JavaScript 名前空間の定義

JavaScript で名前空間を定義して、その中にクラスと関数を作成してみましょう！
JavaScript では名前空間を扱う仕組みが用意されていないので、名前空間は名前空間として利用される専用のオブジェクトです。

■JavaScript の定義
まず最上位階層の test 名前空間オブジェクトを定義し、その配下に Class 名前空間オブジェクトを作成します。
Class には method1、method2 ２つの関数を実装しています。

Class.js
/*
    test/Class.js（test フォルダにある Class.js というファイル）
*/

var test;                   // test 名前空間の宣言

if (!test)
{
    test = {};             // test 名前空間が存在しない場合、名前空間を生成
}

test.Class = {};            // 続いて test.Class 名前空間を生成

// Class 名前空間に関数を定義
test.Class.method1 = function ()
{
    alert("method1");
};

test.Class.method2 = function ()
{
    alert("method2");
};

■JavaScript の呼び出し
名前空間 test.Class 配下にある method1 と method2 を呼び出しています。
名前空間 test と Class はそれぞれ JavaScript オブジェクトのため、変数 instance に参照を割り当て、
変数 instance からこれらメソッドを呼び出しています。

// ボタンクリックで呼び出し
function clicked() {
    // クラスインスタンスを取得
    var instance = test.Class;
    instance.method1();
    instance.method2();
}

[関連記事]
JavaScript オブジェクトの作成
http://kainobi2.blogspot.jp/2014/04/javascript.html
on 0 件のコメント:
ラベル:

2014年4月7日月曜日

jQuery HTML 要素が存在するかを判定

jQuery で HTML 要素が存在するかを確認してみましょう。確認方法は至って簡単です。
HTML 要素の length プロパティが 1 以上であれば document に HTML 要素が存在し、0 であれば HTML 要素は存在しません。
このような判定は動的に生成する HTML 要素に処理を行う前の有無確認として便利かもしれません。

$(function () {
    if ($("#Text1").length > 0)
    {
        alert("'Text1' exists");
    }
    else
    {
        alert("'Text1' not exist");
    }

    if ($("#Text2").length > 1) {
        alert("'Text2' exists");
    }
});


<body>
    <input id="Text1" type="text" />
</body>


こちらでも同じトピックを扱っています。
Is there an “exists” function for jQuery?
http://stackoverflow.com/questions/31044/is-there-an-exists-function-for-jquery
on 0 件のコメント:
ラベル:

2014年4月4日金曜日

JavaScript オブジェクトの作成

JavaScript でオブジェクト指向プログラミングをする場合、オブジェクトの雛形となるクラスを関数で定義します。
MyClass という名前の関数を用意することで、他のオブジェクト指向言語の様にオブジェクトを生成することができます。

function getClassInfo() {
    // オブジェクトの生成
    var myClass = new MyClass();
    // デフォルトのプロパティ値を出力
    myClass.showDetail();
    // パラメタの値でプロパティを初期化してを出力
    myClass.showDetail(2, "Napoleon");
}

function MyClass(id, name) {
    if (arguments.length === 0) {
        this.ID = "1";
        this.Name = "John";
    }
    else {
        this.ID = id;
        this.Name = name;
    }
}

MyClass.prototype.showDetail = function (id, name) {
    if (arguments.length === 0) {
        alert(this.ID + " - " + this.Name);
    }
    else {
        this.ID = id;
        this.Name = name;
        alert(this.ID + " - " + this.Name);
    }
}

[参考リンク]
JavaScript オブジェクトの作り方と使い方
http://ja.wikibooks.org/wiki/JavaScript_%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9%E3%81%A8%E4%BD%BF%E3%81%84%E6%96%B9

[関連記事]
JavaScript 名前空間の定義
http://kainobi2.blogspot.jp/2014/04/javascript_8.html
on 0 件のコメント:
ラベル:
登録: 投稿 (Atom)