対象分野 1 自ファイル・他のファイルの指定領域を取り出して表示する。 2 画像ファイルをトリミングして <img> や <canvas> に表示する。 3 配列、ポインタ、連想配列(Obj配列)、Map配列、JSONデータ、CSVファイルの操作。 他のライブラリ library.js 数値解析・統計・経営数学関連 canvasxy.js CANVASをXY座標軸で記述する分野 library.js その他未分類 ご利用にあたって
自HTMLからの読込・表示 showInnerHTML 自HTML(innerHTML) の表示 swichDisplay 表示・非表示の反転 外部ファイルの取出し getFileWhole ファイル全体 getFileByLiteral 指定した最初と最後の文字列の範囲 getFileByFunction 指定した function ~ ] の範囲 画像読込 getImageAdjust 画像の縦横幅の調整 getImageCanvas CANVASでの画像の縦横幅の調整 ローカルファイル getLocalFileDB 指定フォルダ内のファイル特性を取得(ダイアログボックス) getLocalFileDD 指定フォルダ内のファイル特性を取得(ドラッグ&ドロッ 別ウインドウへの表示 writeWindow 文字列変数内容の別ウインドwへの表示 writeWindowById HTML中ID指定範囲の別ウインドwへの表示 配列の加工 sortMatrix 配列の行・列方向のソート orderMatrix 順位づけ。連想配列も適用。compareType は適用しない searchMatrix 検索 順次検索/二分検索 mergeMatrix ソートされた二つの表をマージする projectMatrix 列を指定して射影した表を作成 joinMatrix ジョイン 2つの表を結合して新表を作成 joinMatrixHush 同上 結合表が連想配列 aggregateMatrix 集計表の作成 updateMatrix ソートされた元表を更新表で更新する changeMatrixNullBlank 特殊タイプ文字をすべて "" にする sortMatrixEx compareType での大小関係を含めたSORT ポインタ createPointer 双方向ポインタの生成 updatePointer 双方向ポインタの追加・削除・変更 cleanPointer 双方向ポインタの"削除"行の削除 配列形式の変換 連想配列(Obj配列)⇔通常配列 MtxToObj 通常配列→Obj配列 ObjToMtx Obj配列→通常配列 getKeyObj Obj配列の行名と列名の取得 連想配列(Map配列)⇔通常配列 MtxToMap 通常配列→Map配列 MapToMtx Map配列→通常配列 JSONデータ⇔Obj配列 JSON.stringify Obj配列→JSONデータ ⇔ JSON.parse JSONデータ→Obj配列 CSVファイル→2次元配列 CsvToMtx 外部CSVファイル→2次元配列 未分類 functionLiteral 関数名をリテラルで与える
document.getElementById(選択場所).innerHTML で選択した場所を、document.getElementById(表示場所).innerHTML に表示します。
このとき、タグ < ~ >: などのタグを、単なる文字列として無効化します。
表示場所を省略あるいは "window" を指定すると、別ウインドウに表示されます。
選択場所が、script や pre のように br がない場合は、選択場所全体を pre~/pre で囲む必要がありますが、その場合は改行有無を省略あるいは false とします。選択場所が、p など br を含む場合は、その必要がないので true を指定します。
この下に次の文があります。 <script id="SCRIPT"> function abc(a,b) { if (a < b) c = a; if (a > b) c = b; return c; } </script>
この下の文は <pre id="PRE"> ~ </pre> で囲まれています。
この部分は pre です。 さしすせそ たちつてと
この下の文は <p id="P"> ~ </p> で囲まれています。
この部分は br で改行しています。
あいうえお
かきくけこ
対象ID:表示反転の対象になる個所
<div id="対象ID" style="display:none"> ~表示内容~ </div> 初期状態は非表示にしておく
表示場所:表示非表示をする場所(対象IDと異なる場所で反転するときに指定)
省略した場合:対象IDの場所が表示反転する
指定した場合:対象IDに内容がこの場所に表示される/""になる
対象IDは非表示のまま
<div id="表示場所">:</div> <div>:</div>の間には何も記述しない
<button onClick="swichDisplay('表示反転対象ID1');">swichDisplay('表示反転対象ID1');</button> <div id="表示反転対象ID1" style="display:none"> <p>「表示反転対象ID1」の内容です。</p> </div>
この下に<div id="表示反転対象ID1" style="display:none">があります。
外部プレーンファイルを読込み、その全体あるいは指定部分を。指定した表示場所あるいは新ウインドウに表示します。また、対象となる部分の各行を行の配列として取り出すことができます。
対象ファイルから取り出す部分を、id, class, tag で指定し、指定した表示場所に表示する機能は、JQueryを用いて簡単に記述できるので、ここでは、JQuery で扱っていない機能だけに限定しています。
ここでのテストデータは、text/test.txtを用います。
外部ファイルを読み、その全体を,
・表示場所を指定しない:行の配列にして戻す
・表示場所を指定(<div id="~"></div>):表示場所に表示。戻り値なし
・表示場所を 'window' と指定:新ウインドウにポップアップ表示。戻り値なし
の処理をします。
文中にHTMLのタグがある場合、それをタグとして認識し、表示時に改行などを行うか、< や > を特殊文字(実体参照)に置換して、タグ機能を無効にしするかの指定です。
表示をするときは、HTMLのルールに従いますので、タグ無効をしないと、タグは表示されず、行連続した半角スペースは詰められます。それで、ソースコードを表示する場合は無効指定をするのが適切です。逆に、対象関数の機能を用いるために表示場所に埋め込むには、無効にしてはいけません。
無効にするときは "yes" 、しないときは "no" と指定します。省略はできません。
表示場所を与えたときは、行末に改行コード"<br>"を付け加えてあります。
タグ変換なし | (タグはそのまま:改行などが行われる) | |
表示場所なし | var 読込行 = getFileWhole('text/test.txt', 'no'); | |
表示場所指定 | getFileWhole('text/test.txt', 'no', 'getFileWhole表示場所'); | |
'window' | getFileWhole('text/test.txt', 'no', 'window'); | |
タグ変換あり | (タグ機能を無効にする) | |
表示場所なし | var 読込行 = getFileWhole('text/test.txt', 'yes'); | |
表示場所指定 | getFileWhole('text/test.txt', 'yes', 'getFileWhole表示場所'); | |
'window' | getFileWhole('text/test.txt', 'yes', 'window'); |
getFileWhole表示場所
getFileWholeが指定したファイル全体を対象にしていたのに対して、上から探索して指定した最初文字列を持つ最初の行から, 最後文字列を持つ最初の行までの範囲を対象にします。
getFileByLiteral('text/test.txt', 'abc', 'xyz', 'yes', 'getFileByLiteral表示場所'); | |
getFileByLiteral('text/test.txt', '_abc', '%xyz', 'yes', 'window'); |
getFileByLiteral表示場所
getFileWholeが指定したファイル全体を対象にしていたのに対して、行の先頭が "function 関数名" である行から、"}" である行までを選択します。
本ページで随所に[ソースコード表示]とありますが、この関数を特定目的に簡素化したものを利用しています。
タグ無効なし | (タグはそのまま:改行などが行われる) | |
表示場所なし | var 読込行 = getFileByFunction('text/test.txt', 'aaa', 'no'); | |
表示場所指定 | getFileByFunction('text/test.txt', 'aaa', 'no', 'getFileByFunction表示場所'); | |
'window' | getFileByFunction('text/test.txt', 'aaa', 'no', 'window'); | |
タグ変換あり | (タグ機能を無効にする) | |
表示場所なし | var 読込行 = getFileByFunction('text/test.txt', 'aaa', 'yes'); | |
表示場所指定 | getFileByFunction('text/test.txt', 'aaa', 'yes', 'getFileByFunction表示場所'); | |
'window' | getFileByFunction('text/test.txt', 'aaa', 'yes', 'window'); |
すなわち、縦横比は不明な画像を一定の枠内に表示することがでkるので、異なる縦横比のいくつかの画像を、並べて表示するときに利用できます。
この下に
<style>
#getImageAdjust表示場所 { }
<style>
があります。
↓ <img id="getImageAdjust表示場所">: があります。
←図境界
↑図境界
ファイル名を変えるときは、再読込みをしてください。
ファイル名 | 横幅 | 縦幅 | 水平位置 | 垂直位置 | 備考 | |
picture/400x300.jpg | <img src="picture/400x300.jpg">と同じ | |||||
picture/400x300.jpg | 200 | 300 | top | 縦幅を大、top指定→下にマージン | ||
picture/400x300.jpg | 200 | 300 | center | 縦幅を大、center指定→上下にマージン | ||
picture/480x640.jpg | <img src="picture/480x640.jpg">と同じ | |||||
picture/480x640.jpg | 400 | 300 | right | 横幅を大、right指定→左にマージン |
画像ファイルを縦横比を保ちつつcanvasいっぱいに表示する。<canvas>にwidth, heightは必須
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になります。 |
canvasのサイズは変えず、画像を縦位置:上・中・下、横位置:左・中・右に表示。余白部を残す。
ケース1この下に<canvas id="GIcanvas2" width="300" height="300"></canvas>があります。
呼出側の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>
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>
このHTML中の、&li;div id="対象ID"> ~ </div> で囲んだ範囲を別ウインドウに表示します。
置換:<. > を特殊文字に置換して本来の機能をなくすこと。
省略時:置換する
"noreplace" あるいは何らかの値:置換しない。
この下に次の文があります。
var 文字列変数 = "<p>あいうえお<br>かきくけこ</p>"; 文字列変数 += "function func(x) {"; 文字列変数 += " return x * x;"; 文字列変数 += "}";writeWindow(文字列変数)
このHTML中の、&li;div id="対象ID"> ~ </div> で囲んだ範囲を別ウインドウに表示します。
置換:<. > を特殊文字に置換して本来の機能をなくすこと。
省略時:置換する
"noreplace" あるいは何らかの値:置換しない。
この下に次の文があります。
<script id='writeWindowByIdTest'>
<p>あいうえお<br>かきくけこ</p>
function func(x) {
return x * x;
}
</script>
writeWindowById('writeWindowByIdTest')
パラメタ sort:"row"/"col" 必須 row 行のSORT、行が変化する key1:第1キーの列(行)番号 必須 order1:"ascend"/"descend" 第1キーの昇順/降順 省略="ascend" key2:第2キーの列(行)番号 省略="" (第2キーを指定しない) order2:"ascend"/"descend" 第1キーの昇順/降順 省略="ascend" title:true/false 省略=false sort:"row"/"col" のとき先頭行/列をタイトルとしてソートの対象にしない
例題の配列 var 配列0 = [ [ 0, 1, 2, 3], var 配列R = [ ["r0", 0, 1, 2, 3], [ 1, 2, 3, 1], ["r1", 1, 2, 3, 1], [ 2, 3, 1, 3], ["r2", 2, 3, 1, 3], [ 3, 1, 3, 1], ["r3", 3, 1, 3, 1], [ 4, 3, 1, 2] ]; ["r4", 4, 3, 1, 2] ]; var 配列C = [ ["c0","c1","c2","c3"], var 配列B = [ ["rc","c0","c1","c2","c3"], [ 1, 2, 3, 1], ["r0", 0, 1, 2, 3], [ 2, 3, 1, 3], ["r1", 1, 2, 3, 1], [ 3, 1, 3, 1], ["r3", 3, 1, 3, 1], [ 4, 3, 1, 2] ]; ["r4", 4, 3, 1, 2] ];(配列0, { sort:"row", key1:2, order1:"ascend"})
行列の指定した列(ソート項目)の値により昇順にソートしたときの各行の順位を戻します。 ソート項目が複数のときは、[キー1, キー2] のように与えます。 先頭行=1:先頭行が列名のとき。ソート項目は列名で与えます。 先頭行=0:先頭行に列名がないとき。ソート項目は列番号で与えます。 行列そのものはソートされません。各行のソート後の順位が戻されるだけです。 順位[k] = i とは、昇順ソートしたとき、k番目になる行が i であることを示します。 すなわち、行列[[順位[k]] がk番目の行になります。 ソート項目の同じの場合、発生順の順序になります。
ケース1 ケース2 var 行列 = [ var 行列 = [ ["列A", "列B", "列C"], [ 3, 10, 2], [ 3, 10, 2], [ 1, 10, 1], [ 1, 10, 1], [ 5, 20, 3], [ 5, 20, 3], [ 4, 10, 2], [ 4, 10, 2], [ 2, 20, 1] ]; [ 2, 20, 1] ]; var 順位 = orderMatrix var 順位 = orderMatrix(行列, 0, 1); (行列, 1, ["列C", "列B"]);
元表は検索キーを主キーとしています。その主キーが検索値と一致する行を検索して一致位置として戻します。一致する行がなければ一致位置=-1 になります。
元表の先頭行が列名のときは先頭行=1とし、検索キーは列名で指定します。列名行がなときは、先頭行=0とし、検索キーは行番号で指定します。
タイプは検索の方法です。
0:元表はソートされていない。順次探索法
1:昇順にソートされている。順次探索法
2:昇順にソートされている。二分探索法
検索キー, 検索値は複数していが必要です。[キー1, キー2] の形式で与えます。
var 元表A = [ var 元表B = [ var 元表C = [ ["列A","列B","列C" ], [ 0, 10, 100 ], [ 0, 10, 100 ], [ 1, 10, 100 ], [ 1, 30, 300 ], [ 1, 10, 200 ], [ 2, 15, 200 ], [ 2, 20, 300 ], [ 2, 20, 100 ], [ 3, 20, 100 ], [ 3, 15, 200 ], [ 3, 20, 300 ], [ 4, 25, 300 ], [ 4, 35, 100 ] ]; [ 4, 30, 100 ] ]; [ 5, 30, 100 ] ]; var 一致位置 = []; 元表, 先頭行、タイプ、検索キー, 検索値 一致位置 一致位置[0] = searchMatrix(元表A, 0, 0, 1, 20); 2 一致位置[1] = searchMatrix(元表A, 0, 0, 1, 25); -1 一致位置[2] = searchMatrix(元表B, 0, 1, [1,2], [20,100]); 2 一致位置[3] = searchMatrix(元表B, 0, 1, [1,2], [20,200]); -1 一致位置[4] = searchMatrix(元表B, 0, 2, [1,2], [20,100]); 2 一致位置[5] = searchMatrix(元表B, 0, 2, [1,2], [20,200]); -1 一致位置[6] = searchMatrix(元表C, 1, 1, "列B", 20); 3 一致位置[7] = searchMatrix(元表C, 1, 1, "列B", 13); -1 一致位置[8] = searchMatrix(元表C, 1, 2, "列B", 20); 3 一致位置[9] = searchMatrix(元表C, 1, 2, "列B", 40); -1
元表と更新表をマージして新表を作成します。元表と更新表はキーの昇順にソートされており、同一キーをもつ複数のデータがあります。
表の構成は、次の2つがあり、元表と更新表は同一の構成でなければなりません。ケース1 var 元表 = [ ["得意先番号", "商品番号", "数量", "金額"], [ 10, 100, 10, 200 ], [ 10, 200, 10, 200 ], [ 10, 200, 20, 400 ], [ 20, 100, 20, 400 ], [ 20, 200, 10, 200 ], [ 20, 200, 20, 400 ], [ 30, 100, 20, 200 ] ]; var 更新表 = [ ["得意先番号", "商品番号", "数量", "金額"], [ 10, 100, 15, 300 ], [ 15, 200, 15, 300 ], [ 20, 150, 15, 500 ], [ 35, 150, 25, 500 ] ]; var 新表 = mergeMatrix(元表, 更新表, 1, [ "得意先番号", "商品番号"]); ケース2 // -------- キー -------- // "得意先番号", "商品番号", "数量", "金額" // 列番号 0 1 2 3 var 元表 = [ [ 10, 100, 10, 200 ], [ 10, 200, 10, 200 ], [ 10, 200, 20, 400 ], [ 20, 100, 20, 400 ], [ 20, 200, 10, 200 ], [ 20, 200, 20, 400 ], [ 30, 100, 20, 200 ] ]; var 更新表 = [ [ 10, 100, 15, 300 ], [ 15, 200, 15, 300 ], [ 20, 150, 15, 500 ], [ 35, 150, 25, 500 ] ]; var 新表 = mergeMatrix(元表, 更新表, 0, [0, 1]);
先頭行=1:先頭行が列名になっている
先頭行=0:列名行がなく、先頭行もデータである。
"削除" がないとき、元表から指定した項目(列)を、指定した順序に並べ替えます。 "削除" があるとき、元表から指定した項目(列)を削除します。
ケース1 var 元表 = [ ["列A", "列B", "列C", "列D", "列E"], [ 10, 11, 12, 13, 14 ], [ 20, 21, 22, 23, 24 ], [ 30, 31, 31, 33, 34 ] ]; var 新表 = projectMatrix(元表, 1, ["列A", "列D", "列B"]); ケース2 var 元表 = [ [ 10, 11, 12, 13, 14 ], [ 20, 21, 22, 23, 24 ], [ 30, 31, 31, 33, 34 ] ]; var 新表 = projectMatrix(元表, 0, [1, 3], "削除");
元表と照合表を結合キーで結合して新表を作成します。例えば売上表(元表)の得意先番号(結合キー)と、得意先番号を主キーとする得意先表(照合表)を結合して、得意先表がもつ得意先名や住所の属性を元表に付け加えて新表を作成します。
先頭行=1:先頭行が列名になっている
先頭行=0:列名行がなく、先頭行もデータである。
元表の得意先番号が得意先表にない場合(不一致)のとき
・不一致処理を指定しないとき:元表からそのレコードを削除されます。
・"保存" を指定した場合、削除せず、追加属性が undefined になります。
注意
照合表の結合キーは先頭列におく必要があります。
ケース1 var 元表 = [ ["年月日", "事業所", "得意先番号", "商品番号", "数量"], [ 220401, 1, 10, 100, 10 ], [ 220402, 3, 15, 200, 10 ], [ 220403, 2, 30, 300, 20 ], [ 220404, 1, 30, 300, 20 ], [ 220405, 3, 35, 100, 10 ] ]; var 照合表 = [ ["得意先番号", "得意先名", "得意先住所"], [ 10, "得意A", "東京"], [ 20, "得意B", "大阪"], [ 30, "得意C", "東京"], [ 40, "得意D", "大阪"] ]; var 新表 = joinMatrix(元表, 照合表, 1, "得意先番号"); ケース2 var 元表 = [ [ 220401, 1, 10, 100, 10 ], [ 220402, 3, 15, 200, 10 ], [ 220403, 2, 30, 300, 20 ], [ 220404, 1, 30, 300, 20 ], [ 220405, 3, 35, 100, 10 ] ]; var 照合表 = [ [ 10, "得意A", "東京"], [ 20, "得意B", "大阪"], [ 30, "得意C", "東京"], [ 40, "得意D", "大阪"] ]; var 新表 = joinMatrix(元表, 照合表, 0, 2, "保存");
joinMatrix と同じ機能ですが、照合表が下記のような構造の連想配列になっています。
これにより、照合表の検索がダイレクトアクセスになるので、照合表が大量のとき、処理効率が高くなります。
joinMatrixHush:元表の先頭行に列名がなく、結合キーは列番号で指定
joinMatrixHushColname:元表の先頭行が列名で、結合キーは列名で指定
ケース1 joinMatrixHush var 元表 = [ [ 220401, 1, 10, 100, 10 ], [ 220402, 3, 15, 200, 10 ], [ 220403, 2, 30, 300, 20 ], [ 220404, 1, 30, 300, 20 ], [ 220405, 3, 35, 100, 10 ] ]; var 照合表 = {}; 照合表["10"] = ["得意A", "東京"]; 照合表["20"] = ["得意B", "大阪"]; 照合表["30"] = ["得意C", "東京"]; 照合表["40"] = ["得意D", "大阪"]; var 新表 = joinMatrixHush(元表, 照合表, 2, "保存"); ケース2 joinMatrixHushColname var 元表 = [ ["年月日", "事業所", "得意先番号", "商品番号", "数量"], [ 220401, 1, 10, 100, 10 ], [ 220402, 3, 15, 200, 10 ], [ 220403, 2, 30, 300, 20 ], [ 220404, 1, 30, 300, 20 ], [ 220405, 3, 35, 100, 10 ] ]; var 照合表列名 = ["得意先名", "得意先住所"]; var 照合表 = {}; 照合表["10"] = ["得意A", "東京"]; 照合表["20"] = ["得意B", "大阪"]; 照合表["30"] = ["得意C", "東京"]; 照合表["40"] = ["得意D", "大阪"]; var 新表 = joinMatrixHushColname(元表, 照合表, 照合表列名, "得意先番号");
明細表はキー項目の昇順にソートしています。それをキー項目により、集計項目を集計した集計表を作ります。
「保存」を省略すると、集計表の項目はキー項目と集計項目で指定したものだけになります。
"保存" と指定すると、それ以外の項目が最後にマッチした値が入れられます。
ケース1 var 明細表 = [ // ------ キー項目 ----- -- 集計項目 -- ["行番号", "得意先番号", "商品番号", "数量", "金額"], [ 0, 10, 100, 11, 2000 ], // ─ [ 1, 10, 200, 11, 2000 ], // ┐ [ 2, 10, 200, 21, 4000 ], // │ [ 3, 10, 200, 31, 6000 ], // ┴ [ 4, 20, 100, 31, 4000 ], // ─ [ 5, 20, 200, 11, 2000 ], // ┐ [ 6, 20, 200, 21, 4000 ], // ┴ [ 7, 30, 100, 11, 2000 ], // ┐ [ 8, 30, 100, 21, 4000 ] ]; // ┴ var 集計表 = aggregateMatrix(明細表, 1, [ "得意先番号", "商品番号"], [ "数量", "金額"]); ケース2 var 明細表 = [ // ┌キー項目 [ 0, 10, 100, 11, 2000 ], // ┐ [ 1, 10, 200, 11, 2000 ], // │ [ 2, 10, 200, 21, 4000 ], // │ [ 3, 10, 200, 31, 6000 ], // ┴ [ 4, 20, 100, 31, 4000 ], // ┐ [ 5, 20, 200, 11, 2000 ], // │ [ 6, 20, 200, 21, 4000 ], // ┴ [ 7, 30, 100, 11, 2000 ], // ┐ [ 8, 30, 100, 21, 4000 ] ]; // ┴ var 集計表 = aggregateMatrix(明細表, 0, 1, [2, 3], "保存");
元表を更新表により更新して新表を作成します。データを一意に示す主キーの昇順でソートされています(同じ主キーをもつ複数のデータは存在しない)。
両表は同一の構成であり、更新表では、先頭列に更新区分が付けらています。更新区分は次の3つがあります。
追加:元表の主キーがない更新表のデータを追加
元表にその主キーをもつデータがあれば、重複エラーなので警告表に出力
変更:その主キーをもつ元表のデータを更新表のデータに置換
元表にその主キーをもつデータがないときは、アンマッチなので警告表に出力
削除:その主キーをもつ元表のデータを削除
元表にその主キーをもつデータがないときは、アンマッチなので警告表に出力
(更新表データは、主キーの項目だけがあればよい。
表の構成は、次の2つがあり、元表と更新表は同一の構成でなければなりません。
先頭行=1 先頭行が列名になっている
先頭行=0 列名行がなく、先頭行もデータである。
この違いは。主キーを列名で与えるか、列番号で与えるかにより判別されます。
主キーは、単一項目でもよいし、複数項目を結合したものも扱えます。
複数項目を指定するには、[項目1, 項目2] のように表記します。
エラーが発生しなかっらときは、警告表 = "" になります。
ケース1 var 元表 = [ ["得意先番号", "商品番号", "数量", "金額"], [ 10, 100, 10, 200 ], // このまま [ 10, 200, 10, 200 ], // このまま [ 20, 100, 20, 400 ], // このまま [ 20, 200, 10, 200 ], // このまま(追加エラー) [ 20, 300, 10, 300 ], // 変更される [ 30, 100, 20, 200 ] ]; // 削除される var 更新表 = [ ["更新区分", "得意先番号", "商品番号", "数量", "金額"], [ "変更", 15, 250, 15, 500 ], // アンマッチ [ "追加", 20, 200, 15, 300 ], // 重複エラー [ "変更", 20, 300, 15, 500 ], // 変更成功 [ "削除", 30, 100 ], // 削除成功 [ "追加", 35, 150, 25, 500 ] ]; // 追加成功 var [新表, 警告表] = updateMatrix(元表, 更新表, 1, [ "得意先番号", "商品番号"]); ケース2 // ------- 主キー ------- // "得意先番号", "商品番号", "数量", "金額" // 列番号 0 1 2 3 var 元表 = [ [ 10, 100, 10, 200 ], [ 10, 200, 10, 200 ], [ 20, 100, 20, 400 ], [ 20, 200, 10, 200 ], [ 20, 300, 10, 300 ], [ 30, 100, 20, 200 ] ]; var 更新表 = [ ["追加", 15, 150, 25, 500 ], // 追加成功 ["変更", 20, 100, 25, 500 ], // 変更成功 ["追加", 20, 200, 15, 300 ], // 追加失敗 ["削除", 20, 300 ], // 削除成功 ["追加", 35, 150, 15, 300 ], // 追加成功 ["変更", 45, 250, 45, 500 ] ]; // 変更失敗 var [新表, 警告表] = updateMatrix(元表, 更新表, 0, [0, 1]);
二次元の元配列の指定行(列)の要素について、undefind || null → ''(変更後='')、undefind || ''l → null(変更後=null)の変換をした新配列を戻します。配列名称を与えると、別ウインドウにJS 配列名称[][] を表示します。
var 元配列 = [ [ "aaa", null, '', "" ], [ null, '', "", 14 ], [ '', 'ccc', 23 ], // [2][3] は undefined になります。 [ "", 32, , null] // [3][2] は undefined になります。 ];
注意:この関数の中で compareType() を呼び出しています。両者を同じフォルダに置くか、 compareType()をjs指定してください。
二次元配列の元配列をソートして新配列を作ります。パラメタにより多様な処理ができます。主な特徴を掲げます。
パラメタで指定できる項目を示します。ここでは sort に"row" を指定したときの説明で、( )内は"col" を指定したときです。
パラメタ | 指定値 | 簡略 | 省略値 | 説明 |
sort | "row"|"col" | "r"|"c" | "row" | ソートして順序が変わるのが行(列)。 |
title | true|false | false | true とすると先頭行(列)をタイトルとしてソートの対象にしない。 | |
first | 行(列)番号 | 0|1 | ソート対象最初行(列)、titleがtrueなら省略値は1 | |
last | 行(列)番号 | 配列サイズ | ソート対象最後行(列) | |
key1 | 列(行)番号 | なし(必須) | ソートキー第1順位の列(行)、titleがtrueなら列名(行名)でもよい | |
order1 | "ascend"|"descend" | "a"|"d" | "a" | key1での昇順(ascend)、降順(descend) |
key2 | 列(行)番号 | なし | 省略時はソートキーが一つになる、 | |
order2 | "ascend"|"descend" | "a"|"d" | "a" | key2での昇順(ascend)、降順(descend)。key2指定がないときは無視 |
bnu | "top"|"bottom" | "t"|"b" | "b" | "", null, undefined の項を上にする(top)か下にするか |
window | 配列名称 | なし | 指定するとソート後配列を別ウインドウに 配列名称[i][j] = xxx; の形式で表示 |
新配列 = sortMatrixEx(元配列, { key1: 1, // 列1の昇順 window: "表" // JSリストあり }); |
新配列 = sortMatrixEx(元配列, { title: true, // タイトル行あり key1: "列1", // 列名で指定 order1: "d" // 降順ソート }); |
新配列 = sortMatrixEx(元配列, { title: true, key1: 1, bnu: "top" // 特殊タイプを上へ }); |
新配列 = sortMatrixEx(元配列, { title: true, key1: 1, first: 2, // 2~5行をソート対象に last: 5 }); |
新配列 = sortMatrixEx(元配列, { title: true, key1: 1, // キー個数=2 key2: 2 }); |
新配列 = sortMatrixEx(元配列, { sort: "col", // 列をを動かす key1: 1, // 行1の昇順 title: true }); |
ここでの双方向ポインタについて全般的な説明をします。 var 配列 = [ ポインタ = [ // 主キー // 降順 昇順 [ 0, "DDD" ], 0 [ 4. 2], [ 1, "FFF" ], 1 [ 2. 最大], [ 2, "EEE" ], 2 [ 0. 1], [ 3, "BBB" ], 3 [最小. 4], [ 4, "CCC" ] ]; 4 [ 3. 0] ], 配列は単一項目の主キーを持っています。 そのポインタは配列行に対応して、昇順・降順での次の行を示しています。 ポインタ0 は、配列0 に対応し、その主キーは DDD です。 ポインタ[0,1] = 2 は、DDD の次に大きいのが 2, すなわち EEE を指しています。 ポインタ[2,1] = 1 により 次に大きいのは FFF になります。 ポインタ[1,1] = "最大" は、 FFF が最大で、これより大きい列は存在しないことを示します。 以上から (0) DDD < (2) EEE < (1) FFF が得られます。 同様に降順では、 ポインタ[0,0] = 4 CCC ポインタ[4,0] = 3 BBB ポインタ[3,0] = "最小" となり、(0) DDD > (4) CCC > (3) BBB が得られます。
配列の双方向ポインタを作成します。
主キーは単一の列項目とします。(複合単一キーは使えません)
var 配列A = [ var 配列B = [ ポインタ = [ ["列A","列B"], // 降順 昇順 [ 0, "DDD" ], [ 1, "DDD" ], 0 [ 4. 2], [ 1, "FFF" ], [ 2, "FFF" ], 1 [ 2. 最大], [ 2, "EEE" ], [ 3, "EEE" ], 2 [ 0. 1], [ 3, "BBB" ], [ 4, "BBB" ], 3 [最小. 4], [ 4, "CCC" ] ]; [ 5, "CCC" ] ]; 4 [ 3. 0] ], (配列BTrace) ポインタ = createPointerTrace(配列B, 1, "列B"); (配列ARetur) ポインタ = createPointer(配列, 0, 1);
操作 "追加" 元配列の末尾に検索要素を追加。検索要素は元配列と同じ構成のベクトル(項目名の先頭行は存在しない) "削除" 元配列の一致行はそのままにしてポインタの値を "削除" とする。検索要素はスカラーの検索値 "変更" 元配列の末尾に検索要素を追加し、元配列の一致行のポインタを "削除" とする。 先頭行 配列の先頭行が列名であれば1。なければ0。検索要素には列名行はない。 主キー 配列での主キー。これが検索キーになる。先頭行があるときは列名、ないときは列番号でA与える。 検索要素 追加・変更では配列と同形式のベクトル(配列の1行)。元配列の末尾に追加される。 削除では、検索値だけを与える。 var 配列 = [ var ポインタ = [ ["列A","列B"], // 降順 昇順 ポインタ行 [ 0, "CCC" ], [ 3, 5 ], // 0 [ 1, "FFF" ], [ 2, 4 ], // 1 [ 2, "EEE" ], [ 5, 1 ], // 2 [ 3, "BBB" ], ["最小", 0 ], // 3 [ 4, "GGG" ], [ 1, "最大"], // 4 [ 5, "DDD" ] ]; [ 0, 2 ] ]; // 5updatePointer("追加", 配列, 1, "列B", [6,"AAA"], ポインタ); // 追加 元最小値より小
var 配列 = [ var ポインタ = [ ["列A","列B"], [ 0, "DDD" ], [ 3, 1 ], [ 1, "FFF" ], [ 0, 4 ], [ 2, "EEE" ], // 削除 [ "削除","削除"], [ 3, "BBB" ], [ "最小", 3 ], [ 4, "CCC" ], [ 2, 0 ], [ 5, "AAA" ], // 削除 [ "削除","削除"], [ 6, "GGG" ] ]; [ 1, "最大"] ]; var 先頭行 = 1; cleanPointer(配列, 先頭行, ポインタ);
形式1(列名行なし) | 形式2(列名行あり) | |
---|---|---|
通常の配列 |
Mtx1 = [ // 先頭の列名行なし ["阿部", "工学部", 3, 4], ["井上", "文学部", 2, 3], ["宇田", "文学部", 4, 4] ]; |
Mtx2 = [ ["氏名", "学部", "学年", "成績"], // ←列名行 ["阿部", "工学部", 3, 4], ["井上", "文学部", 2, 3], ["宇田", "文学部", 4, 4] ]; |
Obj配列 |
Obj1 = {}; Obj1["阿部"] = ["工学部", 3, 4]; Obj1["井上"] = ["文学部", 2, 3]; Obj1["宇田"] = ["文学部", 4, 4]; |
Obj2 = {}; Obj2.阿部 = { 学部:"工学部", 学年:3, 成績:4}; Obj2.井上 = { 学部:"文学部", 学年:2, 成績:3}; Obj2.宇田 = { 学部:"文学部", 学年:4, 成績:4}; |
要素記述(1) 変数なし |
Obj1=[object Object] Obj1['阿部']=工学部,3,4 Obj1.阿部=工学部,3,4 Obj1['阿部'][0]=工学部 Obj1.阿部[0]=工学部 |
Obj2=[object Object] Obj2['阿部']=[object Object] Obj2.阿部=[object Object] Obj2['阿部']['学部']=工学部 Obj2['阿部'].学部=工学部 Obj2.阿部.学部=工学部 Obj2.阿部['学部']=工学部 |
要素記述(2) 変数あり 氏名="阿部" 属性名="学部" |
Obj1[氏名]=工学部,3,4 Obj1.氏名=undefined Obj1[氏名][0]=工学部 Obj1.氏名[0]=記法エラー |
Obj2[氏名][属性名]=工学部 Obj2[氏名].学部=工学部 Obj2[氏名].属性名=undefined Obj2.氏名.学部=記法エラー Obj2['阿部'].属性名=undefined Obj2.氏名.属性名=記法エラー |
形式1(列名行なし) var 通常配列 = [ // 列名行なし ["阿部", "工学部", 3, 4], ["井上", "文学部", 2, 3], ["宇田", "文学部", 4, 4] ]; var Obj配列 = MtxToObj1(通常配列); |
形式2(列名行あり) var 通常配列 = [ ["氏名", "学部", "学年", "成績"], // ←列名行 ["阿部", "工学部", 3, 4], ["井上", "文学部", 2, 3], ["宇田", "文学部", 4, 4] ]; var Obj配列 = MtxToObj2(通常配列); |
次の形式のObj配列を通常の配列に変換します。 連想形式 = 1 連想形式 = 2 Obj1 = {}: Obj2 = {}; Obj1.阿部 = ["工学部", 3, 4]; Obj2.阿部 = { 学部:"工学部", 学年:3, 成績:4}; Obj1.井上 = ["文学部", 2, 3]; Obj2.井上 = { 学部:"文学部", 学年:2, 成績:3}; Obj1.宇田 = ["文学部", 4, 4]; Obj2.宇田 = { 学部:"文学部", 学年:4, 成績:4}; パラメタ Obj配列 必須 変換するObj配列変数 連想形式 必須 1/2 上表参照 追加 任意 省略時 = "none" "none" 単に 通常配列 m を戻すだけ "js" 別ウインドウに m を js形式で表示 "csv" 別ウインドウに m を csv形式で表示 配列名 任意 省略時 = "mtx" 別ウインドウに表示するときの配列名 制約 すべての行が同じ個数の列を持つこと
連想形式=1 通常配列 = ObjToMtx(Obj配列, 1); 通常配列 = ObjToMtx(Obj配列, 1, "js", "abc"); 通常配列 = ObjToMtx(Obj配列, 1, "csv", "abc"); 連想形式=2 通常配列 = ObjToMtx(Obj配列, 2); 通常配列 = ObjToMtx(Obj配列, 2, "js", "abc"); 通常配列 = ObjToMtx(Obj配列, 2, "csv", "abc");
連想形式=1 var Obj1 = {}; Obj1.阿部 = ["工学部", 3, 4]; Obj1.井上 = ["文学部", 2, 3]; Obj1.宇田 = ["文学部", 4, 4]; var 行名 = getKeyObj(Obj1, 1); // 行名 = ["阿部", "井上", "宇田"] |
連想形式=2 var Obj2 = {}; Obj2.阿部 = { 学部:"工学部", 学年:3, 成績:4}; Obj2.井上 = { 学部:"文学部", 学年:2, 成績:3}; Obj2.宇田 = { 学部:"文学部", 学年:4, 成績:4}; var [行名, 列名] = getKeyObj(Obj2, 2); // 行名 = ["阿部", "井上", "宇田"] // 列名 = ["学部", "学年", "成績"] |
通常配列 行名 ↓ '学部' '年齢' ←列名 '阿部' '文学部' 20 ┐ '井上' '工学部' 20 ┴要素 |
→ MtxToMap ← MapToMtx |
Map配列 Map配列 = new Map( [ ['阿部', new Map([ ['学部','文学部'], ['年齢',20] ])], ['井上', new Map([ ['学部','工学部'], ['年齢',20] ])] ]); |
JSON.stringify / JSON.parse はブラウザに標準搭載されているので、自作する必要はありません(utility.js にはありません)。
var Obj配列 = {}; Obj配列.阿部 = { 学部:"文学部", 年齢:20}; Obj配列.井上 = { 学部:"工学部", 年齢:21}; var JSONデータ = JSON.stringify(Obj配列); // JSONデータ = '{"阿部":{"学部":"文学部","年齢":20},"井上":{"学部":"工学部","年齢":21}}' // (JSONデータは1行の文字列です。
// ケース1では見にくいので次のように見やすく整形して表示します。 var JSON整形データ = JSON.stringify(Obj配列,undefined,4); // 半角空白4個のインデント // 出力 // { // "阿部" : { // "学部" : "文学部", // "年齢" : 20 // }, // "井上" : { // "学部" : "工学部", // "年齢" : 21 // } // }
var JSONデータ = '{"阿部":{"学部":"文学部","年齢":20},"井上":{"学部":"工学部","年齢":21}}'; // 1行の文字列なので、全体を ' ' で囲む var Obj配列 = JSON.parse(JSONデータ); // Obj配列 ができた確認 Obj配列.阿部.学部 = "文学部"
// ケース2でのJSON整形データを入力とする var JSON整形データ = `{ // 複数行を一つの文字列をするために ` ` で囲む "阿部" : { "学部" : "文学部", : }`; var JSONデータ = JSON整形データ.replace(/[\u0000-\u0019]+/g, ""); // 制御文字を除外して1行文字列にする var Obj配列 = JSON.parse(JSONデータ); // ケース3と同じ // Obj配列 ができた確認 Obj配列.阿部.学部 = "文学部"
var 配列 = CsvToMtx(csxURL [, opt])
opt に "yes" や 1 を与えると、配列を戻すだけでなく、入力ファイルの内容と配列を別ウインドウに表示する。
これらはは関数ではありません。自己完結のプログラムです。そのプログラムに移動します。