JQuery lightbox／JavaScript　for文

授業

JQuery lightbox


写真はPhotoshopで準備
欲しい写真サイズの新規画面を作成して作業

JavaScript　for文

指定した回数だけ処理を繰り返す 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>for文の練習（1）</title>
</head>
<body>
<script>
var i;
for(i=0; i<10; i++) {
	document.write('<p>JavaScript</p>');
}
</script>
</body>
</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>
  • 和暦（平成）と西暦を並べて表示
<!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++) {
	document.write('<tr><td>',i,'</td>');
	document.write('<td>',i+1988,'</td></tr>');
}
</script>
</table>
</body>
</html>
  • 2の倍数を合計してダイアログで表示
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>繰り返し処理</title>
</head>
<body>
<h3>偶数の合計</h3>
<p>以下のボタンをクリックすると、<br>
2、4、6、8…、100をすべて合計した結果を表示できます。</p>
<button onClick="total()">計算結果</button>
<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の倍数を強調表示

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>3の倍数を強調表示</title>
<style>
#mulOfThree {
	font-size: 250%;
	color: red;
}
</style>
</head>
<body>
<h3>3の倍数を強調表示</h3>
<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>
  • 1〜100までの合計をダイアログボックスに表示
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>繰り返し処理</title>
</head>
<body>
<h3>合計</h3>
<p>以下のボタンをクリックすると、<br>
1〜100を全て合計した結果を表示できます。
</p>
<p><button onClick="total()">計算結果</button></p>
<script>
function total() {
var ans=0;
for(var i=1; i<=100; i++){
  ans=ans+i;
}
  alert('1~100の合計は' + ans+ 'です');
}
</script>
</body>
</html>
  • 九九の対数表を表示（for文ネスト）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>九九の対数表</title>
<style>
table {
	border-collapse: collapse;
}
th,td {
	text-align: center;
	width: 50px;
}
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>