HTML Generator 2nd

以前、ブラウザ上で動作するJavaScriptによる簡易HTMLソースコード生成装置「HTML Generator」を作ったが、
その続編として、それとは別に、新たに「HTML Generator 2nd」を作ることにした。
「HTML Generator 2nd」も、コードを書くコードなので、狭義には、メタプログラムの一種であるといえるかもしれないが、
どちらかといえば、「自動プログラミング」と言った方がより正確かも知れない。因みに、AIや人工知能の領域には及んでいない。

プログラムはこちら
拾壱 拾弐 拾参 拾肆 拾伍 拾陸 拾漆 拾捌 拾玖 弐拾

ソースコードはこちら
拾壱 拾弐 拾参 拾肆 拾伍 拾陸 拾漆 拾捌 拾玖 弐拾




拾壱. ソースコードの編集

正規表現による文字列の検索・置換:
検索する文字列:
置換する文字列:

HTMLネームエンティティへの変換:

インデントの挿入/ソースコードの生成:


パーセントエンコーディング:

(解説) テキストエリア(※テキストエリア名を「workspace」にした)にコピーペーストした
文字列に対して、「HTMLネームエンティティへの変換」の各ボタンを押すと、
HTMLの特殊文字がネームエンティティへの変換(サニタイジング)される。
(※各ボタンの数字は押下する順番の参考である。)
また、「インデントの挿入/ソースコードの生成」の各ボタンを押すと、
JavaScriptのdocument.writeやdocument.writeln、PHPのprintやechoによる出力文にしたり、
行頭のインデントを整形(半角スペースは、個数回分、ボタンを連打する)したり、
行末に改行タグ・改行コードを埋め込んだりすることができる。
さらに、オプションとして、正規表現による文字列の検索・置換と、
6種類のビルトイン関数を用いて、パーセントエンコーディングとそのデコードができる機能を加えた。




拾弐. Table Convertor

入力欄(必須):
入力データ形式(必須):
枠線の幅:
frame:
rules:
表自身のページ内の位置:
見出しタグ<th>:
<th>タグのスタイル:
背景色:

文字色:
<td>タグのスタイル:
背景色:

文字色:


プレビュー:
ここにプレビューが生成される。

(解説) ファイルから、入力データをテキストエリアの入力欄にコピーして貼り付ける。
入力データの形式は、CSV(半角コンマ区切り)、SSV(半角スペース区切り)、
TSV(タブ区切り)にのみ対応している。即ち、入力データの行(レコード)は、
改行ごとに区切られ、列(カラム、フィールド)は、選択された上記のデリミタ(区切り文字)
によって、区切られる。但し、最終行の後は絶対に改行してはならない。
【サンプルデータ】

1,2,3
4,5,6
7,8,9
10,11,12




拾参. HTMLナンバーエンティティの検索

初値: 終値:
検索結果:
ここに検索結果のHTMLテーブルが生成される。

(解説) 初値と終値を入力後、「検索する」ボタンを押すと、その区間の、
HTMLナンバーエンティティの一覧表が生成される。




拾肆. ギリシア文字(ギリシャ文字)の生成

大文字





小文字





記号と数字








その他の機能

プレビュー:
ここにプレビューが生成される。

(解説) 各ギリシア文字(ギリシャ文字)のボタンを押すと、
該当するギリシア文字(ギリシャ文字)の
HTML実体参照(ナンバーエンティティ)が生成され、
「プレビュー」では、その仕上がり具合が確認できる。
小文字の文末のシグマ、簡単な記号と数字、
プレビュー内の改行と、全削除の機能は加えたが、
ダイアクリティカルマーク(発音区別符号)には、対応していない。




拾伍. フラクトゥール(ドイツの旧字体)の生成

大文字




小文字




大文字(ボールド)




小文字(ボールド)



記号と数字








その他の機能

プレビュー:
ここにプレビューが生成される。

(解説) 各フラクトゥール(ドイツの旧字体)のボタンを押すと、
該当するフラクトゥールのHTML実体参照(ナンバーエンティティ)が生成され、
「プレビュー」では、その仕上がり具合が確認できる。
大文字と小文字の各ボールド版と、簡単な記号と数字、
プレビュー内の改行と、全削除の機能は加えたが、
ウムラウトやエスツェットのフラクトゥール化には、対応していない。




拾陸. キリル文字の生成

大文字






小文字





記号と数字








その他の機能

プレビュー:
ここにプレビューが生成される。

(解説) 各キリル文字のボタンを押すと、該当するキリル文字の
HTML実体参照(ナンバーエンティティ)が生成され、
「プレビュー」では、その仕上がり具合が確認できる。
簡単な記号と数字、プレビュー内の改行と、全削除の機能も加えた。
ロシア語の表記に用いられる33文字にモンゴル語の円唇母音を
表すのに必要なӨとҮを加え、全部で35文字とした。
因みに、色が(橙色に)変わっているボタンのキリル文字が、
ロシア語にはなく、モンゴル語には存在するキリル文字である。




拾漆. 多肢択一式問題の生成(旧quiz Generator)

選択肢数:
問題数:

(解説) 選択肢数と問題数を入力し、「生成する」ボタンを押すと、
選択肢数×問題数分の択一式問題が生成される。採点機能とヒント機能付きであるが、
ヒント機能は、クリックする度に、【解説】の表示/非表示を切り替えることができるようにした。

これらは、旧quiz Generatorでは、jQueryのtextメソッドを使用していたが、
今回は、アコーディオンパネルを応用して、【解説】の部分をクリックする度に、
JavaScriptのvisibilityプロパティの値を、hiddenとvisibleで切り替えることによって実現している。
(その為、今回は、HTMLのヘッダ部分に、jQueryの使用宣言は必要ない。)

注意点としては、JavaScript内冒頭のscore関数にある、「document.exercise.q1[].checked」等の
[]内に、各問題の正解を0~問題数-1の値の形式で入力することで完成に至るという点である。




拾捌. ラテン文字アルファベットからフラクトゥールへの変換

原文:

(例:ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz)



HTMLのナンバーエンティティに変換した結果:

プレビュー:
ここにプレビューが生成される。

(解説) ウムラウトとエスツェットは、対応するフラクトゥールの
Unicodeが存在していないので、フラクトゥールへの変換は不可能。




ソースコード

拾壱. ソースコードの生成

HTMLサイド

<form><!-- getElementByIdを使用する為、name属性を指定しない -->
<textarea id="workspace" cols="80" rows="20"></textarea>
<p>
正規表現による文字列の検索・置換:<br>
検索する文字列:<input type="text" id="before"><br>
置換する文字列:<input type="text" id="after"><br>
<input type="button" value="検索・置換開始" onclick="replacement()">
</p>
<p>
HTMLネームエンティティへの変換:<br>
<input type="button" value="(0) 「&amp;」を「&amp;amp;」に変換" onclick="sanitizingamp()">
<input type="button" value="(1) 「&lt;」を「&amp;lt;」に変換" onclick="sanitizinglt()">
<input type="button" value="(2) 「&gt;」を「&amp;gt;」に変換" onclick="sanitizinggt()"><br>
<input type="button" value="(3) 「&quot;」を「&amp;quot;」に変換" onclick="sanitizingquot()">
<input type="button" value="(4) 半角スペースを「&amp;nbsp;」に変換" onclick="sanitizingnbsp()">
</p>
<p>
インデントの挿入/ソースコードの生成:<br>
<input type="button" value="JavaScript(document.write)" onclick="jsdocwrite()">
<input type="button" value="JavaScript(document.writeln)" onclick="jsdocwriteln()">
<input type="button" value="PHP(print)" onclick="phpprint()">
<input type="button" value="PHP(echo)" onclick="phpecho()"><br>
<input type="button" value="行頭に半角スペース1個を付加" onclick="addnbsp()">
<input type="button" value="行頭にTabを付加" onclick="addtab()">
<input type="button" value="全行コメントアウト(行頭に「// 」を付加)" onclick="commentout()"><br>
<input type="button" value="行末に&lt;br&gt;タグを付加" onclick="addbr()">
<input type="button" value="行末に&lt;br /&gt;タグを付加" onclick="addbr2()">
<input type="button" value="行末に改行コード&#92;n(LF)を付加" onclick="addlf()">
</p>
<p>
パーセントエンコーディング:<br>
<input type="button" value="decodeURI" onclick="decode()">
<input type="button" value="encodeURI" onclick="encode()">
<input type="button" value="escape" onclick="esc()">
<input type="button" value="unescape" onclick="unesc()"><br>
<input type="button" value="decodeURIComponent" onclick="decodecomp()">
<input type="button" value="encodeURIComponent" onclick="encodecomp()">
</p>
</form>

JavaScriptサイド

var input11, output11; // テキストエリアへ入出力する為の変数
var before, after; // 検索する文字列と置換する文字列
var record; // 行ごとに文字列を代入する配列
var i, n; // ループ変数と行数を格納する為の変数

var sanitizingamp = function(){
  input11 = document.getElementById("workspace").value; // テキストエリアから読み込む
  output11 = input11.replace(RegExp("&","g"), "&amp;"); // 「&」を「&amp;」へ変換
  document.getElementById("workspace").value = output11; // テキストエリアへ出力する
}

var sanitizinglt = function(){
  input11 = document.getElementById("workspace").value; // テキストエリアから読み込む
  output11 = input11.replace(RegExp("<","g"), "&lt;"); // 「<」を「&lt;」へ変換
  document.getElementById("workspace").value = output11; // テキストエリアへ出力する
}

var sanitizinggt = function(){
  input11 = document.getElementById("workspace").value; // テキストエリアから読み込む
  output11 = input11.replace(RegExp(">","g"), "&gt;"); // 「>」を「&gt;」へ変換
  document.getElementById("workspace").value = output11; // テキストエリアへ出力する
}

var sanitizingquot = function(){
  input11 = document.getElementById("workspace").value; // テキストエリアから読み込む
  output11 = input11.replace(RegExp("\"","g"), "&quot;"); // 「"」を「&quot;」へ変換
  document.getElementById("workspace").value = output11; // テキストエリアへ出力する
}

var sanitizingnbsp = function(){
  input11 = document.getElementById("workspace").value; // テキストエリアから読み込む
  output11 = input11.replace(RegExp(" ","g"), "&nbsp;"); // 「半角スペース」を「&nbsp;」へ変換
  document.getElementById("workspace").value = output11; // テキストエリアへ出力する
}

var jsdocwrite = function(){
  input11 = document.getElementById("workspace").value; // テキストエリアから読み込む
  record = input11.split("\n");
  n = record.length; // 行数を算出する
  output11 = ""; // 出力用変数に空文字列を代入して初期化

  for(i = 0; i < n; i++){
    record[i] = "document.write(\"" + record[i] + "\");";
    if(i == (n - 1)){
      output11 += record[i];
    } else {
      output11 += record[i] + "\n";
    } // テキストエリアの最終行では、改行しない。
  }

  document.getElementById("workspace").value = output11; // テキストエリアへ出力する
} // JavaScriptのdocument.writeとして生成する

var jsdocwriteln = function(){
  input11 = document.getElementById("workspace").value; // テキストエリアから読み込む
  record = input11.split("\n");
  n = record.length; // 行数を算出する
  output11 = ""; // 出力用変数に空文字列を代入して初期化

  for(i = 0; i < n; i++){
    record[i] = "document.writeln(\"" + record[i] + "\");";
    if(i == (n - 1)){
      output11 += record[i];
    } else {
      output11 += record[i] + "\n";
    } // テキストエリアの最終行では、改行しない。
  }

  document.getElementById("workspace").value = output11; // テキストエリアへ出力する
} // JavaScriptのdocument.writelnとして生成する

var phpprint = function(){
  input11 = document.getElementById("workspace").value; // テキストエリアから読み込む
  record = input11.split("\n");
  n = record.length; // 行数を算出する
  output11 = ""; // 出力用変数に空文字列を代入して初期化

  for(i = 0; i < n; i++){
    record[i] = "print '" + record[i] + "';";
    if(i == (n - 1)){
      output11 += record[i];
    } else {
      output11 += record[i] + "\n";
    } // テキストエリアの最終行では、改行しない。
  }

  document.getElementById("workspace").value = output11; // テキストエリアへ出力する
} // PHPのprintとして生成する

