気の向くままに辿るIT/ICT/IoT
JavaScript

escape/unescape変換フォーム JavaScript

ホーム前へ次へ
escape/unescape変換フォームを作りたい!『JavaScript編』

escape/unescape変換フォーム JavaScript

escape/unescape変換フォームの作成方法

 ウェブで送受信する際のデータをJavaScriptではescape・エスケープunescape・アンエスケープしますが、ここでは、JavaScriptでこの変換フォームを作ってみましょう。

[入力データ]

[変換結果]
※JavaScriptがONなら変換フォームをどうぞ。

 これは一体どんな仕組みになっているのでしょうか?


<form name="unes_form">
[変換前]<br>
<textarea name="res_input" cols="50" rows="3"></textarea>
<p align="center">
<input type="button" value="escape/encode" onClick="esc()">
<input type="button" value="unescape/decode" onClick="unesc()">
</p>
<p></p>
[変換結果]<br>
<textarea name="result" cols="50" rows="3"></textarea>
</form>
<div>※JavaScriptがONなら変換フォームをどうぞ。</div>

 ここから体裁の部分を省くと


<form name="unes_form">
[変換前]<br>
<textarea name="res_input" cols="50" rows="3"></textarea>
<input type="button" value="escape/encode" onClick="esc()">
<input type="button" value="unescape/decode" onClick="unesc()">
[変換結果]<br>
<textarea name="result" cols="50" rows="3"></textarea>
</form>

のようになっていてformタグを使ってformと変換前用と変換後用の[<textarea></textarea>]ボックスを用意してそれぞれ[name=""]で名前を付けています。

 それとやはり[form]の[input]の[type]属性で[button](<input type="button">)をエスケープ用とアンエスケープ用に2つ用意していて[input]属性の[value=""]に設定した文字列が[button]のラベル文字です。

 ここでのポイントは[button]に割り当てられているイベント


onClick="esc()"



onClick="unesc()"


onClickは、HTML/XHTMLで定義されているイベントハンドラ
onClickは、(Windowsの場合)マウスの左ボタンがクリックされた時の処理を設定するものです。

esc()とunesc()は、実際の処理を行う関数で関数名はお好きな名前でOKです。

 それではJavaScript外部ファイルの記述を見てみましょう。


function esc(){
    document.unes_form.result.value=escape(document.unes_form.res_input.value);
}
function unesc(){
    document.unes_form.result.value=unescape(document.unes_form.res_input.value);
}

 この中の


escape()



unescape()

が、入力された文字列をエスケープ/アンエスケープする為のJavaScript固有の組み込み関数です。


function esc(){
    document.unes_form.result.value=escape(document.unes_form.res_input.value);
}

が、入力された文字列をエスケープする為の関数で、[document]の[unes_form]という名前の[result]という名前のフォームを構成するオブジェクトの[value](値)に[escape()]して、同じく[document]の[unes_form]という名前の[res_input]という名前のフォームを構成するオブジェクトの[value](値)を代入するという指定です。


function unesc(){
    document.unes_form.result.value=unescape(document.unes_form.res_input.value);
}

 アンエスケープもエスケープと同様で[ escape() ]を[ unescape() ]とするだけです。

推奨される関数

 尚、JavaScript、JScript、ActionScript含め、実質、第3版から世界標準となったECMAScriptでは、現時点で最新の第5.1版においても escape() / unescape() 互換性維持の為に今尚、利用可能ではあるものの、ASCII (≒英数字)以外の文字コードにも対応可能な下記の関数の方が推奨されています。

 変換精度と名称と組み合わせは別として使い方自体は、escape/unescapeと同じです。

 encodeURI () / encodeURIComponent ()

 decodeURI () / decodeURIComponent ()

URI操作関数参照

[入力データ]

[変換結果]
※JavaScriptがONなら変換フォームをどうぞ。

 ちなみに背景やボタン背景色などの装飾はCSS設定です。

 次は同じようにformを使って計算フォームを作ってみましょう。

計算フォームを作りたい!『JavaScript』

JavaScriptサンプル

ECMAScriptベースのJavaScriptリファレンス

ECMAScript / ECMA-262 Edition 5.1 訳

 尚、下記リンクは、多くの場合、ページ情報量の過多を回避する為、場合によって更に章、節、句ごとに、任意に細分化し、ネストしている部分があります。

旧来掲載のJavaScript

ホーム前へ次へ