buffer

2011年3月19日土曜日

Jqueryまとめ

■要素の指定方法
　・セレクタで指定
　　$('#[ID名]')、$('.[クラス名]')、$('[HTML]')

　・親子関係で指定
　　$('基準要素 > 対象')・・・基準要素に対し、
　　　　　　　　　　　　　　　　　　１階層下に対象要素があると返します
　　$('基準要素対象')・・・・基準要素に対し、
　　　　　　　　　　　　　　　　　　その配下に対象要素があると返します。

■要素の絞り込み
　・絞り込む(1)
　　複数の要素を取得した場合、取得した要素の番号で絞り込む
　　$('[複数の要素]:eq(インデックス番号)')・・・番号に一致する要素を返す
　　$('[複数の要素]:lt(インデックス番号)')・・・番号未満の要素を返す
　　$('[複数の要素]:gt(インデックス番号)')・・・番号より大きい要素を返す
　　$('[複数の要素]:even')・・・偶数番目の要素だけ返す
　　$('[複数の要素]:odd')・・・奇数番目の要素だけ返す
　　$('[複数の要素]:first')・・・最初の要素だけ返す
　　$('[複数の要素]:last')・・・最後の要素だけ返す
　　$('[複数の要素]:not([条件])')・・・条件で指定した要素以外の要素を返す

　・絞り込む(2)
　　複数の要素を取得した場合、子要素の内容でさらに絞り込む
　　$('[複数の要素]:contains([テキスト])')・・・子要素に[テキスト]を持っている場合返す
　　$('[複数の要素]:has([セレクタ])')　　・・・子要素に[セレクタ]を持っている場合返す
　　$('[複数の要素]:has')　・・・子要素に何かある場合返す
　　$('[複数の要素]:empty')・・・子要素に何もない場合返す

　・絞り込む(3)
　　複数の要素を取得した場合、子要素のインデックス番号でさらに絞り込み該当する子要素を返す
　　$('[複数の要素]:first-child')・・・最初の子要素を返す
　　$('[複数の要素]:last-child')・・・最後の子要素を返す
　　$('[複数の要素]:nth-child(インデックス番号)')・・・インデックス番号目の要素を返す。ただし最初の番号は１となる
　　$('[複数の要素]:only-child')・・・１つの子要素を持つ場合その要素を返す

　・絞り込む(4)
　　可視状態で絞る
　　$('[複数の要素]:hidden')・・・display:none/type="hidden"にマッチ
　　$('[複数の要素]:visible')・・・上記以外

　・絞り込む(5)
　　属性で絞る
　　$('[属性]')・・・該当する属性全ての要素を返す
　　$('[属性 = 値]')・・・該当する属性のうち値に一致する全ての要素を返す
　　$('[属性 != 値]')・・・該当する属性のうち値に一致しない全ての要素を返す

　　$('[属性 ^= 値]')・・・該当する属性のうち値に前方一致する全ての要素を返す
　　$('[属性 *= 値]')・・・該当する属性のうち値に部分一致する全ての要素を返す
　　$('[属性 $= 値]')・・・該当する属性のうち値に後方一致する全ての要素を返す

　　$('[属性 |= 値]')・・・該当する属性のうち値に該当または直後にハイフン(-)がつく全ての要素を返す
　　$('[属性 ~= 値]')・・・該当する属性のうち値に該当または直後にスペースがつく全ての要素を返す
　　属性の指定は複数同時可

■[clone]対象要素を複製する
$(対象).clone()

■削除する
　・[detach]対象要素を削除し、変数にとっておく
　　$(対象).detach();
　　$(対象).detach([セレクタ]);

　・[remove]対象要素を削除する
　　$(対象).remove();
　　$(対象).remove([セレクタ]);

　・[empty]対象要素の子ノードを削除する
　　$(対象).empty();

■対象要素(外側)の前後に追加
　・[after]新規にテキスト、HTMLを対象要素の後に追加
　　$(対象).after(内容);
　　$(対象).after(function(){ 処理 });

　・[before]新規にテキスト、HTMLを対象要素の前に追加
　　$(対象).before(内容);
　　$(対象).before(function(){ 処理 });

