【JS】よくわかるJavascriptの教科書

とりあえず超特急でサイトを作ってみましたが、ここからどうしよう的な状態になってしまったためJSの入門書をさらってみることにしました。

よくわかるJavaScriptの教科書 (教科書シリーズ)

よくわかるJavaScriptの教科書 (教科書シリーズ)

オールカラーで例も取っ付き易いです。実際はJavaScriptの基本、JQueryの基本、実践という感じの内容です。
JavaScriptjQueryを両方半分ずつぐらいやりました。今のところの感想としては
・JSでいい感じの演出をするにはすごい手間
・比べてjQueryは比較的カンタン
・JSをやったからといってjQueryがわかるわけではない
・thisが大事
です。

最後のthisは、どの言語でもそうですが(Javaならthis、Rubyならself)。
大事ですがやはり簡単に理解できるかというとそんなことはないみたいですね。
window.alertはwindowを省略してもOKですが、これはトップレベルのthisがwindowなので、windowを省略するというよりthisを省略するといったほうが近い気がしますね!
画像ポップアップの所はまだ理解できてないのでまたあとで読みます。

以下勉強したソース

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>【タイトル】</title>
<link rel="stylesheet" href="../_shared/css/reset.css">
<link rel="stylesheet" href="../_shared/css/base.css">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
p {
  margin-bottom: 1em;
}

#toolBox {
  width: 200px;
}
#toolBox p {
  margin: 0;
}
#toolContent {
  border: 1px solid #17100e;
  padding: 5px;
  background: white;
  font-size: 80%;
  line-height: 1.5;
}

#toolTitle {
  background: #17100e;
  padding: 5px;
  border: 1px solid white;
}
#toolTitle a {
  color: #fff;
  text-decoration: none;
}

#largeImg {
  display: none;
  border: 1px solid #fff;
}

#cover {
  background: rgba(0, 0, 0, 0.5);
  display: none;
  position: absolute;
  left: 0;
  top: 0;
}
</style>
<script src="index.js"></script>
</head>
<body>
<header>
<div class="inner">
<h1>【タイトル】</h1>
</div>
<!-- header --></header>

<div id="contents">
<div class="inner">
<nav>
<ul>
<li><a href="company/"><img src="img/btn_company_off.gif" alt="会社情報"></a></li>
<li><a href="company/"><img src="img/btn_product_off.gif" alt="製品情報"></a></li>
<li><a href="company/"><img src="img/btn_contact_off.gif" alt="問い合わせ"></a></li>
</ul>
</nav>
<ul class="gallery">
<li><a href="img/img1.jpg"><img src="img/img1_thumb.jpg"></a></li>
<li><a href="img/img2.jpg"><img src="img/img2_thumb.jpg"></a></li>
<li><a href="img/img3.jpg"><img src="img/img3_thumb.jpg"></a></li>
</ul>
<div id="cover"></div>
<div id="largeImg"><img width="400" src="img/img1.jpg"></div>
<!-- inner -->
<script>
// 2-6複数の画像に対応したポップアップ
// 画像をプリロード
$('.gallery a').each(function() {
  $('<img>').attr('src', $(this).attr('href'));
})
// 2-5拡大画像をポップアップ表示
$('.gallery a').bind('click', function(e) {
  e.preventDefault();
  $('#cover').css({
    'width': $(window).width(),
    'height': $(document).height()
  })
  .fadeIn();
  var top = $(window).scrollTop() + 30;
  var outsideDocument = top + $('#largeImg').height() - $(document).height();
  if (outsideDocument > 0){
    top -= outsideDocument;
  }
  $('#largeImg')
  .css({
    'position': 'absolute',
    'left': Math.floor(($(window).width() - 400) / 2) + 'px',
    'top': top +'px'
  }).find('img').attr('src', $(this).attr('href')).end()
  .fadeIn('slow');
});
$('#cover, #largeImg').bind('click', function() {
  $('#largeImg').fadeOut('slow', function() {
    $('#cover').hide();
  });
});
// 2-4ボタンをロールオーバー
// 予めマウスオーバ時の画像をロードする
$('ul img').each(function() {
  $('<img>').attr('src', $(this).attr('src').replace('_off', '_on'));
})
$('nav img').hover(function() {
  // 以下のthisはnav内の各imgタグを指している
  $(this).attr('src', $(this).attr('src').replace('_off', '_on'));
}, function() {
  $(this).attr('src', $(this).attr('src').replace('_on', '_off'));
});</script>
</div>
<!-- contents -->
</div>

<footer>
<small><img src="../_shared/img/footer_copy.png" width="147" height="14" alt="(C)H20 Space."></small>
<!-- footer --></footer>
</body>
</html>