33日目 | lightbox | さらにjavascript練習

授業

lightbox 写真をサムネイルから原寸表示する効果を作る

こんな感じ
http://latte.moto-chika.com/0107/lightbox/index2.htm

javascript 関数、変数、for文で繰り返し処理

まずは同じ文字の繰り返し

http://latte.moto-chika.com/0108/index.html

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

<body>
<script>
var i;
for(i=0; i<10; i++){
  document.write('<p>JavaScript</p>');
}
</script>
</body>
</html>
数値の連続、さらに小技を使ってドロップダウンにする

「select」を使うことでドロップダウンの器を作れる
http://latte.moto-chika.com/0108/index2.html

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

<body>
<p>年齢を選択してください。</p>
<select>
<script>
for(var i=20; i<=70; i++){
          document.write('<option value="'+i+'">'+i+'歳</option>');
}
</script>
</select>
</body>
</html>

和暦（平成）と西暦を連続表示

http://latte.moto-chika.com/0108/index3.html

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

<body>
<table>
<tr>
<th>和暦（平成）</th><th>西暦</th>
</tr>

<script>
var i;
for(i=1;i<=25;i=i+1){
	document.write('<tr><td>',i,'</td>');
	document.write('<td>',i+1988,'</td></tr>');
	
	}
</script>
</table>
</body>
</html>

ボタンをクリックしたら偶数の合計を警告メッセージに表示

http://latte.moto-chika.com/0108/index4.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>繰り返し処理</title>
</head>
<body>
<h3>偶数の合計</h3>
<p>
以下のボタンをクリックすると、<br>
2、4、6、8、…、100をすべて合計した結果を表示できます。<br>
<button onClick="total()">計算結果</button>
</p>
<script>
function total(){
	var ans=0;
	for(i=2; i<=100; i=i+2){
		ans=ans+i;
	}
	alert('2、4、 6、 8、…、100の合計は ' +ans+'です');
}
</script>
</body>
</html>

3の倍数で強調表示

http://latte.moto-chika.com/0108/index5.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>3の倍数を強調</title>
<style>
<!--
#mulOfThree{
	  font-size:250%;
		color:red;
}
-->
</style>
</head>
<body>
<h1>3の倍数を強調表示</h1>
<p>
<script>
var Max=15;
for(var i=1; i<=Max; i++){
	if((i%3)==0){
		  document.write('<span id="mulOfThree">',i,'</span>','&nbsp;');
	}else{
		  document.write(i+'&nbsp;');
	}
}
</script>
</p>
</body>
</html>

4の倍数で強調表示

http://latte.moto-chika.com/0108/index6.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>4の倍数を強調</title>
<style>
<!--
#mulOfThree{
	  font-size:250%;
		color:red;
}
-->
</style>
</head>
<body>
<h1>4の倍数を強調表示</h1>
<p>
<script>
var Max=15;
for(var i=1; i<=Max; i++){
	if((i%4)==0){
		  document.write('<span id="mulOfThree">',i,'</span>','&nbsp;');
	}else{
		  document.write(i+'&nbsp;');
	}
}
</script>
</p>
</body>
</html>

ボタンをクリックすると1から100の数値の合計を警告メッセージに表示する

http://latte.moto-chika.com/0108/index7.html

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

</head>
<body>
<h3>合計</h3>
以下のボタンをクリックすると<br>
１〜100まで合計した結果を表示できます。
<button onClick="total()">計算結果</button>
<script>
function total(){
	var ans=0;
	for(i=1; i<=100; i++){
		ans=ans+i;
	}
	alert('1から100の合計は'+ans+'です');
	}
</script>
</body>
</html>

ボタンをクリックして警告メッセージウインドウに数字を入力するとその数字までの合計を求めて表示する

http://latte.moto-chika.com/0108/index7a.html

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

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

	for(i=1; i<=maxNum; i++){
		ans=ans+i;
	}
	alert('1から'+maxNum+'の合計は'+ans+'です');
	}
</script>
</body>
</html>

九九の表

まず左端のth列を連続表示させ、その列に対応するtdを連続表示＆乗算で埋める
http://latte.moto-chika.com/0108/index8.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>九九表</title>
<style>
table{
	border-collapse:collapse;
}
td,th{
	width:50px;
	text-align:center;
}
th{
	background-color:#ccc;
}
</style>
</head>
<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><th>'+i+'</th>');
	for(j=1; j<=9; j++){
		document.write('<td>'+i*j+'</td>');
	}
	document.write('</tr>');
}
</script>
</table>

</body>
</html>

現在の私は・・小学校5年生対象のものを作っているレベル
はやく大人になりたいなあ！