4/2 [Java Script] while文
Java Script- while文
参考： http://d.hatena.ne.jp/web-0127/20140420/p1
while文
- for文同様、繰り返し処理を実行する構文
- for文との違いは、カウンタ変数の書き方
for文 ： ループカウンタをfor構文内(for直後の継続条件を示す( )内)に含む
while文 ： 継続条件を示す( )内以外の場所に別途記述する）
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>
Java Script- break文
break文
注意点：
条件 while(true)にすると、条件が正しいものとして延々と処理を繰り返すので注意が必要。
なので、ブロック内に条件式(if文)を設け、必ず 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文）の中にあるものを無視して次の繰り返しを開始
（カウンタ変数の値を加算し次の繰り返し処理に移行）
（カウンタ変数の値を加算し次の繰り返し処理に移行）
【演習】２または３で割り切れない数値
htmlファイルのタグ内に以下を記述
<h3>２または３で割り切れない数値</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ファイルのタグ内に以下を記述
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>
