utility.js:Webページ作成用の自作ライブラリ

私がWebページを作成する過程で、必要になった機能をやや汎用化してライブラリにしたものです。あくまでも個人的な忘備録的なもので、必要に応じてコピーし、カスタマイズして利用しています。また、「動けばOK」というレベルで、効率性や安定性などは無視しています。

:ライブラリ utility.js でのソースリストを別ウインドウに表示します。
:テストに用いたプログラムを別ウインドウに表示します。


外部ファイルの取出し

外部プレーンファイルを読込み、その全体あるいは指定部分を。指定した表示場所あるいは新ウインドウに表示します。また、対象となる部分の各行を行の配列として取り出すことができます。

対象ファイルから取り出す部分を、id, class, tag で指定し、指定した表示場所に表示する機能は、JQueryを用いて簡単に記述できるので、ここでは、JQuery で扱っていない機能だけに限定しています。

ここでのテストデータは、text/test.txtを用います。


読込行 = getFileWhole(ファイル名, タグ無効);
getFileWhole(ファイル名, タグ無効, 表示場所|'window")

外部ファイルを読み、その全体を,
 ・表示場所を指定しない:行の配列にして戻す
 ・表示場所を指定(<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表示場所

読込行 = getFileByLiteral(ファイル名, 最初文字列, 最後文字列, タグ無効);
getFileByLiteral(ファイル名, 最初文字列, 最後文字列, タグ無効, 表示場所|'window")

getFileWholeが指定したファイル全体を対象にしていたのに対して、上から探索して指定した最初文字列を持つ最初の行から, 最後文字列を持つ最初の行までの範囲を対象にします。

ワイルド文字

最初文字列, 最後文字列

getFileByLiteral('text/test.txt', 'abc', 'xyz', 'yes', 'getFileByLiteral表示場所');
getFileByLiteral('text/test.txt', '_abc', '%xyz', 'yes', 'window');
 
getFileByLiteral表示場所

読込行 = getFileByFunction(ファイル名、 関数名, タグ無効);
getFileByFunction(ファイル名, 関数名, タグ無効, 表示場所|'window")

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');
getFileByFunction表示場所

CSVファイル→2次元配列

csvArray(CSVファイル名 [. 配列名称]):csvファイルを2次元配列にする

関連関数群

csvArray()以外の関数は内部でcsvArray()を呼び出しているので、両関数を同じフォルダに置く必要があります。

関数配列の特徴JSソースコードテストソース
csvArray(csv-url [. 配列名称])配列だけ
csvArrayCol(csv-url [. 配列名称,列名称])先頭行の要素が列名になる
csvArrayRow(csv-url [. 配列名称,行名称])各行の先頭要素が行名になる
csvArrayRowCol(csv-url [. 配列名称,行名称,行名称])行名と列名が戻される。元配列の[0][0]を a0 として戻す
csvArrayColHush(csv-url [. 配列名称])連想配列[列名][i]になる(列名が第1添え字になる)
csvArrayRowHush(csv-url [. 配列名称])連想配列[行名][j]になる
csvArrayRowColHush(csv-url [. 配列名称])連想配列[行名][列名]になる

特徴と留意事項

カンマ区切りのCSV形式の外部ファイルを読み、多様な形式の二次元配列を戻します。
CSVファイルの条件は、
 ・カンマ区切りのCSV形式
 ・文字コードは UTF-8
 ・要素中に区切り記号「,」がない
 ・先頭や途中行中に空白行がない(末尾行の空白行は任意)
であれば、かなり任意の記述であっても、意図した結果が得られます。

例示での"csv/test.csv" の内容

    氏名,   所属       // 行末尾の要素が欠け、直前の区切り記号もありません。undrfinedになります。
   阿部 , 生 産 , 12   // 阿部と生産の末尾、生産の要素中に半角スペースがあります。前後も空白は無視されます。
  "井上",   null, 22   // 中間の要素がnull指定です。
        ,  販売, "32"  // 先頭要素が空白です。'' とみなされます。32 が " " で囲まれています。
    江藤,  "経理",       // 右側の要素がなく、区切り記号はありますが、undrfinedになります。
                       // 以下に空白行がないか、複数行あることもあります、

読み込んで配列にしたときは、次のようになっています。

 配列[0][0]=氏名 配列[0][1]=所属 配列[0][2]=undrfined
 配列[1][0]=阿部 配列[1][1]=生 産 配列[1][2]=12
 配列[2][0]=井上 配列[2][1]= nul1 配列[2][2]=22
 配列[3][0]=""   配列[3][1]=販売 配列[3][2]="32"
 配列[4][0]=江藤 配列[4][1]=経理 配列[4][2]=undrfined

null と "" の考え方

数値計算
  x=12; y=null; z=22 のとき、null は 0 とみなされ、x+y+z=23 になります。
  x=12; y="";  z=22 のとき、x+y+z=1222 となってしまいます。
文字列操作
  a="aa'; b=null; c="cc" のとき、a+b+c=aanullcc となってしまいます。
  a="aa'; b="";  c="cc" のとき、a+b+c=aacc となります。
すなわち、数値計算ではnull、文字列操作が適切ですが、関数内で切り分けるのは困難です。
csvArray()では、undefined を null に変換しています。多くの場合、配列要素は数値として計算されることが多いと思うからです。 これが不適切な場合は、changeArrayNullBlank()で再変換をしてください。

数値と文字列

ファイルららの読込みでは、行や列への分解や空白の扱いなどで多様な文字列操作をしますので、12 という数値が '12' という文字列になってしまうことが多くあります、そのため、「数値に変換可能な文字列」の型を string から number に変換する必要があります、
しかし、'32' という文字列指定を変換から除外するのはかなり厄介なので、ここでは 32 という数値を与えたことにしています(勝手に''を外しています)。

csvArrayCol などの関連関数では、内部で csvArray() を用いているので、undefined の要素は存在しません。
しかし、行名や列名は数値よりも文字列として使うことが多いので、null を '' に繁閑しています。
特に連想配列でのキー項目は、空白が許されないので、'' を 'col' + j や 'row' + j に置き換えています。

別ウインドウでのJSリスト

CSVファイルから読み込んで直ちに目的の処理を行うよりも、いったん、このリストをコピーしておき、適宜修正をして、処理プログラムにペーストするほうが多いと思われます。
そのとき、文字列は ' ' で囲む必要がありますし、配列[i][j] = ; はエラーになるので、配列[i][j] = ''; とする必要があります。
これでも、配列[i][j] = null; を、 'null'(文字列) と解釈されることもありそうです。プログラム作成時にチェックするほうが安産です。

使用法

呼出側のプログラムは、次の青字のように記述します。不要なものは省略できます。
「実行]をクリックすると、この表の下に青字で表示されます。

オプションの「配列名称」に例えば "配列" を与えると、別ウインドウに、次のような結果が表示されます。
   var 配列 = [];
    配列[0] = [];
     配列[0][0] = '氏名';
     配列[0][1] = '所属';
       :

csvArray(csv-url)
var 戻り値
 = csvArray("csv/test.csv");
var 配列 = 戻り値.array;
var 行数 = 戻り値.rowlength;
var 列数 = 戻り値.collength;
csvArrayCol(csv-url)
var 戻り値
 = csvArrayCol("csv/test.csv");
var 配列 = 戻り値.array;
var 列名 = 戻り値.col;
var 行数 = 戻り値.rowlength;
var 列数 = 戻り値.collength;
csvArrayRow(csv-url)
var 戻り値
 = csvArrayRow("csv/test.csv");
var 配列 = 戻り値.array;
var 行名 = 戻り値.row;
var 行数 = 戻り値.rowlength;
var 列数 = 戻り値.collength;
csvArrayRowCol(csv-url)
var 戻り値
 = csvArrayRowCol("csv/test.csv");
var 配列 = 戻り値.array;
var 行名 = 戻り値.row;
var 列名 = 戻り値.col;
var A0 = 戻り値.a0;
var 行数 = 戻り値.rowlength;
var 列数 = 戻り値.collength;
csvArrayColHush(csv-url)
var 戻り値
 = csvArrayColHush("csv/test.csv");
var 配列 = 戻り値.array;
var 列名 = 戻り値.col;
var 行数 = 戻り値.rowlength;
var 列数 = 戻り値.collength;
csvArrayRowHush(csv-url)
var 戻り値
 = csvArrayRowHush("csv/test.csv");
var 配列 = 戻り値.array;
var 行名 = 戻り値.row;
var 行数 = 戻り値.rowlength;
var 列数 = 戻り値.collength;
csvArrayRowColHush(csv-url)
var 戻り値
 = csvArrayRowColHush("csv/test.csv");
var 配列 = 戻り値.array;
var 行名 = 戻り値.row;
var 列名 = 戻り値.col;
var A0 = 戻り値.a0;
var 行数 = 戻り値.rowlength;
var 列数 = 戻り値.collength;
結果が表示されます。

特殊タイプ(undefind, null, '')要素


checkType(変数, タイプ);
変数がタイプに一致すれば true, 一致しなければ false を戻す。

をクリックしてください。

関数 checkTypeの仕様

ここでは、次のタイプを対象にします。このうち、""(空白)、null、undefinedをここでは特殊タイプといいます。

  d(digital):null を含まない数値
  s(string):""を含まない文字列
  b(blank):""(空白)
  n(null):null
  u(undefined):undefined

実施には、単独のタイプを判別するだけでなく、"bnu"(特殊タイプか否か、"sb"(""を含む文字列か)など組合せによる判別が必要になることがあります。checkType()はそれをまとめたものです。内容は比較的シンプルです。

    function(変数, タイプ) {
        if (タイプ == "u")   return (変数 === undefined);
        if (タイプ == "b")   return ( (変数 == '') && (typeof 変数 == 'string') );
        if (タイプ == "n")   return ( (変数 == null) && (typeof 変数  == 'object') );
        if (タイプ == "bu")  return ( (変数 === undefined) || (変数 == '') && (typeof 変数 == 'string') );
        if (タイプ == "nu")  return (変数 == null);
        if (タイプ == "bnu") return ( (変数 == null) || (変数 == '') && (typeof 変数 == 'string') );
        if (タイプ == "s")   return ( isNaN(変数) && (typeof 変数 == 'string') );
        if (タイプ == "sb")  return (typeof 変数 == 'string');
        if (タイプ == "d")   return ( (typeof 変数 == 'number') && !isNaN(変数) );
        if (タイプ == "dn")  return ( (typeof 変数 == 'object') || (typeof 変数 == 'number') && !isNaN(変数) );
    };

変数xのタイプがtypeならば true を、そうでなければ false を戻します。
   if (checkType(x, "bu"))
では、x が "" あるいは undefind のときは true、そうでないときは faise を戻します。

解説:特殊タイプの特徴

ここでは、undefined, null, ""(空白)を「特殊タイプ」といいます。

ここでは次のデータ
   var x = [];
   x[0] = ""; x[1] = null; x[2] = undefined; x[3] = NaN; x[4] = 0; x[5] = "5"; x[6] = "a";
を用います。

x[2] = undefined; を記述しないと undefined になります。
また、次のように記述できます。
   x = ["", null, , NaN, 0, "5", "a"];
このとき、「,」だけの項は undefined になります。
また、x[2] = ; とすると文法エラーになります。

これらの違いを理解していないと、思わぬトラブルが発生します。

基本的な判別機能

x が "" であるかを判別するには、if (x == "") のようにすればよいように思いますが、下表のように x=0 も含まれてしまいます。また、Javascript には isMaN(x) や typeof などの関数があります。しかし、次のように、単純にはいかないのです。

正しく識別するための記述

例えば、x が ””であり、null や undefined などではないことを判別するには、次の「条件」に示すような記述が必要になります。

上の「条件」をまとめて関数にしたのが checkType() です。 checkType()を用いたいくつかの例を表示します。


">" | "=" | "<" = compareType(x, y [, "top"|"bottom"]);

をクリックしてください。

変数タイプと大小比較

変数のタイプには、数値、文字列、""、null、undefined などがあります。
それらを単純に大小比較すると、次の表のようになります。
x,y の軸の空白は "" です。★は大小の比較ができないという意味です。

  • undefined は、null と比較でき、=になります。それ以外とは比較できません。
  • null は、undefinedと比較でき、=になります。0とは比較できません。0以外の数値とは自分が0として大小比較をします。
  • "" は、数値、文字列と比較できます。数値との比較では自分を0とし、文字列との比較では自分を最小として比較します。

関数 compareType(x,y [, "top"|"bottom"])

任意の2変数の比較をする場合、それらのタイプが不明なことがあります。特に配列のソートなどをするときには特殊タイプとの比較、文字列と数値との比較が発生することがあります。そのとき、★の組み合わせになり、処理が異常終了するのが不都合なこともあります。

それを避けるために 関数 compareType() を作成しました。
オプションを省略あるいは"bottom" のときは
   (小)数値<文字列<""<null<undefined(大)
"top" のときは.
   (小)undefined<null<""<数値<文字列(大)
の大小関係になります。
戻り値は ">", "=", "<" のいずれかになります。

(オプション省略時)

新配列 = sortArray(元配列, {   key1: 1,   ┐   title: true, │パラメタ指定         :     ┘ });

注意:この関数の中で compareType() を呼び出しています。両者を同じフォルダに置くか、 compareType()をjs指定してください。

機能説明

をクリックしてください。

二次元配列の元配列をソートして新配列を作ります。パラメタにより多様な処理ができます。主な特徴を掲げます。

パラメタで指定できる項目を示します。ここでは sort に"row" を指定したときの説明で、( )内は"col" を指定したときです。

パラメタ指定値簡略省略値説明
sort"row"|"col""r"|"c""row" ソートして順序が変わるのが行(列)。
titletrue|falsefalse 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; の形式で表示

実行例


新配列 = sortArray(元配列, {
 key1: 1,   // 列1の昇順
 window: "表" // JSリストあり
});

新配列 = sortArray(元配列, {
 title: true, // タイトル行あり
 key1: "列1", // 列名で指定
 order1: "d" // 降順ソート
});

新配列 = sortArray(元配列, {
 title: true,
 key1: 1,
 bnu: "top" // 特殊タイプを上へ
});

新配列 = sortArray(元配列, {
 title: true,
 key1: 1,
 first: 2, // 2~5行をソート対象に
 last: 5
});

新配列 = sortArray(元配列, {
 title: true,
 key1: 1, // キー個数=2
 key2: 2
});

新配列 = sortArray(元配列, {
 sort: "col", // 列をを動かす
 key1: 1, // 行1の昇順
 title: true
});



新配列 = changeArrayNullBlank(元配列, 変更後, 軸, 対象軸 [, 配列名称]);

機能

二次元の元配列の指定行(列)の要素について、undefind || null → ''(変更後='')、undefind || ''l → null(変更後=null)の変換をした新配列を戻します。配列名称を与えると、別ウインドウにJS 配列名称[][] を表示します。

サンプルデータ

     var 元配列 = [
          [ "aaa",  null,   '',  "" ],
          [  null,    '',   "",  14 ],
          [    '', 'ccc',   23      ], // [2][3] は undefined になります。
          [    "",    32,     , null]  // [3][2] は undefined になります。
    ];

実験

 

画像読込

getImageAdjust(ファイル名, 表示場所[, 横幅, 縦幅, 水平位置, 垂直位置]);

機能

  • [ ] 内を省略した場合は、<img id="表示場所" src="ファイル名"> としたのと同じです。
  • 横幅, 縦幅を指定すると、表示場所に 横幅×縦幅[px]の仮想的な枠が作られます。
  • その枠内に指定した画像を、縦横比を保ちつつ、表示します。
  • 枠が画像の縦横比に比べて横長ならば、水平に空白ができます。水平位置で left|center|right を指定することにより、左詰め、中央、右詰めの位置に表示されます。
    枠が画像の縦横比に比べて縦長ならば、垂直に空白ができます。水平位置で top|center|bottom を指定することにより、上詰め、中央、下詰めの位置に表示されます。

すなわち、縦横比は不明な画像を一定の枠内に表示することがでkるので、異なる縦横比のいくつかの画像を、並べて表示するときに利用できます。

省略時解釈

  • 横幅、縦幅は、表示場所で記述していても、関数で指定したほうが優先されます。
  • 横幅、縦幅の両方を省略する(0を与える)と、画像の横幅、縦幅がとられます。
    一方だけを与えると、他方は画像の縦横比から計算されます。
  • 水平位置、垂直位置は、省略時には center (中央配置)になります。

実現方法

  • <img id="表示場所" ~ > で指定した内部のパラメタをJavascriptで操作することになります。wigth と height は変更できますが、マージン(margin)はパラメタにないので、CSS(style)での指定を変更することになります。
  • すなわち、この関数を用いるには、呼び出すHTML側で
      <style>
        #表示場所 { }
      <style>
    を記述しておくことが必須です。複数の表示場所があるときは、それぞれに名称を変えて記述しておく必要があります。
  • この関数では、
      表示場所.style.margin = 上下左右マージン;
    として表示位置を実現しています。

実例

この下に
  <style>
    #getImageAdjust表示場所 { }
  <style>
があります。

↓ <img id="getImageAdjust表示場所">: があります。
←図境界
↑図境界

ファイル名を変えるときは、再読込みをしてください。

ファイル名横幅縦幅水平位置垂直位置備考
picture/400x300.jpg <img src="picture/400x300.jpg">と同じ
picture/400x300.jpg200300top 縦幅を大、top指定→下にマージン
picture/400x300.jpg200300center 縦幅を大、center指定→上下にマージン
picture/480x640.jpg <img src="picture/480x640.jpg">と同じ
picture/480x640.jpg400300right 横幅を大、right指定→左にマージン

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表示」

ローカルファイル

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>


未分類

キー名称 = keynameHushArray(配列 [, 行名称, 列名称]); 二次元連想配列から行名・列名を得る。

  • 二次元連想配列を 配列[行名][列名] とします。行名のみ、あるいは行名と列名の両方が連想キーであるとき、行名[i]、列名[j] を戻します。
  • 行名 = キー名称.row; 列名 = キー名称.col; として得られます。それらが連想キーでないときは undefined となります。
  • 行名称, 列名称を与えると、別ウインドウに、列名称[i] = "xxx"; のJS形式のリストが表示されます。

テストケース

    var 配列0 = [];     // 連想配列ではない
        配列0[0] = ['阿部', '井上', '宇田'];
        配列0[1] = ['工学部', '文学部', '文学部'];
    var 配列1 = [];     // 行が連想キー
        配列1['氏名'] = ['阿部', '井上', '宇田'];
        配列1['学部'] = ['工学部', '文学部', '文学部'];
    var 配列2 = [];     // 行と列が連想キー
        配列2['阿部'] = [];  配列2['阿部']['学部']='工学部'; 配列2['阿部']['学年']=3;
        配列2['井上'] = [];  配列2['井上']['学部']='文学部'; 配列2['井上']['学年']=2;
        配列2['宇田'] = [];  配列2['宇田']['学部']='文学部'; 配列2['宇田']['学年']=3;

実行

ケース0:  keynameHushArray(配列0);
ケース1:  keynameHushArray(配列1);
ケース2:  keynameHushArray(配列2, "行名", "列名");


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」


戻り値 = getGraphScale(xmin, xmax [, nmin, nmax] );

グラフを描画するとき、2、5、10といったキリの良い点で軸の目盛りや補助線の位置を決めます。

入力データ
 xmin:データの最小値
 xmax:データの最大値
 nmin:最小目盛線数(省略時3) たまに範囲を超えることもあります。
 nmax:最大目盛線数(省略時11)
戻り値
 imin = 戻り値[0],  imax = 戻り値[1],  di = 戻り値[2]
  for (x = imin; x <= imax; x = x + di) で目盛線を引く点になります。

入力:xmin= xmax= xmin= xmax=
出力:imin= imax= di=