ぐらでじぇねれーた

１・JavaScript部 

<SCRIPT LANGUAGE="javascript">
<!--
function set(){
	str=document.grade.bun.value;
	first=document.grade.colora.value;
	end=document.grade.colorb.value;

	kekka=gradey(str, first, end);

//表示
	document.write("<P ALIGN=\"CENTER\">");
	document.write(kekka);
	document.write("<BR><FORM><TEXTAREA COLS=50 ROWS=5>");
	document.write(kekka);
	document.write("</TEXTAREA></FORM>");
	document.write("</P>");
}

function gradey(str, first, end){
//一色目r,g,b、二色目r,g,bを取得
	color=new Array(6);
	color[0]=first.substring(0, 2);
	color[1]=first.substring(2, 4);
	color[2]=first.substring(4, 6);
	color[3]=end.substring(0, 2);
	color[4]=end.substring(2, 4);
	color[5]=end.substring(4, 6);

//文字数計っとく
	len=str.length;

//あとでタグの入る変数準備
	temp="";


//取得した色データを10進に変換。条件に合わない文字だった場合0にする
	for(a=0;a<6;a++){
		color[a]=parseInt(color[a],16).toString(10);
		if(isNaN(parseInt(color[a],16)))
			color[a]=0;
	}

//タグ作成ループ
	for(a=0;a<len;a++){

	//一文字ごとの差分
		r=Math.floor((color[3]-color[0])/(len-1));
		g=Math.floor((color[4]-color[1])/(len-1));
		b=Math.floor((color[5]-color[2])/(len-1));

	//差分をはじめの色に徐々に足していく
		r=color[0]-0+r*a;
		g=color[1]-0+g*a;
		b=color[2]-0+b*a;

	//マイナス値になったら0にしとく
		if(r<0)	r=0;
		if(g<0)	g=0;
		if(b<0)	b=0;

	//16進に戻す。もし16以下なら頭に0がつく。
		if(r<16)	r="0"+r.toString(16);
		else		r=r.toString(16);
		if(g<16)	g="0"+g.toString(16);
		else		g=g.toString(16);
		if(b<16)	b="0"+b.toString(16);
		else		b=b.toString(16);
	
	//タグを作りましょう
		temp=	temp+
			"<FONT COLOR=\"#"+r+""+g+""+b+"\">"+
			str.substr(a, 1)+
			"</FONT>";
	}

}
//-->
</SCRIPT>


２・FORM部 

<FORM NAME="grade">
<INPUT TYPE="text" NAME="bun" SIZE="50"> を
<BR>#<INPUT TYPE="text" NAME="colora" SIZE="8">
から #<INPUT TYPE="text" NAME="colorb" SIZE="8"> にグラデーション
<BR><INPUT TYPE="button" VALUE="作成！" onClick="set()">
</FORM>

● 設置方法
１・JavaScript部を設置したいHTMLの<HEAD>〜</HEAD>に、
２・FORM部を<BODY>〜</BODY>の中のお好きなところに貼り付けて下さい。
……いや。今までと同じようにどっちもBODYに貼り付けたって何ら問題ないんですが。
スクリプトはなんかなるべくヘッダに置くようにするらしいんで。
これからはこっち式で行きます。

● 本日のテーマ
使い回せる関数を作ろう。ということで。
今回のポイントは関数gradey(str, first, end)です。グラデーション作成部分。
引数（括弧の中、関数に作用させる値のこと）は以下の通り。
str：グラデを掛けたい文字列
first：最初の色。16進6桁
end：終わりの色。16進6桁
で、関数が出す結果を戻り値といいます。無論戻り値は、strにタグ入れた文章。
こうやって、引数以外の余計なデータ無しで結果を返してくれるカタマリを作っておけば
後々それを部品にして別のものを作れるよね。っていう考え方がオブジェクト志向というやつです。

● 今回の反省
このコーナーじゃ今迄で一番いい例だろう。オブジェクト志向的には。ちなみに最悪な例は前回。
ただしエラー処理を今回はやってないのでヤバい所はある。
この関数を使えば、ちょっとした工夫で3色4色のぐらでじぇねれーたもポンと作れます。
暇な人は是非チャレンジ。

【実行結果】 【戻る】