2014

1

2

jQuery覚えたい人向け入門の問題集作ってやんよ!!!（オブジェクト編）

このエントリーをはてなブックマークに追加
Pocket
LINEで送る
Facebook にシェア
reddit にシェア
LinkedIn にシェア

過去２回、これからjQueryを覚えたいという方に向けて問題集を作成しました。

LV１・・・特殊なロジックや記述は不要。基本的にはメソッド単品のみで処理可能レベル

jQuery覚えたい人向け入門の問題集作ってやんよ!!!（メソッド編）

LV２・・・完成イメージから処理に適したメソッドを選定でき、functionイベントを設計できるレベル

jQuery覚えたい人向け入門の問題集作ってやんよ!!!（ベタ書きfunction編）

今回、最後の仕上げとしてひとつのfunction内ですべての処理を行うベタ書きから、
単純なfunctionを量産し、実行用のfunctionで全体の処理を行うオブジェクト指向の感覚をつかむところまでを目標にしたレベル３を作成しました。

jQuery問題集レベル３（オブジェクト関連）

レベル３・・・・・構文や変数を組み合わせて簡易的なインスタンスを構築できる

問41.id名「q41」要素の中に１～100までの数値を文字列「、」を追加して出力せよ

<!--    HTML    -->
<div id="q41"></div>
回答はコチラ
$(function(){
	for(i=1; i<101; i++){
		$("div#q41").append(i + "、")
	}
});

問42.「ジョナサン・ジョースター」,「ジョセフ・ジョースター」,「空条承太郎」,「東方仗助」,「ジョルノ・ジョバァーナ」の値が入った配列「jyojyo」に代入された引数の数だけclass名「q41」のul要素にリスト要素として追加せよ

<!--    HTML    -->
<ul class="q42"></ul>
回答はコチラ
$(function(){
	var jyojyo = new Array("ジョナサン・ジョースター","ジョセフ・ジョースター","空条承太郎","東方仗助","ジョルノ・ジョバァーナ");
	var aaa = jyojyo.length;
	for(i=0; i<aaa; i++){
		$("ul.q42").append('<li>' + jyojyo[i] + '</li>')
	}
});

問43.id名「q43_val」に値を入力しid名「q43_button」をクリックしたらし、その値を変数「val」に代入し、変数「val」が70以上ならば『合格』、70以下なら『不合格』の結果をid名「q43_answer」に出力するする処理を返すユーザー定義関数「funcValReturn」を作成せよ

<!--    HTML    -->
<input id="q43_val" type="text" />
<input id="q43_button" type="button" value="結果は？" />
<p id="q43_answer"></p>
回答はコチラ
$(function() {
	$("#q43_button").click(function(){
		var val = $("#q43_val").val();
		funcValReturn(val)
	});
		
	function funcValReturn(val){
		if(val >= 70){
			var bbb = "合格";
		}else{
			var bbb = "不合格";
		}
		$("p#q43_answer").append(bbb);
		return false;
	}
});

問44.id名「q44_select」で選んだ数値分、id名「q44_box」要素の横幅を変更させるユーザー定義関数「funcCssChenge()」を作成し、その処理がid名「q44_color」要素をクリックしたら２秒後に発動させよ

<!--    HTML    -->
<select id="q44_select">
        <option value="100" >100</option>
        <option value="200" >200</option>
        <option value="300" >300</option>
        <option value="400" >400</option>
        <option value="500" >500</option>
</select> 
<input type="button" id="q44_color" value="ボックス幅変更">
<div id="q44_box"></div>

/*    CSS    */
#q44_box {
	width:200px;
	height:100px;
	background:#999;
}
回答はコチラ
$(function(){
	$("#q44_color").click(function(){
		setTimeout(function(){
			funcCssChenge()				
		}, 2000);
	});
		
	function funcCssChenge(){
		var aaa = $("#q44_select").val()
		$("#q44_box").css('width',aaa);
	}
});

問45.id名「q45_a」とid名「q45_b」の値を取得し変数に代入、その変数をユーザー定義関数「funcplus()」で加算した値をid名「q45_answer」に出力せよ

<!--    HTML    -->
<div id="q45_box">
    	<p id="q45_a">5</p>＋<p id="q45_b">8</p>＝<p id="q45_answer"></p>
</div>

