Hello New World Clone

スクリーンショット 2016-05-21 13.59.58
はい、やりっぱなしはアレなので前回のおさらいでもしてみましょう。
サンプル

基本的なHTMLについての説明は省略します。タグの説明に付いてはこちらで確認してみてください。改めて見ると、意味もわからずおまじない扱いしてきたやつがかなり多いですね。ちゃんと理解して使った方がやっぱりいいです。

さて早速javascriptのコードを見てみましょう。


  1. “id”が「display」となっている要素をdisplay_boxと言う変数に代入します。
    行末の「;」は文章で行くところの読点にあたる感じでしょうか。1つの処理を書き終えたらかならず「;」を付けましょう。
    ※プログラムによっては改行することによって自動的に処理を終了することを認識する物もあります。
    <div id=“display”></div>
    はプログラムの中でdisplay_boxと言う変数を使って操作されます。

  2. id”が「greeting」となっている要素をselect_boxと言う変数に代入します。

  3. この部分で実際画面の動きが始まります。
    ここでは選択ボックスで選んだ値の条件によって表示する文字列を変える動きを表現しています。
    最初のif (select_box.value == ‘1’)からは「もしselect_boxの値が1の場合display_boxの要素の中のテキストを’Konnichiwa Atarashii Sekai!’にしなさい」という事を記述しています。
    japaneseを選択した時は値(value)は1となるのでこの動きはjapaneseを選択した時に実行される処理となります。
    続いてelse if (select_box.value == ‘2’)からは「それ以外でもしselect_boxの値が2の場合display_boxの要素の中のテキストを’Hola El Mundo Nuevo!’にしなさい」という事を記述しています。
    spanishを選択した時は値(value)は2となるのでこの動きはspanishを選択した時に実行される処理となります。
    最後のelseからは「それ以外の場合display_boxの要素の中のテキストを’Hola El Mundo Nuevo!’にしなさい」という事を記述しています。
    選択した値が「1」でも「2」でもない場合、すなわち「japanese」と「spanish」以外が選択された場合に実行される処理となります。
    イメージできましたでしょうか? また{}は場合の範囲を仕手いる物です。条件に対する処理が1つだけ場合は省略は可能ですが、処理の範囲を明確にするためにも記述した方が良いかと思います。

  4. “id”が「display」となっている要素の中のテキストをclone_display_boxの要素の中のテキストにしてくださいと命令しています。
    さて結果はどうなるでしょうか?display_boxの要素の中と同じテキストになりましたよね。
    あれ?clone_display_boxは今まで何の処理もしていませんでしたよね?でも前に「var clone_display_box = display_box;」と言う処理がありました。こちらは変数に代入すると説明していましたが、実際はclone_display_boxはdisplay_boxの中を参照してくださいと言う意味になります。なのでdisplay_boxでの操作=clone_display_boxでの操作となり同じ内容が表示されるのです。
    さて最後に宿題です。

    とした時に、number2の値はどうなるでしょうか?

はい、こんなところでいかがでしょうか?
思ったより説明するのは大変ですね。まぁでも次も適当にやってみようかと思いますのでよろしくお願いします。