質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.76%

  • JavaScript

    15306questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    8316questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

フラッシュ暗算のようなメッセージ表示をしたいです。

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 524

anopurihana

score 26

こんにちは。
フラッシュ暗算の要領で、数字の羅列ではなく既に設定したメッセージをonClickで表示する仕組みを作りたいのですが、下記のフラッシュ暗算用のコードからどのように書き換えていけばよいか悩んでいます。例えば、Math.floor(Math.random()*)の部分などはメッセージ表示であれば関係ないので必要ない、という程度までは辛うじて理解しているのですが・・・。何かご指摘や解決のヒントなどございましたら、よろしくお願いします。

<div id="no">
?
</div>
<p>
  <input type="button" value="Start" onClick="Start()">
  <input type="text" value="" id="kotae">
  <input type="button" value="Check" onClick="Check()">
</p>
<script type="text/javascript">

var intRandom = function ( min, max, len ) {
  var a = new Array( len );
  var r = [ ];
  var s = max - min + 1;

  while( len-- ) r.push( Math.floor(Math.random() * s + min ) );
  return r;
}


var Flash = function ( ) {
  this.init.apply( this, arguments );
};


Flash.prototype.init = (function ( ) {
  return function ( id, vtime, htime, ary ) {
    this.target = document.getElementById( id );
    this.vtime = 'number' == typeof vtime ? vtime: 700;
    this.htime = 'number' == typeof htime ? htime: 100;
    return this.ary = ary;
  };
})();


Flash.prototype.stop = function ( ) {
  clearTimeout( this.tmid );
  return this.setString( 'Stop!!' );
};


Flash.prototype.start = (function ( ) {
  return function ( ) {
    this.setString( 'Go!' ); 
    this.max = this.ary.length;
    this.mode = false;
    this.tmid = null;
    this.cnt = 0;
    setTimeout( (function(that){ return function(){ that.loop() }})(this), 500);
  };
})();


Flash.prototype.setString = (function ( ) {
  return function ( str ) {
    return this.target.firstChild.nodeValue = 'undefined' == typeof str ? '': str + '';
  };
})();


Flash.prototype.loop = (function ( ) {
  return function ( ) {
    var t = '?';

    if( this.max >= this.cnt ) {
      t = ( this.mode = ! this.mode ) ? '': this.ary[ this.cnt++ ];

      this.tmid = setTimeout( (function(that){ return function(){ that.loop() }})(this),
        this.mode ? this.htime: this.vtime );
    }
    this.setString( t );
  };
})();


Flash.prototype.getTotal = (function ( ) {
  return function ( ) {
    var t = 0, c = this.max, n;
    while( c ) t += this.ary[ --c ];
    return t;
  };
})();


Flash.prototype.setData = (function ( ) {
  return function ( ary ) {
    return this.ary = ary;
  };
})();


Flash.prototype.check = (function ( ) {
  return function ( total ) {
    return total == this.getTotal();
  };
})();

var mondai = new Flash( 'no', 400, 150);

function Start( ) {
  document.getElementById( 'kotae' ).value = '';
  mondai.setData( intRandom( -10, 10, 5) );
  mondai.start( );
}

function Check( ) {
  var t = document.getElementById( 'kotae' );
  t.value = mondai.check( t.value ) ? "正解": mondai.getTotal();
}


</script>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

+2

【継承とプロトタイプチェーン - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain

たとえば上記MDNのチュートリアル上級編で説明されていますが、Webの情報を読む前に、一度本屋で入門書から上級まで何冊か本を買って読むと今後の理解が進みます。とりあえず最初はわからないことのほうが多いと思いますが、そのうち腑に落ちることも多いはずなのでお勧めします。

JavaScript ならとりあえずこれを通読してみてください、少し情報が古いところもありますがお勧めです。

【O'Reilly Japan - JavaScript 第6版】
https://www.oreilly.co.jp/books/9784873115733/

【O'Reilly Japan - 初めてのJavaScript 第3版】
https://www.oreilly.co.jp/books/9784873117836/