var phpecho = function(){
  input11 = document.getElementById("workspace").value; // テキストエリアから読み込む
  record = input11.split("\n");
  n = record.length; // 行数を算出する
  output11 = ""; // 出力用変数に空文字列を代入して初期化

  for(i = 0; i < n; i++){
    record[i] = "echo '" + record[i] + "';";
    if(i == (n - 1)){
      output11 += record[i];
    } else {
      output11 += record[i] + "\n";
    } // テキストエリアの最終行では、改行しない。
  }

  document.getElementById("workspace").value = output11; // テキストエリアへ出力する
} // PHPのechoとして生成する

var addnbsp = function(){
  input11 = document.getElementById("workspace").value; // テキストエリアから読み込む
  record = input11.split("\n");
  n = record.length; // 行数を算出する
  output11 = ""; // 出力用変数に空文字列を代入して初期化

  for(i = 0; i < n; i++){
    record[i] = " " + record[i]; // 行頭に半角スペース1個を付加
    if(i == (n - 1)){
      output11 += record[i];
    } else {
      output11 += record[i] + "\n";
    } // テキストエリアの最終行では、改行しない。
  }

  document.getElementById("workspace").value = output11; // テキストエリアへ出力する
} // 行頭に半角スペース1個を付加

var addtab = function(){
  input11 = document.getElementById("workspace").value; // テキストエリアから読み込む
  record = input11.split("\n");
  n = record.length; // 行数を算出する
  output11 = ""; // 出力用変数に空文字列を代入して初期化

  for(i = 0; i < n; i++){
    record[i] = "\t" + record[i]; // 行頭にTabを付加
    if(i == (n - 1)){
      output11 += record[i];
    } else {
      output11 += record[i] + "\n";
    } // テキストエリアの最終行では、改行しない。
  }

  document.getElementById("workspace").value = output11; // テキストエリアへ出力する
} // 行頭にTabを付加

var commentout = function(){
  input11 = document.getElementById("workspace").value; // テキストエリアから読み込む
  record = input11.split("\n");
  n = record.length; // 行数を算出する
  output11 = ""; // 出力用変数に空文字列を代入して初期化

  for(i = 0; i < n; i++){
    record[i] = "// " + record[i]; // 行頭に「// 」を付加
    if(i == (n - 1)){
      output11 += record[i];
    } else {
      output11 += record[i] + "\n";
    } // テキストエリアの最終行では、改行しない。
  }

  document.getElementById("workspace").value = output11; // テキストエリアへ出力する
} // 全行コメントアウト

var addbr = function(){
  input11 = document.getElementById("workspace").value; // テキストエリアから読み込む
  record = input11.split("\n");
  n = record.length; // 行数を算出する
  output11 = ""; // 出力用変数に空文字列を代入して初期化

  for(i = 0; i < n; i++){
    record[i] = record[i] + "<br>"; // 行末に<br>タグを付加
    if(i == (n - 1)){
      output11 += record[i];
    } else {
      output11 += record[i] + "\n";
    } // テキストエリアの最終行では、改行しない。
  }

  document.getElementById("workspace").value = output11; // テキストエリアへ出力する
} // 行末に<br>タグを付加

var addbr2 = function(){
  input11 = document.getElementById("workspace").value; // テキストエリアから読み込む
  record = input11.split("\n");
  n = record.length; // 行数を算出する
  output11 = ""; // 出力用変数に空文字列を代入して初期化

  for(i = 0; i < n; i++){
    record[i] = record[i] + "<br />"; // 行末に<br />タグを付加
    if(i == (n - 1)){
      output11 += record[i];
    } else {
      output11 += record[i] + "\n";
    } // テキストエリアの最終行では、改行しない。
  }

  document.getElementById("workspace").value = output11; // テキストエリアへ出力する
} // 行末に<br />タグを付加

var addlf = function(){
  input11 = document.getElementById("workspace").value; // テキストエリアから読み込む
  record = input11.split("\n");
  n = record.length; // 行数を算出する
  output11 = ""; // 出力用変数に空文字列を代入して初期化

  for(i = 0; i < n; i++){
    record[i] = record[i] + "\\n"; // 行末に改行コード\n(LF)を付加
    if(i == (n - 1)){
      output11 += record[i];
    } else {
      output11 += record[i] + "\n";
    } // テキストエリアの最終行では、改行しない。
  }

  document.getElementById("workspace").value = output11; // テキストエリアへ出力する
} // 行末に改行コード\n(LF)を付加

var decode = function(){
  input11 = document.getElementById("workspace").value; // テキストエリアから読み込む
  output11 = decodeURI(input11); // decodeURI
  document.getElementById("workspace").value = output11; // テキストエリアへ出力する
}

var decodecomp = function(){
  input11 = document.getElementById("workspace").value; // テキストエリアから読み込む
  output11 = decodeURIComponent(input11); // decodeURIComponent
  document.getElementById("workspace").value = output11; // テキストエリアへ出力する
}

var encode = function(){
  input11 = document.getElementById("workspace").value; // テキストエリアから読み込む
  output11 = encodeURI(input11); // encodeURI
  document.getElementById("workspace").value = output11; // テキストエリアへ出力する
}

var encodecomp = function(){
  input11 = document.getElementById("workspace").value; // テキストエリアから読み込む
  output11 = encodeURIComponent(input11); // encodeURIComponent
  document.getElementById("workspace").value = output11; // テキストエリアへ出力する
}

var esc = function(){
  input11 = document.getElementById("workspace").value; // テキストエリアから読み込む
  output11 = escape(input11); // escape
  document.getElementById("workspace").value = output11; // テキストエリアへ出力する
}

var unesc = function(){
  input11 = document.getElementById("workspace").value; // テキストエリアから読み込む
  output11 = unescape(input11); // unescape
  document.getElementById("workspace").value = output11; // テキストエリアへ出力する
}

var replacement = function(){
  input11 = document.getElementById("workspace").value; // テキストエリアから読み込む
  before = new RegExp(document.getElementById("before").value,"g"); // 検索する文字列
  after = document.getElementById("after").value; // 置換する文字列
  output11 = input11.replace(before,after); // 正規表現で文字列を検索・置換する
  document.getElementById("workspace").value = output11; // テキストエリアへ出力する
}



拾弐. Table Convertor

HTMLサイド

<h2 id="program12">拾弐. Table Convertor</h2>
<form><!-- getElementByIdを使用する為、name属性を指定しない -->
<table border="1">

  <tr>
    <td style="text-align:right;">入力欄(必須):</td>
    <td style="text-align:left;"><textarea id="input12" cols="50" rows="20"></textarea></td>
  </tr>
  <tr>
    <td style="text-align:right;">入力データ形式(必須):</td>
    <td style="text-align:left;">
      <label for="csv"><input type="radio" name="separator" id="csv" checked>半角コンマ</label>
      <label for="ssv"><input type="radio" name="separator" id="ssv">半角スペース</label>
      <label for="tsv"><input type="radio" name="separator" id="tsv">タブ</label>
    </td>
  </tr>

  <tr>
    <td style="text-align:right;">枠線の幅:</td>
    <td style="text-align:left;"><input type="text" id="border" value="1"></td>
  </tr>

  <tr>
    <td style="text-align:right;">frame:</td>
    <td style="text-align:left;"><label for="framevoid"><input type="checkbox" id="framevoid">void</label></td>
  </tr>

  <tr>
    <td style="text-align:right;">rules:</td>
    <td style="text-align:left;"><label for="rulesnone"><input type="checkbox" id="rulesnone">none</label></td>
  </tr>

  <tr>
    <td style="text-align:right;">表自身のページ内の位置:</td>
    <td style="text-align:left;">
      <label for="marginauto"><input type="checkbox" id="marginauto">中央揃え(センタリング)する</label>
    </td>
  </tr>

  <tr>
    <td style="text-align:right;">見出しタグ&lt;th&gt;:</td>
    <td style="text-align:left;">
      <label for="none"><input type="radio" name="headers" id="none" checked>使用しない</label><!-- 全て&lt;td&gt;タグ -->
      <label for="firstrow"><input type="radio" name="headers" id="firstrow">最初の行</label><!-- 最上段だけ&lt;th&gt;タグ -->
      <label for="firstcolumn"><input type="radio" name="headers" id="firstcolumn">最初の列</label><!-- 最左列だけ&lt;th&gt;タグ -->
      <label for="both"><input type="radio" name="headers" id="both">両方</label><!-- 最初の行と最初の列に&lt;th&gt;タグを使用 -->
    </td>
  </tr>

  <tr>
    <td style="text-align:right;">&lt;th&gt;タグのスタイル:</td>
    <td style="text-align:left;">
      <label for="usethbgcolor"><input type="checkbox" id="usethbgcolor">背景色を指定する</label><br>
背景色:<input type="text" id="thbgcolor"><br>
      <label for="usethcolor"><input type="checkbox" id="usethcolor">文字色を指定する</label><br>
文字色:<input type="text" id="thcolor"><br>
      <label for="thtextalignleft"><input type="radio" name="thtextalign" id="thtextalignleft">左揃え</label>
      <label for="thtextaligncenter">
        <input type="radio" name="thtextalign" id="thtextaligncenter" checked>中央揃え(センタリング)
      </label><!-- デフォルト -->
      <label for="thtextalignright"><input type="radio" name="thtextalign" id="thtextalignright">右揃え</label>
    </td>
  </tr>

  <tr>
    <td style="text-align:right;">&lt;td&gt;タグのスタイル:</td>
    <td style="text-align:left;">
      <label for="usetdbgcolor"><input type="checkbox" id="usetdbgcolor">背景色を指定する</label><br>
背景色:<input type="text" id="tdbgcolor"><br>
      <label for="usetdcolor"><input type="checkbox" id="usetdcolor">文字色を指定する</label><br>
文字色:<input type="text" id="tdcolor"><br>
      <label for="tdtextalignleft"><input type="radio" name="tdtextalign" id="tdtextalignleft">左揃え</label>
      <label for="tdtextaligncenter">
        <input type="radio" name="tdtextalign" id="tdtextaligncenter" checked>中央揃え(センタリング)
      </label><!-- デフォルト -->
      <label for="tdtextalignright"><input type="radio" name="tdtextalign" id="tdtextalignright">右揃え</label>
    </td>
  </tr>

  <tr>
    <td style="text-align:center" colspan="2">
      <input type="button" style="width:200px;height:40px" value="上記の条件で生成する" onclick="HTMLGenerator12()">
      <!-- 関数名は、「HTMLGenerator12」 -->
    </td>
  </tr>

  <tr>
    <td style="text-align:center;" colspan="2"><hr></td>
  </tr>

  <tr>
    <td style="text-align:center" colspan="2">
      <textarea id="output12" cols="100" rows="20"></textarea><!-- 出力のみなので、テキストエリア名は、「output12」 -->
    </td>
  </tr>
</table>
<br>
プレビュー:<br>
<div id="preview12" style="border:solid 5px orange;padding:10px;width:800px;">
ここにプレビューが生成される。</div><!-- ここにプレビューが生成される。 -->
</form>

JavaScriptサイド

var input12; // テキストエリア「input12」から入力されたデータを読み込む為の変数
var output12; // テキストエリア「output12」へ出力する為の変数

