2011-03-23

コンストラクタ呼び出しパターン

javascript

JavaScriptTheGoodPartsより

new演算子をつけて呼び出された関数(コンストラクタ関数)は、新しいオブジェクトが生成される。

コンストラクタ関数はnew演算子指定なしでも呼び出せてしまう。実行時に何も言われないので、使用に注意する必要がある。

コンストラクタ関数は大文字から始まる名称にするなどの命名規則を設けるなどする。

クロージャを利用したインスタンス生成関数を作成などのnew演算子を使用しない方法もある。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script type="text/javascript">

//コンストラクタ関数呼び出し
var Foo = function(msg){
	this.msg = msg;
};
//Foo関数のprototypeオブジェクトにgetMessage関数を設定
//すべてのインスタンスでgetMessageが呼び出せるようになる。
Foo.prototype.getMessage = function(){
	return this.msg;
};

//クロージャを利用したクラス定義
//createHogeのスコープを外れても、thatは_fooと_barにアクセス可能。この仕組みをクロージャという。
var createHoge = function(f, b){
	var _foo = f;
	var _bar = b;
 	var that = {
		margeFooBar : function(){
			return _foo + _bar;
		}
	};
	return that;
};

function pageLoad(){
	var foo = new Foo("Fooクラス");
	window.alert(foo.getMessage());
	var hoge = createHoge(10, 20);
	window.alert(hoge.margeFooBar());
}
</script>
<body onload="pageLoad();">
</body>
</html>

2011-02-26

jQuery Templates メモ

jQuery javascript asp.net mvc

こんな感じで書いていきます。

<html>
<head>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
</head>
<script type="text/javascript">
	$(document).ready(function(){
		var datas = [
		{item: "商品1", price: 1000}
		, {item: "商品2", price: 2000}
		, {item: "商品3", price: 3000}
		, {item: "商品4", price: 4000}
		];
		var tmpl = $("#container-row").tmpl(datas);
		tmpl.appendTo("#container");
	});
</script>
<body>
<p>商品リスト</p>
<ul id="container"></ul>
<script id="container-row" type="text/html"><li>商品名:{{= item }}、値段{{= price }}</li></script>
</body>
</html>

2010-08-15

jQueryでのチェックボックスのチェック判定

jQuery asp.net javascript

下のような左端列にチェックボックスを持つテーブルに、選択行データの一括削除機能をjQueryで実装する。
テーブルと削除ボタンは、↓こんな感じで。

...
<table>
  <thead>
    <th> </th>
    <th>Id</th>
    <th>タイトル</th>
  </thead>
  <tbody>
    <tr class="detail-row">
      <td class="del-col"><input type="checkbox" class="del-check" /></td>
      <td class="id-col">1000</td>
      <td>タイトル1</td>
    </tr>
    <tr class="detail-row">
      <td class="del-col"><input type="checkbox" class="del-check" /></td>
      <td class="id-col">1001</td>
      <td>タイトル2</td>
    </tr>
    ...
  </tbody>
</table>
...
<input type="submit" id="del-button" value="削除" />

削除ボタン押下時処理
サブミットボタンでもclickイベントをバインドする。
falseを返すようにすれば処理を中断することができる。(ただしその場合はバブリングは発生せずにここでとまる。)
チェックボックスのチェック状態は、checked属性値(bool型)で判定する。 jQueryの:checkedや:checkboxではなぜかうまく動いてくれなかったので、素直にセレクタでチェックボックスを選択している。

$("#del-button").bind("click", function() {
  
  if (!window.confirm("削除しますか？"))
    return false;

  var ids = "";
  $(".del-check").each(function() {
    if ($(this).attr("checked")) {
        var r_idx = $("tr").index($(this).parent().parent().get(0));
        if (ids != "")
            ids += ",";
        ids += $("tr:eq(" + r_idx + ") .id-col").text();
    }
  });

  $("#Id").attr("value", ids);

  if (ids == "") {
    window.alert("削除対象が選択されていません。");
    return false;
  }

  return true;
});

