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

ハロトレWebデザインの勉強03月14日開講クラス授業補足ブログ

条件で繰り返しを中断する - break文

JavaScript

break文

  • for文やwhile文で、指定した回数だけ処理を繰り返す途中で「中断」する
  • switch文でのbreak文は、ブロックの外へ抜けるための構文でした
  • break文をwhile文やfor文のブロック内に記述することで、継続条件式がtrueであっても強制的にブロックの外へ抜けることができます


《for文とbreak文》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>for文とbreak文</title>
<script>
  var tickets = [ 290, 296, 299, 301, 305 ];
  for (var i = 0; i < tickets.length; i++) {
    if (tickets[i] >= 300) {
      break;
    }
    console.log(tickets[i]);
  }
  console.log('終了');
</script>
</head>
<body>
</body>
</html>


《実行結果》

  1. 配列の要素数が「5」であるため、for文は「0~5未満」の間、計5回繰り返す条件になっています
  2. 配列要素の値が300位上になった時点(4回目)でbreak文によって繰り返しを抜けています


《例》

<script>
for (var a = 1; a <= 5; a++) {
  if ((a + 2) == 5) {
    break;
  }
  document.write(a + '+2=' + (a + 2) + '<br>');
}
document.write('ループ終了');
</script>


《実行結果》


処理の中断

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>繰り返し処理と中断</title>
<script>
var i = 1;
function ans(){
  switch ( i ) {
    case 1:
      alert('【ヒント】北海道は県ではありません');
      break;
    case 2:
      alert('【ヒント】東北地方にある県です');
      break;
    default:
      alert('答えは岩手県です');
  }
i++;
}
</script>
</head>
<body>
<h3>(問題)</h3>
<p>日本で最も面積が大きい“県”は何県でしょう?</p>
<p><button onclick="ans()">答えを見る</button></p>
<p>
※ボタンのクリックが2回までの間はヒントが表示されます。<br>
※ボタンを3回以上クリックすると、答えが表示されます。
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>繰り返し処理</title>
</head>
<body>
<h3>合計</h3>
<p>以下のボタンをクリックすると、<br>
入力した数字までの合計は「100」を超えた段階を表示します。</p>
<p><button onclick="total()">数字を入力する</button></p>
<script>
function total(){
  var ans = 0;
  var maxNum;
  var bkNum = 100;
	
maxNum = prompt('数字を入力してください。', '半角数字');
  for (i=1 ; i<=maxNum ; i++){
    ans = ans + i;
    if(ans >= bkNum) {
      break;
    }
  }
  alert('1~' + i + 'の合計は' + ans+ 'です');
}
</script>
</body>
</html>
無限ループとbreak文
  • while文の条件式に「true」とだけ記述すると、常に条件式が成立することになります
  • したがって処理を延々繰り返す、「無限ループ」となります
  • 「無限ループ」のままではプログラムが終了しないため、ブロック内に適切な「if文」と「break文」を置く必要があります

条件式はどんなとき成立するか

  • JavaScriptでは、「0」、「undefined」、「false」、「空文字列(長さが0の文字列)」の値以外であれば、条件が成り立つと判断されます
  • while (1)でも、無限ループになります

ループの中断

<!DOCTYPE html>
<html lang='ja'>
<head>
<meta charset='UTF-8'>
<title>ループの中断</title>
</head>
<body>
<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>
</body>
</html>

continue文

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>continue文</title>
</head>
<body>
<script>
var a, b;
b = 1;

for (a = 0; a < 4; a++) {
  if (a + b == 2)
  continue;
		
document.write(a + '+' + b + '=' + (a + b) + '<br>');
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>continueの利用</title>
</head>
<body>
<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>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>for文とcontinue文</title>
<script>
  var tickets = [ '指定席', '自由席', '指定席', '自由席', '指定席' ];
  for (var i = 0; i < tickets.length; i++) {
    if (tickets[i] == '自由席') {
      continue;
    }
    console.log(i + ' : ' + tickets[i]);
  }
  console.log('終了');
</script>
</head>
<body>
</body>
</html>

まとめ

  • while文の条件式に「true」を設定すると、無限ループになる
  • 無限ループから脱出するには、if文とbreak文を使う