var HTMLGenerator12 = function(){
  var border = 1; // 枠線の幅を表す変数borderを初期値1と共に宣言
  var rows = 3; // 行数を表す変数rowsを仮の値である初期値3と共に宣言(念の為)
  var cols = 3; // 列数を表す変数colsを仮の値である初期値3と共に宣言(念の為)

  var flagfv = document.getElementById("framevoid").checked; // frame属性の値をvoidにするフラグ
  var flagrn = document.getElementById("rulesnone").checked; // rules属性の値をnoneにするフラグ
  var flagma = document.getElementById("marginauto").checked;
  // 表自身のページ内の位置を中央揃え(センタリング)するフラグ

  var thmode; // 見出しタグ<th>の使用に関するモード

  var flagthbgcolor = document.getElementById("usethbgcolor").checked; // th属性の背景色を指定するフラグ
  var thbgcolor = document.getElementById("thbgcolor").value; // <th>タグの背景色を取得
  var flagthcolor = document.getElementById("usethcolor").checked; // th属性の文字色を指定するフラグ
  var thcolor = document.getElementById("thcolor").value; // <th>タグの文字色を取得
  var thtextalign; // <th>タグのtextalignプロパティ

  var flagtdbgcolor = document.getElementById("usetdbgcolor").checked; // td属性の背景色を指定するフラグ
  var tdbgcolor = document.getElementById("tdbgcolor").value; // <td>タグの背景色を取得
  var flagtdcolor = document.getElementById("usetdcolor").checked; // td属性の文字色を指定するフラグ
  var tdcolor = document.getElementById("tdcolor").value; // <td>タグの文字色を取得
  var tdtextalign; // <td>タグのtextalignプロパティ

  var record; // 改行文字で読み込んだデータを各行に分解して代入するための配列を宣言
  var i, j; // ループ変数を宣言
  var separator; // 入力データ形式である、区切り文字を表す変数を宣言
  var eachdata; // 各行に分解されたデータをさらに区切り文字で分解して各値を代入するための配列を宣言

  input12 = ""; // データを読み込み用変数に空文字列を代入して初期化(念の為)
  input12 = document.getElementById("input12").value; // テキストエリアから読み込む

  // 改行を\nに統一
  input12 = input12.replace("\r\n", "\n");
  input12 = input12.replace("\r", "\n");

  record = input12.split("\n"); // 読み込んだデータを改行文字で各行に分解して、配列recordに代入
  rows = record.length; // 行数を算出して、行数を表す変数rowsを仮の値から更新

  // ラジオボタンで選択された入力データ形式に対応する区切り文字を、区切り文字を表す変数separatorに代入
  if(document.getElementById("csv").checked == true){ separator = ","; } // CSV形式
  if(document.getElementById("ssv").checked == true){ separator = " "; } // SSV形式
  if(document.getElementById("tsv").checked == true){ separator = "\t"; } // TSV形式

  border = parseInt(document.getElementById("border").value); // 枠線の幅を取得して更新
  if(isNaN(border)==true){ // 枠線の幅の値が半角の数値ではない場合に
    alert("枠線の幅は、半角の数値を入力して下さい"); // アラートを表示して
    return false; // 処理を中断する
  }

  output12 = ""; // 出力用変数に空文字列を代入して初期化

  output12 += "<table border=\"" + border + "\"";
  if (flagfv) {
    output12 += " frame=\"void\"";
  }
  if (flagrn) {
    output12 += " rules=\"none\"";
  }
  if (flagma) {
    output12 += " style=\"margin-left:auto;margin-right:auto;text-align:center;\"";
  }
  output12 += ">\n";

  // 見出しタグ<th>の使用に関するモード
  if(document.getElementById("none").checked == true){ thmode=0; } // 使用しない
  if(document.getElementById("firstrow").checked == true){ thmode=1; } // 最初の行
  if(document.getElementById("firstcolumn").checked == true){ thmode=2; } // 最初の列
  if(document.getElementById("both").checked == true){ thmode=3; } // 両方

  // <th>タグのtextalignプロパティ
  if(document.getElementById("thtextalignleft").checked == true){ thtextalign="left"; } // 左揃え
  if(document.getElementById("thtextaligncenter").checked == true){ thtextalign="center"; } // 中央揃え(センタリング)
  if(document.getElementById("thtextalignright").checked == true){ thtextalign="right"; } // 右揃え

  // <td>タグのtextalignプロパティ
  if(document.getElementById("tdtextalignleft").checked == true){ tdtextalign="left"; } // 左揃え
  if(document.getElementById("tdtextaligncenter").checked == true){ tdtextalign="center"; } // 中央揃え(センタリング)
  if(document.getElementById("tdtextalignright").checked == true){ tdtextalign="right"; } // 右揃え

  if(thmode == 0){ // <th>タグを使用しない

    for(i=0;i<rows;++i){
      output12 += "<tr>\n";
      eachdata = record[i].split(separator);
      // 各行に分解されたデータを区切り文字で各値に分解して、配列eachdataに代入
      cols = eachdata.length; // 列数を算出して、列数を表す変数colsを仮の値から更新

      for(j=0;j<cols;++j){
        output12 += "<td style=\"";
        if ( flagtdbgcolor ) {
          output12 += "background-color:" + tdbgcolor + ";";
        } // td属性の背景色を指定するフラグがONなら出力
        if ( flagtdcolor ) {
          output12 += "color:" + tdcolor + ";";
        } // td属性の文字色を指定するフラグがONなら出力
        output12 += "text-align:" + tdtextalign + ";\">" + eachdata[j] + "</td>\n";
      } // 内側のforループ終了
      output12 += "</tr>\n";
    } // 外側のforループ終了

  } else if(thmode == 1){ // 最初の行のみ<th>

    output12 += "<tr>\n"; // 最初の行開始
    eachdata = record[0].split(separator);
    // データの最初の行を区切り文字で各値に分解して、配列eachdataに代入
    cols = eachdata.length; // 列数を算出して、列数を表す変数colsを仮の値から更新

      for(j=0;j<cols;++j){
        output12 += "<th style=\"";
        if ( flagthbgcolor ) {
          output12 += "background-color:" + thbgcolor + ";";
        } // th属性の背景色を指定するフラグがONなら出力
        if ( flagthcolor ) {
          output12 += "color:" + thcolor + ";";
        } // th属性の文字色を指定するフラグがONなら出力
        output12 += "text-align:" + thtextalign + ";\">" + eachdata[j] + "</th>\n";
      } // forループ終了
    output12 += "</tr>\n"; // 最初の行終了

    for(i=1;i<rows;++i){
      output12 += "<tr>\n";
      eachdata = record[i].split(separator);
      // 各行に分解されたデータを区切り文字で各値に分解して、配列eachdataに代入
      cols = eachdata.length; // 列数を算出して、列数を表す変数colsを仮の値から更新

      for(j=0;j<cols;++j){
        output12 += "<td style=\"";
        if ( flagtdbgcolor ) {
          output12 += "background-color:" + tdbgcolor + ";";
        } // td属性の背景色を指定するフラグがONなら出力
        if ( flagtdcolor ) {
          output12 += "color:" + tdcolor + ";";
        } // td属性の文字色を指定するフラグがONなら出力
        output12 += "text-align:" + tdtextalign + ";\">" + eachdata[j] + "</td>\n";
      } // 内側のforループ終了
      output12 += "</tr>\n";
    } // 外側のforループ終了

  } else if(thmode == 2){ // 最初の列のみ<th>

    for(i=0;i<rows;++i){
      output12 += "<tr>\n";
      eachdata = record[i].split(separator);
      // 各行に分解されたデータを区切り文字で各値に分解して、配列eachdataに代入
      cols = eachdata.length; // 列数を算出して、列数を表す変数colsを仮の値から更新

      // 最初の列開始
      output12 += "<th style=\"";
      if ( flagthbgcolor ) {
        output12 += "background-color:" + thbgcolor + ";";
      } // th属性の背景色を指定するフラグがONなら出力
      if ( flagthcolor ) {
        output12 += "color:" + thcolor + ";";
      } // th属性の文字色を指定するフラグがONなら出力
      output12 += "text-align:" + thtextalign + ";\">" + eachdata[0] + "</th>\n";
      // 最初の列終了

      for(j=1;j<cols;++j){
        output12 += "<td style=\"";
        if ( flagtdbgcolor ) {
          output12 += "background-color:" + tdbgcolor + ";";
        } // td属性の背景色を指定するフラグがONなら出力
        if ( flagtdcolor ) {
          output12 += "color:" + tdcolor + ";";
        } // td属性の文字色を指定するフラグがONなら出力
        output12 += "text-align:" + tdtextalign + ";\">" + eachdata[j] + "</td>\n";
      } // 内側のforループ終了
      output12 += "</tr>\n";
    } // 外側のforループ終了

  } else { // 最初の行と列の両方とも<th>

    output12 += "<tr>\n"; // 最初の行開始
    eachdata = record[0].split(separator);
    // データの最初の行を区切り文字で各値に分解して、配列eachdataに代入
    cols = eachdata.length; // 列数を算出して、列数を表す変数colsを仮の値から更新

      for(j=0;j<cols;++j){
        output12 += "<th style=\"";
        if ( flagthbgcolor ) {
          output12 += "background-color:" + thbgcolor + ";";
        } // th属性の背景色を指定するフラグがONなら出力
        if ( flagthcolor ) {
          output12 += "color:" + thcolor + ";";
        } // th属性の文字色を指定するフラグがONなら出力
        output12 += "text-align:" + thtextalign + ";\">" + eachdata[j] + "</th>\n";
      } // forループ終了
    output12 += "</tr>\n"; // 最初の行終了

    for(i=1;i<rows;++i){
      output12 += "<tr>\n";
      eachdata = record[i].split(separator);
      // 各行に分解されたデータを区切り文字で各値に分解して、配列eachdataに代入
      cols = eachdata.length; // 列数を算出して、列数を表す変数colsを仮の値から更新

      // 最初の列開始
      output12 += "<th style=\"";
      if ( flagthbgcolor ) {
        output12 += "background-color:" + thbgcolor + ";";
      } // th属性の背景色を指定するフラグがONなら出力
      if ( flagthcolor ) {
        output12 += "color:" + thcolor + ";";
      } // th属性の文字色を指定するフラグがONなら出力
      output12 += "text-align:" + thtextalign + ";\">" + eachdata[0] + "</th>\n";
      // 最初の列終了

      for(j=1;j<cols;++j){
        output12 += "<td style=\"";
        if ( flagtdbgcolor ) {
          output12 += "background-color:" + tdbgcolor + ";";
        } // td属性の背景色を指定するフラグがONなら出力
        if ( flagtdcolor ) {
          output12 += "color:" + tdcolor + ";";
        } // td属性の文字色を指定するフラグがONなら出力
        output12 += "text-align:" + tdtextalign + ";\">" + eachdata[j] + "</td>\n";
      } // 内側のforループ終了
      output12 += "</tr>\n";
    } // 外側のforループ終了

  } // if-else文終了

  output12 += "</table>";

  document.getElementById("output12").value = output12; // テキストエリア「output2」へ出力する
  document.getElementById("preview12").innerHTML = output12; // プレビューを「preview2」へ出力する
};



拾参. HTMLナンバーエンティティの検索

HTMLサイド

<form><!-- getElementByIdを使用する為、name属性を指定しない -->
初値:<input type="text" id="begin">
終値:<input type="text" id="end">
<input type="button" value="検索する" onclick="HTMLGenerator13()">
<br>
検索結果:<br>
<div id="result" style="border:solid 5px orange;padding:10px;width:400px;">
ここに検索結果のHTMLテーブルが生成される。</div><!-- ここに検索結果のHTMLテーブルが生成される。 -->
</form>

JavaScriptサイド

var input13; // HTMLナンバーエンティティの検索結果のHTMLテーブルを生成する為の変数

var HTMLGenerator13 = function(){
  var begin = parseInt(document.getElementById("begin").value);
  // テキストフィールド:「初値」欄の値を取得して整数化
  var end = parseInt(document.getElementById("end").value);
  // テキストフィールド:「終値」欄の値を取得して整数化
  var num; // ループ用変数

  if(isNaN(begin)==true){ // 初値の値が半角の数値ではない場合に
    alert("初値は、半角の数値を入力して下さい"); // アラートを表示して
    return false; // 処理を中断する
  }
  if(isNaN(end)==true){ // 終値の値が半角の数値ではない場合に
    alert("終値は、半角の数値を入力して下さい"); // アラートを表示して
    return false; // 処理を中断する
  }

  input13 = ""; // 出力用変数に空文字列を代入して初期化

  input13 += "<table border=\"5\" style=\"margin-left:auto;margin-right:auto;text-align:center;\">\n";
  for(num=begin;num<=end;++num){
    input13 += "<tr>\n";
    input13 += "<td style=\"text-align:center;\">&amp;#" + num + ";</td>\n";
    input13 += "<td style=\"text-align:center;\">&#" + num + ";</td>\n";
    input13 += "</tr>\n";
  }
  input13 += "</table>";

  document.getElementById("result").innerHTML = input13; // 生成した検索結果のHTMLテーブルを出力する
};



拾肆. ギリシャ文字(ギリシア文字)の生成

HTMLサイド

