WEB、始めました

半年間WEB制作の学校に通います。その記録。

31日目　サムネイル　while文 for文　

サムネイル
画像置換

html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>画像置換</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div class="imgbox">
<h1>癒される柴犬</h1>
<div class="thumbnail">
<img src="img/s01.jpg" alt="" onmouseover="swap.src='img/01.jpg'" onmouseout="swap.src='img/01.jpg'"><img src="img/s02.jpg" alt="" onmouseover="swap.src='img/02.jpg'" onmouseout="swap.src='img/01.jpg'"><img src="img/s03.jpg" alt="" onmouseover="swap.src='img/03.jpg'" onmouseout="swap.src='img/01.jpg'"><img src="img/s04.jpg" alt="" onmouseover="swap.src='img/04.jpg'" onmouseout="swap.src='img/01.jpg'"><img src="img/s05.jpg" alt="" onmouseover="swap.src='img/05.jpg'" onmouseout="swap.src='img/01.jpg'">
</div><!--/.thumbnail-->
<div class="mainImg">
<img src="img/01.jpg" alt="" name="swap">
</div><!--/.mainImg-->
</div><!--/.imgbox-->
</body>
</html>

css

@charset "utf-8";

/* reset */
html, body, h1, p {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}

a {
  text-decoration: none; /* 下線を消す */
}
img {
  border: 0;
}
img, input {
  vertical-align: bottom;
}


.imgbox {
  width: 650px;
  margin: 50px auto;
}


.thumbnail {
  width: 625px;
  text-align: center;
  margin-bottom: 20px;
}



.thumbnail img {
  margin-left: 25px;
}
.thumbnail img:fist-child {
  margin-left: none;
}

.mainImg {
  width: 600px;
  height: 400px;
  margin: 10px auto 0;
  padding: 10px;
  box-shadow: 0 0 15px #999;
}

h1 {
  text-align: center;
  margin-bottom: 15px;
}

while文
while文での繰り返し処理01

while文での繰り返し処理01


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

<body>
<script>
var i = 1;
while ( i <= 10 ) {
  document.write( i );
  console.log( i );
  i++;
//i=i+1と同じ意味
}
</script>
</body>
</html>


while文での繰り返し処理02


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

<body>
<script>
var a = 1;
while ( a <= 100 ) {
  a *= 2;
	//a=a*2と同じ
  console.log( a );
	//console.logが下にくる場合は１は省かれる。１に２が掛けられた上体で繰り返し。a *= 2;より上にきた場合は１を出した後に１＊２が始まる
}
console.log( '終了' );
</script>
</body>
</html>

for文
for文の繰り返し処理01
http://tototo.webcrow.jp/script/0307/for.html

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

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


for文での繰り返し処理02
年齢選択プルダウン

http://tototo.webcrow.jp/script/0307/for2.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>for文での繰り返し処理02</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>

for文での繰り返し処理03
和暦西暦　表組み

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>for文での繰り返し処理03</title>
<style>
table {
  border-collapse: collapse;
  border: 1px solid #666;
  width: 300px;
}
th,td {
  border: 1px solid #666;
  padding: 5px;
}
th {
  background: #F7F7F7;
}
td {
  text-align: center;
}

span {
  font-size: 14px;
}

</style>


</head>
<body>
<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>

for文での繰り返し処理04
偶数の合計

http://tototo.webcrow.jp/script/0307/for4.html


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>for文での繰り返し処理04</title>
<script>
function total() {
  var ans = 0;
  for(var i=2 ; i<=100 ; i+=2) {
  console.log( i + '回目');
  ans += i ;
  console.log( ans );
}

  alert('2、4、6、8、…、100の偶数の合計は、' + ans + 'です。');
}

</script>
</head>

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

</body>
</html>

for文での繰り返し処理05
1から100までの合計

http://tototo.webcrow.jp/script/0307/for5.html


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

<body>
<h3>1から100までの合計</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+=1) {
  console.log( i + '回目' );
  ans += i ;
  console.log( ans );
}

  alert('1～100全ての合計は、' + ans + 'です。');
}
</script>
</body>
</html>


for文での繰り返し処理06
入力した数字までの合計
http://tototo.webcrow.jp/script/0307/for6.html


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

function total() {
  var ans = 0;
  var maxNum;

maxNum = prompt('半角で数字を入力して下さい。','100');
maxNum = parseInt( maxNum );

  for(var i=1 ; i<=maxNum ; i++) {
  ans += i ;
  console.log( ans );
}

  alert('1～' + maxNum + 'の合計は、' + ans + 'です。');
}

</script>
</head>

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

</body>
</html>


for文での繰り返し処理07
九九表
http://tototo.webcrow.jp/script/0307/for7.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>for文での繰り返し処理07</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 (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>