【改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで | 山田 祥寛 |本 | 通販 | Amazon】
https://www.amazon.co.jp/dp/477418411X

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/09/16 18:46

    kei344さん
    ご指摘ありがとうございます。
    kei344さんには前回にも幾つかアドバイスをいただいた中で、今回のようにまずは基盤から書籍などで学ぶことをおすすめしてくださったこともあって、実は少し前から初心者向けの書籍で一からJavascriptを学びなおしています。一方で、当面の目標として、まず第一弾のアプリをリリースしたいという思いもあり、それにあたり今の知識では足りない部分をこちらで質問させていただいている次第です。そのためやや丸投げ気味で拙い質問ではあるかもしれません。次は上記の書籍で勉強していこうと思います。
    ありがとうございました。

    キャンセル

  • 2017/09/16 20:23

    同じ文言を書いたかもしれませんね、すみません。回答意図としては、「プロトタイプチェーン って難しいからもっと簡単なところからはじめたほうが良くない?」というつもりでした。プロトタイプの理解があったうえで提示されたコードを改造するならそう問題はないのですが、「メッセージを表示する」だけであれば違う方法がいくつもあるので。

    ひとまず解決されたようでよかったです、がんばってください!

    キャンセル

checkベストアンサー

+1

anopurihanaさん
56行目にある displayMessages(message, true, 500); を displayMessages(message, false, 500); に変更してみてください。
その行の true false を変更することで、ランダム表示と順番に表示を切り替えることができます。
また、 500 を任意の数字にすることで表示の感覚を変更できます。
単位はミリ秒です。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/09/16 19:08

    sublimerさん
    ご指摘の通り、true→falseで実装できました。
    わかりやすくコメントアウトで掲載してくださっていましたね。
    今回はお世話になりました。まだまだ私にとっては難しいレベルでしたので、掲載していただいたコードを見直して今後に役立てていきます。
    ありがとうございました。

    キャンセル

  • 2017/09/16 19:12

    anopurihanaさん
    解決してよかったです。
    teratailで回答するのは初めてだったので、うまく回答できてよかったです。

    キャンセル

  • 2017/09/16 19:18

    sublimerさん
    普段はあちらで活動なさっているんですね。
    わざわざこちらに来ていただいて助かりました。
    私はTeratailで頻繁に質問させていただいているので、機会がありましたら、sublimerさんにまた教えていただければ幸いです。

    キャンセル

  • 2017/09/16 19:24

    anopurihanaさん
    お役に立てたようでうれしいです。
    うまく回答できるように私も勉強を頑張りたいと思います。

    キャンセル

+1

サンプルを作ってみました。
ボタンを押すと、一定時間ごとにメッセージが表示されます。
質問の答えになっていますでしょうか?

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>sample</title>
</head>

<body>
    <p id="message">?</p>
    <div>
        <input type="button" value="Start" onClick="Start()">
    </div>

    <script type="text/javascript">
        var intRandom = function (min, max, len) {
            var a = new Array(len);
            var r = [];
            var s = max - min + 1;

            while (len--) r.push(Math.floor(Math.random() * s + min));
            return r;
        }
        var messages = [
            'message1',
            'message2',
            'message3',
            'message4',
            'message5',
            'message6',
            'message7',
            'message8',
            'message9',
            'message10'
        ];
        function displayMessages(messageElement, isRandom, interval) {
            var count = 0;
            var messageTimer = setInterval(function () {
                if (isRandom) {
                    messageElement.textContent = messages[intRandom(0, messages.length, 1)];
                } else {
                    messageElement.textContent = messages[count];
                }
                count++;
                if (count > messages.length) {
                    clearInterval(messageTimer);
                    messageElement.textContent = '?';
                }
            }, interval);
        }
        function Start() {
            var message = document.getElementById('message');
            //メッセージを表示する要素、ランダムに表示するか、何秒ごとに表示するか
            displayMessages(message, true, 500);
        }
    </script>
</body>

</html>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/09/16 18:54

    sublimerさん
    ご丁寧にご回答いただきありがとうございます。
    掲載してくださったコードで、ランダムに10のメッセージが表示される仕組みが反映されました。onClickのボタンなどの位置は微調整していきます。更に踏み込んだ質問になってしまうのですが、上記の仕組みをmessage1~10まで降順で表示させたいのですが、その場合はMath.floor(Math.random()*)のコードをどのように変えていけばよいのでしょうか・・・?

    キャンセル

  • 2017/09/16 19:00 編集

    anopurihanaさん
    56行目にある displayMessages(message, true, 500); を displayMessages(message, false, 500); に変更してみてください。
    その行の true,false を変更することで、ランダム表示と順番に表示を切り替えることができます。
    また、 500 を任意の数字にすることで表示の間隔を変更できます。
    単位はミリ秒です。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.76%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    15306questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    8316questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。