<form><!-- getElementByIdを使用する為、name属性を指定しない -->
<table border="5">
<tr>
<td style="text-align:center;">
大文字<br>
<input type="button" value="&Alpha;" style="width:40px;height:40px" onclick="HTMLGenerator14(913)">
<input type="button" value="&Beta;" style="width:40px;height:40px" onclick="HTMLGenerator14(914)">
<input type="button" value="&Gamma;" style="width:40px;height:40px" onclick="HTMLGenerator14(915)">
<input type="button" value="&Delta;" style="width:40px;height:40px" onclick="HTMLGenerator14(916)">
<input type="button" value="&Epsilon;" style="width:40px;height:40px" onclick="HTMLGenerator14(917)">
<input type="button" value="&Zeta;" style="width:40px;height:40px" onclick="HTMLGenerator14(918)">
<br>
<input type="button" value="&Eta;" style="width:40px;height:40px" onclick="HTMLGenerator14(919)">
<input type="button" value="&Theta;" style="width:40px;height:40px" onclick="HTMLGenerator14(920)">
<input type="button" value="&Iota;" style="width:40px;height:40px" onclick="HTMLGenerator14(921)">
<input type="button" value="&Kappa;" style="width:40px;height:40px" onclick="HTMLGenerator14(922)">
<input type="button" value="&Lambda;" style="width:40px;height:40px" onclick="HTMLGenerator14(923)">
<input type="button" value="&Mu;" style="width:40px;height:40px" onclick="HTMLGenerator14(924)">
<br>
<input type="button" value="&Nu;" style="width:40px;height:40px" onclick="HTMLGenerator14(925)">
<input type="button" value="&Xi;" style="width:40px;height:40px" onclick="HTMLGenerator14(926)">
<input type="button" value="&Omicron;" style="width:40px;height:40px" onclick="HTMLGenerator14(927)">
<input type="button" value="&Pi;" style="width:40px;height:40px" onclick="HTMLGenerator14(928)">
<input type="button" value="&Rho;" style="width:40px;height:40px" onclick="HTMLGenerator14(929)">
<input type="button" value="&Sigma;" style="width:40px;height:40px" onclick="HTMLGenerator14(931)">
<br>
<input type="button" value="&Tau;" style="width:40px;height:40px" onclick="HTMLGenerator14(932)">
<input type="button" value="&Upsilon;" style="width:40px;height:40px" onclick="HTMLGenerator14(933)">
<input type="button" value="&Phi;" style="width:40px;height:40px" onclick="HTMLGenerator14(934)">
<input type="button" value="&Chi;" style="width:40px;height:40px" onclick="HTMLGenerator14(935)">
<input type="button" value="&Psi;" style="width:40px;height:40px" onclick="HTMLGenerator14(936)">
<input type="button" value="&Omega;" style="width:40px;height:40px" onclick="HTMLGenerator14(937)">
<br><hr>
小文字<br>
<input type="button" value="&alpha;" style="width:40px;height:40px" onclick="HTMLGenerator14(945)">
<input type="button" value="&beta;" style="width:40px;height:40px" onclick="HTMLGenerator14(946)">
<input type="button" value="&gamma;" style="width:40px;height:40px" onclick="HTMLGenerator14(947)">
<input type="button" value="&delta;" style="width:40px;height:40px" onclick="HTMLGenerator14(948)">
<input type="button" value="&epsilon;" style="width:40px;height:40px" onclick="HTMLGenerator14(949)">
<br>
<input type="button" value="&zeta;" style="width:40px;height:40px" onclick="HTMLGenerator14(950)">
<input type="button" value="&eta;" style="width:40px;height:40px" onclick="HTMLGenerator14(951)">
<input type="button" value="&theta;" style="width:40px;height:40px" onclick="HTMLGenerator14(952)">
<input type="button" value="&iota;" style="width:40px;height:40px" onclick="HTMLGenerator14(953)">
<input type="button" value="&kappa;" style="width:40px;height:40px" onclick="HTMLGenerator14(954)">
<br>
<input type="button" value="&lambda;" style="width:40px;height:40px" onclick="HTMLGenerator14(955)">
<input type="button" value="&mu;" style="width:40px;height:40px" onclick="HTMLGenerator14(956)">
<input type="button" value="&nu;" style="width:40px;height:40px" onclick="HTMLGenerator14(957)">
<input type="button" value="&xi;" style="width:40px;height:40px" onclick="HTMLGenerator14(958)">
<input type="button" value="&omicron;" style="width:40px;height:40px" onclick="HTMLGenerator14(959)">
<br>
<input type="button" value="&pi;" style="width:40px;height:40px" onclick="HTMLGenerator14(960)">
<input type="button" value="&rho;" style="width:40px;height:40px" onclick="HTMLGenerator14(961)">
<input type="button" value="&sigmaf;" style="width:40px;height:40px" onclick="HTMLGenerator14(962)">
<input type="button" value="&sigma;" style="width:40px;height:40px" onclick="HTMLGenerator14(963)">
<input type="button" value="&tau;" style="width:40px;height:40px" onclick="HTMLGenerator14(964)">
<br>
<input type="button" value="&upsilon;" style="width:40px;height:40px" onclick="HTMLGenerator14(965)">
<input type="button" value="&phi;" style="width:40px;height:40px" onclick="HTMLGenerator14(966)">
<input type="button" value="&chi;" style="width:40px;height:40px" onclick="HTMLGenerator14(967)">
<input type="button" value="&psi;" style="width:40px;height:40px" onclick="HTMLGenerator14(968)">
<input type="button" value="&omega;" style="width:40px;height:40px" onclick="HTMLGenerator14(969)">
<br></td>
<td style="text-align:center;">
記号と数字<br>
<input type="button" value="&#33;" style="width:40px;height:40px" onclick="HTMLGenerator14(33)">
<input type="button" value="&#34;" style="width:40px;height:40px" onclick="HTMLGenerator14(34)">
<input type="button" value="&#35;" style="width:40px;height:40px" onclick="HTMLGenerator14(35)">
<input type="button" value="&#36;" style="width:40px;height:40px" onclick="HTMLGenerator14(36)">
<input type="button" value="&#37;" style="width:40px;height:40px" onclick="HTMLGenerator14(37)">
<input type="button" value="&#38;" style="width:40px;height:40px" onclick="HTMLGenerator14(38)">
<input type="button" value="&#39;" style="width:40px;height:40px" onclick="HTMLGenerator14(39)">
<br>
<input type="button" value="&#40;" style="width:40px;height:40px" onclick="HTMLGenerator14(40)">
<input type="button" value="&#41;" style="width:40px;height:40px" onclick="HTMLGenerator14(41)">
<input type="button" value="&#42;" style="width:40px;height:40px" onclick="HTMLGenerator14(42)">
<input type="button" value="&#43;" style="width:40px;height:40px" onclick="HTMLGenerator14(43)">
<input type="button" value="&#44;" style="width:40px;height:40px" onclick="HTMLGenerator14(44)">
<input type="button" value="&#45;" style="width:40px;height:40px" onclick="HTMLGenerator14(45)">
<input type="button" value="&#46;" style="width:40px;height:40px" onclick="HTMLGenerator14(46)">
<br>
<input type="button" value="&#47;" style="width:40px;height:40px" onclick="HTMLGenerator14(47)">
<input type="button" value="&#48;" style="width:40px;height:40px" onclick="HTMLGenerator14(48)">
<input type="button" value="&#49;" style="width:40px;height:40px" onclick="HTMLGenerator14(49)">
<input type="button" value="&#50;" style="width:40px;height:40px" onclick="HTMLGenerator14(50)">
<input type="button" value="&#51;" style="width:40px;height:40px" onclick="HTMLGenerator14(51)">
<input type="button" value="&#52;" style="width:40px;height:40px" onclick="HTMLGenerator14(52)">
<input type="button" value="&#53;" style="width:40px;height:40px" onclick="HTMLGenerator14(53)">
<br>
<input type="button" value="&#54;" style="width:40px;height:40px" onclick="HTMLGenerator14(54)">
<input type="button" value="&#55;" style="width:40px;height:40px" onclick="HTMLGenerator14(55)">
<input type="button" value="&#56;" style="width:40px;height:40px" onclick="HTMLGenerator14(56)">
<input type="button" value="&#57;" style="width:40px;height:40px" onclick="HTMLGenerator14(57)">
<input type="button" value="&#58;" style="width:40px;height:40px" onclick="HTMLGenerator14(58)">
<input type="button" value="&#59;" style="width:40px;height:40px" onclick="HTMLGenerator14(59)">
<input type="button" value="&#60;" style="width:40px;height:40px" onclick="HTMLGenerator14(60)">
<br>
<input type="button" value="&#61;" style="width:40px;height:40px" onclick="HTMLGenerator14(61)">
<input type="button" value="&#62;" style="width:40px;height:40px" onclick="HTMLGenerator14(62)">
<input type="button" value="&#63;" style="width:40px;height:40px" onclick="HTMLGenerator14(63)">
<input type="button" value="&#64;" style="width:40px;height:40px" onclick="HTMLGenerator14(64)">
<input type="button" value="&#91;" style="width:40px;height:40px" onclick="HTMLGenerator14(91)">
<input type="button" value="&#92;" style="width:40px;height:40px" onclick="HTMLGenerator14(92)">
<input type="button" value="&#93;" style="width:40px;height:40px" onclick="HTMLGenerator14(93)">
<br>
<input type="button" value="&#94;" style="width:40px;height:40px" onclick="HTMLGenerator14(94)">
<input type="button" value="&#95;" style="width:40px;height:40px" onclick="HTMLGenerator14(95)">
<input type="button" value="&#96;" style="width:40px;height:40px" onclick="HTMLGenerator14(96)">
<input type="button" value="&#123;" style="width:40px;height:40px" onclick="HTMLGenerator14(123)">
<input type="button" value="&#124;" style="width:40px;height:40px" onclick="HTMLGenerator14(124)">
<input type="button" value="&#125;" style="width:40px;height:40px" onclick="HTMLGenerator14(125)">
<input type="button" value="&#126;" style="width:40px;height:40px" onclick="HTMLGenerator14(126)">
<br>
<input type="button" value="半角スペース" style="width:120px;height:40px" onclick="HTMLGenerator14(160)">
<br><hr>
その他の機能<br>
<input type="button" value="改行" style="width:40px;height:40px" onclick="breakline14()">
<input type="button" value="全削除" style="width:60px;height:40px" onclick="delete14()">
</td>
<td style="text-align:center;">
<textarea id="output14" rows="25" cols="50"></textarea><!-- 出力のみなので、テキストエリア名は、「output14」 -->
<br>
プレビュー:<br>
<div id="preview14" style="border:solid 5px orange;padding:10px;width:400px;">
ここにプレビューが生成される。</div><!-- ここにプレビューが生成される。 -->
</td>
</tr>
</table>
</form>

JavaScriptサイド

var input14 = ""; // テキストエリア「output14」へ入力する為の変数に空文字列を代入して初期化

var HTMLGenerator14 = function(numG){
  input14 += "&#" + numG + ";";
  document.getElementById("output14").value = input14; // テキストエリア「output14」へ出力する
  document.getElementById("preview14").innerHTML = input14; // プレビューを「preview14」へ出力する
};

var breakline14 = function(){
  input14 += "<br>\n";
  document.getElementById("output14").value = input14; // テキストエリア「output14」へ出力する
  document.getElementById("preview14").innerHTML = input14; // プレビューを「preview14」へ出力する
};

var delete14 = function(){
  input14 = "";
  document.getElementById("output14").value = input14; // テキストエリア「output14」へ出力する
  document.getElementById("preview14").innerHTML = input14; // プレビューを「preview14」へ出力する
};



拾伍. フラクトゥール(ドイツの旧字体)の生成

HTMLサイド