■対象要素(内側)の前後に追加
　・[append]新規にテキスト、HTMLを対象要素の最後に追加(対象要素の内側最後)
　　$(対象).append(内容);
　　$(対象).append(function(){ 処理 });

　・[prepend]新規にテキスト、HTMLを対象要素の最後に追加(対象要素の内側最後)
　　$(対象).prepend(内容);
　　$(対象).prepend(function(){ 処理 });

■[replaceWith]該当する要素を入れ替える
　　$(対象).replaceWith()
　　$(対象).replaceWith(function(){ 処理 })

■該当要素をwrapする
　・[wrap]対象要素を個別に指定要素で包む
　　$(対象).wrap(要素)
　　$(対象).wrap(function(){ 処理 })

　・[unwrap]対象要素を個別に包んでる要素を削除する
　　$(対象).unwrap(親要素)
　　$(対象).unwrap(function(){ 処理 })

　・[wrapAll]該当する対象要素全てを指定要素で包む
　　$(対象).wrapAll(要素)

　・[wrapInner]対象要素を個別にそれぞれの要素を包む
　　$(対象).wrapInner(要素)

■[html]対象要素のhtmlを操作
　　・対象要素のHTMLを取得
　　　var 変数 = $(対象).html()
　　
　　・対象要素のhtmlを変更
　　　$(対象).html(HTML)
　　　$(対象).html(function(){ 処理 })

■[text]対象要素のテキストを操作
　　・対象要素のtextを取得
　　　var 変数 = $(対象).text()
　　
　　・対象要素のtextを変更
　　　$(対象).text(文字列)
　　　$(対象).text(function(){処理})

■[val]対象要素(input)の値を操作
　　・対象要素(input)の値を取得
　　　var 変数 = $(対象).val()

　　・対象要素(input)の値を変更
　　　$(対象).val(値)
　　　$(対象).val(function(){処理})

■クラスについて
　・[addClass]対象要素にクラスを追加する
　　$(対象).addClass(内容);
　　$(対象).addClass(function(){ 処理 });

　・[removeClass]対象要素にクラスを削除する
　　$(対象).removeClass(内容);
　　$(対象).removeClass(function(){ 処理 });

　・[hasClass]対象要素にクラスがあるか調べる
　　$(対象).hasClass(クラス名); //true, falseを返す

■属性値について
　・[attr]属性値を取得
　　$(対象).attr(属性)

　・[attr]属性値を設定
　　$(対象).attr(属性, 値)
　　$(対象).attr(属性, function(){})
　　$(対象).attr({属性1: 値1, 属性2: 値2})

　・[removeAttr]属性値を削除
　　$(対象).removeAttr(属性)

■イベント
　・クリック
　　$(対象).click(function(e){ 処理 });
　　　$(対象).click();で強制的にクリックを発生できる

　・ダブルクリック
　　$(対象).dblclick(function(e){ 処理 });
　　　$(対象).dblclick();で強制的にダブルクリックを発生できる

　・マウス移動
　　$(対象).mousemove(function(e){ 処理 });

　・マウスボタン
　　$(対象).mousedown(function(e){ 処理 });
　　$(対象).mouseup(function(e){ 処理 });

　・マウスインアウト
　　$(対象).mouseenter(function(e){ 処理 });
　　$(対象).mouseleave(function(e){ 処理 });
　　$(対象).hover(function(e){ 入る処理 },function(e){ 出る処理 });

　・キー
　　$(対象).keydown(function(e){ 処理 });
　　$(対象).keyup(function(e){ 処理 });

　・フォーカス
　　$(対象).focus(function(e){ 処理 });
　　$(対象).blur(function(e){ 処理 });
　　$(対象).focusin(function(e){ 処理 }); イベントがバブリングする
　　$(対象).focusout(function(e){ 処理 });イベントがバブリングする

　・フォーム変更
　　$(対象).change(function(e){ 処理 });
　　input/textarea/select

　・テキスト選択
　　$(対象).select(function(e){ 処理 });
　　input type="text"/textarea
　　キャレット等はプラグインでも探すっと。

　・送信
　　$(対象).submit(function(e){ 処理 });

　・エラー
　　$(対象).error(function(e){ 処理 });

　・リサイズ
　 $(対象).resize(function(e){ 処理 });

