ノンプログラマのためのJavaScriptはじめの一歩

「ノンプログラマ向けを標榜しているだけあって、
本当に初心者でも分かりやすく解説してあると思います。

この本のポイントは、ただ読むだけではなく、「読んで、書くこと」が重要であることが何度も言われていると思います。
(この点は他の言語でも一緒ですが)
jsFiddleとか、jsdo.itも紹介されておる。

で、あとがきで紹介されているのが、身近で単純な動きを、自力で書いて、実行すること。
これは「車輪の再発明」と呼ばれ忌み嫌われているものであるが、プログラミングの学習においては
より効果的な手法であるといえる。

なんて頓珍漢な感想を述べてもあんまり意味がないので、
第一章のスライドショーのサンプルプログラム(JavaScriptで書かれたもの)を、
jQueryに書き換えてみた。

/**
 * 簡易スライドショー
 *
 * nextボタンを押したときに画像を切り替える簡単な
 * スライドショーのサンプルプログラムです。
 */

window.onload = function() {

    /*============================
     * 変数の定義
     *===========================*/

    // 画像のリストの定義
    var photoList = [
        { src: 'img/spring.jpg', title: '春の桜' },
        { src: 'img/summer.jpg', title: '夏のひまわり' },
        { src: 'img/autumn.jpg', title: '秋の紅葉' },
        { src: 'img/winter.jpg', title: '冬の山' }
    ];
    var photoLength = photoList.length;

    // 要素の取得
    var photo = document.getElementById('photo');
    var nextBtn = document.getElementById('nextBtn');
    var title = document.getElementById('title');

    // 現在のインデックスを保存するための変数
    var currentIndex = 0;

    /*============================
     * 関数の定義
     *===========================*/

    // 指定の画像に表示を切り替える関数
    function showPhoto(index) {
        // すべての画像を非表示
        for (var i = 0; i < photoLength; i++) {
            photoList[i].elem.style.display = 'none';
        }

        // 表示する対象の要素を取得
        var targetPhoto = photoList[index];

        // タイトルの表示
        var viewNumber = index + 1;
        title.innerHTML = '[' + viewNumber + '] ' + targetPhoto.title;

        // 画像の表示
        targetPhoto.elem.style.display = 'inline';
    }

    /*============================
     * イベントの設定
     *===========================*/

    // nextボタンを押したときの処理
    nextBtn.onclick = function() {
        // 表示する画像のインデックスを計算
        currentIndex++;
        if (currentIndex === photoLength) {
            currentIndex = 0;
        }

        // 画像の切り替え
        showPhoto(currentIndex);
    };

    /*============================
     * 初期化処理
     *===========================*/

    // img要素をHTMLに追加
    var item, img;
    for (var i = 0; i < photoLength; i++) {
        item = photoList[i];

        // img要素の作成
        img = document.createElement('img');

        // 作成したimg要素に属性を設定
        img.src = item.src;
        img.alt = item.title;

        // 作成したimg要素をHTMLに追加
        photo.appendChild(img);

        // 作成したimg要素を保存
        item.elem = img;
    }

    // 初期表示のためにshowPhoto関数を実行する
    showPhoto(currentIndex);
};

このjQueryの時代にJavaScriptオンリーなど長ったるくてやってられないけど、

var item, img;

で変数定義出来るんですね。知りませんでした。

5章にjQueryの解説があるけど、とりあえず自分で書き換えてみました。

/**
 * 簡易スライドショー (jQuery)
 *
 * nextボタンを押したときに画像を切り替える簡単な
 * スライドショーのサンプルプログラムです。
 */

$(document).ready(function(){

    // 画像のリストの定義
    var photoList = [
        { src: 'img/spring.jpg', title: '春の桜' },
        { src: 'img/summer.jpg', title: '夏のひまわり' },
        { src: 'img/autumn.jpg', title: '秋の紅葉' },
        { src: 'img/winter.jpg', title: '冬の山' }
    ];
    var photoLength = photoList.length;

    // 現在のインデックスを保存するための変数
    var currentIndex = 0;

    $('#photo').html("<img src='"+photoList[currentIndex]['src']+"'></img>");
    $('#nextBtn').click(function() {
        currentIndex++;
        if(currentIndex >= photoLength) {
            currentIndex = 0;
        }
        $('div#photo').html("<img src='"+photoList[currentIndex]['src']+"'></img>");
    });
});

まあ、やりようによっては、overflow: hiddenとleftの位置をずらすコンボでスライドショーを実現してもいいんだけど、
時間がかかりそうなのでやらない。