過去2回、これからjQueryを覚えたいという方に向けて問題集を作成しました。
今回、最後の仕上げとしてひとつのfunction内ですべての処理を行うベタ書きから、
単純なfunctionを量産し、実行用のfunctionで全体の処理を行うオブジェクト指向の感覚をつかむところまでを目標にしたレベル3を作成しました。
レベル3・・・・・構文や変数を組み合わせて簡易的なインスタンスを構築できる
<!-- HTML --> <div id="q41"></div>
$(function(){ for(i=1; i<101; i++){ $("div#q41").append(i + "、") } });
<!-- 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>') } });
<!-- 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; } });
<!-- 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); } });
<!-- 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) } });
<!-- HTML --> <div id="q46_box"> <label>オペランドA</label> <input id="q46_val" type="text" size="3" width="50" /> <label>オペランドB</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) } });※小数点を含む計算は別途で数値判定の処理を追記しなければならないので注意
<!-- 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); });
<!-- HTML --> <p id="q48">赤になりたい</p> <p class="button">ぼたん</p>
$(function(){ function funcColorName(colorName){ $("p#q48").css('color',colorName); }; $("p.button").click(function(){ funcColorName('red'); }); });
<!-- 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; }); });
<!-- HTML --> <p class="button">ぼたん</p> <div id="q50_box00"> <p>ボックスABC</p> <div id="q50_a">A</div> <div id="q50_b">B</div> <div id="q50_c">C</div> </div> <div id="q50_box01"> <p>A</p> </div> <div id="q50_box02"> <p>B</p> </div> <div id="q50_box03"> <p>C</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); } });
レベル1,2,3合わせて50問の問題を作成しました。
このレベルができる様になれば、必要な動きを追加する度にプラグインのファイルを読み込み記述を増やさなくても、自分で設計し、自作できるくらいのはなるのではないでしょうか?
オブジェクト指向になれば同じ問題でも処理後の出力は同じでも中身のアルゴリズムが全然違ってきたり自分が使った事のない関数を使って処理を行う人がいたりとなかなか面白い発見もあったりしますので、
周りの誰かを巻き込んで一緒に挑戦してみたり、しばらく『Hello,World』から遠ざかっていた、
または2014年は新たにjQueryを覚えたいという方はこれを機に挑戦してみてはいかがでしょうか?
おせちもいいけどjQueryもね♪