３月７日　授業内容①（while , for,インクリメントを使った内容）

d.hatena.ne.jp

f:id:paris1204:20160307224448p:plain

f:id:paris1204:20160307224719p:plain
f:id:paris1204:20160307224731p:plain

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>while文で繰り返し</title>
</head>

<body>
<script>
var a=1;
while(a<=100){
	a*=2;//与えられた変数の値ｘ２という意味。100まで繰り返す
	console.log(a);//console.logの位置をa*=2;の上に入力すると計算の順序が変わるため結果が変わるので注意。
	}

console.log('繰り返しが終了しました。');//whileの中はループなので最後に示すものは外に書くこと

</script>


<script>
var i=1;
while(i<=10){document.write(i);//カウンター変数は一般的にiを使う（index）
console.log(i);
i++;}//I++='i=i+1'をしていき１０になるまで繰り返すということ//++はインクリメントという

</script>
</body>
</html>

d.hatena.ne.jp

f:id:paris1204:20160307225211p:plain
f:id:paris1204:20160307224958p:plain

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>for文の利用</title>
</head>

<body>
<!--http://d.hatena.ne.jp/web-0818/20160429/p1-->

<script>
for(var i=1; i<=5; i++){
	console.log(i+'回目');
	}



</script>
</body>
</html>

f:id:paris1204:20160307225523p:plain

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>for文での繰り返し</title>
</head>

<body>
<!--http://d.hatena.ne.jp/web-0818/20160429/p1-->
<p>年齢を入力してください。</p>

<select>
<script>
for(var i=20; i<=80; i++){
	document.write('<option value="   ' + i +     '  ">' + i + '歳</option>');//P52      
	 <!--     '<option value="   '     --> <!--    + i +    -->    <!-- '  ">' + i + '歳</option>'-->
	}


</script>
</select>
</body>
</html>

f:id:paris1204:20160307225811p:plain

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>for文の練習</title>

<style>
table{width:300px;
border:1px solid #666;
border-collapse:collapse;}

th,td{border:1px solid #666;
padding:10px;}
th{background:#f7f7f7;
width:100px;}
td{text-align:center;}

span{font-size:14px;}

</style>
</head>

<body>
<!--http://d.hatena.ne.jp/web-0818/20160429/p1-->
<table>
<tr><th>和暦<span>（平成）</span></th><th>西暦</th></tr>

<script>

for(var i=1; i<=28; i++){
	document.write('<tr>');
	document.write('<td>   '+i+'   </td>')
	document.write('<td>  '+ (i +1988)  + ' </td>')


document.write('</tr>');
	
	
	}

</script>
</table>
</body>
</html>

f:id:paris1204:20160307230040p:plain
f:id:paris1204:20160307230049p:plain
f:id:paris1204:20160307230054p:plain

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>for文での繰り返し</title>

<style>


</style>
</head>

<body>
<!--http://d.hatena.ne.jp/web-0818/20160429/p1-->
<script>

function total(){
	var ans=0;//初期値
	for(var i=2; i<=100; i+=2){
		ans +=i;
		console.log(i);
		
	
		
		
		}//forの閉じ
	
	document.write('2から１００までの偶数の合計は' + ans + 'です。');//forの中はループしているのでforのタグの外、functionの中に書く
	
	}//functionの閉じ


</script>

<h3>偶数の合計</h3>
<p>以下のボタンをクリックすると、<br>
2、4、6、8、…、100を全て合計した結果を表示できます。</p>
<p><button onclick="total()">計算結果を求める</button></p>

</body>
</html>

f:id:paris1204:20160307231025p:plain
f:id:paris1204:20160307231041p:plain
f:id:paris1204:20160307231047p:plain

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>for文での繰り返し</title>

<style>


</style>
</head>

<body>
<!--http://d.hatena.ne.jp/web-0818/20160429/p1-->
<script>

function total(){
	var ans=0;//初期値
	for(var i=1; i<=100; i+=1){
		console.log(i +'回目');
		ans +=i;//ans=ans + iという意味
		console.log(ans);
		
	
		
		
		}//forの閉じ
	
	document.write('1から１００までの合計は' + ans + 'です。');//forの中はループしているのでforのタグの外、functionの中に書く
	
	}//functionの閉じ


</script>

<h3>合計</h3>
<p>以下のボタンをクリックすると、<br>
1～100を全て合計した結果を表示できます。
</p>
<p><button onclick="total()">計算結果</button></p>

</body>
</html>

f:id:paris1204:20160307231257p:plain
f:id:paris1204:20160307231304p:plain

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>for文での繰り返し</title>

<style>


</style>
</head>

<body>
<!--http://d.hatena.ne.jp/web-0818/20160429/p1-->
<script>
function total(){
var ans=0;
var numMax;	
		
		numMax=prompt('数字を入力してください','半角数字');
		for(var i=1; i<=numMax; i++){
		ans +=i;
		}
		document.write('1～' + numMax +'の合計は、' + ans + 'です。');
	

}//functionの閉じ
</script>
<h3>合計</h3>
<p>以下のボタンをクリックすると、<br>
入力した数字までの合計を求めて表示します。</p>
<p><button onclick="total()">数字を入力する</button></p>
</body>
</html>

f:id:paris1204:20160307233838p:plain

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>for文での繰り返し(九九表)</title>

<style>

table {width:500px;
border:1px solid black;
     border-collapse: collapse;
}
td,th {border:1px solid black;
     width: 50px;
     text-align: center;
}
th {
     background-color: #CCC;
}
</style>
</head>



<body>


<table>
<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>


<!--http://d.hatena.ne.jp/web-0818/20160429/p1-->
<script>
for(var i=1; i<=9; i++){
	document.write('<tr>');
	document.write('<th>' + i + '</th>');//縦の表示(先頭の一桁)

for(var j=1; j<=9; j++){
	document.write('<td>' + i*j + '</td>');//横の表示
	}
	
	document.write('</tr>');//行の終わりの締めタグ	
	
	}
</script>
</table>




</body>
</html>