スタートページJavascriptJavascriptutility.js 一覧表

utility.jsの使用法と実例

をクリックすると、utility.jsでの該当部分がポップアップウインドウに表示されます。


includeHtml(ファイル名, 表示場所); 外部htmlを表示場所にコピー

<button onClick="includeHtml('html/called1.html', 'includeHtml表示場所')">実行</button>
<div id='includeHtml表示場所'></div>

↓ <div id='includeHtml表示場所'></div>

includeHtmlByTag(ファイル名, タグ名, 表示場所);
外部htmlのタグで囲まれた部分を表示場所にコピー

<button onClick="includeHtml('html/called1.html', 'honbun', 'includeHtmlByTag表示場所')">実行</button>
<div id='includeHtml表示場所'></div>

↓ <div id='includeHtmlByTag表示場所'></div>

includeSplitByLiteral(ファイル名, 最初文字列, 最後文字列, 関数名);

外部ファイルから、最初文字列と一致した最初の行から、次に最後文字列と一致した行までを取り込み、選択行(配列)とします。
そして、関数名で指定した関数に選択行を引数として渡します。呼出側のHTMLに「関数名(選択行)」の記述が必要です。
その一致比較は行の先頭位置からなので、これを使うには利用者が読み込まれるファイルの内容を熟知している必要があり、
用途の汎用性が限定されますが、例えば自作のライブラリから対象のfunction部分を取り出すときなどに便利です。

ここでは、../utility.jsから、行の先頭位置が "function includeSplitByLiteral" から "}" までの範囲の行を選択行とし、includeSplitByLiteral処理関数(選択行)を実行する(ソースリストを表示する)ことにします。

<script>
function includeSplitByLiteral処理関数(選択行) {
    var 内容 = "";
    for (var i=0; i<選択行.length; i++) {
        選択行[i] = 選択行[i].replace(/</g, "&lt;");  // ソースリストにしたいので<などを置換する
        選択行[i] = 選択行[i].replace(/>/g, "&gt;");
        選択行[i] = 選択行[i].replace(/ /g, "&nbsp;");
        内容 += 選択行[i] + "<br>";                    // 改行して表示したいので各行末尾に<br>を付ける
    }
    document.getElementById("includeSplitByLiteral表示場所").innerHTML = 内容;    
}
</script>

<button onClick="includeSplitByLiteral(
        '../utility.js',                    // 読み込む外部ファイル名
        'function includeSplitByLiteral',   // 最初文字列
        '}',                                // 最後文字列
        'includeSplitByLiteral処理関数'     // 選択行を受取り処理する関数名
    )">実行</button>
<div id="includeSplitByLiteral表示場所"></div>

↓ <div id="includeSplitByLiteral表示場所"></div>

openNewHtml(head部内容個数, body部内容個数
  [, head部表示内容1, head部表示内容2, … ,body部表示内容1, body部表示内容2, …]);

呼出側で複数の表示内容に代入した文を順序変えしてHTMLを生成し、ポップアップウインドウのように表示します。
例えば、下左により、下右のHTMLが生成されるので、別ウインドウが表示されます。

<script>
function openNewHtmlTest() {
    var 表示内容1 = "<p>表示内容1です。</p>";
    var 表示内容2 = "<style>p {color:red}</style>";
    var 表示内容3 = "<img src='picture/120x80.jpg'>";
    var 表示内容4 = "<h4>表示内容4です。</h4>";

    openNewHTML(1,2,表示内容2,表示内容1,表示内容4, 表示内容3);
}
</script>
<!DOCTYPE html>
<html lang='ja'>
<head>
<meta charset='UTF-8'>
<style>p {color:red}</style>   ア:head部表示内容1
</head>
<body>
<p>表示内容1です。</p>    イ:アにより赤字になる       
<h4>表示内容4です。</h4>   ウ:エより前になる
<img src='picture/120x80.jpg'>   エ:呼出側と同じ相対パスになる
</body>
</html>

functionLiteral(関数名[, 引数1, 引数2, ・・・]); 関数名をリテラルで与える

一般形は functionLiteral(関数名[, 引数1, 引数2, ・・・]); (引数個数≦10)です。
  関数名(引数1, 引数2, ・・・) と同じことになります。

<script>
function functionLiteral0(){
    document.getElementById("functionLiteral結果表示場所").innerHTML
        = "functionLiteral0";
}
function functionLiteral2(引数1, 引数2){
    document.getElementById("functionLiteral結果表示場所").innerHTML
        = "functionLiteral2:引数1=" + 引数1 + ", 引数2=" + 引数2;
}
</script>

<button onClick="functionLiteral('functionLiteral2',100,'aaa')">実行</button>
<div id="functionLiteral結果表示場所"></div>
</script>

引数なし
2個の引数

↓ <div id="functionLiteral結果表示場所"></div>

参考URL

「可変個引数」「リンク:location.hrefとwindow.open」


swichDisplay(対象ID[, 表示場所] ): 表示・非表示の反転

対象ID:表示反転の対象になる個所
  <div id="対象ID" style="display:none"> ~表示内容~ </div> 初期状態は非表示にしておく
表示場所:表示非表示をする場所(対象IDと異なる場所で反転するときに指定)
  省略した場合:対象IDの場所が表示反転する
  指定した場合:対象IDに内容がこの場所に表示される/""になる
         対象IDは非表示のまま
  <div id="表示場所">:</div>  <div>:</div>の間には何も記述しない

