読者です 読者をやめる 読者になる 読者になる

JavaScript本格入門を読む・11(最終回)

はー最終回。感慨深いですなぁ

クロスドメイン環境でAjax通信を行う
$(function(){
    $('#disp').click(function(){
        $.getJSON(
                'http://b.hatena.ne.jp/entry/jsonlite/?callback=?',
                {url:$('#url').val()},
                function(data){
                    $('#count').html(data.count);
                    for (var i =0; i<data.bookmarks.length; i++){
                        var bm = data.bookmarks[i];
                        $('result').append(
                                $('<li></li>').append(
                                        $('<a></a>')
                                                .attr('href', 'http://b.hatena.ne.jp/' +bm.user)
                                                .html(bm.user + '' +bm.timestamp)
                                )
                        );
                    }
                }
        );
    });
});
(中略)
<form name="fm">
    <label>URL:
        <input type="text" id="url" name="url" size="50"
               value="http://www.nicovideo.jp" />
    </label>
    <input type="button" id="disp" value="検索" />
</form>
<hr />
<span id="count">-</span>件ブクマされています。
<div id="result"></div>

確かにクロスドメイン処理?はしなくてすんだけど、書くの緊張するのかわりない。
あと閉じカッコおおすぎやで・・・数何回も数えてしまった・・・

9-3.jQuery UI/jQueryプラグインを活用する

アコーディオンパネルを実装する

えと、まずはjQueryUIをゲットしないとか。
Download Builder | jQuery UI

$(function(){
    $('#accordion').accordion({header:'h3'});
});
(略)
<div id="accordion">
    <div>
        <h3><a href="#">ニコニコ動画</a></h3>
        <div>動画を見てコメントをつけて楽しむ</div>
    </div>
    <div>
        <h3><a href="#">ニコニコ生放送</a></h3>
        <div>コメントでリアルタイムに繋がる</div>
    </div>
    <div>
        <h3><a href="#">ニコニコ静画</a></h3>
        <div>静止画で遊べる</div>
    </div>
    <div>
        <h3><a href="#">ニコニコチャンネル</a></h3>
        <div>3,000ch以上の公式動画</div>
    </div>
    <div>
        <h3><a href="#">ニコニコアプリ</a></h3>
        <div>厳選されたゲームが基本無料で遊べる</div>
    </div>
    <div>
        <h3><a href="#">ニコニコ大百科</a></h3>
        <div>みんなでつくる百科事典</div>
    </div>
</div>

あこーでぃんぐ
うpしてみた。これはいいですな!!!かっこいいですぞ!!!
しかもすごい簡単になった。昔こういうのをひたすらif文で書こうとしてたなー
こんな便利なものがあるなんて。

ユーザー入力の検証機能を実装する

えーとまずはjQuery Validationをゲットせねば。
jQuery Validation Plugin | Form validation with jQuery
こういうプラグインを色々いれることで簡単になるのねー

        $(function() {
            $.validator.addMethod('regex',
                    function(value, element, param) {
                        var r = new RegExp('^' + param + '$', 'gi');
                        return r.test(value);
                    },
                    '入力値が不正な形式です。'
            );

            $('#fm').validate({
                errorClass : 'valid-error',
                rules : {
                    'isbn': { required : true,
                        regex : '978-4-[0-9]{2,5}-[0-9]{2,5}-[0-9A-Z]{1}' },
                    'title' : { required : true },
                    'price' : { range : [1000, 10000] },
                    'publish' : { maxlength : 30 },
                    'published' : { dateISO : true }
                },
                messages : {
                    'isbn' : {
                        required: 'ISBNコードは必須です。',
                        regex: 'ISBNコードの形式が不正です。'
                    },
                    'title' : {
                        required : '書名は必須です。'
                    },
                    'price' : {
                        range : jQuery.format('価格は{0}~{1}の範囲で入力してください。')
                    },
                    'publish' : {
                        maxlength : jQuery.format('出版社は{0}文字以内で入力してください。')
                    },
                    'published' : {
                        dateISO : '日付の形式が不正です。'
                    }
                }
            });
        });
(中略)
<form id="fm">
    <label>ISBNコード:
        <input type="text" id="isbn" name="isbn" size="25" /></label><br/>
    <label>書名:
        <input type="text" id="title" name="title" size="50" /></label><br/>
    <label>価格:
        <input type="text" id="price" name="price" size="5" /></label><br/>
    <label>出版社:
        <input type="text" id="publish" name="publish" size="15" /></label><br/>
    <label>配本日:
        <input type="text" id="published" name="published" size="15" /></label><br/>
    <input type="submit" value="登録" />
</form>

ばりてーしょん
うぅ・・・これも成功するまで長かった・・・
でも最後だし、頑張りました・・・・
☆直しかた
ChromeJavaScriptコンソールでエラー内容を見る
・jsの指定を絶対パスにする(相対パスにしない)
ってことで、今回のは私がうpしたjquery.validate.jsが最新だったために動かなかったみたい。
(サンプルのjquery.validate.jsをうpしたら動いた)
そんなのわからないやい!

総合感想

JavaScript初心者どころか、プログラミングよくわかんなくても順番にやっていけばjQueryまで何となくわかる良書だと思う。
私はあとPHPの知識がなさすぎるなーと思った。次にやるとしたらPHPSmartyなのかな?(SmartyってPHPのテンプレートエンジンだよね?)
次にやるときは色々なエディタのライセンスが切れているから課金しないとだ。
たくさんコメントいただいた皆様、ありがとうございました。
かなりやる気になりました!!!!