2010-08-14

JavaScriptからアクションメソッド呼び出し

asp.net javascript jQuery

Tableのtrクリックイベントで、アクションメソッド呼び出しを行うといったことを実現するために
こんなアクションメソッドを作成し、使用するViewで読み込み行う。

public ActionResult HogeeUrl()
{
  return JavaScript(String.Format("var hogeUrl = {0};", Url.Content("~/Foo/Hogee"));
}

<html>
  <head>
    <script type="text/javascript" src="<%= Url.Content("~/Foo/HogeeUrl") %>"></script>
    <script type="text/javascript">
      //ここでアクションメソッド呼び出しを行う。hogeUrl変数値を使用する。
    </script>
  </head>
  <body>
  ....
  </body>
</html>

このように回りくどいことをしていたが、素直にViewDataにアクションメソッドのUrlを入れて、
ViewにHiddenで埋め込み、jQueryのセレクタ使用して取得したほうが手っ取り早いことに気づいた。。。

2010-07-15

表組みの列合計値を求める

javascript html

最下行の列合計を自動で算出するサンプル。

jqueryで対象要素の後ろに挿入する場合はafter関数を使用すること！
また、挿入対象を一箇所に絞り込みたい場合はセレクタでそのように指定しないと、セレクタ指定全要素に挿入される！！(appendなども同様)

add関数は要素操作系の関数では無く、フィルタリング処理で使用するものなので気をつけること！！

<html>
<head>
<title>テーブル集計サンプル</title>
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
 $(document).ready(function(){
  var a_total = 0;
  var b_total = 0;
  var c_total = 0;
  
  $(".result-table > tbody > tr").each(function(){
   if($(this).attr("class") != "header-row"){
    a_total += parseInt($(this).children("td").filter(".eval-a-col").text());
    b_total += parseInt($(this).children("td").filter(".eval-b-col").text());
    c_total += parseInt($(this).children("td").filter(".eval-c-col").text());
   }
  });
  
  var total_row = $("<tr><td>合計</td><td class='eval-col'>" 
        + a_total + "</td><td class='eval-col'>" 
        + b_total + "</td><td class='eval-col'>" 
        + c_total + "</td><td class='eval-col'>" 
        + String(a_total + b_total + c_total) + "</td></tr>");
  $(".result-table > tbody > tr:last").after(total_row);
  
 });
</script>
<style type="text/css">
 table, td{
  border: 2px #000000 solid;
  border-collapse: collapse;
 }
 .insp_name-col{
  text-align: left;
 }
 .eval-col{
  text-align: right;
 }
</style>
</head>
<body>
<table class="result-table">
 <caption>結果値集計表</caption>
 <tbody>
  <tr class="header-row">
   <td class="insp-name-col">検査項目</td>
   <td class="eval-a-col">評価A</td>
   <td class="eval-b-col">評価B</td>
   <td class="eval-c-col">評価C</td>
   <td class="total-eval-col">総合評価</td>
  </tr>
  <tr class="detail-row">
   <td class="insp-name-col">検査AAAA</td>
   <td class="eval-a-col eval-col">50</td>
   <td class="eval-b-col eval-col">80</td>
   <td class="eval-c-col eval-col">30</td>
   <td class="total-eval-col eval-col">160</td>
  </tr>
  <tr class="detail-row">
   <td class="insp-name-col">検査AABB</td>
   <td class="eval-a-col eval-col">90</td>
   <td class="eval-b-col eval-col">30</td>
   <td class="eval-c-col eval-col">70</td>
   <td class="total-eval-col eval-col">190</td>
  </tr>
  <tr class="detail-row">
   <td class="insp-name-col">検査BBCC</td>
   <td class="eval-a-col eval-col">80</td>
   <td class="eval-b-col eval-col">80</td>
   <td class="eval-c-col eval-col">70</td>
   <td class="total-eval-col eval-col">230</td>
  </tr>
 </tbody>
</table>
</body>
</html>