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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

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

HTML

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

Q&A

解決済

3回答

732閲覧

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

anopurihana

総合スコア34

JavaScript

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

HTML

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

0グッド

0クリップ

投稿2017/09/15 12:48

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

HTML

1<div id="no"> 2? 3</div> 4<p> 5 <input type="button" value="Start" onClick="Start()"> 6 <input type="text" value="" id="kotae"> 7 <input type="button" value="Check" onClick="Check()"> 8</p>

javascript

1<script type="text/javascript"> 2 3var intRandom = function ( min, max, len ) { 4 var a = new Array( len ); 5 var r = [ ]; 6 var s = max - min + 1; 7 8 while( len-- ) r.push( Math.floor(Math.random() * s + min ) ); 9 return r; 10} 11 12 13var Flash = function ( ) { 14 this.init.apply( this, arguments ); 15}; 16 17 18Flash.prototype.init = (function ( ) { 19 return function ( id, vtime, htime, ary ) { 20 this.target = document.getElementById( id ); 21 this.vtime = 'number' == typeof vtime ? vtime: 700; 22 this.htime = 'number' == typeof htime ? htime: 100; 23 return this.ary = ary; 24 }; 25})(); 26 27 28Flash.prototype.stop = function ( ) { 29 clearTimeout( this.tmid ); 30 return this.setString( 'Stop!!' ); 31}; 32 33 34Flash.prototype.start = (function ( ) { 35 return function ( ) { 36 this.setString( 'Go!' ); 37 this.max = this.ary.length; 38 this.mode = false; 39 this.tmid = null; 40 this.cnt = 0; 41 setTimeout( (function(that){ return function(){ that.loop() }})(this), 500); 42 }; 43})(); 44 45 46Flash.prototype.setString = (function ( ) { 47 return function ( str ) { 48 return this.target.firstChild.nodeValue = 'undefined' == typeof str ? '': str + ''; 49 }; 50})(); 51 52 53Flash.prototype.loop = (function ( ) { 54 return function ( ) { 55 var t = '?'; 56 57 if( this.max >= this.cnt ) { 58 t = ( this.mode = ! this.mode ) ? '': this.ary[ this.cnt++ ]; 59 60 this.tmid = setTimeout( (function(that){ return function(){ that.loop() }})(this), 61 this.mode ? this.htime: this.vtime ); 62 } 63 this.setString( t ); 64 }; 65})(); 66 67 68Flash.prototype.getTotal = (function ( ) { 69 return function ( ) { 70 var t = 0, c = this.max, n; 71 while( c ) t += this.ary[ --c ]; 72 return t; 73 }; 74})(); 75 76 77Flash.prototype.setData = (function ( ) { 78 return function ( ary ) { 79 return this.ary = ary; 80 }; 81})(); 82 83 84Flash.prototype.check = (function ( ) { 85 return function ( total ) { 86 return total == this.getTotal(); 87 }; 88})(); 89 90var mondai = new Flash( 'no', 400, 150); 91 92function Start( ) { 93 document.getElementById( 'kotae' ).value = ''; 94 mondai.setData( intRandom( -10, 10, 5) ); 95 mondai.start( ); 96} 97 98function Check( ) { 99 var t = document.getElementById( 'kotae' ); 100 t.value = mondai.check( t.value ) ? "正解": mondai.getTotal(); 101} 102 103 104</script> 105

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

【継承とプロトタイプチェーン - 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/15 17:23

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

anopurihana

2017/09/16 09:46

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

2017/09/16 11:23

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

0

ベストアンサー

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

投稿2017/09/16 09:59

sublimer

総合スコア403

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

anopurihana

2017/09/16 10:08

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

2017/09/16 10:12

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

2017/09/16 10:18

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

2017/09/16 10:24

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

0

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

html

1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>sample</title> 9</head> 10 11<body> 12 <p id="message">?</p> 13 <div> 14 <input type="button" value="Start" onClick="Start()"> 15 </div> 16 17 <script type="text/javascript"> 18 var intRandom = function (min, max, len) { 19 var a = new Array(len); 20 var r = []; 21 var s = max - min + 1; 22 23 while (len--) r.push(Math.floor(Math.random() * s + min)); 24 return r; 25 } 26 var messages = [ 27 'message1', 28 'message2', 29 'message3', 30 'message4', 31 'message5', 32 'message6', 33 'message7', 34 'message8', 35 'message9', 36 'message10' 37 ]; 38 function displayMessages(messageElement, isRandom, interval) { 39 var count = 0; 40 var messageTimer = setInterval(function () { 41 if (isRandom) { 42 messageElement.textContent = messages[intRandom(0, messages.length, 1)]; 43 } else { 44 messageElement.textContent = messages[count]; 45 } 46 count++; 47 if (count > messages.length) { 48 clearInterval(messageTimer); 49 messageElement.textContent = '?'; 50 } 51 }, interval); 52 } 53 function Start() { 54 var message = document.getElementById('message'); 55 //メッセージを表示する要素、ランダムに表示するか、何秒ごとに表示するか 56 displayMessages(message, true, 500); 57 } 58 </script> 59</body> 60 61</html>

投稿2017/09/16 09:02

sublimer

総合スコア403

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

anopurihana

2017/09/16 09:54

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

2017/09/16 10:02 編集

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問