表示場所がない場合:対象IDが表示反転する

<button onClick="swichDisplay('表示反転対象ID1');">swichDisplay('表示反転対象ID1');</button>

<div id="表示反転対象ID1" style="display:none">
<p>「表示反転対象ID1」の内容です。</p>
</div>

この下に<div id="表示反転対象ID1" style="display:none">があります。

表示場所がある場合:表示場所に対象IDの内容が表示反転する。対象IDの状態は変化しない。

<button onClick="swichDisplay('表示反転対象ID2', '表示反転表示場所2');">swichDisplay('表示反転対象ID2', '表示反転表示場所2');</button>

<div id="表示反転対象ID2"  style="display:none">
<p>「表示反転対象ID2」の内容です。</p>
</div>

<div id="表示反転表示場所2"></div>

この下に<div id="表示反転対象ID2">があります。あえて表示状態にしておきます。

「表示反転対象ID2」の内容です。

この下に<div id="表示反転表示場所2">があります。

参照URL

「表示・非表示」

getImageAdjust(画像URL, 表示場所[, 横位置, 縦位置, クラス名, スタイル生成場所]);

<img id="表示場所" src="画像URL" width="400" height="300"> の拡大機能です。
<img>タグでwidth,heightの双方を与えたとき、その縦横比が画像の縦横比と異なると、ゆがんだ画像が表示されてしまいます。
ここでは、画像の縦横比を保ったまま、width,heightで与えた長方形に入るように画像を圧縮・拡大します。

二つの形式があります。
getImageAdjust(画像URL, 表示場所);
  <img>タグで指定したwidth,heightが変化します。
getImageAdjust(画像URL, 表示場所, 横位置, 縦位置, クラス名, スタイル生成場所);
  <img>タグで指定したwidth,heightは変えず、画像を指定した位置に表示します(余白が生じます)。

ここでは、画像ファイルは picture/image1.jpeg を用います。サイズは200x150なので縦横比は3/4=0.75です。

getImageAdjust(画像URL, 表示場所);

画像 picture/image1.jpeg を画像読込表示場所1に表示します。そこで指定した300x100に収まるように圧縮し、imgのサイズも変えます。

<button onClick="getImageAdjust('picture/image1.jpeg', '画像読込表示場所1')">実行</button>
<img id="画像読込表示場所1" width=300 height=100>


下の長方形は<img id="画像読込表示場所1" width=300 height=100>です。

imgの縦横比は100/300=0.33です。画像の縦横比とくらべて横長です。そのため高さがネックになり、画像が100/150に圧縮され左側に表示されます。

getImageAdjust(画像URL, 表示場所, 横位置, 縦位置, クラス名, スタイル生成場所);

画像 picture/image1.jpeg を画像読込表示場所2に表示します。そこで指定した200x250は変えず、もし画像サイズがこの縦横比よりも縦長ならは右詰めし、横長ならば上詰めします。

<button onClick="getImageAdjust('picture/image1.jpeg', '画像読込表示場所2', '右', '上', 'クラス2', '画像読込スタイル生成場所2')">実行</button>
<div class="クラス2"><img id="画像読込表示場所2" width=200 height=250></div>
<div id="画像読込スタイル生成場所2"></div>

下の長方形は<img id="画像読込表示場所2" width=200 height=250>です。

ここに(見えませんが)<div id="画像読込スタイル生成場所2"></div>があります。

横位置、縦位置
横位置と縦位置でimgで指定した枠のなかで画像の表示位置を指定します。
  横位置:"左", "中", "右"   縦位置:"上", "中", "下"
クラス名とスタイル生成場所
この処理は、style(CSS)での指定が必要であり、それをscriptで生成しています。
指定したクラス名(任意の文字列でよい)のstyleをスタイル生成場所に生成します。これは表示されません。
クラス名とスタイル生成場所は、「使い捨て」ですが、他と重複しない必要があります。
<img>の記述
一般形は、<div class="クラス名"><img id="表示場所" width=xxx height=xxx></div> です。
imgタグはdivやpなどのタグで囲まなければなりません。
width と height が必須です。


imgを横長にしました。横の中央に表示されます。

参照URL

「画像の読込表示」

getImageCanvas(画像URL, 表示場所[, 横位置, 縦位置, 背景色]);

画像ファイルを縦横比を保ちつつcanvasいっぱいに表示する。<canvas>にwidth, heightは必須

getImageCanvas(画像URL, CANVAS名);

canvasのサイズを変える(余白部を削除する)

ケース1

<canvas id="GIcanvas11" width="300" height="300"></canvas>

canvasのwidth=300がネックになりheight=300x300/400=225になります。

ケース2

<canvas id="GIcanvas12" width="300" height="300"></canvas>

canvasのheight=300がネックになりwidth=480x300/640=225になります。

getImageCanvas(画像URL, CANVAS名, 横位置, 縦位置, 背景色);

canvasのサイズは変えず、画像を縦位置:上・中・下、横位置:左・中・右に表示。余白部を残す。

ケース1
横長画像:圧縮された全体が下に表示され、上に空白ができる('右'は無視される)。背景色はgray
ケース2
縦長画像:圧縮された全体が中央に表示され、左右に空白ができる('上'は無視される)。背景色はyellow

この下に<canvas id="GIcanvas2" width="300" height="300"></canvas>があります。

参照URL

「画像ファイルのCANVAS表示」

zoomImage(対象画像, 倍率[, 表示場所]);

