javascript ランダム

javascriptでランダムな整数を表示するコードと仕組み解説「コピペOK」

投稿日:2019年1月11日 更新日:

Pocket

うも、チャーさんです。

 

あなたはjavascriptでランダムな整数を、

表示したいですか?

 

この記事では、javascriptでランダムな整数を、

表示するコードと、そのコードの詳細説明をしてます。

 

 

なので、この記事を読むことで、

あなたはjavascriptでランダムな整数を自由に

表示させることができるようになります。

 

また、コードもコピペですぐにランダム整数を、

表示できるようにしておいたので、

急いでる場合にもどうぞ。

 

スポンサードサーチ

javascriptでランダムな整数を表示するコード

 

早速結論ですが、

javascriptでランダムな整数を表示するコードは以下です。

 

document.write(Math.floor(Math.random()*10));

 

こう書くことでjavascriptでランダムな整数を出せます。

 

 

*ちなみにこのコードでは、

0~9までの整数がランダムに表示されます。

 

また先にネタバレになりますが、

コードの中の*10のとこを*100にすると、

0から99までの数値をランダムに表示できます。

 

 

スポンサードサーチ

javascriptでランダムな整数を表示するコードの解説

 

では、このコードの仕組みについて、

それぞれ部分ごとに解説します。

 

画面に数値を表示する部分のコード

 

document.write(Math.floor(Math.random()*10));

 

まずdocument.write()は、

画面上に文字や数字を出すときに使います。

 

document.writeの()の中にあるものを画面に表示してくれます。

 

javascriptでランダムな数値を出す部分のコード

 

次にわかりやすさのため順番飛ばしますが、

document.write(Math.floor(Math.random()*10));の

 

Math.random()というのは、

ランダムな数字を作ってくれる関数です。

これを書くとランダムな数字を出してくれます。

 

 

ですがこの関数はちょっと癖がありまして、

0〜1までの数字しか出してくれません。

 

 

しかも見てわかるように、小数点つきです。

 

なのでこれに10倍します。

小数点より前に0以上の数値を出すためです。

 

というわけで、かける10すると、

1桁目のとこに0~9までの数が出るようになります。

 

 

(ちなみにかける100倍すると0~99までの数字が、

小数点の前に出るようになります。)

 

 

javascriptで小数点を消す部分のコード

 

ですがまだ完全な整数にするには小数点が邪魔ですね。

で、この小数点を消す関数があります。

 

それがMath.floor()です。

 

document.write(Math.floor(Math.random()*10));

これを書くとMath.floorの()の中に入れた部分の

数値の小数点が消えます。

 

 

つまりMath.randomを10倍して出ていた、

6,8272・・・・・

の小数点以下が消えてくれるのです。

 

やってみましょう。

 

 

じゃん!こんな風に小数点以下が消えましたね。

 

で、今まで説明したこれを全部合わせた結果、

このようにjavascriptでランダムな数字を、

画面に表示することができるようになりました。

 

スポンサードサーチ

javascirptでランダムな整数を表示するコードの実行結果

 

じゃあ実際に紹介したコードを実行するとどうなるか?

document.write(Math.floor(Math.random()*10));

 

お見せします。

 

 

こんな風に、今まで説明したコードを書くことで、

javascriptでランダムな整数を画面に表示することができます。

 

 

また繰り返しになりますが、

javascriptでランダムな整数を表示するのに、

書いたコードはこうです。

 

document.write(Math.floor(Math.random()*10));

 

これをjavascirptの外部ファイルやscriptタグの中に、

記入するとjavascriptでランダムな整数を表示できますので、

試してみてください。

 

スポンサードサーチ

javascriptでランダムな整数を表示するためのやり方補足「初心者向け」

 

で、javascript触るの初めてなのです!という

場合のために、もう少しやり方を補足していきます。

 

ステップ1:javascriptファイルかscriptタグを準備する

 

javascriptでランダムな整数を表示するには、

まずはjavascriptファイルやscriptタグを書きましょう。

 

書き方は、javascriptをhtml内で使う方法の記事を、

参考にしてください。

 

ステップ2:コードを記入する

 

