【理系大学生】yomiakiのラクガキ

徒然なるままによみあき

【プログラミング】JavaScript勉強記 ep3 〜ナイツ塙風変換機〜

JavaScript プログラミング

無題ドキュメント

JavaScript勉強記 ep3 ～ナイツ塙風変換機～

とりあえず、自分でどんどんサンプル見るなりで何かしら作っていくのがいいかなと思ったので、今回は「ナイツ塙風変換機」を作ってみました。

どういうもの？

お笑いコンビのナイツさんの言い間違いのネタで、「クリリン」を「クソソソ」と言うというものがあります。

ここでは文章入力すると「リ」と「ン」を検出して、どちらとも「ソ」に置換して、表示するというもの作ります。

 



コード

次のようなコードになっています。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>

<body>
<script>
function myTrans(){
	myComp="";
    myMsg=document.getElementById("myForm").value;
	for(i=0;i<myMsg.length;i++){
		mySplit=myMsg.substring(i,i+1);
		if((mySplit=="リ" )||(mySplit=="ン" )){
			mySplit="ソ";
		}
		myComp=myComp+mySplit;
		}
	document.getElementById( "trans" ).innerHTML = myComp;
	}
	
</script>
<form name="myForm">
<textarea type="text" cols="100" rows="10" id="myForm"></textarea>
<input type="button" value="変換" onclick="myTrans()">
<div id="trans"></div>
</form>
</body>
</html>

myTransという関数を作って、myCompという空の文字列を作っておきます。

次にmyMsgにフォームに入力した文章が入るようにします。

それをfor文とsubstringメソッドで一文字ずつチェックし、一旦mySplitという変数に入れ、もし「リ」または「ン」だったら、「ソ」に置換して、myCompに入れていきます。

「リ」か「ン」以外だったら、そのままmyCompに入れます。

最終的にmyCompには入力した文章の「リ」と「ン」が「ソ」に置換されたものが入っているので、innerHTMLメソッドで表示するというようになっています。

この一連の関数myTransがボタンフォームの変換ボタンを押すことで実行されます。

 

埋め込んでおきます！遊んでみてください！

 

 

 

使用例

マリリン・マンソン脱退の記事を入力

 

 

 

やってみて

  • フォームに文字列を入力して、その入力したものをJavaScriptの方へ持っていくという手法が学べた。
  • 文字列を一文字ずつ切り出して考えるという手法を学べた。簡単なif文、for文も使ってみることができた。
  • 複数行入力できるフォームの作り方が分かった。


まだまだ勉強は続きます…。


よみあきでした。