　・スクロール
　　$(対象).scroll(function(e){ 処理 });

　・ロード
　　$(対象).load(function(e){ 処理 });
　　$(window).unload(function(e){ 処理 });
　　$(document).read(function(e){ 処理 });

　・イベントセット
　　$(対象).bind(たいぷ、[データ]、処理);
　　$(対象).bind({たいぷ: 処理, たいぷ: 処理})

　・イベント解除
　　$(対象).unbind(たいぷ、処理);
　　$(対象).unbind(たいぷ);
　　$(対象).unbind();

e.target・・・発生時点の要素
e.timestamp・・・発生時刻(秒)
e.pageX・・・X座標
e.pageY・・・Y座標
e.type・・・イベントの種類
e.which・・・キー情報

e.preventDefault()・・・・・・・・・デフォルト操作キャンセル
e.stopPropagation()・・・・・・・・バブリングキャンセル、イベント実行
e.stopImmediatePropagetion()・・・・バブリング、イベントキャンセル
e.isDefaultPrevented()・・・・・・・preventDefaultを実行したか判定
e.isPropagationStopped()・・・・・・PropagationStoppedを実行したか判定
e.isImmediatePropagationStopped()・・ImmediatePropagationStoppedを実行したか判定

■CSS
　・取得/変更
　　var 変数 = $(対象).css(プロパティ名);
　　$(対象).css(プロパティ, 値);
　　$(対象).css({プロパティ:値, プロパティ:値, プロパティ:値});
　　プロパティ名にハイフンはあるものは、ハイフンとって大文字にする

　・高さ/幅(1)[height/widthを返す]
　　var 変数 = $(対象).height();
　　$(対象).height(値);
　　var 変数 = $(対象).width();
　　$(対象).width(値);

　・高さ/幅(2)[height/width + paddingを返す]
　　var 変数 = $(対象).innerHeight();
　　var 変数 = $(対象).innerWidth();

　・高さ/幅(3)[height/width + padding + borderを返す]
　　var 変数 = $(対象).outerHeight();
　　var 変数 = $(対象).outerWidth();

　・高さ/幅(4)[height/width + padding + border + marginを返す]
　　var 変数 = $(対象).outerHeight(true);
　　var 変数 = $(対象).outerWidth(true);

　・絶対位置/相対位置(基準は、親要素)
　　var 変数 = $(対象).offset(); //変数.top, 変数.leftを持つ
　　$(対象).offset({top:値, left:値});
　　var 変数 = $(対象).position(); //変数.top, 変数.leftを持つ
　　$(対象).position({top:値, left:値});

　・スクロール縦/横
　　var 変数 = $(対象).scrollTop();
　　$(対象).scrollTop(値);

　　var 変数 = $(対象).scrollLeft();
　　$(対象).scrollLeft(値);

　・クラスのトグル
　　$(対象).toggleClass(クラス);

■$.each(配列, 関数)
途中で抜ける時は、return false;

2011年3月14日月曜日

jqueryめも

■クラス名を列挙する

<div>
    <div id="aaa">
        <ul>
            <li class="li_aaa">aaa</li>
            <li class="li_bbb">bbb</li>
            <li class="li_ccc">ccc</li>
        </ul>
    </div>
    <div id="bbb">
         <ul>
            <li class="li_ddd">ddd</li>
            <li class="li_eee">eee</li>
            <li class="li_fff">fff</li>
        </ul>       
    </div>
</div>

<script>
    $(function(){
        $("li", $("#aaa")).each(function(){
            alert($(this).attr("class")); //li_aaa, li_bbb, li_ccc
        });  
    });
</script>

■テキストを取得
obj.text();

2011年3月13日日曜日

javascriptパターンのメモ

■グローバルオブジェクトへのアクセス
グローバルオブジェクトへのアクセスは、windowオブジェクトのプロパティにアクセスするとよいのね。

var str = "Global!";

function abc(){
  var str = "Local!";
  console.log(str);        //Local!
  console.log(window.str); //Global!
}

abc();

ブラウザ環境では、windowオブジェクトからグローバルオブジェクトにアクセスできるがそれ以外の環境ではwindowオブジェクトが使えない可能性もあるため、ハードコードせずにアクセスするには下記のようにするとよいのね。

