プログラミング学習の記録 559.1 15章(Ajaxのデータ - XMLかJSONか)の練習問題2 『初めてのJavaScript 第2版』(シェリー・パワーズ著、武舎広幸+武舎るみ訳、オライリー・ジャパン、2009年、ISBN978-4-84311-425-5)

開発環境

• Microsoft Windows 7 Home Premium (OS)
• Internet Explorer 9 (Webプラウザ)
• Microsoft Visual Web Developer 2010 Express Edition (IDE)
• Script言語:JavaScript
• JavaScript Library: jQuery

『初めてのJavaScript 第2版』(シェリー・パワーズ著、武舎広幸+武舎るみ訳、オライリー・ジャパン、2009年、ISBN978-4-84311-425-5)の15章(Ajaxのデータ - XMLかJSONか), 練習問題2を解いてみる。

15-2.

コード(Microsoft Visual Web Developer 2010 Express Editionのエディタ)

var xmlhttp = new XMLHttpRequest();

if (xmlhttp.readyState == 4 &&
                xmlhttp.status == 200) {

    // body要素を取得
    var body = document
                .getElementsByTagName("body")[0];

    // id属性recipeが存在するか確認して
    // 存在する場合は削除
    var recipe = document
                    .getElementById("recipe");
    if (recipe) {
        body.removeChild(recipe0);
    }

    // id属性がrecipeのdiv要素を作成
    var div = document.createElement("div");
    div.id = "recipe";


    // JSONを評価
    var response = JSON.parse(xmlhttp.responseText);

    // レシピ名
    var title = response["title"];
    title = document.createTextNode(title);
    var h3 = document.createElement("h3");
    div.appendChild(h3);
    h3.appendChild(title);

    // 材料
    var ingredients = response.ingredients;
    var ul = document.createElement("ul");
    for (var i = 0; i < ingredients.length; i++) {
        var li = document.createElement("li");
        var ingredient = ingredients[i].ingridient;
        ingredient = document
                .createTextNode(ingredient);
        li.appendChild(ingredient);
        ul.appendChild(li);
    }
    div.appendChild(ul);

    // レシピの各ステップ
    var instruction = response.instruction;
    instruction = document
        .createTextNode(instruction);
    var p = document.createElement("p");
    div.appendChild(p);
    p.appendChild(instruction);

    // サイト表示の完成
    body.appendChild(div);
}

(こんな感じでいいのかな？)

合わせて読んでいる書籍。

1. 14章でPHPとJavaScriptを組み合わせたWebアプリケーションが登場したので『初めてのPHP & MySQL 第2版』(Micbele E. Davis、Jon A. Phillips 著、西沢 直木 訳、オライリー・ジャパン、2008年、ISBN978-4-87311-365-4)
2. JavaScriptのライブラリーを活用できるようになるために『jQueryクックブック』(jQuery Community Experts 著、株式会社クイープ 訳、オライリー・ジャパン、2010年、ISBN978-4-87311-468-2)
3. JavaScript、APIを使って遊ぶために『Google Maps Hacks 第2版 ―地図検索サービスをもっと活用するテクニック』(Rich Gibson, Schuyler Erle 著、武舎 広幸、福地 太郎、武舎 るみ 訳、オライリー・ジャパン、2007年、ISBN978-4-87311-341-8)
4. HTML5について学習するために『入門 HTML5』(Mark Pilgrim 著、矢倉 眞隆 監訳、水原 文 訳、オライリー・ジャパン、2011年、ISBN978-4-87311-482-8)