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

　それとやはり[form]の[input]の[type]属性で[button](<input type="button">)をエスケープ用とアンエスケープ用に２つ用意していて[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()]とするだけです。

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

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

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

JavaScriptサンプル

JavaScript文法

ウェブ造ホームページの作り方・ウェブサイト作成制作

2004-2012

escape/unescape変換フォーム JavaScript

escape/unescape

escape/unescape変換フォーム JavaScript

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

JavaScriptサンプル

JavaScript文法

ウェブ造 ホームページの作り方・ウェブサイト作成制作

ウェブ造ホームページの作り方・ウェブサイト作成制作