1

私はC++のバックグラウンドを持っていますが、Javascriptで何をしようとしているのかについていくつか質問があります。Javascriptには疑似クラスがないため、疑似クラスを作成する必要がありました。基本的には、選択したものに基づいて異なるものを印刷したいと思います。この例では2つの「果物」のみを定義しましたが、私が行うことはもっと多くのことを使用します。どんな助けでも大歓迎です。セレクトがフルーツ機能にリンクしていないなど、これにはいくつかの欠陥があることを私は知っています。

<!DOCTYPE html>
<html>
<script>
   function select_fruit(name)
   {
      var fruit_name = name;
   }

   function fruit(name, color, amt)
   {
      this.name = name;
      this.color = color;
      this.amt = amt;
   }

   apple = new fruit("apple", "red", 5);
   orange = new fruit("orange", "orange", 1);

   document.getElementById("name").innerHTML = name;
   document.getElementById("color").innerHTML = color;
   document.getElementById("amt").innerHTML = amt;
</script>

<body>
   <select name="pick_these" onchange="fruit(this.value)">
      <option value="apple">Apple</option>
      <option value="orange">Orange</option>
   </select><br />

   <p>I want *amt *color *fruit</p><!--This should say I want 5 red apple, if it's selected on the dropdown-->
</body>
</html>
4

2 に答える 2

2

まず第一に、あなたは<head>タグを逃しています。それはさておき、document.getElementById.....行をselect_fruit()関数に移動し、代わりonchangeに呼び出すようにイベントを変更する必要があります。select_fruitこれが私があなたが試みていることをする方法です：

HTML：

<select id="fruitlist">
    <option value="apple">Apple</option>
    <option value="orange">Orange</option>
</select>
<p id="result"></p>

JS：

window.onload = function() { // or just `(function() {` if script is after above HTML
    var fruits = {
        "apple":{
            "color":"red",
            "amt":5
        },
        "orange":{
            "color":"orange",
            "amt":1
        }
    }, result = document.getElementById('result');
    document.getElementById('fruitlist').onchange = function() {
        var selection = this.options[this.selectedIndex].value;
        result.innerHTML = "I want "+fruits[selection].amt+" "
            +fruits[selection].color+" "+selection;
    };
}; // or `})();` if you used `(function() {` at the start
于 2013-03-21T19:31:30.163 に答える
0

私は先に進んで、125％についてのcdhowieのコメントに同意するつもりです。
Java / C＃/ C ++ / ActionScript/etcのようなJSを使用しようとするとうまくいきます。
あなたは何かを引き出すことができるでしょう、そしてあなたがそれの周りをしばらくハックすると、それは何か機能的なことをするでしょう。

しかし、それは実際には、言語が使用されるべき方法ではありません。
他の言語の技術的な理解がある場合は、Crockfordの「JavaScript：TheGoodParts」が実用的な方法です。
言語がどのように解析されるかについての理解が限られている/まったくない場合、またはコンフォートゾーンと比較してJavaScriptの内部で本当に迷っている場合、Crockfordの本は、低レベルの言語（言語をそのまま使用し、ライブラリを使用せず、デザインパターンの使用を最小限に抑えます）。

Stoyan Stefanovの「JavaScriptPatterns」は、ラベルに記載されているとおりに機能し、優れた機能を発揮するため、素晴らしい次のステップだと思います。

とにかく、ここではかなりの数の問題があります。

1つ目は、スクリプトが要素とその値を、存在する前に要求していることです。
JS/DOMはプリコンパイルされていません。ほとんどの場合、クライアント/サーバー通信に入るまで、または関数を定義して他の場所でそれらを使用するまで、表示されるのは、それらを配置した順序で取得したものです。

この場合、あなたは要素を求めていますel.id === "name"。
コードでこの行の上を見ると、その上の要素にその行がないことがわかりますid。

ここでの解決策は、スクリプトが目的のターゲットを下回っていることを確認することです（または、すべてを関数でラップし、下の関数を呼び出して、スクリプトが存在することを確認します<select>）。

これにより、2番目の問題が発生します。要素にIDがありません。

IDがない場合、IDでそれらの要素を取得することはできません。

<select id="my-select-box"></select>

<script>
    var select = document.getElementById("my-select-box");
</script>

逆にするとうまくいきません。
属性が欠落している場合.id、それは機能しません。

「クラス」については、ハードクラスを定義してからインスタンスを作成することとは考えないでください。
時々、それは有用/必要です。
また、気にする必要があるのはインスタンスだけです。

つまり、C ++では、実際には単純な構造体が実行された可能性があるのに、本格的なクラスを作成したくなる可能性があることを常に考えてください。
そして、本当に必要なのは単一のインスタンスだけである構造体についてはどうでしょうか。

ここで、他の作業（ヘッダーなど）を実行せずに、そのstructメソッドを指定することを想像してください。 

<select id="fruit-list">
    <option value="apples">apple</option>
    <option value="oranges">orange</option>
    <option value="bananas">banana</options>
</select>
<p id="fruit-output"></p>

var Fruit = function (name, colour, starting_amount) {

    var public_interface = {
        name   : name,
        colour : colour,
        amount : starting_amount
    };

    return public_interface;
};


var apples  = Fruit("apple",   "red",   4),
    oranges = Fruit("orange", "orange", 2),
    bananas = Fruit("banana", "yellow", 1);



var fruit_basket = {

    selected  : "",
    output_el : null,
    apples    : apples,
    oranges   : oranges,
    bananas   : bananas,

    add : function (fruit, num) {
        this[fruit].amount += num;
    },

    remove : function (fruit, num) {
        this[fruit].amount -= num;
    },

    print : function () {
        var fruit   = fruit_basket.selected,
            el      = fruit_basket.output_el,
            message = "I want " + fruit.amount
                    + " " + fruit.colour
                    + " " + fruit.name;

        if (fruit.amount !== 1) { message += "s" }

        if (el.hasOwnProperty("textContent")) {
            el.textContent = message;
        } else {
            el.innerHTML = message;
        }
    },

    select : function (el) {
        var index = el.selectedIndex,
            fruit = el.options[index].value;

        fruit_basket.selected = fruit_basket[fruit];
    },

    set_output : function (el) {
        fruit_basket.output_el = el;
    }

};



var select_box = document.getElementById("fruit-list"),
    output_el  = document.getElementById("fruit-output");


fruit_basket.set_output(output_el);
select_box.addEventListener("change", function () {
    fruit_basket.select(this);
    fruit_basket.print();
});

これは答えではありませんが、上記のすべてのクラスを構築する必要があるC++またはJavaソリューションよりもはるかに簡単であることを考慮してください。

これがより高度な場合は、データをビューとコントロールからより明確に分離した方法で分離することを検討するかもしれません。

しかし、繰り返しになりますが、それは、巨大な継承階層や、比較的少ないクラスが必要であることを意味するものではありません。
これは非常に単純な言語であり、構築/初期化をサポートしますが、オブジェクトをその場で発明するだけで「シングルトン」を作成することもできます。

もしあなたがその言語を真剣に使うつもりなら、その研究をそれに入れることをお勧めします。

于 2013-03-22T00:59:40.887 に答える