読者です 読者をやめる 読者になる 読者になる

求職者支援訓練webサイト制作科1月クラス

フェリカテクニカルアカデミー池袋の求職者支援訓練webサイト制作科1月クラスの授業解説ブログです。

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 」になります。

広告を非表示にする

switch文の使い方

「switch文」とはif文と少し似ていて、同じように分岐処理を行う物ですが、if文の場合、AルートもしくはBルート、というように二者択一を続ける分岐に対し、今回の「switch文」は同時に多数の分岐処理を行うことが出来ます。

switch (式or変数) {
case 値1 :
//式の結果が値1に等しい場合に実行する
break;
case 値2 :
//式の結果が値2に等しい場合に実行する
break;
default :
//式の結果がどれにも該当しない場合に実行する処理
break;
}


この「switch文」で大事なのは「break」の処理です。
繰り返し処理は条件式が満たされている間は繰り返しを実行しますがbreak文を使用すると強制的に繰り返し処理を終了させることができます。
実は「swith文」において「break文」が存在しない場合は「case」で記述されたものよりその先の処理をずっと実行していってしまいます。
なので、基本的には「swith文」と「break文」はセットで使う、と覚えて良いでしょう。

試しにまずは、「break文」が入った「swith文」を入力してみましょう。

<script>
var num = 1;
 
switch(num){
    case 1:
        alert('1です');
        break;
    case 2:
        alert('2です');
        break;
    case 3:
        alert('3です');
        break;
    default:
        alert('その他です');
        break;
}
</script>


つぎは試しに「break」の処理を抜いてみましょう。

広告を非表示にする

if文を使った条件分岐

if文を使うことで、プログラムの結果を分岐する事が出来ます。

例えば
値が〇〇以上であれば、Aルート

値が〇〇以下であれば、Bルート

というように、ある条件をもとにルートが分岐する事を条件分岐といいます。


if文の書き方

if (条件) {
条件が真であれば実行
}

( )内に条件を書き、条件が一致すれば{ }内の処理が実行されます。

ちなみに、条件が一致することを「真(true)」、一致しないことを「偽(false)」と言います。

if else文

if文に条件が一致しなかった場合(false)は、次のようにコードを書き加え、条件を分岐させます。

if (条件) {
条件が真であれば実行
} else {
条件が偽であれば実行
}

条件式の書き方

条件式は、比較演算子を使って記述します
f:id:yachin29:20160824123525j:plain




実際に書いてみましょう

<script>
var score = 90;
if (score >= 80) {
document.write(“合格です!おめでとうございます!”) ;
}
</script>


さらに80点未満だった場合にBルートにいく条件分岐を加えてみましょう

<script>
var score = 60;
if (score >= 80) {
document.write(“合格です!おめでとうございます!”);
} else {
document.write(“不合格です!がんばりましょう!”);
}
</script>


さらにさらに、前回使ったpromptを使って、ユーザーが入力した値をもとに条件分岐を行ってみましょう。


promptを使って、ユーザーが入力した値を受け取る方法
<script>
var name = window.prompt('名前を入力してください');
document.write(name);
</script>