webサイト制作の勉強|1月ブログ

webサイト制作の勉強に関する解説ブログです。

Math.randomの使い方

JavaScriptで乱数を取得したい場合には「random関数」を使います。

覚えるメソッド

Math.random

Math.random()は、0〜0.9999...(1未満)の間から、1つの数値をランダムで返すメソッドです。0は含みますが、1は含みません。



Math.round

Math.round()は、小数点以下を四捨五入するメソッドです。整数を取得したい場合に利用します。

Math.ceil

Math.ceil()は、小数点以下を切り上げるメソッドです。0.999なら1、3.21なら4という数値を返します。

Math.floor

Math.floor()は、小数点以下を切り捨てるメソッドです。0.999なら0、3.21なら3という数値を返します。


<script>
  var a =  Math.random();
 
  document.write(a);
</script>

0から10までの数字をランダムで取得したい場合

<script>
// 0〜10の乱数を発生 ([10]を指定する)
var a = Math.floor( Math.random() * 10 ) ;

 document.write(a);
</script>

各メソッドを実際に表示させる

<script>
 
  var a = Math.round( Math.random() * 10);  //小数点以下を四捨五入
  var b = Math.ceil( Math.random() * 10);  //小数点以下を切り上げ
  var c = Math.floor( Math.random() * 10);  //小数点以下を切り捨て

  document.write(a + '<br>');
  document.write(b + '<br>');
  document.write(c + '<br>');
</script>

任意の範囲での乱数を取得するには

<script>
// 5〜10の乱数を発生 [11-5]と[5]を指定する
var a = Math.floor( Math.random() * 6 ) + 5 ;
</script>

画像をランダムで表示する

「img0~img3」画像を準備する
「img1~」の場合は、((Math.random()*numOfImg)+1)となる

<script>
var numOfImg = 4;
var num;
num = Math.floor(Math.random() * numOfImg)
document.write('<img src="img/img' + num + '.jpg">');
</script>
広告を非表示にする

for文の多重ループ

一つのfor文(ループ)の中に、さらにfor文を入れることができます。 もちろん入れ子の深さを二重、三重、...と深くしていくことも可能です。 これらをまとめて多重ループと呼びます。
ここでは、for文による二重ループを使って、九九の表を表示するプログラムを作ってみましょう。

for ( 変数iの初期値 ;  繰り返し条件  ;  変数の変更  ) {
   for (   変数jの初期値 ; 繰り返し条件  ;   変数の変更 ) {
        処理の結果
   }
 処理の結果
}

この場合の処理の順序は、次のようになります

  1. まず変数iを参照します
  2. jの繰り返し条件が終了するまで処理を繰り返し行う
  3. jの処理の終了後、iの処理を行う
<body>
<h3>九九表</h3>
<table width="500" border="1">
<tr>
<th>&nbsp;</th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th><th>8</th><th>9</th>
</tr>
<script>
for (i=1 ; i<=9 ; i++) {
     document.write('<tr>');
     document.write('<th>' + i + '</th>');

     for (j=1 ; j<=9 ; j++) {
          document.write('<td>' + i*j  + '</td>');
     }

     document.write('</tr>');
}
</script>
</table>
</body>
広告を非表示にする

illustratorのアピアランス機能を使ったPOP作成

f:id:yachin29:20161128202628j:plain
f:id:yachin29:20161128202643j:plain
f:id:yachin29:20161128202658j:plain
f:id:yachin29:20161128202725j:plain
f:id:yachin29:20161128202749j:plain
f:id:yachin29:20161128202801j:plain
f:id:yachin29:20161128202810j:plain
f:id:yachin29:20161128202829j:plain
f:id:yachin29:20161128202907j:plain
f:id:yachin29:20161128202921j:plain


文字の加工
f:id:yachin29:20161128203035j:plain
f:id:yachin29:20161128203049j:plain
f:id:yachin29:20161128203058j:plain
f:id:yachin29:20161128203111j:plain
f:id:yachin29:20161128203120j:plain
f:id:yachin29:20161128203128j:plain
f:id:yachin29:20161128203142j:plain

素材

http://yachin29.com/Illustrator/pop-ai.zip

for文の使い方

for文もwhile文と同じ繰り返し(ループ)処理ですが、記述方法が変わるので、違いをしっかりと覚えましょう。

for ( 変数iの初期値 ;  繰り返し条件  ;  変数の変更  ) {
 処理の結果
}


記述例

<script>
  for (var i = 1 ; i <= 100 ; i++) {
    console.log( i );
  }
  
/* for ( 変数の初期値; 繰り返し条件; 変数の変更(最後は;がいらない) ) {
  実行される処理
}*/
</script>


練習
selectタグを使い、生年月日を選べるプルダウンメニューを作ってみましょう。

<p>生年月日を選択してください。</p>
<select>
<script>
for (i=1945; i<=2000; i++) {
	document.write('<option value=" i ">' + i + '年</option>');
}
</script>
</select>
広告を非表示にする

while文の使い方

while文とは繰り返し(ループ)処理です。この繰り返し処理はプログラムでもっとも使われる処理の1つなので、しっかりと理解しましょう。
JavaScriptでは繰り返し処理には「for文」と今回の「while文」の大きく分けて2つの構文があります。

「while文」

条件が満たされている間は何度でも処理を繰り返す

「for文」

主に指定した回数だけ処理を繰り返す




「while文」の記述例

ループ処理では、( )のなかの条件式が真であるあいだは、{ }のなかに書いた繰り返し処理を実行し続けますが、このとき、条件式が真で制限がなければ、半永久的に処理を繰り返してしまいますので、注意してください。



数字を1づつ足していく

<script>
  var i = 1;
  while(i<=100) {
  document.write(i + '個');
   i = i + 1;
  }
</script>

インクリメント

演算の中でも数値を1つだけ増加することや1つだけ減少させる処理は比較的多く使用されます。そのような時のために用意された演算子がインクリメント演算子(++)とデクリメント演算子(--)です。次のようなものが用意されています。

f:id:yachin29:20160829005852j:plain

なお「変数++」と記述する代わりに「++変数」と記述する使い方もできます。この二つは似ていますが使い方は異なります。



インクリメント演算子とデクリメント演算子にはそれぞれ前置と後置の二種類が用意されています。
インクリメント演算子の前置きと後置きは次のようになります。

前置:  ++変数
後置:  変数++


前置であっても後置であってもインクリメント演算子は対象の変数の値を1だけ増加させ、デクリメント演算子の場合は対象の変数の値を1だけ減少させることに違いはありませんが、使い方によって得られる値が変わる事があります。




このような使い方の場合、インクリメントが前置であっても後置であっても同じ結果となります。

前置の場合

var a = 10;

++a;

document.write(a); 

後置の場合

var a = 10;

a++;

document.write(a); 



しかし、このような使い方の場合、インクリメントが前置であるか、後置であるかで異なる結果となります。

前置の場合

var a = 10;

b = ++a;

document.write(b);

後置の場合

var a = 10;

b = a++;

document.write(b); 

前置の場合、aの値がbに代入される前にインクリメントが適用される為、bの値は「b = a + 1 」になります。
後置の場合、aの値がbに代入された後にインクリメントが適用される為、bの値は「b = a 」になります。

広告を非表示にする