var global = (function() {
  return this;
}());

上のコードを書き直すとこーなる。

var str = "Global!";

function abc(){
  var str = "Local!";
  console.log(str);

  var global = (function(){return this}());
  console.log(global.str);
}

abc();

■varのまとめた宣言

function func(){
  var a = 1,
  b = 2,
  sum = a + b;
}

■for ループ
・配列の長さをキャッシュして無駄を減らす

var marray = [1, 2, 3, 4, 5];
  for (var i = 0, max = myarray.length; i < max; i++){
  console.log(marray[i]);
}

・変数を減らし、０と比較することで無駄をさらに減らす

var marray = [1, 2, 3, 4, 5];
  for (var i = marray.length; i--;){
  console.log(marray[i]);
}

１番目の項目でiに配列の要素数を入力して初期化２番目の項目でtrue or false(0以上かどうか)を判断してから--で要素数を減らす３番目の項目不要なので特になし。見慣れた形で表現するのであれば・・・下のように書くのと同等。

var myarray = [1, 2, 3, 4, 5];
for (var i = myarray.length; -1 < i; i--){
  console.log(i);
}

上記方法の別解として

var myarray = [1, 2, 3, 4, 5],
i = myarray.length;
while(i--){
  console.log(myarray[i]);
}

■for inループプロトタイプにぶらさがっているプロパティを除外するために hasOwnProperty()を利用

var hoge = {
  a: "aa",
  b: "bb",
  c: "cc"
};
for(var i in hoge){
  if(hoge.hasOwnProperty(i)){
    console.log(i, ":", hoge[i]);
  }
}

ただし、うっかりhasownPropertyを上書きなんかするとプロトタイプにぶらさがっているか調べることができなくなる。
(そんなことする人いないと思うが・・・)

var hoge = {
  a: "aa",
  b: "bb",
  c: "cc",
  hasOwnProperty: function(temp){ alert(temp); return false } //うっかり上書き
};

for(var keu in hoge){
  if(hoge.hasOwnProperty(key)){ //自分でfalseを返す関数として作ってしまったので期待どおりの動きをしない。
    console.log(key, ":", hoge[key]);
  }
}

このような事態をエスケープするのなら、下記のやり方がある。

var hoge = {
  a: "aa",
  b: "bb",
  c: "cc",
  hasOwnProperty: function(i){ false }
};

for(var key in hoge){
  if(hoge.hasOwnProperty(key)){
    console.log("[hasOwnProperty]", key, ":", hoge[key]);
  }else if(Object.prototype.hasOwnProperty.call(hoge, key)){
    console.log("[call]", key, ":", hoge[key]);
  }
}

結果は、
[call]a:aa
[call]b:bb
[call]c:cc
[call]hasOwnProperty:function()

上記をキャッシュして速度あっぷ

var key,
    hasOwn = Object.prototype.hasOwnProperty;
for(key in hoge){
  if(hasOwn.call(hoge, key)){
    console.log(key, ":", hoge[key]);
  }
}

■暗黙の型変換を避ける

var zero = 0;
if (zero === false){
  //実行されない
}

if(zero == false){
  //実行される
}

■parseInt()による型変換の注意点
ES3では0で始まる文字列はparseIntの基数を省略すると8進数処理をしてしまう。
この仕様は、ES5では変更となったが予期せぬ不具合に合わないように必ずparseInt()
の基数は指定する。

var month = "06",
    year  = "09";
month = parseInt(month, 10);
year  = parseInt(year,  10);

//parseInt()は、構造解析を行うのでNumberの方が速くなることがある。
Number("09") //9

■ドキュメントを書く
JSDoc Toolkit
YUIDoc

■コードを圧縮する
YUICompressor / Closure Compiler

------------------------------------------------------------------------------------

■オブジェクトリテラル記法
{}で書く。

var bar = {};
var foo = {name: "hoge", func: function(){ return this.name }};

■カスタムコンストラクタ
コンストラクタは、return を省略してもオブジェクトを返す。

var AC = function(animal){
  this.animal = animal;
  this.greet  = function(){
    switch (this.animal){
      case "dog":
        return "こんばんワン";
      case "rabit":
        return "ありがとウサギ";
      default:
        return "ぽぽぽぽーん";
    }
  };
  //return this; と書く必要がない。
};
var CM = new AC("dog");
alert(CM.greet());//犬に挨拶