<form><!-- getElementByIdを使用する為、name属性を指定しない -->
<table border="5">
<tr>
<td style="text-align:center;">
大文字<br>
<input type="button" value="&#120068;" style="width:40px;height:40px" onclick="HTMLGenerator15(120068)">
<input type="button" value="&#120069;" style="width:40px;height:40px" onclick="HTMLGenerator15(120069)">
<input type="button" value="&#8493;" style="width:40px;height:40px" onclick="HTMLGenerator15(8493)">
<input type="button" value="&#120071;" style="width:40px;height:40px" onclick="HTMLGenerator15(120071)">
<input type="button" value="&#120072;" style="width:40px;height:40px" onclick="HTMLGenerator15(120072)">
<input type="button" value="&#120073;" style="width:40px;height:40px" onclick="HTMLGenerator15(120073)">
<input type="button" value="&#120074;" style="width:40px;height:40px" onclick="HTMLGenerator15(120074)">
<input type="button" value="&#8460;" style="width:40px;height:40px" onclick="HTMLGenerator15(8460)">
<input type="button" value="&#8465;" style="width:40px;height:40px" onclick="HTMLGenerator15(8465)">
<br>
<input type="button" value="&#120077;" style="width:40px;height:40px" onclick="HTMLGenerator15(120077)">
<input type="button" value="&#120078;" style="width:40px;height:40px" onclick="HTMLGenerator15(120078)">
<input type="button" value="&#120079;" style="width:40px;height:40px" onclick="HTMLGenerator15(120079)">
<input type="button" value="&#120080;" style="width:40px;height:40px" onclick="HTMLGenerator15(120080)">
<input type="button" value="&#120081;" style="width:40px;height:40px" onclick="HTMLGenerator15(120081)">
<input type="button" value="&#120082;" style="width:40px;height:40px" onclick="HTMLGenerator15(120082)">
<input type="button" value="&#120083;" style="width:40px;height:40px" onclick="HTMLGenerator15(120083)">
<input type="button" value="&#120084;" style="width:40px;height:40px" onclick="HTMLGenerator15(120084)">
<br>
<input type="button" value="&#8476;" style="width:40px;height:40px" onclick="HTMLGenerator15(8476)">
<input type="button" value="&#120086;" style="width:40px;height:40px" onclick="HTMLGenerator15(120086)">
<input type="button" value="&#120087;" style="width:40px;height:40px" onclick="HTMLGenerator15(120087)">
<input type="button" value="&#120088;" style="width:40px;height:40px" onclick="HTMLGenerator15(120088)">
<input type="button" value="&#120089;" style="width:40px;height:40px" onclick="HTMLGenerator15(120089)">
<input type="button" value="&#120090;" style="width:40px;height:40px" onclick="HTMLGenerator15(120090)">
<input type="button" value="&#120091;" style="width:40px;height:40px" onclick="HTMLGenerator15(120091)">
<input type="button" value="&#120092;" style="width:40px;height:40px" onclick="HTMLGenerator15(120092)">
<input type="button" value="&#8488;" style="width:40px;height:40px" onclick="HTMLGenerator15(8488)">
<br><hr>
小文字<br>
<input type="button" value="&#120094;" style="width:40px;height:40px" onclick="HTMLGenerator15(120094)">
<input type="button" value="&#120095;" style="width:40px;height:40px" onclick="HTMLGenerator15(120095)">
<input type="button" value="&#120096;" style="width:40px;height:40px" onclick="HTMLGenerator15(120096)">
<input type="button" value="&#120097;" style="width:40px;height:40px" onclick="HTMLGenerator15(120097)">
<input type="button" value="&#120098;" style="width:40px;height:40px" onclick="HTMLGenerator15(120098)">
<input type="button" value="&#120099;" style="width:40px;height:40px" onclick="HTMLGenerator15(120099)">
<input type="button" value="&#120100;" style="width:40px;height:40px" onclick="HTMLGenerator15(120100)">
<input type="button" value="&#120101;" style="width:40px;height:40px" onclick="HTMLGenerator15(120101)">
<input type="button" value="&#120102;" style="width:40px;height:40px" onclick="HTMLGenerator15(120102)">
<br>
<input type="button" value="&#120103;" style="width:40px;height:40px" onclick="HTMLGenerator15(120103)">
<input type="button" value="&#120104;" style="width:40px;height:40px" onclick="HTMLGenerator15(120104)">
<input type="button" value="&#120105;" style="width:40px;height:40px" onclick="HTMLGenerator15(120105)">
<input type="button" value="&#120106;" style="width:40px;height:40px" onclick="HTMLGenerator15(120106)">
<input type="button" value="&#120107;" style="width:40px;height:40px" onclick="HTMLGenerator15(120107)">
<input type="button" value="&#120108;" style="width:40px;height:40px" onclick="HTMLGenerator15(120108)">
<input type="button" value="&#120109;" style="width:40px;height:40px" onclick="HTMLGenerator15(120109)">
<input type="button" value="&#120110;" style="width:40px;height:40px" onclick="HTMLGenerator15(120110)">
<br>
<input type="button" value="&#120111;" style="width:40px;height:40px" onclick="HTMLGenerator15(120111)">
<input type="button" value="&#120112;" style="width:40px;height:40px" onclick="HTMLGenerator15(120112)">
<input type="button" value="&#120113;" style="width:40px;height:40px" onclick="HTMLGenerator15(120113)">
<input type="button" value="&#120114;" style="width:40px;height:40px" onclick="HTMLGenerator15(120114)">
<input type="button" value="&#120115;" style="width:40px;height:40px" onclick="HTMLGenerator15(120115)">
<input type="button" value="&#120116;" style="width:40px;height:40px" onclick="HTMLGenerator15(120116)">
<input type="button" value="&#120117;" style="width:40px;height:40px" onclick="HTMLGenerator15(120117)">
<input type="button" value="&#120118;" style="width:40px;height:40px" onclick="HTMLGenerator15(120118)">
<input type="button" value="&#120119;" style="width:40px;height:40px" onclick="HTMLGenerator15(120119)">
<br><hr>
大文字(ボールド)<br>
<input type="button" value="&#120172;" style="width:40px;height:40px" onclick="HTMLGenerator15(120172)">
<input type="button" value="&#120173;" style="width:40px;height:40px" onclick="HTMLGenerator15(120173)">
<input type="button" value="&#120174;" style="width:40px;height:40px" onclick="HTMLGenerator15(120174)">
<input type="button" value="&#120175;" style="width:40px;height:40px" onclick="HTMLGenerator15(120175)">
<input type="button" value="&#120176;" style="width:40px;height:40px" onclick="HTMLGenerator15(120176)">
<input type="button" value="&#120177;" style="width:40px;height:40px" onclick="HTMLGenerator15(120177)">
<input type="button" value="&#120178;" style="width:40px;height:40px" onclick="HTMLGenerator15(120178)">
<input type="button" value="&#120179;" style="width:40px;height:40px" onclick="HTMLGenerator15(120179)">
<input type="button" value="&#120180;" style="width:40px;height:40px" onclick="HTMLGenerator15(120180)">
<br>
<input type="button" value="&#120181;" style="width:40px;height:40px" onclick="HTMLGenerator15(120181)">
<input type="button" value="&#120182;" style="width:40px;height:40px" onclick="HTMLGenerator15(120182)">
<input type="button" value="&#120183;" style="width:40px;height:40px" onclick="HTMLGenerator15(120183)">
<input type="button" value="&#120184;" style="width:40px;height:40px" onclick="HTMLGenerator15(120184)">
<input type="button" value="&#120185;" style="width:40px;height:40px" onclick="HTMLGenerator15(120185)">
<input type="button" value="&#120186;" style="width:40px;height:40px" onclick="HTMLGenerator15(120186)">
<input type="button" value="&#120187;" style="width:40px;height:40px" onclick="HTMLGenerator15(120187)">
<input type="button" value="&#120188;" style="width:40px;height:40px" onclick="HTMLGenerator15(120188)">
<br>
<input type="button" value="&#120189;" style="width:40px;height:40px" onclick="HTMLGenerator15(120189)">
<input type="button" value="&#120190;" style="width:40px;height:40px" onclick="HTMLGenerator15(120190)">
<input type="button" value="&#120191;" style="width:40px;height:40px" onclick="HTMLGenerator15(120191)">
<input type="button" value="&#120192;" style="width:40px;height:40px" onclick="HTMLGenerator15(120192)">
<input type="button" value="&#120193;" style="width:40px;height:40px" onclick="HTMLGenerator15(120193)">
<input type="button" value="&#120194;" style="width:40px;height:40px" onclick="HTMLGenerator15(120194)">
<input type="button" value="&#120195;" style="width:40px;height:40px" onclick="HTMLGenerator15(120195)">
<input type="button" value="&#120196;" style="width:40px;height:40px" onclick="HTMLGenerator15(120196)">
<input type="button" value="&#120197;" style="width:40px;height:40px" onclick="HTMLGenerator15(120197)">
<br><hr>
小文字(ボールド)<br>
<input type="button" value="&#120198;" style="width:40px;height:40px" onclick="HTMLGenerator15(120198)">
<input type="button" value="&#120199;" style="width:40px;height:40px" onclick="HTMLGenerator15(120199)">
<input type="button" value="&#120200;" style="width:40px;height:40px" onclick="HTMLGenerator15(120200)">
<input type="button" value="&#120201;" style="width:40px;height:40px" onclick="HTMLGenerator15(120201)">
<input type="button" value="&#120202;" style="width:40px;height:40px" onclick="HTMLGenerator15(120202)">
<input type="button" value="&#120203;" style="width:40px;height:40px" onclick="HTMLGenerator15(120203)">
<input type="button" value="&#120204;" style="width:40px;height:40px" onclick="HTMLGenerator15(120204)">
<input type="button" value="&#120205;" style="width:40px;height:40px" onclick="HTMLGenerator15(120205)">
<input type="button" value="&#120206;" style="width:40px;height:40px" onclick="HTMLGenerator15(120206)">
<br>
<input type="button" value="&#120207;" style="width:40px;height:40px" onclick="HTMLGenerator15(120207)">
<input type="button" value="&#120208;" style="width:40px;height:40px" onclick="HTMLGenerator15(120208)">
<input type="button" value="&#120209;" style="width:40px;height:40px" onclick="HTMLGenerator15(120209)">
<input type="button" value="&#120210;" style="width:40px;height:40px" onclick="HTMLGenerator15(120210)">
<input type="button" value="&#120211;" style="width:40px;height:40px" onclick="HTMLGenerator15(120211)">
<input type="button" value="&#120212;" style="width:40px;height:40px" onclick="HTMLGenerator15(120212)">
<input type="button" value="&#120213;" style="width:40px;height:40px" onclick="HTMLGenerator15(120213)">
<input type="button" value="&#120214;" style="width:40px;height:40px" onclick="HTMLGenerator15(120214)">
<br>
<input type="button" value="&#120215;" style="width:40px;height:40px" onclick="HTMLGenerator15(120215)">
<input type="button" value="&#120216;" style="width:40px;height:40px" onclick="HTMLGenerator15(120216)">
<input type="button" value="&#120217;" style="width:40px;height:40px" onclick="HTMLGenerator15(120217)">
<input type="button" value="&#120218;" style="width:40px;height:40px" onclick="HTMLGenerator15(120218)">
<input type="button" value="&#120219;" style="width:40px;height:40px" onclick="HTMLGenerator15(120219)">
<input type="button" value="&#120220;" style="width:40px;height:40px" onclick="HTMLGenerator15(120220)">
<input type="button" value="&#120221;" style="width:40px;height:40px" onclick="HTMLGenerator15(120221)">
<input type="button" value="&#120222;" style="width:40px;height:40px" onclick="HTMLGenerator15(120222)">
<input type="button" value="&#120223;" style="width:40px;height:40px" onclick="HTMLGenerator15(120223)">
<br></td>
<td style="text-align:center;">
記号と数字<br>
<input type="button" value="&#33;" style="width:40px;height:40px" onclick="HTMLGenerator15(33)">
<input type="button" value="&#34;" style="width:40px;height:40px" onclick="HTMLGenerator15(34)">
<input type="button" value="&#35;" style="width:40px;height:40px" onclick="HTMLGenerator15(35)">
<input type="button" value="&#36;" style="width:40px;height:40px" onclick="HTMLGenerator15(36)">
<input type="button" value="&#37;" style="width:40px;height:40px" onclick="HTMLGenerator15(37)">
<input type="button" value="&#38;" style="width:40px;height:40px" onclick="HTMLGenerator15(38)">
<input type="button" value="&#39;" style="width:40px;height:40px" onclick="HTMLGenerator15(39)">
<br>
<input type="button" value="&#40;" style="width:40px;height:40px" onclick="HTMLGenerator15(40)">
<input type="button" value="&#41;" style="width:40px;height:40px" onclick="HTMLGenerator15(41)">
<input type="button" value="&#42;" style="width:40px;height:40px" onclick="HTMLGenerator15(42)">
<input type="button" value="&#43;" style="width:40px;height:40px" onclick="HTMLGenerator15(43)">
<input type="button" value="&#44;" style="width:40px;height:40px" onclick="HTMLGenerator15(44)">
<input type="button" value="&#45;" style="width:40px;height:40px" onclick="HTMLGenerator15(45)">
<input type="button" value="&#46;" style="width:40px;height:40px" onclick="HTMLGenerator15(46)">
<br>
<input type="button" value="&#47;" style="width:40px;height:40px" onclick="HTMLGenerator15(47)">
<input type="button" value="&#48;" style="width:40px;height:40px" onclick="HTMLGenerator15(48)">
<input type="button" value="&#49;" style="width:40px;height:40px" onclick="HTMLGenerator15(49)">
<input type="button" value="&#50;" style="width:40px;height:40px" onclick="HTMLGenerator15(50)">
<input type="button" value="&#51;" style="width:40px;height:40px" onclick="HTMLGenerator15(51)">
<input type="button" value="&#52;" style="width:40px;height:40px" onclick="HTMLGenerator15(52)">
<input type="button" value="&#53;" style="width:40px;height:40px" onclick="HTMLGenerator15(53)">
<br>
<input type="button" value="&#54;" style="width:40px;height:40px" onclick="HTMLGenerator15(54)">
<input type="button" value="&#55;" style="width:40px;height:40px" onclick="HTMLGenerator15(55)">
<input type="button" value="&#56;" style="width:40px;height:40px" onclick="HTMLGenerator15(56)">
<input type="button" value="&#57;" style="width:40px;height:40px" onclick="HTMLGenerator15(57)">
<input type="button" value="&#58;" style="width:40px;height:40px" onclick="HTMLGenerator15(58)">
<input type="button" value="&#59;" style="width:40px;height:40px" onclick="HTMLGenerator15(59)">
<input type="button" value="&#60;" style="width:40px;height:40px" onclick="HTMLGenerator15(60)">
<br>
<input type="button" value="&#61;" style="width:40px;height:40px" onclick="HTMLGenerator15(61)">
<input type="button" value="&#62;" style="width:40px;height:40px" onclick="HTMLGenerator15(62)">
<input type="button" value="&#63;" style="width:40px;height:40px" onclick="HTMLGenerator15(63)">
<input type="button" value="&#64;" style="width:40px;height:40px" onclick="HTMLGenerator15(64)">
<input type="button" value="&#91;" style="width:40px;height:40px" onclick="HTMLGenerator15(91)">
<input type="button" value="&#92;" style="width:40px;height:40px" onclick="HTMLGenerator15(92)">
<input type="button" value="&#93;" style="width:40px;height:40px" onclick="HTMLGenerator15(93)">
<br>
<input type="button" value="&#94;" style="width:40px;height:40px" onclick="HTMLGenerator15(94)">
<input type="button" value="&#95;" style="width:40px;height:40px" onclick="HTMLGenerator15(95)">
<input type="button" value="&#96;" style="width:40px;height:40px" onclick="HTMLGenerator15(96)">
<input type="button" value="&#123;" style="width:40px;height:40px" onclick="HTMLGenerator15(123)">
<input type="button" value="&#124;" style="width:40px;height:40px" onclick="HTMLGenerator15(124)">
<input type="button" value="&#125;" style="width:40px;height:40px" onclick="HTMLGenerator15(125)">
<input type="button" value="&#126;" style="width:40px;height:40px" onclick="HTMLGenerator15(126)">
<br>
<input type="button" value="半角スペース" style="width:120px;height:40px" onclick="HTMLGenerator15(160)">
<br><hr>
その他の機能<br>
<input type="button" value="改行" style="width:60px;height:40px" onclick="breakline15()">
<input type="button" value="全削除" style="width:60px;height:40px" onclick="delete15()">
</td>
<td style="text-align:center;">
<textarea id="output15" rows="25" cols="50"></textarea><!-- 出力のみなので、テキストエリア名は、「output15」 -->
<br>
プレビュー:<br>
<div id="preview15" style="border:solid 5px orange;padding:10px;width:400px;">
ここにプレビューが生成される。</div><!-- ここにプレビューが生成される。 -->
</td>
</tr>
</table>
</form>