既に表示されている対象画像を倍率により拡大した画像を、その位置あるいは指定した表示場所に表示します。

同一場所での拡大: zoomImage(対象画像, 倍率);

←画像拡大対象画像1(width=100)
画像をクリックすると2倍になります。

<p onClick="zoomImage('画像拡大対象画像1', 2)">
    <img id="画像拡大対象画像1" src="picture/image1.jpeg" width="100"></p>

他の場所に表示: zoomImage(対象画像, 倍率, 表示場所);

←画像拡大対象画像2(height=70)
画像をクリックすると1.5倍に拡大され、「画像拡大表示場所2」に表示されます。

<p onClick="zoomImage('画像拡大対象画像2', 2, '画像拡大表示場所2')">
    <img id="画像拡大対象画像2" src="picture/image1.jpeg" height="70"></p>
<img id="画像拡大表示場所2">
この下に<img id="画像拡大表示場所2">があります。

参照URL

「画像の読込表示」

getLocalFileDB(入力場所, 関数名); ローカルファイル名取得(ダイアログボックス)

呼出側のHTMLで指定した入力場所に[ファイル選択]のボタンを生成します。
ファイルを指定すると、呼出側で記述した「function 関数名(files)」にfilesオブジェクトを戻します。
  files[i].name i番目のファイルの名称
  files[i].urn
  files[i].type
  files[i].lastModifiedDate

<script>
function glfdb取込後処理(files) { // getLocalFileDBから呼び出された関数です。
    var 内容 = "";                //   ここではfilesオブジェクトの内容を表示します。 
    for (var i=0; i<files.length; i++) {
        内容 += "files[" + i + "].name=" + files[i].name + ",  "
              + "files[" + i + "].type=" + files[i].type + ",  "
              + "files[" + i + "].size=" + files[i].size + ",  "
              + "files[" + i + "].lastModifiedDate="  + files[i].lastModifiedDate
              + "<br>";
    }
    document.getElementById("glfdb結果表示場所").innerHTML = 内容;
}
</script>

<button onClick="getLocalFileDB('glfdd入力場所', 'glfdb取込後処理')">実行</button><br>
<div id="glfdb入力場所"></div>
<div id="glfdb結果表示場所"></div>

↓ <div id="glfdb入力場所"></div>

↓ <div id="glfdb結果表示場所"></div>


getLocalFileDD(入力場所, 関数名);  ローカルファイル名取得(ドラッグ&ドロップ)

getLocalFileDB()が先に実行したとき、このgetLocalFileDD()の実行が行われません(原因未詳)。

呼出側のHTMLで指定した入力場所に[ドラッグ&ドロップ]の枠を生成します。200x100に固定しています。
ファイルを指定すると、呼出側で記述した「function 関数名(files)」にfilesオブジェクトを戻します。
  files[i].name i番目のファイルの名称
  files[i].urn
  files[i].type
  files[i].lastModifiedDate

<script>
function glfdd取込後処理(files) { // getLocalFileDDから呼び出された関数です。
    var 内容 = "";                //   ここではfilesオブジェクトの内容を表示します。 
    for (var i=0; i<files.length; i++) {
        内容 += "files[" + i + "].name=" + files[i].name + ",  "
              + "files[" + i + "].type=" + files[i].type + ",  "
              + "files[" + i + "].size=" + files[i].size + ",  "
              + "files[" + i + "].lastModifiedDate="  + files[i].lastModifiedDate
              + "<br>";
    }
    document.getElementById("glfdd結果表示場所").innerHTML = 内容;
}
</script>

<button onClick="getLocalFileDD('glfdd入力場所', 'glfdd取込後処理')">実行</button><br>
<div id="glfdd入力場所"></div>
<div id="glfdd結果表示場所"></div>

↓ <div id="glfdd入力場所"></div>

↓ <div id="glfdd結果表示場所"></div>


showInnerSourcecode(選択場所, 表示場所)

HTML内の選択場所をタグをつけたまま(ソースコードを)指定した表示場所に表示します。 タグそのものの機能は失われます。

▼▼<div id="ソースコード選択場所">▼▼

テスト

[実行]をクリックすると「正数」と表示されます

▲▲</div>▲▲

この内部は下左のようになっています(ア、イなどは実際には存在しません)。
クリックすると下右に下左と全く同じものが表示されます。

ア  <h4>テスト</h4>
イ  <p>[実行]をクリックすると「正数」と表示されます</p>
ウ  <script>
エ  function fugou(x) {
オ      if (x > 0)   alert("正数");
カ      else alert("負数");
キ  }
ク  </script>
ケ
コ  <button onClick="fugou(10)">実行</button>
  
ここに<div id="ソースコード表示場所"></div>があります。

csvMatrix(CSVファイル名, 関数名)

外部CSVファイル(カンマ区切り)を読み、2次元配列に編集して、指定した関数に戻します。
ファイルはcharset="UTF-8"でなければなりません。
出力行列のうち、未指定要素はnull("")になります。

例
入力データ(csv/matrix.csv) 行列(戻り値)
  阿部,工学部,3    行列[0][0]=阿部; 行列[0][1]=工学部; 行列[0][2]=3; 行列[0][3]=;
  井上,文学部,,野球  行列[1][0]=井上; 行列[1][1]=文学部; 行列[1][2]=;  行列[1][3]=野球;
  宇田,文学部     行列[2][0]=宇田; 行列[2][1]=文学部; 行列[2][2]=;  行列[2][3]=;

配列を戻す

