My Web道

WEB制作科 受講記録 …とその後も続くWEB制作に関する活動・学習記録です。

4/2 [Java Script] while文

f:id:sntkk3:20140228225012g:plain

Java Script- while文

参考: http://d.hatena.ne.jp/web-0127/20140420/p1

while文

  • for文同様、繰り返し処理を実行する構文
  • for文との違いは、カウンタ変数の書き方

for文 : ループカウンタをfor構文内(for直後の継続条件を示す( )内)に含む
while文 : 継続条件を示す( )内以外の場所に別途記述する)

変数の初期値;
while ( 繰り返し条件; ) {
  実行される処理
変数の変更 ;
}

【演習】和暦(平成)と西暦を並べて表示

htmlファイルのタグ内に以下を記述

<table>
<tr><th>和暦(平成)</th><th>西暦</th></tr>
<script>
var MAX = 25;
var i =1;
while(i <= MAX) {
  document.write('<tr>');
  document.write('<td>', i, '</td>');
  document.write('<td>', i + 1988,  '</td>');
  document.write('</tr>');
  i++;
}
</script>
</table>


【演習】入力した数字までの合計をダイアログで表示

htmlファイルのタグ内に以下を記述

<h3>合計</h3>
<p>以下のボタンをクリックすると、<br>
入力した数字までの合計を求めて表示します。</p>
<p><button onClick="total()">数字を入力する</button></p>
<script>
function total() {
	var ans = 0;
	var i = 1;
	var maxNum;
	
	maxNum = prompt('数字を入力してください','半角数字')
	while(i <= maxNum){
	ans = ans + i;
	i++;	
	}
	alert('1~' + maxNum + 'の合計は' + ans + 'です');
};
</script>

 参考: http://d.hatena.ne.jp/web-0127/20140421/p1

Java Script- break文

break文

注意点:
条件 while(true)にすると、条件が正しいものとして延々と処理を繰り返すので注意が必要。
なので、ブロック内に条件式(if文)を設け、必ず breakを入れる。

while(true) {
if(  ) {
break;
}
}

【演習】ループの中断

htmlファイルのタグ内に以下を記述

<script>
var ans = 5;
var num;
var msg ='1~10までの数字を入力してください'

while (true) {
  num = prompt(msg, '半角数字を入力');
  if (ans == num) {
	document.write('<h1>正解です</h1>');
	break;  
  }
  if (num < ans ) {
	msg = 'もっと大きい数を入力してください';  
  } else if (num > ans) {
	msg = 'もっと小さい数を入力してください';  
  } else {
	msg = '数を入力してください';  
  }
}
</script>

continue文

条件付け(if文)の中にあるものを無視して次の繰り返しを開始
(カウンタ変数の値を加算し次の繰り返し処理に移行)


【演習】2または3で割り切れない数値

htmlファイルのタグ内に以下を記述

<h3>2または3で割り切れない数値</h3>
<p>1~100までの場合</p>
<script>
for (i=1; i <=100; i++) {
if(i % 2 ==0 || i % 3 == 0 ) {
  continue;	
}
document.write(i,'  ')
}
</script>


【演習】for文とcontinue文

htmlファイルのタグ内に以下を記述

<script>
var tickets = ['指定席', '自由席', '指定席', '自由席', '指定席'];
for (var i = 0; i < tickets.length; i++) {
  if (tickets[i] == '自由席') {
	continue;  
  }
  console.log(i + ':' + tickets[i]);
}
console.log('終了')
</script>

関数

関数

まとまった命令
関数、配列が理解できるとプログラムができるようになる。


【演習】税込価格を求める(ボタンごと)

ボタンごとに価格を引数に設定
htmlファイルのタグ内に以下を記述

<h1>税込価格を求める</h1>
<p>商品A(1000円)<button onClick="zei(1000)">税込価格</button></p>
<p>商品B(2000円)<button onClick="zei(2000)">税込価格</button></p>
<p>商品C(3000円)<button onClick="zei(3000)">税込価格</button></p>
<!--<p>商品A(1000円)<button onClick="zeiA()">税込価格</button></p>
<p>商品B(2000円)<button onClick="zeiB()">税込価格</button></p>
<p>商品C(3000円)<button onClick="zeiC()">税込価格</button></p>-->
<script>
var zeikomi;
var kakaku;
var tax = 1.08;

function zei(kakaku){
  zeikomi = kakaku * tax;
  alert('税込価格は' + zeikomi + '円です');	
}

/*function zeiA(){
  zeikomi = 1000 * tax;
  alert('税込価格は' + zeikomi + '円です');	
}
function zeiB(){
  zeikomi = 2000 * tax;
  alert('税込価格は' + zeikomi + '円です');	
}
function zeiC(){
  zeikomi = 3000 * tax;
  alert('税込価格は' + zeikomi + '円です');	
}*/
</script>

【演習】税込価格を求める(汎用化)

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>ユーザー定義関数の作成</title>
<script>
var tax = 1.08;

function zei(x){
//function zei(x){
	var x = price * tax;
	return x;
}
</script>
</head>

<body>
<h1>税込価格を求める</h1>
<!--<p>商品A(1000円)<button onClick="zei(1000)">税込価格</button></p>
<p>商品B(2000円)<button onClick="zei(2000)">税込価格</button></p>
<p>商品C(3000円)<button onClick="zei(3000)">税込価格</button></p>-->
<script>
var price;
price = prompt('求める金額を半角数字で入力してください', '半角数字');
a = zei(price);
alert('税込価格は' +a + '円です');

/*function zeiA(){
  zeikomi = 1000 * tax;
  alert('税込価格は' + zeikomi + '円です');	
}
function zeiB(){
  zeikomi = 2000 * tax;
  alert('税込価格は' + zeikomi + '円です');	
}
function zeiC(){
  zeikomi = 3000 * tax;
  alert('税込価格は' + zeikomi + '円です');	
}*/
</script>

</body>
</html>