JavaScriptサイド

var input15 = ""; // テキストエリア「output15」へ入力する為の変数に空文字列を代入して初期化

var HTMLGenerator15 = function(numF){
  input15 += "&#" + numF + ";";
  document.getElementById("output15").value = input15; // テキストエリア「output15」へ出力する
  document.getElementById("preview15").innerHTML = input15; // プレビューを「preview15」へ出力する
};

var breakline15 = function(){
  input15 += "<br>\n";
  document.getElementById("output15").value = input15; // テキストエリア「output15」へ出力する
  document.getElementById("preview15").innerHTML = input15; // プレビューを「preview15」へ出力する
};

var delete15 = function(){
  input15 = "";
  document.getElementById("output15").value = input15; // テキストエリア「output15」へ出力する
  document.getElementById("preview15").innerHTML = input15; // プレビューを「preview15」へ出力する
};



拾陸. キリル文字の生成

HTMLサイド

<form><!-- getElementByIdを使用する為、name属性を指定しない -->
<table border="5">
<tr>
<td style="text-align:center;">
大文字<br>
<input type="button" value="&#1040;" style="width:40px;height:40px" onclick="HTMLGenerator16(1040)">
<input type="button" value="&#1041;" style="width:40px;height:40px" onclick="HTMLGenerator16(1041)">
<input type="button" value="&#1042;" style="width:40px;height:40px" onclick="HTMLGenerator16(1042)">
<input type="button" value="&#1043;" style="width:40px;height:40px" onclick="HTMLGenerator16(1043)">
<input type="button" value="&#1044;" style="width:40px;height:40px" onclick="HTMLGenerator16(1044)">
<input type="button" value="&#1045;" style="width:40px;height:40px" onclick="HTMLGenerator16(1045)">
<input type="button" value="&#1025;" style="width:40px;height:40px" onclick="HTMLGenerator16(1025)">
<br>
<input type="button" value="&#1046;" style="width:40px;height:40px" onclick="HTMLGenerator16(1046)">
<input type="button" value="&#1047;" style="width:40px;height:40px" onclick="HTMLGenerator16(1047)">
<input type="button" value="&#1048;" style="width:40px;height:40px" onclick="HTMLGenerator16(1048)">
<input type="button" value="&#1049;" style="width:40px;height:40px" onclick="HTMLGenerator16(1049)">
<input type="button" value="&#1050;" style="width:40px;height:40px" onclick="HTMLGenerator16(1050)">
<input type="button" value="&#1051;" style="width:40px;height:40px" onclick="HTMLGenerator16(1051)">
<input type="button" value="&#1052;" style="width:40px;height:40px" onclick="HTMLGenerator16(1052)">
<br>
<input type="button" value="&#1053;" style="width:40px;height:40px" onclick="HTMLGenerator16(1053)">
<input type="button" value="&#1054;" style="width:40px;height:40px" onclick="HTMLGenerator16(1054)">
<input type="button" value="&#1256;" style="background-color:#ffa500;width:40px;height:40px" onclick="HTMLGenerator16(1256)">
<input type="button" value="&#1055;" style="width:40px;height:40px" onclick="HTMLGenerator16(1055)">
<input type="button" value="&#1056;" style="width:40px;height:40px" onclick="HTMLGenerator16(1056)">
<input type="button" value="&#1057;" style="width:40px;height:40px" onclick="HTMLGenerator16(1057)">
<input type="button" value="&#1058;" style="width:40px;height:40px" onclick="HTMLGenerator16(1058)">
<br>
<input type="button" value="&#1059;" style="width:40px;height:40px" onclick="HTMLGenerator16(1059)">
<input type="button" value="&#1198;" style="background-color:#ffa500;width:40px;height:40px" onclick="HTMLGenerator16(1198)">
<input type="button" value="&#1060;" style="width:40px;height:40px" onclick="HTMLGenerator16(1060)">
<input type="button" value="&#1061;" style="width:40px;height:40px" onclick="HTMLGenerator16(1061)">
<input type="button" value="&#1062;" style="width:40px;height:40px" onclick="HTMLGenerator16(1062)">
<input type="button" value="&#1063;" style="width:40px;height:40px" onclick="HTMLGenerator16(1063)">
<input type="button" value="&#1064;" style="width:40px;height:40px" onclick="HTMLGenerator16(1064)">
<br>
<input type="button" value="&#1065;" style="width:40px;height:40px" onclick="HTMLGenerator16(1065)">
<input type="button" value="&#1066;" style="width:40px;height:40px" onclick="HTMLGenerator16(1066)">
<input type="button" value="&#1067;" style="width:40px;height:40px" onclick="HTMLGenerator16(1067)">
<input type="button" value="&#1068;" style="width:40px;height:40px" onclick="HTMLGenerator16(1068)">
<input type="button" value="&#1069;" style="width:40px;height:40px" onclick="HTMLGenerator16(1069)">
<input type="button" value="&#1070;" style="width:40px;height:40px" onclick="HTMLGenerator16(1070)">
<input type="button" value="&#1071;" style="width:40px;height:40px" onclick="HTMLGenerator16(1071)">
<br><hr>
小文字<br>
<input type="button" value="&#1072;" style="width:40px;height:40px" onclick="HTMLGenerator16(1072)">
<input type="button" value="&#1073;" style="width:40px;height:40px" onclick="HTMLGenerator16(1073)">
<input type="button" value="&#1074;" style="width:40px;height:40px" onclick="HTMLGenerator16(1074)">
<input type="button" value="&#1075;" style="width:40px;height:40px" onclick="HTMLGenerator16(1075)">
<input type="button" value="&#1076;" style="width:40px;height:40px" onclick="HTMLGenerator16(1076)">
<input type="button" value="&#1077;" style="width:40px;height:40px" onclick="HTMLGenerator16(1077)">
<input type="button" value="&#1105;" style="width:40px;height:40px" onclick="HTMLGenerator16(1105)">
<br>
<input type="button" value="&#1078;" style="width:40px;height:40px" onclick="HTMLGenerator16(1078)">
<input type="button" value="&#1079;" style="width:40px;height:40px" onclick="HTMLGenerator16(1079)">
<input type="button" value="&#1080;" style="width:40px;height:40px" onclick="HTMLGenerator16(1080)">
<input type="button" value="&#1081;" style="width:40px;height:40px" onclick="HTMLGenerator16(1081)">
<input type="button" value="&#1082;" style="width:40px;height:40px" onclick="HTMLGenerator16(1082)">
<input type="button" value="&#1083;" style="width:40px;height:40px" onclick="HTMLGenerator16(1083)">
<input type="button" value="&#1084;" style="width:40px;height:40px" onclick="HTMLGenerator16(1084)">
<br>
<input type="button" value="&#1085;" style="width:40px;height:40px" onclick="HTMLGenerator16(1085)">
<input type="button" value="&#1086;" style="width:40px;height:40px" onclick="HTMLGenerator16(1086)">
<input type="button" value="&#1257;" style="background-color:#ffa500;width:40px;height:40px" onclick="HTMLGenerator16(1257)">
<input type="button" value="&#1087;" style="width:40px;height:40px" onclick="HTMLGenerator16(1087)">
<input type="button" value="&#1088;" style="width:40px;height:40px" onclick="HTMLGenerator16(1088)">
<input type="button" value="&#1089;" style="width:40px;height:40px" onclick="HTMLGenerator16(1089)">
<input type="button" value="&#1090;" style="width:40px;height:40px" onclick="HTMLGenerator16(1090)">
<br>
<input type="button" value="&#1091;" style="width:40px;height:40px" onclick="HTMLGenerator16(1091)">
<input type="button" value="&#1199;" style="background-color:#ffa500;width:40px;height:40px" onclick="HTMLGenerator16(1199)">
<input type="button" value="&#1092;" style="width:40px;height:40px" onclick="HTMLGenerator16(1092)">
<input type="button" value="&#1093;" style="width:40px;height:40px" onclick="HTMLGenerator16(1093)">
<input type="button" value="&#1094;" style="width:40px;height:40px" onclick="HTMLGenerator16(1094)">
<input type="button" value="&#1095;" style="width:40px;height:40px" onclick="HTMLGenerator16(1095)">
<input type="button" value="&#1096;" style="width:40px;height:40px" onclick="HTMLGenerator16(1096)">
<br>
<input type="button" value="&#1097;" style="width:40px;height:40px" onclick="HTMLGenerator16(1097)">
<input type="button" value="&#1098;" style="width:40px;height:40px" onclick="HTMLGenerator16(1098)">
<input type="button" value="&#1099;" style="width:40px;height:40px" onclick="HTMLGenerator16(1099)">
<input type="button" value="&#1100;" style="width:40px;height:40px" onclick="HTMLGenerator16(1100)">
<input type="button" value="&#1101;" style="width:40px;height:40px" onclick="HTMLGenerator16(1101)">
<input type="button" value="&#1102;" style="width:40px;height:40px" onclick="HTMLGenerator16(1102)">
<input type="button" value="&#1103;" style="width:40px;height:40px" onclick="HTMLGenerator16(1103)">
<br></td>
<td style="text-align:center;">
記号と数字<br>
<input type="button" value="&#33;" style="width:40px;height:40px" onclick="HTMLGenerator16(33)">
<input type="button" value="&#34;" style="width:40px;height:40px" onclick="HTMLGenerator16(34)">
<input type="button" value="&#35;" style="width:40px;height:40px" onclick="HTMLGenerator16(35)">
<input type="button" value="&#36;" style="width:40px;height:40px" onclick="HTMLGenerator16(36)">
<input type="button" value="&#37;" style="width:40px;height:40px" onclick="HTMLGenerator16(37)">
<input type="button" value="&#38;" style="width:40px;height:40px" onclick="HTMLGenerator16(38)">
<input type="button" value="&#39;" style="width:40px;height:40px" onclick="HTMLGenerator16(39)">
<br>
<input type="button" value="&#40;" style="width:40px;height:40px" onclick="HTMLGenerator16(40)">
<input type="button" value="&#41;" style="width:40px;height:40px" onclick="HTMLGenerator16(41)">
<input type="button" value="&#42;" style="width:40px;height:40px" onclick="HTMLGenerator16(42)">
<input type="button" value="&#43;" style="width:40px;height:40px" onclick="HTMLGenerator16(43)">
<input type="button" value="&#44;" style="width:40px;height:40px" onclick="HTMLGenerator16(44)">
<input type="button" value="&#45;" style="width:40px;height:40px" onclick="HTMLGenerator16(45)">
<input type="button" value="&#46;" style="width:40px;height:40px" onclick="HTMLGenerator16(46)">
<br>
<input type="button" value="&#47;" style="width:40px;height:40px" onclick="HTMLGenerator16(47)">
<input type="button" value="&#48;" style="width:40px;height:40px" onclick="HTMLGenerator16(48)">
<input type="button" value="&#49;" style="width:40px;height:40px" onclick="HTMLGenerator16(49)">
<input type="button" value="&#50;" style="width:40px;height:40px" onclick="HTMLGenerator16(50)">
<input type="button" value="&#51;" style="width:40px;height:40px" onclick="HTMLGenerator16(51)">
<input type="button" value="&#52;" style="width:40px;height:40px" onclick="HTMLGenerator16(52)">
<input type="button" value="&#53;" style="width:40px;height:40px" onclick="HTMLGenerator16(53)">
<br>
<input type="button" value="&#54;" style="width:40px;height:40px" onclick="HTMLGenerator16(54)">
<input type="button" value="&#55;" style="width:40px;height:40px" onclick="HTMLGenerator16(55)">
<input type="button" value="&#56;" style="width:40px;height:40px" onclick="HTMLGenerator16(56)">
<input type="button" value="&#57;" style="width:40px;height:40px" onclick="HTMLGenerator16(57)">
<input type="button" value="&#58;" style="width:40px;height:40px" onclick="HTMLGenerator16(58)">
<input type="button" value="&#59;" style="width:40px;height:40px" onclick="HTMLGenerator16(59)">
<input type="button" value="&#60;" style="width:40px;height:40px" onclick="HTMLGenerator16(60)">
<br>
<input type="button" value="&#61;" style="width:40px;height:40px" onclick="HTMLGenerator16(61)">
<input type="button" value="&#62;" style="width:40px;height:40px" onclick="HTMLGenerator16(62)">
<input type="button" value="&#63;" style="width:40px;height:40px" onclick="HTMLGenerator16(63)">
<input type="button" value="&#64;" style="width:40px;height:40px" onclick="HTMLGenerator16(64)">
<input type="button" value="&#91;" style="width:40px;height:40px" onclick="HTMLGenerator16(91)">
<input type="button" value="&#92;" style="width:40px;height:40px" onclick="HTMLGenerator16(92)">
<input type="button" value="&#93;" style="width:40px;height:40px" onclick="HTMLGenerator16(93)">
<br>
<input type="button" value="&#94;" style="width:40px;height:40px" onclick="HTMLGenerator16(94)">
<input type="button" value="&#95;" style="width:40px;height:40px" onclick="HTMLGenerator16(95)">
<input type="button" value="&#96;" style="width:40px;height:40px" onclick="HTMLGenerator16(96)">
<input type="button" value="&#123;" style="width:40px;height:40px" onclick="HTMLGenerator16(123)">
<input type="button" value="&#124;" style="width:40px;height:40px" onclick="HTMLGenerator16(124)">
<input type="button" value="&#125;" style="width:40px;height:40px" onclick="HTMLGenerator16(125)">
<input type="button" value="&#126;" style="width:40px;height:40px" onclick="HTMLGenerator16(126)">
<br>
<input type="button" value="半角スペース" style="width:120px;height:40px" onclick="HTMLGenerator16(160)">
<br><hr>
その他の機能<br>
<input type="button" value="改行" style="width:60px;height:40px" onclick="breakline16()">
<input type="button" value="全削除" style="width:60px;height:40px" onclick="delete16()">
</td>
<td style="text-align:center;">
<textarea id="output16" rows="25" cols="50"></textarea><!-- 出力のみなので、テキストエリア名は、「output16」 -->
<br>
プレビュー:<br>
<div id="preview16" style="border:solid 5px orange;padding:10px;width:400px;">
ここにプレビューが生成される。</div><!-- ここにプレビューが生成される。 -->
</td>
</tr>
</table>
</form>