■コンストラクタの返すものは、オブジェクトならなんでもよい。

var Obj = function(){
this.bar = "foo";

var that = {};
that.bar = "hogehoge";
return that; //ほっておくとthisをかえされちゃうので、明示的に違うオブジェクトを返す
}

var test = new Obj;
console.log(test.bar); //hogehoge　を返す

■new忘れ防止
newを呼び忘れると本来オブジェクトを指すはずのthisがグローバルにアクセスしてしまうということで
コンストラクタ自体でnewで呼ばれたか精査して呼ばれてないと改めて自分自身をnewで呼んでしまうパターン。

function HogeHoge(){
  if(!(this instanceof HogeHoge)){
    return new HogeHoge();
  }
  this.bar = "foo";
}

//HogeHogeを利用するともれなくsayが参照できる。
HogeHoge.prototype.say = function(){ alert("Hellow HogeHoge!") };

var newObj    = new HogeHoge(),
    notNewObj = HogeHoge();

console.log(newObj.bar);
console.log(notNewObj.bar);

newObj.say();
notNewObj.say();

--------------------------------------------------------------------

■配列リテラル
var a = [];
console.log(typeof a);//object
console.log(a.constructor === Array);//true

■配列の検査
×instanceof Array → IEのいくつかのバージョンである条件かで正しく動かない
ECMAScript 5ではArray.isArray()があるが使えない場合以下のようにするとよいらしい

if(typeof Array.isArray === "undefined") {
  Array.isArray = function (arg) {
    return Object.prototype.toString.call(arg) === "[object Array]";
  }
}

■JSON
最近のブラウザならJSONくらい実装されているので、自前でevalするようなことせず
JSON.stringify(オブジェクト); //JSONデータへ変換
JSON.parse(JSONデータ); //JSONデータをオブジェクトへ変換

非対応ブラウザなら、JSON.orgライブラリの
http://www.json.org/json2.jsを使うとよい。

■正規表現リテラル
var re = /正規表現/gmi;

var test = "str";
if (test.match(re)){
  console.log("match");
}else{
  console.log("no match");
}

■Error

alert("普通の処理");
try{
  throw{
    name: "ErrorType",
    message: "手抜きによるエラーです",
    errFunc: test
  };
}catch (e) {
  alert(e.message);
  e.errFunc(e);
}

alert("end");

function test(e){
  alert(e.name);
}

--------------------------------------------------------------------

■関数をすぐ実行する
(function(){alert("test")}());

■関数の巻き上げ
関数宣言は、巻き上げされるが、関数式は巻き上げされない。

(function(){
  functionDeclaration(); //関数宣言は、実行より後で宣言しても巻き上げられ実行される
  functionExpression();  //関数式には、巻き上げて実行されることはない。
  
  function functionDeclaration(){alert("関数宣言")};
  var functionExpression = function(){alert("関数式")};
}());

■関数を返す

var InitCounter = function() {
  var Count = 0;
  return function() { return Count++ };
}

var counter = InitCounter();

for(var i=0; i<5; i++){
  console.log(counter());
}

■自己定義関数 ■グローバルオブジェクトへのアクセスグローバルオブジェクトへのアクセスは、windowオブジェクトのプロパティにアクセスするとよいのね。

var str = "Global!";

function abc(){
  var str = "Local!";
  console.log(str);        //Local!
  console.log(window.str); //Global!
}

abc();

var global = (function() {
  return this;
}());

上のコードを書き直すとこーなる。

var str = "Global!";

function abc(){
  var str = "Local!";
  console.log(str);

  var global = (function(){return this}());
  console.log(global.str);
}

abc();

■varのまとめた宣言

function func(){
  var a = 1,
  b = 2,
  sum = a + b;
}

■for ループ・配列の長さをキャッシュして無駄を減らす

var marray = [1, 2, 3, 4, 5];
  for (var i = 0, max = myarray.length; i < max; i++){
  console.log(marray[i]);
}

・変数を減らし、０と比較することで無駄をさらに減らす

var marray = [1, 2, 3, 4, 5];
  for (var i = marray.length; i--;){
  console.log(marray[i]);
}