<script>
function csvMatrix関数A(行数, 列数, 行列) {
    var 内容 = "";
    内容 += "行数=" + 行数 + "; 列数=" + 列数 + ";<br>";
    for (var i=0; i<行数; i++) {
        for (var j=0; j<列数; j++) {
            内容 += "行列[" + i + "][" + j + "]=" + 行列[i][j] + "; ";
        }
        内容 += "<br>";
    }
    document.getElementById("csvMatrix結果表示場所A").innerHTML = 内容;
}
</script>

<button onClick="csvMatrix('csv/matrix.csv', 'csvMatrix関数A')">実行A</button>
<div id="csvMatrix結果表示場所A"></div>

↓ <div id="csvMatrix結果表示場所A"></div>

.js形式の出力

<script>
function csvMatrix関数B(行数, 列数, 行列) {
    var 内容 = "var 行列 = new Array();<br>";
    for (var i=0; i<行数; i++) {
        内容 += "行列[" + i + "] = new Array();<br>";
    }
    for (i=0; i<行数; i++) {
        for (var j=0; j<列数; j++) {
            内容 += "行列[" + i + "][" + j + "]='" + 行列[i][j] + "';<br>";
        }
    }
    document.getElementById("csvMatrix結果表示場所B").innerHTML = 内容;
}
</script>

<button onClick="csvMatrix('csv/matrix.csv', 'csvMatrix関数B')">実行</button>
<div id="csvMatrix結果表示場所B" class="red"></div>

↓ <div id="csvMatrix結果表示場所B"></div>


csvMatrixC(CSVファイル名, 関数名)

外部CSVファイル(カンマ区切り)を読み、2次元配列に編集して、指定した関数に戻します。
CSVファイルの先頭行はタイトル行です。読み飛ばされますが、列名に未指定があってはなりません。
出力行列のうち、未指定要素はnull("")になります。

入力データ(csv/matrixt.csv) 行列(戻り値)
    氏名,学部,学年,部活     列名[0]=氏名;    列名[1]=学部;      列名[2]=学年;  列名[3]=部活; 
  阿部,工学部,3        行列[0][0]=阿部; 行列[0][1]=工学部; 行列[0][2]=3;  行列[0][3]=;
  井上,文学部,,野球      行列[1][0]=井上; 行列[1][1]=文学部; 行列[1][2]=;   行列[1][3]=野球;
  宇田,文学部         行列[2][0]=宇田; 行列[2][1]=文学部; 行列[2][2]=;   行列[2][3]=;

配列を戻す

<script>
function csvMatrixC関数A(行数, 列数, 行列, 列名) {
    var 内容 = "";
    内容 += "行数=" + 行数 + "; 列数=" + 列数 + ";<br>";
    for (var j=0; j<列数; j++) {
        内容 += "列名[" + j + "]=" + 列名[j] + "; ";
    }
    内容 += "<br>";
    for (var i=0; i<行数; i++) {
        for (j=0; j<列数; j++) {
            内容 += "行列[" + i + "][" + j + "]=" + 行列[i][j] + "; ";
        }
        内容 += "<br>";
    }
    document.getElementById("csvMatrixC結果表示場所A").innerHTML = 内容;
}
</script>

<button onClick="csvMatrixC('csv/matrixt.csv', 'csvMatrixC関数A')">実行A</button>
<div id="csvMatrixC結果表示場所A"></div>

↓ <div id="csvMatrixC結果表示場所A"></div>

.js形式の出力

<script>
function csvMatrixC関数B(行数, 列数, 行列, 列名) {
    var 内容 = "var 列名 = new Array();<br>";
    for (var j=0; j<列数; j++) {
        内容 += "列名[" + j + "]='" + 列名[j] + "';<br>";
    }
    内容 += "var 行列 = new Array();<br>";
    for (var i=0; i<行数; i++) {
        内容 += "行列[" + i + "] = new Array();<br>";
    }
    for (i=0; i<行数; i++) {
        for (var j=0; j<列数; j++) {
            内容 += "行列[" + i + "][" + j + "]='" + 行列[i][j] + "';<br>";
        }
    }
    document.getElementById("csvMatrixC結果表示場所B").innerHTML = 内容;
}
</script>

<button onClick="csvMatrixC('csv/matrixt.csv', 'csvMatrixC関数B')">実行B;</button>
<div id="csvMatrixC結果表示場所B"></div>

↓ <div id="csvMatrixC結果表示場所B"></div>


