Changes between Version 9 and Version 10 of HowTo/JavaScriptLanguageIntroduction

Timestamp:

Aug 1, 2010, 1:03:48 AM (14 years ago)

Author:

村山 俊之

Comment:

--

HowTo/JavaScriptLanguageIntroduction

@@ -280 +280 @@
 obj.showAll();      // foo, bar, baz すべて表示
 }}}
+
+以上が、 Java や C++ などで言うところのクラス定義に相当する、といって良いでしょう。継承を行いたい場合は、新たに定義するコンストラクタの関数名に、プロトタイプの複製をコピーしてあげれば ok です。以下のような記述になります。
+
+{{{
+// ダイアログオブジェクトの基本クラス
+function Dialog() {}
+Dialog.prototype = {
+    "doModal": function(callback) {
+        this.modal_callback = callback;
+        this.createDialog();
+    },
+    "createDialog": function() {
+        this.window = document.createElement("div");
+        this.window.className = "dialog";
+        var dialog_title = document.createElement("h2");
+        dialog_title.appendChild(document.createTextNode(this.title || "名称未定義"));
+        document.body.appendChild(this.window);
+        this.drawForm();  // 継承クラスにて実装する
+        this.show();
+    },
+    "show": function(is_show) {
+        is_show = typeof is_show == "boolean" ? is_show : true;
+        this.window.style.display = is_show ? "block" : "none";
+    },
+    "destroyDialog": function() {
+        if (!this.window) return;
+        if (this.modal_callback && this.preEndModal) {
+            var result = this.preEndModal();
+            if (result == null)
+                return;
+            if (result)
+                this.modal_callback();
+        }
+        if (this.preDestroyDialog) {
+            if (!this.preDestroyDialog())
+                return;
+        }
+        document.body.removeChild(this.window);
+        this.window = undefined;
+    }
+};
+
+function AhoDialog() {
+    this.title = "あほダイアログ";
+}
+
+AhoDialog.prototype = new Dialog();  // メンバメソッドを継承 (プロトタイプの複製をコピー)
+
+// 継承クラスの独自メソッドを記述
+AhoDialog.prototype.drawForm = function() {
+    this.dom_elems = {};
+    var p = document.createElement("p");
+    p.appendChild(document.createTextNode("あほあほ"));
+    this.window.appendChild(p);
+    p = document.createElement("p");
+    p.appendChild(document.createTextNode("どう思いますか? → "));
+    var input = document.createElement("input");
+    input.type = "text";
+    input.style.width = "20em";
+    p.appendChild(input);
+    this.dom_elems.answer_input = input;
+    this.window.appendChild(p);
+    p = document.createElement("p");
+    p.style.textAlign = "center";
+    input = document.createElement("input");
+    input.type = "button";
+    input.value = "OK";
+    var that = this;
+    input.onclick = function() {
+        that.is_ok = true;
+        that.destroyDialog();
+    };
+    p.appendChild(input);
+    p.appendChild(document.createTextNode(" "));
+    input = document.createElement("input");
+    input.type = "button";
+    input.value = "キャンセル";
+    input.onclick = function() {
+        that.is_ok = false;
+        that.destroyDialog();
+    };
+    p.appendChild(input);
+    this.window.appendChild(p);
+};
+
+AhoDialog.prototype.preEndModal = function() {
+    if (!this.is_ok)  // キャンセルボタン
+        return false;
+    var answer = this.dom_elems.answer_input.value;
+    if (answer == "") {
+        alert("何か入力して下さい…。");
+        this.dom_elems.answer_input.focus();
+        return;
+    }
+    this.data = {
+        "answer": answer
+    };
+    return true;
+};
+
+// 実際にダイアログを使用するコード例
+var dlg = new AhoDialog();
+dlg.doModal(function() {
+    var div = document.getElementById("result_container");
+    while (div.childNodes.length > 0)
+        div.removeChild(div.lastChild);
+    var text = "";
+    for (int i = 0; i < 1000; i++)
+        text += this.data.answer + " ";
+    div.appendChild(document.createTextNode(text));
+});
+}}}