var myarray = [1, 2, 3, 4, 5];
for (var i = myarray.length; -1 < i; i--){
  console.log(i);
}

上記方法の別解として

var myarray = [1, 2, 3, 4, 5],
i = myarray.length;
while(i--){
  console.log(myarray[i]);
}

■for inループプロトタイプにぶらさがっているプロパティを除外するために hasOwnProperty()を利用

var hoge = {
  a: "aa",
  b: "bb",
  c: "cc"
};
for(var i in hoge){
  if(hoge.hasOwnProperty(i)){
    console.log(i, ":", hoge[i]);
  }
}

ただし、うっかりhasownPropertyを上書きなんかするとプロトタイプにぶらさがっているか調べることができなくなる。 (そんなことする人いないと思うが・・・)

var hoge = {
  a: "aa",
  b: "bb",
  c: "cc",
  hasOwnProperty: function(temp){ alert(temp); return false } //うっかり上書き
};

for(var keu in hoge){
  if(hoge.hasOwnProperty(key)){ //自分でfalseを返す関数として作ってしまったので期待どおりの動きをしない。
    console.log(key, ":", hoge[key]);
  }
}

このような事態をエスケープするのなら、下記のやり方がある。

var hoge = {
  a: "aa",
  b: "bb",
  c: "cc",
  hasOwnProperty: function(i){ false }
};

for(var key in hoge){
  if(hoge.hasOwnProperty(key)){
    console.log("[hasOwnProperty]", key, ":", hoge[key]);
  }else if(Object.prototype.hasOwnProperty.call(hoge, key)){
    console.log("[call]", key, ":", hoge[key]);
  }
}

結果は、 [call]a:aa [call]b:bb [call]c:cc [call]hasOwnProperty:function() 上記をキャッシュして速度あっぷ

var key,
    hasOwn = Object.prototype.hasOwnProperty;
for(key in hoge){
  if(hasOwn.call(hoge, key)){
    console.log(key, ":", hoge[key]);
  }
}

■暗黙の型変換を避ける

var zero = 0;
if (zero === false){
  //実行されない
}

if(zero == false){
  //実行される
}

■parseInt()による型変換の注意点 ES3では0で始まる文字列はparseIntの基数を省略すると8進数処理をしてしまう。この仕様は、ES5では変更となったが予期せぬ不具合に合わないように必ずparseInt() の基数は指定する。

var month = "06",
    year  = "09";
month = parseInt(month, 10);
year  = parseInt(year,  10);

//parseInt()は、構造解析を行うのでNumberの方が速くなることがある。
Number("09") //9

■ドキュメントを書く JSDoc Toolkit YUIDoc ■コードを圧縮する YUICompressor / Closure Compiler ------------------------------------------------------------------------------------ ■オブジェクトリテラル記法 {}で書く。

var bar = {};
var foo = {name: "hoge", func: function(){ return this.name }};

■カスタムコンストラクタコンストラクタは、return を省略してもオブジェクトを返す。

var AC = function(animal){
  this.animal = animal;
  this.greet  = function(){
    switch (this.animal){
      case "dog":
        return "こんばんワン";
      case "rabit":
        return "ありがとウサギ";
      default:
        return "ぽぽぽぽーん";
    }
  };
  //return this; と書く必要がない。
};
var CM = new AC("dog");
alert(CM.greet());//犬に挨拶

■コンストラクタの返すものは、オブジェクトならなんでもよい。

var Obj = function(){
this.bar = "foo";

var that = {};
that.bar = "hogehoge";
return that; //ほっておくとthisをかえされちゃうので、明示的に違うオブジェクトを返す
}

var test = new Obj;
console.log(test.bar); //hogehoge　を返す

■new忘れ防止 newを呼び忘れると本来オブジェクトを指すはずのthisがグローバルにアクセスしてしまうということでコンストラクタ自体でnewで呼ばれたか精査して呼ばれてないと改めて自分自身をnewで呼んでしまうパターン。

function HogeHoge(){
  if(!(this instanceof HogeHoge)){
    return new HogeHoge();
  }
  this.bar = "foo";
}