そしてjavascriptの記述の中に、

document.write(Math.floor(Math.random()*10));

と記入しましょう。

 

こうすると、javascriptでランダムな整数を、

表示できます。

 

 

また0〜9までではなくて、0~99の数値を出したい場合は、

document.write(Math.floor(Math.random()*10));

の*10のところを*100にしましょう。

 

そうすれば0~99までの数値が出ます。

*それ以上の数値の場合も考え方は一緒です。

 

 

また僕の記事の説明動画や画像では、

cssでスタイルを当てて中央揃えにしてますので、

数字を真ん中に持ってきたい場合は、cssを使いましょう。

 

スポンサードサーチ

まとめ

 

javascriptでランダムな整数を表示するには、

document.write(Math.floor(Math.random()*10));

を書きましょう。

 

そうすれば0〜9までの整数がランダムに、

表示されるようになります。

 

 

ランダムな整数はRPGのゲーム作成や、

(*例プレイヤーが敵に攻撃するときのランダムな数値など)

 

使うことがあるので、覚えておくと便利ですよ。

 

 

それでは、早速あなた自身でもこのコードを、

記入してランダム数値を表示してみてください。

 

読むだけではプログラミングは上達せず、

実際に自分で書いて表示させたり、

数字をいじったりすることで上達しますので。

 

 

それでは読んでもらってありがとうございました。

 

チャーさん

 

-javascript, ランダム


スポンサードサーチ

関連記事

no image

javascriptでcssを操作する手順と方法

どうも、チャーさんです。   あなたはjavascriptでcssを操作したい。 そう思っていませんか?   この記事では、javascriptを使って、 cssを操作する方法を書 …

no image

javascriptでalert(アラート)を表示させる方法

どうも、チャーさんです。   あなたは、javascriptでalert(アラート)を、 表示させたいと思っていませんか?   この記事では、javascriptを使って、 ale …

no image

javascriptをコンソールで実行する方法

どうも、チャーさんです。   あなたはjavascriptを今すぐに実行できる、 そんな方法を探していますか?   コンソールという機能を使えばそれは、 可能でして、この記事ではコ …

no image

二重ループをjavascriptでする方法

  どうも、チャーさん(@chaa___san)です。   あなたはjavascriptで二重ループを するにはどう書けばいいのか、 と思っていませんか?   この記事で …

no image

javascriptでボタンを押したら色が変更できる方法「コード例つき」

どうも、チャーさんです。   あなたはjavascriptで、ボタンを押したら、 色が変更できる方法を探していませんか?   この記事では、ボタンクリックで、 色を変更する方法、コ …

no image

javascriptでボタンをクリックしたらアラートが表示されるコード

どうも、チャーさんです。   あなたはjavascriptでボタンをクリックしたら、 アラートが表示される方法とコードを、 探していますか?     この記事では、ボタン …

no image

javascriptをhtml内で使う方法「完全初心者向け」

どうもチャーさん(@chaa___san)です。   あなたはjavascriptをhtmlで使えないのか? と疑問に思っていませんか?   結論からいうと使えます。   …

no image

javascriptでランダムに画像を表示する方法「コードコピペOKです」

どうも、チャーさんです。   あなたはjavascriptでランダムに画像を、 表示させたいですか?     この記事ではjavascriptでランダムに画像を、 表示さ …

no image

htmlの中にjavascriptを書いて使う方法

どうも、チャーさんです。   あなたはhtmlの中にjavascriptを書いて、 使いたいと思っていませんか?   この記事では、htmlの中にjavascriptを 書いて、j …

no image

getElementByIdの意味や使い方をわかりやすく紹介します。

  どうも、チャーさんです。   あなたはgetElementByIdの意味はなんだろう? と思ってませんか?   この記事では、getElementByIdの意味や、 …

no image

javascriptのエラーの確認方法「3秒で確認できます」

どうも、チャーさんです。   あなたはjavascriptのエラーの確認方法を、 知りたいと思っていませんか?     この記事では、javascriptのエラーを、 確 …

最新記事

チャーさん

プログラミング・筋トレ・unity系の記事などを書いてます。

大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。

youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。