JavaScript n日ごとに開始位置を切り替える

PHPでやるのも面倒なので、JavaScriptで実装。

4日毎だとして、

var start = Math.floor(Math.floor(new Date().getTime() / 1000) / (60*60*24)) % 4;
console.log(start);

こんな感じかな。

タグ入力補助ツール

Google＋の公開範囲指定部分のUIを求められる事が多くなってきている気がしますが、
その中でちょっと良さそうなものを発見したので、メモメモ

・Selectize.js
http://brianreavis.github.io/selectize.js/

・Tag-it!
http://aehlke.github.io/tag-it/

使うならSelectize.jpで問題あればTag-it!に切り替えるかな。。
他のは今のところ良さそうなのが、今のところ見つけておらず。。

クリックイベントをセットした時の奇妙な動作について

<td>タグの中に<select>を設置した。

そして<td>にclickイベント、<select>にchangeイベントを設定。

すると<select>から<option>を選択した時にclickイベントまで発生してしまう。

ま～それは納得できるとして、問題はその対策として<td>をクリックした時だけ<select>を表示するようにして<td>をクリックした時はunbindするようにしてchangeイベント完了時にtdへclickイベントを再設定するようにした。

それでもchangeイベントの後にclickイベントが発生する。。　なぜ。。

Yahho Calendar を祝日以外の指定曜日のみクリックできないようにする

Yahho Calendar
http://0-oo.net/sbox/javascript/yahho-calendar

YUIベースで作られた祝日表示対応のこのカレンダー。
祝日以外の水曜日をクリックできないようにする方法をやってみた。

まずクリックできないようにする方法が用意されているのかがポイントだけど、それは用意された。
よかった(笑)

renderBodyCellRestricted

を利用するみたい。

var cal = new YAHOO.widget.Calendar(place, config);
cal.addRenderer("8/25", cal.renderBodyCellRestricted);

こんな感じで使うみたい。

それで結局追加したのが、

yahho-calendar.js　ファイルの最後に

YahhoCal.setDisableDays = function(index) {
    $(".wd3").each(function(){
        if (!$(this).hasClass("holiday" + index)) {
            var value = $(this).children("a").text();
            $(this).children("a").remove();
            $(this).text(value);
            $(this).removeClass("selectable");
            $(this).addClass("restricted");

            // これだけでいけるはずだけどうまく動かない。。。
            var date = YahhoCal._cal.getDateByCellId($(this).attr("id"));
            var month = date.getMonth() + 1;
            var day = date.getDate();
            YahhoCal._cal.addRenderer(month + "/" + day, YahhoCal._cal.renderBodyCellRestricted);
        }
    });
}

を追加した。
で、見て解る通りrenderBodyCellRestrictedだけじゃない。。。
そうなんです、実行するタイミングが悪いのかしてrenderBodyCellRestrictedが思うように動かない。。。
で、無理やりjquery使ってclassいじっちゃいました。。。

ここまでするならrenderBodyCellRestricted無しの方がいいかも位ですね。。。

とりあえずこいつを　gcalendar-holidays.js　ファイルの　GCalHolidays.decode　関数の最後の

//コールバック
this._userCallback(days, index);

のところに

//コールバック
this._userCallback(days, index);
YahhoCal.setDisableDays(index);

って感じで追加しました。

JavaScript 0埋めされた数字をキャストする方法

'001250'　といった0梅された文字列を parseInt('001250') などでキャストすると 0 になってしまいます。

そこでできるだけ短くで考えたのがこれ。

'001250'.replace(/^0+/, '').replace(/^$/, '0')

お尻の「.replace(/^$/, '0')」は置換して空になってしまった場合の処理です。。。

もっとスマートなのあるかな。。。

JavaScript 0埋め

JavaScriptには0埋めに使えそうな関数が用意はされていない。

そこでこんな感じできる事を発見したのでメモ。
これが一番簡単ですね。。。

var month = 3;
var result = ('00' + month).slice(-2);

alert(result);

結果は03となる。

0を最大文字数分付けておいて、後ろから指定文字数切り出す。
'00'の0が２つなのは２で統一したかっただけです。

JavaScript JQuery JqueryId を利用する際の注意

JQuery　では　独自のIDを各オブジェクトに持たせて管理するようにしている。

これがちょっと勘違いしてしまいがちで、

foo

というものがあった場合に

$('li') で取得できる。
これは配列ライクに取得するので、 li == $('li') とはならない。

これは解りやすいんだけども、これと同じようにもし

$.data($(this)) という場合には　$(this) != this となる。
雰囲気的には同一なものを参照するには　$(this[0]) == this　というニュアンスになる。

以下実際にハマったパターン。。。

$.data($(this).parent())

で全く違うIDが来るので何故。。。と思っていたらこうだったｗ

$.data($(this).parent()[0]

これすぐ忘れてしまう。。。

JQueryを利用して簡単に行を追加

以下のHTMLの状態で下記JavaScriptを実行すると行が追加される。

<table id="hoge">
    <tbody>
    <tr>
        <td>col1-row1</td>
        <td>col2-row1</td>
    </tr>
    </tbody>
</table> 

▼JavaScript 

$('#hoge').append(''
    + '<tr>'
    +   '<td>'
    +       'col1-row2'
    +   '</td>'
    +   '<td>'
    +       'col2-row2'
    +   '</td>'
    + '</tr>'
    ;
); 

これってようするに 

$('#hoge')[0].innterHTML = $('#hoge')[0].innterHTML
    + '<tr>'
    +   '<td>'
    +       'col1-row2'
    +   '</td>'
    +   '<td>'
    +       'col2-row2'
    +   '</td>'
    + '</tr>'
    ;
  

と一緒か。。。？

でも下記の方が早いみたいですね。。。

$('#hoge').append(
    $('<tr>').append(
        $('<td>').text('col1-row2')
    ).append(
        $('<td>').text('col2-row2')
    )
);

JavaScript エラーメッセージ「識別子、文字列または数がありません。」 IE

IEの場合、配列やオブジェクトの最後が「,」で終わる場合エラーとなる。

メッセージ：　識別子、文字列または数がありません。

発生する例

修正前

var Hoge = {
 test1 : {},
 test2 : {},
}

修正後

var Hoge = {
 test1 : {},
 test2 : {}
}