/*    CSS    */
#q45_box {
	width:100%;
	display:block;
}
#q45_box p{
	display:inline-block;
}
回答はコチラ
$(function(){
	var aaa = Number($("#q45_a").text());
	var bbb = Number($("#q45_b").text());
	funcplus(aaa,bbb);
		
	function funcplus(aaa,bbb){
		var answer = aaa + bbb;
		$("#q45_answer").text(answer)
	}
});

問46.Q45の応用でオペランドＡとオペランドＢに入力した値をselectで選択した計算方法でid名「q46_button」をクリックしたら、加算・減算・乗算・除算それぞれの処理関数を作成し条件にあった計算の結果をid名「q46_answer」に出力せよ

<!--    HTML    -->
<div id="q46_box">
    <label>オペランドＡ</label>
        <input id="q46_val" type="text" size="3" width="50" />
    <label>オペランドＢ</label>    
    <input id="q46_subject" type="text" size="3" width="50" />
    <select id="q46_select">
        <option value="addition" >足し算</option>
        <option value="subtraction" >引き算</option>
        <option value="multiplication" >掛け算</option>
        <option value="division" >割り算</option>
    </select> 
    <input id="q46_button" type="button" value="計算" />
    <p id="q46_answer"></p>
</div>
回答はコチラ
$(function(){
	$("#q46_button").click(function(){
	var val = Number($("#q46_val").val());
	var subject = Number($("#q46_subject").val());
	var counting = $('#q46_select option:selected').val();
		
	switch(counting){
		case "addition":
			funcAddition(val,subject);
		break;
		case "subtraction":
			funcSubtraction(val,subject);
		break;
		case "multiplication":
			funcMultiplication(val,subject);
		break;
		case "division":
			funcDivision(val,subject);
		break;
	}
	});
	
	//足し算
	function funcAddition(val,subject){
		var answer = (val + subject);
		$("p#q46_answer").append(answer)
	}		
	//引き算
	function funcSubtraction(val,subject){
		var answer = (val - subject);
		$("p#q46_answer").append(answer)
	}		
	//掛け算
	function funcMultiplication(val,subject){
		var answer = (val * subject);
		$("p#q46_answer").append(answer)
	}		
	//割り算
	function funcDivision(val,subject){
		var answer = (val / subject);
		$("p#q46_answer").append(answer)
	}
});
※小数点を含む計算は別途で数値判定の処理を追記しなければならないので注意

問47.id名「q47」要素にある"ID"のついたdiv要素だけを配列に代入し、そのid名を取得しclass名「q47」のp要素に出力せよ

<!--    HTML    -->
<div id="q47">
    	<h4 style="font-size:24px;">#q47</h4>
    	<div id="q47-1">あああ</div>
    	<div>いいい</div>
    	<div id="q47-2">ううう</div>
        <ul>
        	<li>えええ</li>
        	<li><div id="q47-3">おおお</div></li>
        	<li>かかか</li>
        	<li><div id="q47-4">ききき</div></li>
        	<li>くくく</li>
        	<li>けけけ</li>
        </ul>
</div>
<p class="q47"></p>

/*    CSS    */
#q47 {
	width:800px;
	background:#000;
	color:#FFF;
	display:block;
	margin:0 auto;
}

#q47 > div {
	display:inline-block;
	background:#F00;
	width:32%;
	height:200px;
	margin:10px auto;
	
}
#q47 ul {
	display: inline-block;
}

#q47 ul li {
	background:#00F;
	width:240px;
	height:100px;
	display: inline-block;
	margin:10px auto;
	list-style:none;
	margin:10px;
}
回答はコチラ
$(function(){
	var mmm = $("#q47").find("div").map(function() {
		return $(this).attr("id");
	}).get();
	$(".q47").text(mmm);
});

問48.色名（例：red）を代入した変数名「colorName」を引数に入れたらid名「q48」の文字色をcolorName変数の色に変えるユーザー定義関数名「funcColorName」を作成しclass名「button」をクリックしたら「funcColorName」関数を発動せよ

<!--    HTML    -->
<p id="q48">赤になりたい</p>
<p class="button">ぼたん</p>
回答はコチラ
$(function(){
	function funcColorName(colorName){
		$("p#q48").css('color',colorName);
	};
		
	$("p.button").click(function(){
		funcColorName('red');
	});
});

問49.id名「q49」のul要素のリストの３番目がクリックされた２秒後に対象リストを『リンクは偽物(フェイク)★-_-；』に置き換えなさい

