処理の概要

テキストエリアに表示されたコードを、エンコード・デコードボタンを押下した時、エンコーディング、デコーディングを行う。

処理のフロー：

　(1)ページ読み込み時にinit()メソッドにより、テキストエリアに文字列が出力される
　(2)デコード、エンコードボタン押下時にURIメソッドにてコーディングされる
　(3)デコードの場合は、エラーによりプログラムが異常終了するので、tryでcatchをしてあげる

画面イメージ

#####画像１

#####画像２

#####画像３

ソースコード

index.html

<body onload="init()">
	<textarea id="beforeEncodeText"></textarea><br>
	<input type="button" id="encodeButton" value="エンコード">
	<input type="button" id="decodeButton" value="デコード"><br>
	<textarea id="afterEncodeText"></textarea>
</body>

リファクタリングする前

main.js

function init(){
    var lobjText = ""
    var defaultStr = [
        ["https://www.google.co.jp/#q=%E6%97%A5%E6%9C%AC%E8%AA%9E"],
        ["--------------------"],
        ["https://www.google.co.jp/#q=日本語"]
    ]
    
    $.each(defaultStr,function(){
        lobjText = lobjText + this + "\n";
    });
    $("#beforeEncodeText").val(lobjText)
};

$(function(){
    $("#encodeButton").click(function(){
        var encodeText = $("#beforeEncodeText").val()
        encodeText = encodeURI(encodeText);
        $("#afterEncodeText").val(encodeText);
    }); 

    $("#decodeButton").click(function(){
        var dencodeText = $("#beforeEncodeText").val()

        try {
            dencodeText = decodeURI(dencodeText);
        } catch(e) {
            console.log("err : " + e)
        }

        $("#afterEncodeText").val(dencodeText);
    }); 
});

ポイント

html：
(1)なし
js：
(1)URIはhttpやftpにてパスを指定する際に使用する。パスには日本語が指定できないため、%と16進数で表記される。
(2)URL内にクエリなどで日本語を指定したい場合はエンコードメソッドを使用する
(3)デコードはエンコードの逆で元の文字列に置き換えます。
(4)デコードは失敗するとエラーが出るため、trycatchを使用する。引数のeにはエラーの内容が入っている（例えば%FFはデコード出来ない）

参考資料

JavaScript(仕事の現場でサッと使える！デザイン教科書)　p97