JavaScriptでソフトキーボードを作ってみたよ

javascript


やあ子供達、元気に正月をエンジョイしてるかい。
今年も一つよろしく頼むぞ。
おじさんは生活の中で非同期的に発生するわずかなフリータイムを利用してJavaScriptの勉強を始めたよ。ドット・インストールさんのJavaScript口座の一連の動画教材を見ながらさせて頂きながら、練習がてらにソフトキーボードを作ってみたのでソースごとドカっ！とここにメモっておくぞ。
こいつをまるごとHTMLファイルとして保存してブラウザで見るだけで動くはずなんだけどね。あるいはこういうとことかに丸ごとペーストして確認してもらうことも可能だ。
はてなのシンタックスハイライトでcpp以外のものを使うのは初めてなのでおじさんもちょっと鼻が高いぞ。

<!DOCTYPE html>
<html lang="ja">
  	<head>
		<meta charset="UTF-8" />
		<title>JavaScriptの練習</title>
	</head>
	<body>
        <h1>はじめての<br>ソフトキーボード</h1>
		<script>
            // 入力用キーボードの作成
            {
                var cnt = 1;
                for( var ich='a'.charCodeAt(0); ich<="z".charCodeAt(0); ++ich ){
                    // キャラクターコードに対応するキャラクター文字をiに保持
                    var i = String.fromCharCode( ich );
                    // ボタン部品の動的作成
                    var widget= document.createElement("input");// html部品種別
                    {
                        widget.type = "button";// ウィジェット種別
                        widget.id = "button_"+i;// ボタンの識別ID
                        widget.value = i;// ボタンのラベル
                        // コールバック関数の動的生成
                        widget.onclick = new Function( 
                        "var wid = document.getElementById('text_0');" +
                        "if( wid.disabled ){" +
                        "  wid.value=''; wid.value += '"+i+"'; wid.disabled=null" +
                        "}else wid.value +='"+i+"';" );
                    }
                    document.body.appendChild( widget );// ボタンをbodyに追加
                    // ボタンを７つ表示したら改行
                    if( cnt%7 == 0 ){
                        insert_br();// 改行の挿入（後述定義）
                    }
                    ++cnt;
                }    
            }
            insert_br();// 改行の挿入（後段にて定義）
            // 出力用テキストボックスの設置
            var tb = document.createElement("input");
            {
                tb.type = "text";
                tb.id = "text_0";
                tb.size = 30;
                tb.value = "your output";
                tb.disabled = true;
            }
            document.body.appendChild( tb );      
            // 改行を挿入
            insert_br();// 改行の挿入（後段にて定義）
            // テキストボックスのクリアボタン
            var clbt = document.createElement( "input" );
            {
                clbt.type = "button";
                clbt.id = "clear_button_0";
                clbt.value = "内容のクリヤー";
                clbt.onclick = function(){
                    console.log( "hello on_clear" );
                    document.getElementById( "text_0" ).value="";                    
                };
            }
            document.body.appendChild( clbt );
            // 改行の挿入
            function insert_br()
            {
                var br = document.createElement( "br" );
                document.body.appendChild( br );
            }
		</script>
	</body>
</html>

今回なにげに思ったのは、文字列リテラルの中に文字列リテラルを記述したい場合なんかにダブルクォートとシングルクォートの使い分けってのが結構便利で大事だなっていうことと、あとは何と言ってもFunction構文を使ったボタンコールバック用関数オブジェクトの動的生成かな。Function構文を使うと他の関数定義方法とは違って関数を文字列として動的に定義できるからとても便利だね。

Effective JavaScript

Effective JavaScript