GOOGLE志望

腸内メーカー 2007/11/12 21:23 仕様
名前を入力させる
判定ボタンを押すと、
名前を文字コードにし、それを全部加算
加算した数値の1の位の数だけ善玉菌、10の位の数だけ悪玉菌として表示


できたもの
腸内メーカー

これはひどい。でもそんなの関係ねぇ。



コーディング
できたコードは以下のとおり

$(function(){
/* 判定ボタンイベント */
$(”#hantei”).click(function(){
var moji_code = 0;
$(”.kekka”).remove(); // 前回の結果を消す

//名前からUnicode番号を得て、1の位と10の位を得る
var name = $(”#name”).val(); // 名前の値をnameに代入

for(i=0; i<name.length; i++){ // 文字の数だけ
moji_code += name.charCodeAt(i); // 文字コードを足していく
}

moji_code = moji_code.toString(); // Stringオブジェクトへ
var place_1 = moji_code.slice(-1, moji_code.length); // 1の位を得る
var place_10 = moji_code.slice(-2, moji_code.length-1); // 10の位を得る

//1の位は善玉菌に、10の位は悪玉菌にする
var zendama = ””;
for(i=0; i<parseInt(place_1); i++){ zendama += ”善玉” } // 数字の数だけ文字を追加
$(”<div class=’kekka’></div>”).text( zendama )
.css({position: ”absolute”, left: ”100px”, top: ”30px”, width: ”120px”, color: ”gold”})
.appendTo(”#view”).hide().fadeIn();

var akudama = ””;
for(i=0; i<parseInt(place_10); i++){ akudama += ”悪玉” } // 数字の数だけ文字を追加
$(”<div class=’kekka’></div>”).text( akudama )
.css({position: ”absolute”, left: ”100px”, top: ”120px”, width: ”120px”, color: ”indigo”})
.appendTo(”#view”).hide().fadeIn();
}); //end of $(”#hantei”).click()
});



要点
$(function(){
//ここに初期化コードを書く
})


$(”#hantei”).click(function(){ });

$(”CSS/XPATH”)でそのDOM要素をもつjQueryオブジェクトを返します。

.click() にfunctionオブジェクトを渡すとクリックイベントを設定できます。

メソッドはjQueryオブジェクトを返すので$(”#hoge”).css().insertAfter() のように数珠繋ぎにできます。


var name = $(”#name”).val();

<input>の内容をval()で得ます。


StringObject.charCodeAt(pos)

Unicode番号を返してくれます。


moji_code.slice(-1, moji_code.length)

sliceで切り取りたい場所を指定します。-1は最後の文字、-2は後ろから2番目の文字です。


parseInt(place_1); //文字列を整数の数値にします


$(”<div class=’kekka’></div>”).text( akudama )
.css({position: ”absolute”, left: ”100px”, top: ”120px”, width: ”120px”, color: ”indigo”})
.appendTo(”#view”).hide().fadeIn();

$(”HTML文字列”)で作りたいHTMLを書き、最終的にappendTo()で挿入し、hide()で非表示にし、fadeIn()でフェードインさせます。



jQueryの詳しい解説は以下を参考に

jQuery を使って Ajax 開発を単純化する


jQuery 開発者向けメモ

ジェネレータ 2007/11/12 21:31 http://q.hatena.ne.jp/1193982965