ファイル名に「リンク先.html」とか「画像.jpeg」のようにファイル名（やフォルダ名）に日本語を使いたくなります。ＨＴＭＬがパソコンにあるローカル環境では、日本語がそのまま使えるのですが、ＨＴＭＬをサーバに登録してインターネットの環境にすると、アクセスできません。
インターネットでのＵＲＬは、すべて半角英数字（およびいくつかの半角記号）でなければならないという規則があるのです。
Windowsパソコンでの日本語ファイル名はShift-JISの文字コードで記述されます。サーバにアップロードすると、特殊な文字列（ここではＵＲＬコードといいます）に変換されるのです（見た目には日本語になっていても、内部ではＵＲＬコードになっています。
そのため、インターネット環境でのＨＴＭＬで日本語ファイルをアクセスするには、ＵＲＬコードで指定する必要があります。
なお、Shift-JISの１文字は、ＵＲＬコードでは %xx%yy の形式の６文字になります。そして、
Shift-JIS→ＵＲＬコード をエンコード
ＵＲＬコード→Shift-JIS をデコード
といいます。
ここでは、次の４ケースを考えます。
日本語の字種は膨大なので、手作業でＢやＤを記述するのは困難です。それで、先人がエンコードの関数を開発して無料提供してくださっています。ここでは、ヌルコムアーカイブス・デジタル制作室さんの、ecl.js（Escape Codec Library）を拝借しました。
ecl.jsをダウンロードして、このＨＴＭＬのスクリプト部に、
<script src="ecl.js"></script>
としておきます。
ecl.jsにはいくつかの関数がありますが、Shift-JIS→ＵＲＬコードのエンコードには、EscapeSJIS()を用います。
x = EscapeSJIS("リンク先")
とすれば、x = "%83%8a%83%93%83N%90%e6" となります。
ここでは、リンク先のＵＲＬ「リンク先.html」のうち「リンク先」だけをＨＴＭＬで指定し、scriptで「.html」を付加することにします。
通常のファイルへのリンクです。「scriptによるリンク」を参照してください。
script部
function Ａ(ファイル名) {
var リンク先ＵＲＬ = ファイル名 + ".html"; ・・・ア
location.href = リンク先ＵＲＬ;
}
ＨＴＭＬ部
<p>詳細は<span onClick="Ａ('リンク先');" style="border-bottom:solid 1px blue;">リンク先.html</span>にあります。</p>
詳細はリンク先.htmlにあります。
Ａのアの部分を赤字にように変更します。
script部
function Ｂ(ファイル名) {
var リンク先ＵＲＬ = EscapeSJIS(ファイル名) + ".html";
location.href = リンク先ＵＲＬ;
}
ＨＴＭＬ部
<p>詳細は<span onClick="Ｂ('リンク先');" style="border-bottom:solid 1px blue;">リンク先.html</span>にあります。</p>
詳細はリンク先.htmlにあります。
ここでは、表示する画像ファイル「画像.jpeg」のうち「画像」だけをＨＴＭＬで指定し、scriptで「.jpeg」を付加することにします。
通常の画像ファイルの場合です。「画像の読込表示」を参照してください。
script部
function Ｃ(ファイル名) {
var 画像 = document.getElementById("Ｃ表示場所"); ・・・ア
画像.src = ファイル名 + ".jpeg"; ・・・イ
画像.onload();
}
ＨＴＭＬ部
<button type="button" onClick="Ｃ('画像');">Ｃ画像表示</button><br> ・・・ウ
<img id="Ｃ表示場所" width="100"> ・・・エ
ウで与えた「画像」が、イで「画像.jpeg」になります。
アにより、エの位置に画像が表示されます。
Ｃのイの部分を赤字にように変更します。
script部
function Ｄ(ファイル名) {
var 画像 = document.getElementById("Ｄ表示場所");
画像.src = EscapeSJIS(ファイル名) + ".jpeg";
画像.onload();
}
ＨＴＭＬ部
<button type="button" onClick="Ｄ('画像');">Ｄ画像表示</button><br>
<img id="Ｄ表示場所" width="100">