JavaScriptサイド

var input16 = ""; // テキストエリア「output16」へ入力する為の変数に空文字列を代入して初期化

var HTMLGenerator16 = function(numC){
  input16 += "&#" + numC + ";";
  document.getElementById("output16").value = input16; // テキストエリア「output16」へ出力する
  document.getElementById("preview16").innerHTML = input16; // プレビューを「preview16」へ出力する
};

var breakline16 = function(){
  input16 += "<br>\n";
  document.getElementById("output16").value = input16; // テキストエリア「output16」へ出力する
  document.getElementById("preview16").innerHTML = input16; // プレビューを「preview16」へ出力する
};

var delete16 = function(){
  input16 = "";
  document.getElementById("output16").value = input16; // テキストエリア「output16」へ出力する
  document.getElementById("preview16").innerHTML = input16; // プレビューを「preview16」へ出力する
};



拾漆. 多肢択一式問題の生成(旧quiz Generator)

HTMLサイド

<form><!-- getElementByIdを使用する為、name属性を指定しない -->
選択肢数:<input type="text" id="choice" value="4"><br>
問題数:<input type="text" id="problem" value="10"><br>
<input type="button" value="生成する" onclick="HTMLGenerator17()"><br>
<textarea id="output17" rows="25" cols="80"></textarea><!-- 出力のみなので、テキストエリア名は、「output17」 -->
</form>

JavaScriptサイド

var input17; // テキストエリア「output17」へ入力する為の変数

var HTMLGenerator17 = function(){
  input17 = ""; // 出力用変数に空文字列を代入して初期化

  var i, j; // ループ変数
  var cn = parseInt(document.getElementById("choice").value); // 選択肢数
  var pn = parseInt(document.getElementById("problem").value); // 問題数

  if(isNaN(cn) == true || isNaN(pn) == true){
    alert("半角の数値を入力して下さい。");
    return;
  } // もし、選択肢数や問題数が、半角の数値でなければ、警告を表示し、関数を抜ける。

  input17 += "<!DOCTYPE html>\n";
  input17 += "<html lang=\"ja\">\n";
  input17 += "<head>\n";
  input17 += "<meta charset=\"utf-8\" />\n";
  input17 += "<title> " + cn + " 者択一式問題 " + pn + " 問の生成</title>\n";
  input17 += "<script type=\"text/javascript\" language=\"JavaScript\">\n";
  input17 += "<!--\n";
  input17 += "var score = function() {\n";
  input17 += "  var total = 0;\n";
  for(i = 0; i < pn; ++i){
    input17 += "  if(document.exercise.q" + (i+1) + "[].checked == true){  total += 1;  }\n";
  }
  input17 += "  document.getElementById(\"result\").innerHTML = \"<h2>\" + total + \"[点]</h2>\";\n";
  input17 += "};\n\n";

  input17 += "var answer = function(mes) {\n";
  input17 += "  if(mes.style.visibility==\"hidden\"){\n";
  input17 += "    mes.style.visibility=\"visible\";\n";
  input17 += "  }else{\n";
  input17 += "    mes.style.visibility=\"hidden\";\n";
  input17 += "  }\n";
  input17 += "};\n";
  input17 += "//-->\n";
  input17 += "</script>\n";
  input17 += "</head>\n";
  input17 += "<body>\n";
  input17 += "<h1> " + cn + " 者択一式問題 " + pn + " 問の生成</h1>\n\n";

  input17 += "<form name=\"exercise\">\n";
  input17 += "<dl>\n\n";
  for(i = 0; i < pn; ++i){
    input17 += "  <dt>問" + (i+1) + "(<!-- ここに【出典】などを表示 -->)</dt>\n";
    input17 += "  <dd><p><!-- ここに【問題文】を表示 --><br>\n";
    for(j = 0; j < cn; ++j){
      input17 += "    <input type=\"radio\" name=\"q" + (i+1) + "\"";
      input17 += " value=\"" + j +"\"><br>\n";
    } // ラジオボタンの生成
    input17 += "    <a href=\"javascript:answer(a" + (i+1) + ")\">【解説】</a>\n";
    input17 += "    <span id=\"a" + (i+1) + "\" style=\"visibility:hidden;\">ここに【解説】を表示</span>\n";
    input17 += "  </p></dd>\n\n";
  }
  input17 += "</dl>\n";
  input17 += "<input type=\"button\" value=\"採点する\" onclick=\"score()\">\n";
  input17 += "<div id=\"result\"><h2>?[点]</h2></div>\n";
  input17 += "</form>\n\n";
  input17 += "</body>\n";
  input17 += "</html>";

  document.getElementById("output17").value = input17; // テキストエリア「output17」へ出力する
};



拾捌. ラテン文字アルファベットからフラクトゥールへの変換

HTMLサイド

<form><!-- getElementByIdを使用する為、name属性を指定しない -->
原文:<br>
<textarea id="input18" cols="50" rows="10"></textarea><br>
(例:ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz)<br>
<label for="fraktur">
  <input type="radio" name="frakturbold" id="fraktur">フラクトゥール
</label><br>
<label for="bold">
  <input type="radio" name="frakturbold" id="bold" checked>フラクトゥール(ボールド)
</label><br>
<input type="button" value="変換する" onclick="HTMLGenerator18()"><br>
HTMLのナンバーエンティティに変換した結果:<br>
<textarea id="output18" cols="100" rows="20"></textarea>
<!-- 出力のみなので、テキストエリア名は、「output18」 -->
<br>
プレビュー:<br>
<div id="preview18" style="border:solid 5px orange;padding:10px;width:800px;">
ここにプレビューが生成される。</div><!-- ここにプレビューが生成される。 -->
</form>

JavaScriptサイド

var input18, output18; // テキストエリアへ入出力する為の変数