csvMatrixHushC(CSVファイル名, 関数名[, オプション)

外部CSVファイル(カンマ区切り)を読み、2次元の連想配列に編集して、指定した関数に戻します。
先頭行はタイトル行で列名が入っています。列名を第1添え字とする連想配列になります。列名に重複・未指定があってはなりません。
ファイルはcharset="UTF-8"でなければなりません。
出力行列のうち、未指定要素はnull("")になります。

入力データ(csv/matrixt.csv) 行列(戻り値)
    氏名,学部,学年,部活 
  阿部,工学部,3        行列['氏名'][0]=阿部; 行列['学部'][0]=工学部; 行列['学年'][0]=3;  行列['部活'][0]=;
  井上,文学部,,野球      行列['氏名'][1]=井上; 行列['学部'][1]=文学部; 行列['学年'][1]=;   行列['部活'][1]=野球;
  宇田,文学部         行列['氏名'][2]=宇田; 行列['学部'][2]=文学部; 行列['学年'][2]=;   行列['部活'][2]=;
関数名(呼び出される関数)を記述する必要があります。
オプション:関数名に行名と列名を引数として渡すか否か これにより呼び出される関数の形式が2つあります。
  渡さない:指定しない     関数(行数, 列数, 行列) (注)
  渡す:"true"でも1でもよい  関数(行数, 列数, 行列, 列名)
(注)本来は列数も不要なのですが、全体の形式の統一のためと、実際にはあると便利なことから、必須としました。

連想配列要素の操作(列名も受け渡すとき)

なるべく連想配列の特徴を使わない記述をしました。

<script>
function csvMatrixHushC関数1(行数, 列数, 行列, 列名) {
    var 内容 = "<h4>列名のリスト</h4>";
    for (var j=0; j<列名.length; j++) {
        内容 += "列名[" + j + "]=" + 列名[j] + "; ";
    }
    内容 += "<h4>文学部の学生氏名と部活</h4>";
    for (var i=0; i<行数; i++) {
        if (行列['学部'][i] == "文学部") {
            内容 += "氏名=" + 行列['氏名'][i] +"; 部活=" + 行列['部活'][i] + ";<br>";
        }
    }
    内容 += "<h4>行(第2添字)の有無チェック:'井上'、'江川'</h4>";
    var 井上有無 = "「井上」は存在しません。";
    for (i=0; i<列数; i++) {
        if (行列['氏名'][i] == "井上") {
            井上有無 = "「井上」は存在します。i=" + i;
            break;
        }
    }
    内容 += 井上有無 + "<br>";
        // ======= 江川についても同様の記述 =======
    内容 += "<h4>列名(連想配列の第1添字)の有無チェック:'学部'、'性別'</h4>";
    var 学部有無 = "列「学部」は存在しません。";
    for (j=0; j<列数; j++) {
        if (列名[j] == "学部") {
            学部有無 = "列「学部」は存在します。";
            break;
        }
    }
    内容 += 学部有無 + "<br>";
        // ======= 性別についても同様の記述 =======
    document.getElementById("csvMatrixHushC結果表示場所1").innerHTML = 内容;
}
</script>

<button onClick="csvMatrixHushC('csv/matrixt.csv', 'csvMatrixHushC関数1', '列名受渡')">実行1</button>
<div id="csvMatrixHushC結果表示場所1"></div>

↓ <div id="csvMatrixHushC結果表示場所1"></div>

連想配列要素の操作(列名を受け渡さないとき)

<script>
function csvMatrixHushC関数A(行数, 列数, 行列) {
    var 内容 = "<h4>文学部の学生氏名と部活</h4>";
    for (var i=0; i<行数; i++) {
        if (行列.学部[i] == "文学部") {
            内容 += "氏名=" + 行列.氏名[i] + "; 部活=" + 行列.部活[i] + ";<br>";
                                                         // ↑ このような記法があります。
        }
    }
    内容 += "<h4>行(第2添字)の有無チェック:'井上'、'江川'</h4>";
    // 第2添字は通常の0,1,...ですから、特別の違いはありません。
    var 井上有無 = "「井上」は存在しません。";
    for (i=0; i<列数; i++) {
        if (行列.氏名[i] == "井上") {
            井上有無 = "「井上」は存在します。i=" + i;
            break;
        }
    }
    内容 += 井上有無 + "<br>";
        // ======= 江川についても同様の記述 =======
    内容 += "<h4>列名(連想配列の第1添字)の有無チェック:'学部'、'性別'</h4>";
    // 連想配列の添字の有無は、行列['xxx'] = new Array; の宣言有無でチェックします。
    // 宣言がないとundefinedになります。
    if (typeof 行列['学部'] === "undefined") var 学部有無 = "列「学部」は存在しません。";
    else 学部有無 = "列「学部」は存在します。";
    内容 += 学部有無 + "<br>";
        // ======= 性別についても同様の記述 =======
    document.getElementById("csvMatrixHushC結果表示場所A").innerHTML = 内容;
}
</script>

<button onClick="csvMatrixHushC('csv/matrixt.csv', 'csvMatrixHushC関数A')">実行A</button>
<div id="csvMatrixHushC結果表示場所A"></div>

↓ <div id="csvMatrixHushC結果表示場所A"></div>

配列を戻す(列名を受け渡さないとき)

<script>
function csvMatrixHushC関数B(行数, 列数, 行列) {
    var 内容 = "";
    for (var i=0; i<行数; i++) {
        for (var j in 行列) {
            内容 += "行列['" + j + "'][" + i + "]='" + 行列[j][i] + "'; ";
        }
        内容 += "<br>";
    }
    document.getElementById("csvMatrixHushC結果表示場所B").innerHTML = 内容;
}
</script>

<button onClick="csvMatrixHushC('csv/matrixt.csv', 'csvMatrixHushC関数B')">関数B</button>
<div id="csvMatrixHushC結果表示場所B" class="red"></div>

↓ <div id="csvMatrixHushC結果表示場所B"></div>

for (キー in 行列) について

通常の配列であれば、for (j=0; j<列数; j++) となるのですが、連想配列ではこのような順序ではないので、for (j in 行列) とします。
ここで行列は配列オブジェクトで、連想化した項目が対象になります。
イメージ的には、for (key = "氏名", "学部", "学年", "部活")と同様になります。順序は保証されません。

列名[j]も引数として受け渡せば、
   for (j=0; j<列数; j++) {
     行列[列名[j]][i]が使える
   }
となり、わかりやすいのですが、列名[j]を定義する必要が生じて、管理が面倒になります。

.js形式の出力(列名を受け渡さないとき)

<script>
function csvMatrixHushC関数C(行数, 列数, 行列) {
    内容 = "var 行列 = new Array();<br>";
    for (var j in 行列) {
        内容 += "行列['" + j + "'] = new Array();<br>";
    }
    for (var i=0; i<行数; i++) {
        for (j in 行列) {
            内容 += "行列['" + j + "'][" + i + "]='" + 行列[j][i] + "';<br>";
        }
    }
    document.getElementById("csvMatrixHushC結果表示場所C").innerHTML = 内容;
}
</script>
<button onClick="csvMatrixHushC('csv/matrixt.csv', 'csvMatrixHushC関数C')">関数C</button>
<div id="csvMatrixHushC結果表示場所C" class="red"></div>

↓ <div id="csvMatrixHushC結果表示場所C"></div>

「性別」などの属性(列名)を追加するときは、行列['性別'] = new Array();の宣言を追加する必要があります。江川など氏名の追加はそのような宣言はいりません。

参照

列名[0]=学部, 列名[1]=学年 を得る関数:連想配列名称 = keynameHushMatrix(行列);


csvMatrixHushRC(CSVファイル名, 関数名[. オプション])

外部CSVファイル(カンマ区切り)を読み、2次元の連想配列に編集して、指定した関数に戻します。
先頭行はタイトル行で列名が入っています。列名を第2添え字とする連想配列になります。列名に重複・未指定があってはなりません。
先頭列はタイトル列で行名が入っています。行名を第1添え字とする連想配列になります。行名に重複・未指定があってはなりません。
ファイルはcharset="UTF-8"でなければなりません。
出力行列のうち、未指定要素はnull("")になります。

入力データ(csv/matrixt.csv) 行列(戻り値)
    氏名,学部,学年,部活   (氏名は無視される)
  阿部,工学部,3        行列['阿部']['学部']=工学部; 行列['阿部']['学年']=3;  行列['阿部']['部活']=;
  井上,文学部,,野球      行列['井上']['学部']=文学部; 行列['井上']['学年']=;   行列['井上']['部活']=野球;
  宇田,文学部         行列['宇田']['学部']=文学部; 行列['宇田']['学年']=;   行列['宇田']['部活']=;
関数名(呼び出される関数)を記述する必要があります。
オプション:関数名に行名と列名を引数として渡すか否か これにより呼び出される関数の形式が2つあります。
  渡さない:指定しない     関数(行数, 列数, 行列) (注)
  渡す:"true"でも1でもよい  関数(行数, 列数, 行列, 行名, 列名)
(注)本来は行数と列数も不要なのですが、全体の形式の統一のためと、実際にはあると便利なことから、必須としました。

連想配列要素の操作(行名、列名も受け渡すとき)

なるべく連想配列の特徴を使わない記述をしました。

<script>
function csvMatrixHushRC関数1(行数, 列数, 行列, 行名, 列名) {
    var 内容 = "<h4>行名・列名のリスト</h4>行名:";
    for (var i=0; i<行数; i++) { 内容 += "行名[" + i + "]=" + 行名[i] + "; ";  }
    内容 += "<br>列名:";
    for (var j=0; j<列名.length; j++) { 内容 += "列名[" + j + "]=" + 列名[j] + "; ";  }
    内容 += "<h4>文学部の学生氏名</h4>";
    for (i=0; i<行数; i++) {
        if (行列[行名[i]]['学部'] == "文学部") {
            内容 += "氏名=" + 行名[i] +"; 部活=" + 行列[行名[i]]['部活'] + ";<br>";
        }
    }
    内容 += "<h4>「井上」「江川」の存在チェック</h4>";
    var 井上存否 = "井上は存在しません";
    var 江川存否 = "江川は存在しません";
    for (i=0; i<行数; i++) {
        if (列名[i] == "井上") 井上存否 += "井上は存在します<br>"; 
        if (列名[i] == "江川") 江川存否 += "江川は存在します<br>"; 
    }
    内容 += 井上存否 + "<br>" + 江川存否;
    document.getElementById("csvMatrixHushRC結果表示場所1").innerHTML = 内容;
}
</script>

<button onClick="csvMatrixHushRC('csv/matrixt.csv', 'csvMatrixHushRC関数1', '行名列名受渡')">関数1</button>
<div id="csvMatrixHushRC結果表示場所1" class="red"></div>
</div>

↓ <div id="csvMatrixHushRC結果表示場所1"></div>

連想配列要素の操作(行名、列名を受け渡さないとき)

なるべく連想配列の特徴を生かす記述にしました。

<script>
function csvMatrixHushRC関数A(行数, 列数, 行列) {
    var 内容 = "<h4>連想配列の表記方法</h4>"
             + "行列['阿部']['学部']=" + 行列['阿部']['学部'] + ";<br>"
             + "行列.井上.部活=" + 行列.井上.部活 + ";";
    内容 += "<h4>文学部の学生氏名</h4>";
    for (i in 行列) {                            // 第1添字のリストは「行列」を使う。 for (i = "阿部","井上","宇田") のような意味
        if (行列[i]['学部'] == "文学部") {
            内容 += "氏名=" + i +"; 部活=" + 行列[i]['部活'] + ";<br>";       // iは番号ではなく氏名になっている
        }
    }
    内容 += "<h4>「井上」「江川」の存在チェック</h4>";
    if (typeof 行列['井上'] === "undefined") 内容 += "井上は存在しません<br>";  // 行列[]とするのがポイント。行列[][]の形式はダメ
    else  内容 += "井上は存在します<br>";                                     // 宣言の有無だからnullや""ではなくundefined
    if (typeof 行列['江川'] === "undefined") 内容 += "江川は存在しません<br>";
    else  内容 += "江川はは存在します<br>";
    document.getElementById("csvMatrixHushRC結果表示場所A").innerHTML = 内容;
}
</script>

<button onClick="csvMatrixHushRC('csv/matrixt.csv', 'csvMatrixHushRC関数A')">関数A</button>
<div id="csvMatrixHushRC結果表示場所A"></div>

↓ <div id="csvMatrixHushRC結果表示場所A"></div>

配列を戻す(行名、列名を受け渡さないとき)

<script>
function csvMatrixHushRC関数B(行数, 列数, 行列) {
    var 内容 = "";
    for (var i in 行列) {               // 第1添字では「行列」にする    for (i = "阿部", "井上", "宇田") のような意味
        for (var j in 行列[i]) {        // 第2添字では「行列[i]」にする  for (j = "学部", "学年", "部活") のような意味
            内容 += "行列['" + i + "']['" + j + "']='" + 行列[i][j] + "'; ";
        }
        内容 += "<br>";
    }
    document.getElementById("csvMatrixHushRC結果表示場所B").innerHTML = 内容;
}
</script>

<button onClick="csvMatrixHushRC('csv/matrixt.csv', 'csvMatrixHushRC関数B')">関数B</button>
<div id="csvMatrixHushRC結果表示場所B"></div>

↓ <div id="csvMatrixHushRC結果表示場所B"></div>

.js形式の出力(行名、列名を受け渡さないとき)

<script>
function csvMatrixHushRC関数C(行数, 列数, 行列) {
    内容 = "var 行列 = new Array();<br>";
    for (var i in 行列) {
        内容 += "行列['" + i + "'] = new Array();<br>";
    }
    for (i in 行列) {
        for (var j in 行列[i]) {
            内容 += "行列['" + i + "']['" + j + "']='" + 行列[i][j] + "';<br>";
        }
    }
    document.getElementById("csvMatrixHushRC結果表示場所C").innerHTML = 内容;
}
</script>

<button onClick="csvMatrixHushRC('csv/matrixt.csv', 'csvMatrixHushRC関数C')">関数C</button>
<div id="csvMatrixHushRC結果表示場所C"></div>

↓ <div id="csvMatrixHushRC結果表示場所C"></div>

新人追加のときは 行列['新人'] = new Array(); が必要。属性追加ではその必要なし。

参照

行名[0]=阿部, 行名[1]=井上, 行名[0]=宇田,  列名[0]=学部, 列名[1]=学年
を得る関数:連想配列名称 = keynameHushMatrixRC(行列);


連想配列名称 = keynameHushMatrix(行列);

入力(行列)                    戻り値(連想配列名称)
  var 行列 = new Array();
  行列['氏名'] = ['阿部', '井上', '宇田'];     連想配列名称[0] = '氏名'
  行列['学部'] = ['工学部', '文学部', '文学部'];  連想配列名称[1] = '学部'
<script>
function keynameHushMatrixTest() {
    // 行列の定義
    var 行列 = new Array();
    行列['氏名'] = ['阿部', '井上', '宇田'];
    行列['学部'] = ['工学部', '文学部', '文学部'];
    // 連想配列名称の取得
    var 連想配列名称 = keynameHushMatrix(行列);
    // 連想配列名称の表示
    var 内容 = "連想配列名称個数=" + 連想配列名称.length + "<br>";
    for (var i=0; i<連想配列名称.length; i++) {
        内容 += "連想配列名称[" + i + "]='" + 連想配列名称[i] + "'; ";
    }
    document.getElementById("keynameHushMatrix結果表示場所A").innerHTML = 内容;
}
</script>

<button onClick="keynameHushMatrixTest()">実行A</button>
<div id="keynameHushMatrix結果表示場所A"></div>

↓ <div id="keynameHushMatrix結果表示場所A"></div>


連想配列名称 = keynameHushMatrixRC(行列);

入力(行列)                                                                         戻り値(連想配列名称[i][j])
  var 行列 = new Array();                                                               j→  0      1      2
  行列['阿部'] = new Array();  行列['阿部']['学部']='工学部'; 行列['阿部']['学年']=3; ↓i 
  行列['井上'] = new Array();  行列['井上']['学部']='文学部'; 行列['井上']['学年']=2;  0   '阿部' '井上' '宇田'
  行列['宇田'] = new Array();  行列['宇田']['学部']='文学部'; 行列['宇田']['学年']=3;   1   '学部' '学年'
<script>
function keynameHushMatrixRCTest() {
    // 行列の定義
    var 行列 = new Array();
    行列['阿部'] = new Array();  行列['阿部']['学部']='工学部'; 行列['阿部']['学年']=3;
    行列['井上'] = new Array();  行列['井上']['学部']='文学部'; 行列['井上']['学年']=2;
    行列['宇田'] = new Array();  行列['宇田']['学部']='文学部'; 行列['宇田']['学年']=3;
    // 名称の取得
    var 連想配列名称 = keynameHushMatrixRC(行列);
    // 第1添字「阿部, 井上, 宇田」の表示
    var 内容 = "行個数=" + 連想配列名称[0].length + "<br>";
    for (var i=0; i<連想配列名称[0].length; i++) {
        内容 += "連想配列名称[0][" + i + "]=" + 連想配列名称[0][i] + "; ";
    }
    内容 += "<br>";
    // 第2添字「学部, 学年」の表示
    内容 += "列個数=" + 連想配列名称[1].length + "<br>";
    for (var i=0; i<連想配列名称[1].length; i++) {
        内容 += "連想配列名称[1][" + i + "]=" + 連想配列名称[1][i] + "; ";
    }
    内容 += "<br>";
    document.getElementById("keynameHushMatrixRC結果表示場所B").innerHTML = 内容;
}
</script>

<button onClick="keynameHushMatrixRCTest()">実行B</button>
<div id="keynameHushMatrixRC結果表示場所B"></div>

↓ <div id="keynameHushMatrixRC結果表示場所B"></div>


順位 = orderMatrix(行列, ソート項目);

行列の指定した列(ソート項目)の値により昇順にソートしたときの各行の順位を戻します。
行列そのものはソートされません。各行のソート後の順位が戻されるだけです。
順位[k] = i とは、昇順ソートしたとき、k番目になる行が i であることを示します。
すなわち、行列[[順位[k]][j] がk番目の行になります。

通常の行列のとき

行列                       ソート項目=0               ソート項目=1             ソート項目=2
    '阿部', 40, '11'   順位[0]=1 行列[1][0]=井上  順位[0]=3 行列[3][1]=10  順位[0]=2 行列[2][2]=
    '井上', 20, '2'    順位[1]=4 行列[4][0]=大西  順位[1]=1 行列[1][1]=20  順位[1]=3 行列[3][2]=1
    '宇田', 40, ''     順位[2]=2 行列[2][0]=宇田  順位[2]=4 行列[4][1]=30  順位[2]=0 行列[0][2]=11
    '江川', 10, '1'    順位[3]=3 行列[3][0]=江川  順位[3]=0 行列[0][1]=40  順位[3]=1 行列[1][2]=2
    '大西', 30, '21'   順位[4]=0 行列[0][0]=阿部  順位[4]=2 行列[2][1]=40  順位[4]=4 行列[4][2]=21

ソート項目=1 の例を示します。

<script>
function orderMatrixtest1() {
    // 行列の定義
    var 行列 = [ ['阿部', 40, '11'],
                 ['井上', 20, '2' ],
                 ['宇田', 40, ''  ],
                 ['江川', 10, '1' ],
                 ['大西', 30, '21'] ];
    var ソート項目 = 1;
    var 順位 = orderMatrix(行列, ソート項目);
    var 内容 = "ソート項目=" + ソート項目 + "<br>";
    for (var k=0; k<行列.length; k++) {              // 昇順の場合
        //   for (var k=行列.length-1; k>=0; k--) { // 降順の場合
        内容 += "順位[" + k + "]=" + 順位[k]
             + " 行列[" + 順位[k] + "][" + ソート項目 + "]=" + 行列[順位[k]][ソート項目] + "<br>";
    }
    document.getElementById("orderMatrix結果表示場所A").innerHTML = 内容;
}
</script>

<button onClick="orderMatrixtest1()">実行A</button>
<div id="orderMatrix結果表示場所A"></div>

↓ <div id="orderMatrix結果表示場所A"></div>

連想配列のとき

行列が連想配列の場合、例えば 行列['氏名'] = new Array() での '氏名' がソート項目になります。

行列                                 ソート項目=氏名      ソート項目=学年
  行列['氏名']=['阿部',  '井上',  '宇田',  '江川',  '大西'];   順位[0]=1 行列['氏名'][1]=井上 順位[0]=4 行列['学年'][4]=1
  行列['学部']=['工学部','文学部','文学部','工学部','法学部']; 順位[1]=4 行列['氏名'][4]=大西 順位[1]=1 行列['学年'][1]=2 
  行列['学年']=[ 3,       2,       3,       4,       1];       順位[2]=2 行列['氏名'][2]=宇田 順位[2]=0 行列['学年'][0]=3
                                                               順位[3]=3 行列['氏名'][3]=江川 順位[3]=2 行列['学年'][2]=3
                                                               順位[4]=0 行列['氏名'][0]=阿部 順位[4]=3 行列['学年'][3]=4

ソート項目=学部 のの例を示します。

<script>
function orderMatrixtest2() {
    // 行列の定義
    var 行列 = new Array();
    行列['氏名'] = ['阿部',   '井上',  '宇田',   '江川',   '大西'];
    行列['学部'] = ['工学部', '文学部','文学部', '工学部', '法学部'];
    行列['学年'] = [ 3,        2,       3,       4,         1];

    var ソート項目 = "学部";
    var 順位 = orderMatrix(行列, ソート項目);
    var 内容 = "ソート項目=" + ソート項目 + "<br>";
    for (var k=0; k<行列[ソート項目].length; k++) {
        //    for (var k=行列[ソート項目].length-1; k>=0; k--) {  降順の場合
        内容 += "順位[" + k + "]=" + 順位[k]
             + " 行列['" + ソート項目  + "'][" + 順位[k] + "]=" + 行列[ソート項目][順位[k]] + "<br>";
    }
    document.getElementById("orderMatrix結果表示場所B").innerHTML = 内容;
}
</script>

<button onClick="orderMatrixtest2()">実行B</button>
<div id="orderMatrix結果表示場所B"></div>

↓ <div id="orderMatrix結果表示場所B"></div>