Webデザイン受講生のまいにち。

フェリカテクニカルアカデミー  8月18日開講クラスで学んだ事や日々のちょっとした事を書きたいと思います。

今日はJavascript尽くし

今日は金曜日ですね^^

 

学生から社会人になってもいつも土日休みだったので、相変わらず

金曜の夜は大好きです。

でも、一番油断しやすいのも金曜の夜です。

なんていっても明日は休みだからダラダラしてやる事がなかなか進まないという^^;

 

 

 

余談はさておき、

 

今日の授業は、タイトル通り一日JavaScript尽くしでした。

 

でもなんだか今日は、昨日よりはちょっと分かり楽しかったです。

(多分、授業でみんなでやってるからだと思いますがww)

 

今日は画像置換をメインにやりました。

こんな感じです。

 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JavaScriptによる画像置換</title>
<style>
html, img, body, div{
  margin:0;
  padding:0;
}

.imgBox{
  width:600px;
  margin:50px auto;
}
.thumnail{
  width:610px;
  text-align: left;
}
.thumnail img{
  margin-right:11px;
}
.mainImg{
  width:600px;
  height:600px;
  margin-top:10px;
  padding-top:15px;
}
</style>
</head>

<body>
<div class="imgBox">
<div class="thumnail">
<img src="sozai2/s1.png" alt="" onmouseover=" mainImg.src='sozai/1.png' " onmouseout=" mainImg.src='sozai/1.png' "><img src="sozai2/s2.png" alt="" onmouseover=" mainImg.src='sozai/2.png' " onmouseout=" mainImg.src='sozai/2.png' "><img src="sozai2/s3.png" alt="" onmouseover=" mainImg.src='sozai/3.png' " onmouseout="mainImg.src='sozai/3.png' "><img src="sozai2/s4.png" alt="" onmouseover=" mainImg.src='sozai/4.png' " onmouseout="mainImg.src='sozai/4.png' "><img src="sozai2/s5.png" alt="" onmouseover=" mainImg.src='sozai/5.png' " onmouseout="mainImg.src='sozai/5.png' ">
</div>
<div class="mainImg"><img src="sozai/1.png" alt="" name="mainImg"></div>
</div>
 </body>
</html>


プレビューすると下記の様になります。

f:id:momo1226:20140926205333p:plain

上の小さな画像のサムネイルにマウスを置くと、下の大きな画像が切り替わるという仕組みです。

これは作っていて楽しかったです。

 

 

次に、九九表とサイコロの目をやりました。

サイコロの目の問題の条件は「数が奇数の時だけ画像が表示される仕組み」です。

これはカラクリが理解できないと難しい

 

f:id:momo1226:20140926210006p:plain

 

 

九九がこちら!

 

 

<!DOCTYPEhtml>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>九九表</title>
<style>
table{
  border-collapse:collapse;
}
  /*border-collapseの意味は 線を重ねる。*/


th, td{
  width:50px;
  height:10px;
  text-align:center;
}
th{
  background: #CCC;
}
</style>
</head>

<body>
<h1>九九表</h1>
<table border="1">
<tr>
<th></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>


f:id:momo1226:20140926210222p:plain

 

これ、表示はされるけど、どういう仕組みがピンとこなかったです。

放課後先生に聞いてやっと納得しました^^

 

ちょっと説明不足ですが、for文というのは指定した条件に達するまで繰り返し同じ作業をするもので、九九では1段目~9段目まで計算が条件です。

 

今回、グレーの表の横(x軸)は<table=border1>の1~9まで。

縦(y軸)の1~9までがscriptで繰り返しで出したものみたいです。

白枠の中の数はvar  j  です。

 

流れとしては、1の段が1x9までの計算が終わってから<tr>(改行)で2の段を出しているみたいです。これを9の段まで繰り返す。

仕組みがわかると楽しいです

 

でも、この説明じゃわからないですよね~?>_<...

 

なので、完璧自己満ですね、今日のブログは(笑)

 

 

そして、今日は放課後先生と少しお話をしました。

今後の方向性についてですが、

デザインでもプログラマーでも両方ありだけども・・・・・って言われました。

私も正直そこを最近すごい悩んでいました^^;;

どっちらが得意とかなく、同じ位出来なくてどっちが向いているのか適正が分からないというのが最近の悩みでした。

今、勉強をしていてやみくもにやっているので広く浅くでどっちつかずみたいな状況で、家での勉強も重点の置き場が分からずやみくもになってて、今後自分がどうなりたいのか宙ぶらりんみたいな感じです。

そろそろちゃんと考えないとな~って改めて思いました(汗)

 

そして、悩んで悩んで頭が煮詰まりますww

もう少し考えて考えて、結果がでるといいな~というのが今の気持ちです。

 まぁ、悩むだけ悩んで結果でないパターンもありますよねwww

 

今日は、ブログが長くなってしまいました

ここまで、ながながとお付き合い頂きありがとうございました!