var HTMLGenerator18 = function(){
  input18 = ""; // 入力用変数に空文字列を代入して初期化
  output18 = ""; // 出力用変数に空文字列を代入して初期化

  input18 = document.getElementById("input18").value; // テキストエリアから読み込む
  output18 = input18; // 入力用変数を出力用変数にも代入

  var frakturbold; // フラクトゥールが太字か否か

  // ラジオボタンで選択されたフラクトゥールが太字か否かを、変数frakturboldに代入
  if(document.getElementById("fraktur").checked == true){ frakturbold = "0"; } // 太字ではない場合
  if(document.getElementById("bold").checked == true){ frakturbold = "1"; } // 太字の場合

  if(frakturbold == 0){ // 太字ではない場合

    output18 = output18.replace(RegExp("A","g"), "&#120068;"); // 「A」を「&#120068;」へ変換
    output18 = output18.replace(RegExp("B","g"), "&#120069;"); // 「B」を「&#120069;」へ変換
    output18 = output18.replace(RegExp("C","g"), "&#8493;"); // 「C」を「&8493;」へ変換
    output18 = output18.replace(RegExp("D","g"), "&#120071;"); // 「D」を「&#120071;」へ変換
    output18 = output18.replace(RegExp("E","g"), "&#120072;"); // 「E」を「&#120072;」へ変換
    output18 = output18.replace(RegExp("F","g"), "&#120073;"); // 「F」を「&#120073;」へ変換
    output18 = output18.replace(RegExp("G","g"), "&#120074;"); // 「G」を「&#120074;」へ変換
    output18 = output18.replace(RegExp("H","g"), "&#8460;"); // 「H」を「&#8460;」へ変換
    output18 = output18.replace(RegExp("I","g"), "&#8465;"); // 「I」を「&#8465;」へ変換
    output18 = output18.replace(RegExp("J","g"), "&#120077;"); // 「J」を「&#120077;」へ変換
    output18 = output18.replace(RegExp("K","g"), "&#120078;"); // 「K」を「&#120078;」へ変換
    output18 = output18.replace(RegExp("L","g"), "&#120079;"); // 「L」を「&#120079;」へ変換
    output18 = output18.replace(RegExp("M","g"), "&#120080;"); // 「M」を「&#120080;」へ変換
    output18 = output18.replace(RegExp("N","g"), "&#120081;"); // 「N」を「&#120081;」へ変換
    output18 = output18.replace(RegExp("O","g"), "&#120082;"); // 「O」を「&#120082;」へ変換
    output18 = output18.replace(RegExp("P","g"), "&#120083;"); // 「P」を「&#120083;」へ変換
    output18 = output18.replace(RegExp("Q","g"), "&#120084;"); // 「Q」を「&#120084;」へ変換
    output18 = output18.replace(RegExp("R","g"), "&#8476;"); // 「R」を「&#8476;」へ変換
    output18 = output18.replace(RegExp("S","g"), "&#120086;"); // 「S」を「&#120086;」へ変換
    output18 = output18.replace(RegExp("T","g"), "&#120087;"); // 「T」を「&#120087;」へ変換
    output18 = output18.replace(RegExp("U","g"), "&#120088;"); // 「U」を「&#120088;」へ変換
    output18 = output18.replace(RegExp("V","g"), "&#120089;"); // 「V」を「&#120089;」へ変換
    output18 = output18.replace(RegExp("W","g"), "&#120090;"); // 「W」を「&#120090;」へ変換
    output18 = output18.replace(RegExp("X","g"), "&#120091;"); // 「X」を「&#120091;」へ変換
    output18 = output18.replace(RegExp("Y","g"), "&#120092;"); // 「Y」を「&#120092;」へ変換
    output18 = output18.replace(RegExp("Z","g"), "&#8488;"); // 「Z」を「&#8488;」へ変換

    output18 = output18.replace(RegExp("a","g"), "&#120094;"); // 「a」を「&#120094;」へ変換
    output18 = output18.replace(RegExp("b","g"), "&#120095;"); // 「b」を「&#120095;」へ変換
    output18 = output18.replace(RegExp("c","g"), "&#120096;"); // 「c」を「&#120096;」へ変換
    output18 = output18.replace(RegExp("d","g"), "&#120097;"); // 「d」を「&#120097;」へ変換
    output18 = output18.replace(RegExp("e","g"), "&#120098;"); // 「e」を「&#120098;」へ変換
    output18 = output18.replace(RegExp("f","g"), "&#120099;"); // 「f」を「&#120099;」へ変換
    output18 = output18.replace(RegExp("g","g"), "&#120100;"); // 「g」を「&#120100;」へ変換
    output18 = output18.replace(RegExp("h","g"), "&#120101;"); // 「h」を「&#120101;」へ変換
    output18 = output18.replace(RegExp("i","g"), "&#120102;"); // 「i」を「&#120102;」へ変換
    output18 = output18.replace(RegExp("j","g"), "&#120103;"); // 「j」を「&#120103;」へ変換
    output18 = output18.replace(RegExp("k","g"), "&#120104;"); // 「k」を「&#120104;」へ変換
    output18 = output18.replace(RegExp("l","g"), "&#120105;"); // 「l」を「&#120105;」へ変換
    output18 = output18.replace(RegExp("m","g"), "&#120106;"); // 「m」を「&#120106;」へ変換
    output18 = output18.replace(RegExp("n","g"), "&#120107;"); // 「n」を「&#120107;」へ変換
    output18 = output18.replace(RegExp("o","g"), "&#120108;"); // 「o」を「&#120108;」へ変換
    output18 = output18.replace(RegExp("p","g"), "&#120109;"); // 「p」を「&#120109;」へ変換
    output18 = output18.replace(RegExp("q","g"), "&#120110;"); // 「q」を「&#120110;」へ変換
    output18 = output18.replace(RegExp("r","g"), "&#120111;"); // 「r」を「&#120111;」へ変換
    output18 = output18.replace(RegExp("s","g"), "&#120112;"); // 「s」を「&#120112;」へ変換
    output18 = output18.replace(RegExp("t","g"), "&#120113;"); // 「t」を「&#120113;」へ変換
    output18 = output18.replace(RegExp("u","g"), "&#120114;"); // 「u」を「&#120114;」へ変換
    output18 = output18.replace(RegExp("v","g"), "&#120115;"); // 「v」を「&#120115;」へ変換
    output18 = output18.replace(RegExp("w","g"), "&#120116;"); // 「w」を「&#120116;」へ変換
    output18 = output18.replace(RegExp("x","g"), "&#120117;"); // 「x」を「&#120117;」へ変換
    output18 = output18.replace(RegExp("y","g"), "&#120118;"); // 「y」を「&#120118;」へ変換
    output18 = output18.replace(RegExp("z","g"), "&#120119;"); // 「z」を「&#120119;」へ変換

  } else { // 太字の場合

    output18 = output18.replace(RegExp("A","g"), "&#120172;"); // 「A」を「&#120172;」へ変換
    output18 = output18.replace(RegExp("B","g"), "&#120173;"); // 「B」を「&#120173;」へ変換
    output18 = output18.replace(RegExp("C","g"), "&#120174;"); // 「C」を「&#120174;」へ変換
    output18 = output18.replace(RegExp("D","g"), "&#120175;"); // 「D」を「&#120175;」へ変換
    output18 = output18.replace(RegExp("E","g"), "&#120176;"); // 「E」を「&#120176;」へ変換
    output18 = output18.replace(RegExp("F","g"), "&#120177;"); // 「F」を「&#120177;」へ変換
    output18 = output18.replace(RegExp("G","g"), "&#120178;"); // 「G」を「&#120178;」へ変換
    output18 = output18.replace(RegExp("H","g"), "&#120179;"); // 「H」を「&#120179;」へ変換
    output18 = output18.replace(RegExp("I","g"), "&#120180;"); // 「I」を「&#120180;」へ変換
    output18 = output18.replace(RegExp("J","g"), "&#120181;"); // 「J」を「&#120181;」へ変換
    output18 = output18.replace(RegExp("K","g"), "&#120182;"); // 「K」を「&#120182;」へ変換
    output18 = output18.replace(RegExp("L","g"), "&#120183;"); // 「L」を「&#120183;」へ変換
    output18 = output18.replace(RegExp("M","g"), "&#120184;"); // 「M」を「&#120184;」へ変換
    output18 = output18.replace(RegExp("N","g"), "&#120185;"); // 「N」を「&#120185;」へ変換
    output18 = output18.replace(RegExp("O","g"), "&#120186;"); // 「O」を「&#120186;」へ変換
    output18 = output18.replace(RegExp("P","g"), "&#120187;"); // 「P」を「&#120187;」へ変換
    output18 = output18.replace(RegExp("Q","g"), "&#120188;"); // 「Q」を「&#120188;」へ変換
    output18 = output18.replace(RegExp("R","g"), "&#120189;"); // 「R」を「&#120189;」へ変換
    output18 = output18.replace(RegExp("S","g"), "&#120190;"); // 「S」を「&#120190;」へ変換
    output18 = output18.replace(RegExp("T","g"), "&#120191;"); // 「T」を「&#120191;」へ変換
    output18 = output18.replace(RegExp("U","g"), "&#120192;"); // 「U」を「&#120192;」へ変換
    output18 = output18.replace(RegExp("V","g"), "&#120193;"); // 「V」を「&#120193;」へ変換
    output18 = output18.replace(RegExp("W","g"), "&#120194;"); // 「W」を「&#120194;」へ変換
    output18 = output18.replace(RegExp("X","g"), "&#120195;"); // 「X」を「&#120195;」へ変換
    output18 = output18.replace(RegExp("Y","g"), "&#120196;"); // 「Y」を「&#120196;」へ変換
    output18 = output18.replace(RegExp("Z","g"), "&#120197;"); // 「Z」を「&#120197;」へ変換

    output18 = output18.replace(RegExp("a","g"), "&#120198;"); // 「a」を「&#120198;」へ変換
    output18 = output18.replace(RegExp("b","g"), "&#120199;"); // 「b」を「&#120199;」へ変換
    output18 = output18.replace(RegExp("c","g"), "&#120200;"); // 「c」を「&#120200;」へ変換
    output18 = output18.replace(RegExp("d","g"), "&#120201;"); // 「d」を「&#120201;」へ変換
    output18 = output18.replace(RegExp("e","g"), "&#120202;"); // 「e」を「&#120202;」へ変換
    output18 = output18.replace(RegExp("f","g"), "&#120203;"); // 「f」を「&#120203;」へ変換
    output18 = output18.replace(RegExp("g","g"), "&#120204;"); // 「g」を「&#120204;」へ変換
    output18 = output18.replace(RegExp("h","g"), "&#120205;"); // 「h」を「&#120205;」へ変換
    output18 = output18.replace(RegExp("i","g"), "&#120206;"); // 「i」を「&#120206;」へ変換
    output18 = output18.replace(RegExp("j","g"), "&#120207;"); // 「j」を「&#120207;」へ変換
    output18 = output18.replace(RegExp("k","g"), "&#120208;"); // 「k」を「&#120208;」へ変換
    output18 = output18.replace(RegExp("l","g"), "&#120209;"); // 「l」を「&#120209;」へ変換
    output18 = output18.replace(RegExp("m","g"), "&#120210;"); // 「m」を「&#120210;」へ変換
    output18 = output18.replace(RegExp("n","g"), "&#120211;"); // 「n」を「&#120211;」へ変換
    output18 = output18.replace(RegExp("o","g"), "&#120212;"); // 「o」を「&#120212;」へ変換
    output18 = output18.replace(RegExp("p","g"), "&#120213;"); // 「p」を「&#120213;」へ変換
    output18 = output18.replace(RegExp("q","g"), "&#120214;"); // 「q」を「&#120214;」へ変換
    output18 = output18.replace(RegExp("r","g"), "&#120215;"); // 「r」を「&#120215;」へ変換
    output18 = output18.replace(RegExp("s","g"), "&#120216;"); // 「s」を「&#120216;」へ変換
    output18 = output18.replace(RegExp("t","g"), "&#120217;"); // 「t」を「&#120217;」へ変換
    output18 = output18.replace(RegExp("u","g"), "&#120218;"); // 「u」を「&#120218;」へ変換
    output18 = output18.replace(RegExp("v","g"), "&#120219;"); // 「v」を「&#120219;」へ変換
    output18 = output18.replace(RegExp("w","g"), "&#120220;"); // 「w」を「&#120220;」へ変換
    output18 = output18.replace(RegExp("x","g"), "&#120221;"); // 「x」を「&#120221;」へ変換
    output18 = output18.replace(RegExp("y","g"), "&#120222;"); // 「y」を「&#120222;」へ変換
    output18 = output18.replace(RegExp("z","g"), "&#120223;"); // 「z」を「&#120223;」へ変換

  }

  document.getElementById("output18").value = output18; // テキストエリア「output18」へ出力する
  document.getElementById("preview18").innerHTML = output18; // プレビューを「preview18」へ出力する
}



Shadow Academy トップへ戻る

inserted by FC2 system