<!--    HTML    -->
<ul id="q49">
    <li><a href="http://tokidoki-web.com/category/html5css3/">HTML5/CSS3</a></li>
    <li><a href="http://tokidoki-web.com/category/javascript/">JavaScript</a></li>
    <li><a href="http://tokidoki-web.com/category/php/">PHP</a></li>
    <li><a href="http://tokidoki-web.com/category/mysql/">MySQL</a></li>
    <li><a href="http://tokidoki-web.com/category/jquery/">jQuery</a></li>
</ul>
回答はコチラ
$(function(){
	$("ul#q49 li").eq(2).click(function(){
		setTimeout(function(){
			$("ul#q49 li").eq(2).replaceWith('<li>『リンクは偽物(フェイク)★-_-；』</li>')
		},2000);
		return false;
	});
});

問50.id名「#q50_box00」要素内の子要素divのidを判別して、それぞれＡ，Ｂ，Ｃのボックスへ分岐判断させるユーザー定義関数「funcReturnDiv()」を作成し、class名「button」をクリックしたら「funcReturnDiv()」を発動させボックスＡＢＣの子要素をそれぞれ振り分けよ

<!--    HTML    -->
<p class="button">ぼたん</p> 
<div id="q50_box00">
    	<p>ボックスＡＢＣ</p>
    	<div id="q50_a">Ａ</div>
    	<div id="q50_b">Ｂ</div>
    	<div id="q50_c">Ｃ</div>
</div>
    
<div id="q50_box01">
    <p>Ａ</p>
</div>
    
<div id="q50_box02">
    <p>Ｂ</p>
</div>
    
<div id="q50_box03">
    <p>Ｃ</p>
</div>

/*    CSS    */
.button {
	padding: 5px 10px;
	border:#666 solid 1px;
	background:#FFF;
	display:inline-block;
	text-align:center;
	cursor:pointer;
}
#q50_box00 {
	width:240px;
	height:115px;
	display:block;
	background:#999;
	color:#FFF;
	font-size:30px;
	text-align:center;
	float:left;
	margin:10px;
	
}
#q50_box01,
#q50_box02,
#q50_box03 {
	width:80px;
	height:115px;
	display:block;
	background:#999;
	color:#FFF;
	font-size:30px;
	text-align:center;
	float:left;
	margin:10px;
}
#q50_box00 div,
#q50_box01 div,
#q50_box02 div,
#q50_box03 div {
	width:50px;
	height:50px;
	margin:10px;
	background:#333;
	display:inline-block;
	line-height:50px;
	
}
回答はコチラ
$(function(){
	$("p.button").click(function(){	   
		var aaa = $("#q50_box00").children("div").length;
		var i = 0;
		while (i < aaa){
			funcReturnDiv();
			i++;
		}
	});
		
	function funcReturnDiv(){
		var divID = $("#q50_box00 div:last-child").attr("id").substr(0,5);
		switch (divID){
		case "q50_a":
			var returnDiv = $("#q50_box01").after();
		break;	
		case "q50_b":
			var returnDiv = $("#q50_box02").after();	
		break;	
		case "q50_c":
			var returnDiv = $("#q50_box03").after();	
		break;	
	}
	$("#q50_box00").children("div:last-child").prependTo(returnDiv);
	}		
});

ファイル形式版で再挑戦

ファイル形式はコチラです。 ページを保存していただければ、すぐに配布できます。

jQuery入門問題のまとめ

レベル１，２，３合わせて50問の問題を作成しました。
このレベルができる様になれば、必要な動きを追加する度にプラグインのファイルを読み込み記述を増やさなくても、自分で設計し、自作できるくらいのはなるのではないでしょうか？

オブジェクト指向になれば同じ問題でも処理後の出力は同じでも中身のアルゴリズムが全然違ってきたり自分が使った事のない関数を使って処理を行う人がいたりとなかなか面白い発見もあったりしますので、
周りの誰かを巻き込んで一緒に挑戦してみたり、しばらく『Hello,World』から遠ざかっていた、
または2014年は新たにjQueryを覚えたいという方はこれを機に挑戦してみてはいかがでしょうか？

おせちもいいけどjQueryもね♪

このエントリーをはてなブックマークに追加
Pocket
LINEで送る
Facebook にシェア
reddit にシェア
LinkedIn にシェア

トップへ