2016年1月6日

森島

【怖くないJavaScript + jQuery】デバッグのススメその2　～デバッグクイズ：初級編～

マークアップ

facebook
twitter

明けましておめでとうございます。本年もどうぞよろしくお願い致します。
皆様仕事始めも無事迎えられたようで、如何お過ごしでしょうか。週も半ば、エンジンはかかりましたでしょうか。渋谷は生憎のお天気ですが、今日も張り切って参りましょう。

さて、今日は前回に引き続き、javascriptのデバッグについて書いていきたいと思います。
デバッグのやり方は分かったはいいものの、実際にやってみないとどんな風に使うものかピンとこないと思います。今回はクイズ形式で見て慣れていってもらいましょう。各出題にデモページを作っていますので、HTMLをコピーしてローカルで試してみてもOKです。答えはページ後半で。

1 問題定義
2 出題
3 答え

問題定義

全ての問題は、jQuery（ver1.7.1）が正しく読み込まれており、下記の「ここから」「ここまで」のコメントの中の記述とします。HTMLが変わる場合は各出題に記述します。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>デバッグのススメその2</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript">
//ここから
$(function(){


});
//ここまで
</script>
<link rel="stylesheet" type="text/css" href="https://blog.8bit.co.jp/wp-content/uploads/2016/01/06/reset.css" media="screen, all" />
</head>
<body>

ソースを確認してください。

</body>
</html>

<!DOCTYPE html>

<head>

<title>デバッグのススメその2</title>

//ここから

$(function(){

});

//ここまで

</script>

</head>

<body>

ソースを確認してください。

</body>

</html>

出題

【問1】alert を表示させて下さい。
そもそもalertが動きません。alertを表示させてください。

$(function(){

	alrt('表示されました！')

});

$(function(){

alrt('表示されました！')

});

問1のデモ

【問2】メッセージ「ddタグの数はn個です」数がおかしい
ddタグの数を「.length」でカウントし、pタグに表示させています。数が違うので直してください。

$(function(){
	
	var i = $('dt').length;
	$('#count').html('ddタグの数は' + i + '個です')
	
});

$(function(){

var i = $('dt').length;

$('#count').html('ddタグの数は' + i + '個です')

});

<dl>
  <dt>dt1</dt>
  <dt>dt2</dt>
  <dt>dt3</dt>
  <dt>dt4</dt>
  <dd>dd1</dd>
  <dd>dd2</dd>
  <dd>dd3</dd>
  <dd>dd4</dd>
  <dd>dd5</dd>
  <dd>dd6</dd>
</dl>

<p id="count" style="color:#FF0000;"></p>

<dl>

</dl>

問2のデモ

【問3】メッセージ「n番目のリストをクリックしました」の数値がおかしい
liをクリックした時に、何番目のリストをクリックしたかメッセージを表示させたいが、番号1つ少ない。

$(function(){

	$('#clickKey li').click(function(){
		var i = $(this).index();
		$('#count').text(i + '番目のリストをクリックしました');
    });

});

$(function(){

$('#clickKey li').click(function(){

var i = $(this).index();

$('#count').text(i + '番目のリストをクリックしました');

});

<ul id="clickKey">
  <li>1番目のリスト</li>
  <li>2番目のリスト</li>
  <li>3番目のリスト</li>
  <li>4番目のリスト</li>
  <li>5番目のリスト</li>
  <li>6番目のリスト</li>
</ul>

<p id="count"></p>

<li>1番目のリスト</li>

<li>2番目のリスト</li>

<li>3番目のリスト</li>

<li>4番目のリスト</li>

<li>5番目のリスト</li>

<li>6番目のリスト</li>

</ul>

問3のデモ

【問4】左の矢印を押しても右に動いてしまう
矢印をクリックすると、左右に20pxずつアニメーションするようにしてください。（ヒントでif文の中にconsole.logを記述しています。）

$(function(){

	$('#clickKey span').click(function(){
		var movePosition = $('#move').offset().left;
		
		if($(this).hasClass('left')){
			movePosition = movePosition+20;
			console.log('leftを押した時の値：'+ movePosition);
		}else if($(this).hasClass('right')){
			movePosition = movePosition+20;
			console.log('rightを押した時の値：'+ movePosition);
		};

		$('#move').animate({left:movePosition},300);
    });

});

$(function(){

$('#clickKey span').click(function(){

var movePosition = $('#move').offset().left;

if($(this).hasClass('left')){

movePosition = movePosition+20;

console.log('leftを押した時の値：'+ movePosition);

}else if($(this).hasClass('right')){

movePosition = movePosition+20;

console.log('rightを押した時の値：'+ movePosition);

};

$('#move').animate({left:movePosition},300);

});

<div id="clickKey">
	<span class="left">←</span>
    <span class="right">→</span>
</div>
<p id="move"></p>

</div>

問4のデモ

答え

【問1】alert を表示させて下さい。
alertの綴りをミスしています。

$(function(){

	alert('表示されました！')

});

$(function(){

alert('表示されました！')

});

【問2】メッセージ「ddタグの数はn個です」数がおかしい
lengthでdtタグの数を取得しているので、3行目をddに書き換えます。

$(function(){
	
	var i = $('dd').length;
	$('#count').html('ddタグの数は' + i + '個です')
	
});

$(function(){

var i = $('dd').length;

$('#count').html('ddタグの数は' + i + '個です')

});

【問3】メッセージ「n番目のリストをクリックしました」の数値がおかしい
「.index()」でタグの順序を調べた時に返ってくる値は、「0番目」からカウントされます。ですので、文字で表示する場合はどこかで数値を+1してやる必要があります。

$(function(){

	$('#clickKey li').click(function(){
		var i = $(this).index()+1;
		$('#count').text(i + '番目のリストをクリックしました');
    });

});

$(function(){

$('#clickKey li').click(function(){

var i = $(this).index()+1;

$('#count').text(i + '番目のリストをクリックしました');

});

【問4】左の矢印を押しても右に動いてしまう
if文の中で、左右を押した時の処理を分けて書いています。右に押した時は+20であっていますが、左を押した時も+20されているので、加算から減算に修正。

$(function(){

	$('#clickKey span').click(function(){
		var movePosition = $('#move').offset().left;
		
		if($(this).hasClass('left')){
			movePosition = movePosition+20;
			console.log('leftを押した時の値：'+ movePosition);
		}else if($(this).hasClass('right')){
			movePosition = movePosition-20;
			console.log('rightを押した時の値：'+ movePosition);
		};

		$('#move').animate({left:movePosition},300);
    });

});