JavaScript - ブラウザオブジェクトモデル(タイマー(setInterval, clearInterval), window(open, navigator.cookieEnabled), prompt)

初めてのJavaScript 第2版
(オライリージャパン)
Shelley Powers (著)
武舎 広幸、武舎 るみ (訳)

開発環境

• OS X Mavericks - Apple(OS)
• Emacs (CUI)、BBEdit - Bare Bones Software, Inc. (GUI) (Text Editor)
• Safari、Firefox + Firebug (Webプラウザ、プラグイン)
• JavaScript (プログラミング言語)
• jQuery (JavaScript Library)

『初めてのJavaScript 第2版』(シェリー・パワーズ著(Shelley Powers著)、武舎 広幸+武舎 るみ訳、オライリージャパン、2009年、ISBN978-4-87311-425-5) の9章(ブラウザオブジェクトモデル)、練習問第9-1、9-2、9-3、9-4、9-5を解いてみる。

その他参考書籍

• JavaScript 第6版
• JavaScriptリファレンス 第6版
• JavaScriptクックブック
• jQueryクックブック

練習問第9-1、9-2、9-3、9-4、9-5.

コード(BBEdit)

var result = '',
    name,
    pics = ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig3-hf9-xCTgWQSLPXZYrDczd9-MZtu_hyB1mO9avP-plyDVB1YQl3T0BQF7bSfReTvDEwF80m5W9U91upZcNJ5n4F_Crh4RsbjgKpAYLJ8lDF-93QqYhJ1EKUCiFiyicWMfS5nz99veg2/w650-h566-no/data-path2.png',
            'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyW7fJgAhFCbyHwlbkWEbZmizGLMRKUEIXBfzzWWdkYnZ00FevhmE8Wh_Wv4Lcu65yzJluLj2FbxEJbyrQrFKZRxLhYD-sgvymBv0Kzu3hrCM4KRYgYj39soAwDFkICwhswGEgznOrDnr-/w650-h575-no/data-path1.png',
            'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4b2BDAQTeWp8co-GMhGDPmE6NhOOImJl2KSDJ6kniS_Z3M-T25fsk6ulkU2VqBuxWOvrm9U5O-tYuF7HKYN7vL7w683oAajTKALME2HvKaE26DZT3ZDV9BzrHkx8BnIkvilXOJQizr0Jf/w650-h452-no/data-path2.png',
            'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaLeZfmDqOAw7rauiVAm1jtLdl_9h2kmKv9G_nm6Wqkm4dT2uzVWJos6N1F3zdPRiIVaNL9Fss_3UN2dDRxXEFqVybVHXWWxCvJHlZXyHFmbeGcxnQTvYUMeokY7At22-G7tUsq4HhycAf/w650-h511-no/data-path1.png',
            'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitAECDHtAcS2NTCSN-7Gae2Pz0z-CxXNlMqdy41PfJ8YR5Ve81ZmwtY7qDaarufDNWPT9sR0jZ4rvZMVbbAvphYHXcrSYuOGhQDeyXqTL775iA4HzoDW4_Q_Qk41mpIPXvK_DdOUI6DYjZ/w338-h519-no/controller+diagrams.png'],
    div = $('#d0'),
    img = $('<img>'),
    br = $('<br />'),
    input = $('<input type="button" value="開始">'),
    tm,
    i = 0,
    max = pics.length;
    nextPic = function () {
        var pic = pics[i];
        i += 1;
        if (i >= max){
            i = 0;
        }
        return pic;
    },
    url = 'http://sitekamimura.blogspot.com',
    title = '9-4',
    width = 200,
    height = 200,
    toolbar = 'no',
    status = 'no',
    option = 'width=' + width + ', height=' + height + ', toolbar=' + toolbar +
        ', status=' + status;
do {
    name = prompt('あなたの名前は?');
} while (name === null || name === '');
result += '9.1\nこんにちは、' + name + 'さん!\n';
result += '9.2\n';
result += navigator.cookieEnabled ? 'クッキーが利用可能に設定されています。\n' :
    'ブラウザの設定でクッキーが利用不可に設定されています。\n';
div.append(input).append(br).append(img);
input.click(function() {
    if (tm === null || tm === undefined){
        tm = setInterval(function (){
             img.attr('src', nextPic());
        }, 5000);
        input.val('停止');
    } else {
        tm = clearInterval(tm);
        input.val('開始');
    }
});
result += '9-4. \nブラウザでポップアップウィンドウをブロックするように設定' +
    'してあったら開かないかも。\n';
window.open(url, title, option);
$('#pre0').text(result);

9-3. スライドショー

9-5. form要素にアクセスするには、id属性やclassName属性、あるいは要素のインデックスを利用すればいい。