//HogeHogeを利用するともれなくsayが参照できる。
HogeHoge.prototype.say = function(){ alert("Hellow HogeHoge!") };

var newObj    = new HogeHoge(),
    notNewObj = HogeHoge();

console.log(newObj.bar);
console.log(notNewObj.bar);

newObj.say();
notNewObj.say();

-------------------------------------------------------------------- ■配列リテラル var a = []; console.log(typeof a);//object console.log(a.constructor === Array);//true ■配列の検査 ×instanceof Array → IEのいくつかのバージョンである条件かで正しく動かない ECMAScript 5ではArray.isArray()があるが使えない場合以下のようにするとよいらしい

if(typeof Array.isArray === "undefined") {
  Array.isArray = function (arg) {
    return Object.prototype.toString.call(arg) === "[object Array]";
  }
}

■JSON 最近のブラウザならJSONくらい実装されているので、自前でevalするようなことせず JSON.stringify(オブジェクト); //JSONデータへ変換 JSON.parse(JSONデータ); //JSONデータをオブジェクトへ変換非対応ブラウザなら、JSON.orgライブラリの http://www.json.org/json2.jsを使うとよい。 ■正規表現リテラル var re = /正規表現/gmi;

var test = "str";
if (test.match(re)){
  console.log("match");
}else{
  console.log("no match");
}

■Error

alert("普通の処理");
try{
  throw{
    name: "ErrorType",
    message: "手抜きによるエラーです",
    errFunc: test
  };
}catch (e) {
  alert(e.message);
  e.errFunc(e);
}

alert("end");

function test(e){
  alert(e.name);
}

-------------------------------------------------------------------- ■即時関数 (function(){alert("test")})(); (function(message){alert(message)})("hoge"); var result = (function() { return new Date() })(); //戻り値を受け取る ■関数の巻き上げ関数宣言は、巻き上げされるが、関数式は巻き上げされない。

(function(){
  functionDeclaration(); //関数宣言は、実行より後で宣言しても巻き上げられ実行される
  functionExpression();  //関数式には、巻き上げて実行されることはない。
  
  function functionDeclaration(){alert("関数宣言")};
  var functionExpression = function(){alert("関数式")};
}());

■関数を返す

var InitCounter = function() {
  var Count = 0;
  return function() { return Count++ };
}

var counter = InitCounter();

for(var i=0; i<5; i++){
  console.log(counter());
}

■条件分岐パターンブラウザ判定のようにスクリプト実行内で一度しか発生しない分岐に対しては関数内で毎回分岐をするのでなく、スクリプト実行時最初に１度だけ行う。 ■関数のメモ化不要な繰り返し処理がある場合関数自体にキャッシュさせることで処理を早くする ■カリー化

function schonfinkelize(fn){
    var slice = Array.prototype.slice,
        stored_args = slice.call(arguments, 1); //argumentsを配列として扱えるように変換する

    return function(){
        var new_args = slice.call(arguments),
            args = stored_args.concat(new_args);
        return fn.apply(null, args);
    };
}

function add(a, b, c, d, e){
    return a + b + c + d + e; 
}

var newadd = schonfinkelize(add, 1, 2, 3);
alert(newadd(4,5));

複数引数をもち、そのうちのいくつかがほぼ固定で扱われる場合
何度も同じ引数を渡すのでなく、固定部分だけ先に代入して別の関数を
こしらえ、それに対して代入を行う。

2011年3月8日火曜日

SQL Serverのメモ

■フィールドから情報を取得する
・SELECT [列] FROM [TABLE]
→[TABLE]から[列]を取り出す

・SELECT * FROM [TABLE]

→[TABLE]からすべての列情報を取り出す

■重複したデータを取り除く[DISTINCTキーワード]

・SELECT DISTINCT [列] FROM [TABLE]

■ソートする[ORDER BY 列条件]
・SELECT [列] FROM [TABLE] ORDER BY [列],[列]… [ASC | DESC]
ASC…昇順（省略時）
DESC…降順

■上位○件取得[TOP ○]
SELECT TOP ○ [列] FROM [TABLE]

2011年2月12日土曜日

ちょいめも

$blogn_skin = eregi_replace("
", "
\n", $blogn_skin);
をコメントアウト
blognplus

登録: 投稿 (Atom)

Translate