スタートページJavascript

utility.js(Javascriptライブラリ)一覧表

 Webページを自作する過程で、繰返し使えそうだ、生のJavascriptでの記述が覚えにくいというような機能をライブラリにしたものです。あくまでも私用目的の「動けばいいや」レベルですので、品質保証はしませんが、ご興味があればご自由にお使いいただいて結構です。
ソースコードはutility.jsにあります。(<script src="http://www.kogures.com/hitoshi/javascript/utility.js"></script> として使う)使い方はutility.jsの利用法と実例を参照してください。

 utility.jsでは、外部ファイルの取り込みや画像の表示など、一般的な分野を対象にしています。ここでは、Javascriptだけで作成しているものだけにしました。jQueryなどの外部ライブラリを用いるものは現在検討中です。
なお、自作のjavascriptライブラリには、数学分野のmathlib.js、CANVASで仮想XY軸の設定をするxycoordinate.jsがあります。

キーワード:クリックすると関連する関数が赤色になります。
関数表示反転画像CANVAS内部場所外部ファイルローカルファイル行列連想配列ソート

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


一般

functionLiteral(関数名[, 引数1, 引数2, ・・・]);
関数名をリテラルで与えます。
functionLiteral("funcA", x); は、FuncA(x); と同じ意味です。 呼び出す関数を動的に変更するときに使えます。

内部個所の表示・非表示

swichDisplay(対象ID[, 表示場所] );
<div id="対象ID" style="display:none"> ~表示内容~ </div>があり、クリックすると表示され、さらにクリックすると非表示になります。
<div id="表示場所"></div>を指定すると、"表示場所"に表示内容が表示・非表示されます。
showInnerSourcecode(選択場所, 表示場所);
選択場所の内容(ソースコード)を表示場所にコピーして表示します。選択場所に < や > があっても、そのまま表示します(タグや大小などの意味は失われます)。

画像

getImageAdjust(画像URL, 表示場所[, 横位置, 縦位置, クラス名, スタイル生成場所]);
getImageAdjust(画像URL, 表示場所); <img>タグで指定したwidth,heightが変化します(余白が生じません)。
getImageAdjust(画像URL, 表示場所, 横位置, 縦位置, クラス名, スタイル生成場所); <img>タグで指定したwidth,heightは変えず、画像を指定した位置(上下左右等)に表示します(余白が生じます)。
getImageCanvas(画像URL, 表示場所[, 横位置, 縦位置, 背景色]);
getImageAdjustは img を対象にしていますが、これはCANVAS(<canvas id="表示場所" width="400" height="300"></canvas>)への画像表示を対象にしています。余白部分を背景色にします。
zoomImage(対象画像, 倍率[, 表示場所]);
画像拡大して表示場所に表示します。表示場所を省略すると元画像そのものが拡大されます。

外部ファイルの読込

includeHtml(ファイル名, 表示場所);
外部htmlファイル全体をを表示場所にコピーします。
includeHtmlByTag(ファイル名, タグ名, 表示場所);
外部htmlファイルの<タグ>で囲まれた部分を表示場所にコピーします。タグは自作のものも使えます。
jQueryを用いれば簡単な記述ができますが、あえてJavascriptだけで作成してみました。
includeSplitByLiteral(ファイル名, 最初文字列, 最後文字列, 関数名);
外部ファイルから、行先頭位置が最初文字列である行から最後文字列である行までを選択行とし、作成してある function関数名(選択行) を実行します。

csvファイル→2次元配列生成

csvMatrix(CSVファイル名, 関数名);
外部csvファイルを読み込み2次元配列にして、指定した関数に引数として渡します。
関数名を "func1" とするならば、呼び出すHTML側で、function func1(行数, 列数, 行列) { ・・・ } の記述が必要になります。
csvMatrixC(CSVファイル名, 関数名);
csvMatrixと同様ですが、csvファイルの先頭行がタイトル行で列名が入っています。
function func1(行数, 列数, 行列, 列名) { ・・・ } となります。
csvMatrixHushC(CSVファイル名, 関数名[, オプション);
csvファイルはcsvMatrixCと同様です。行列の内容は、
行列['氏名'][0]=阿部; 行列['学部'][0]=工学部; 行列['学年'][0]=3;
行列['氏名'][1]=井上; 行列['学部'][1]=文学部; 行列['学年'][1]=2;
のような連想配列(連想配列項目は1個)になります。
オプション(任意の値でよい)の有無により、function func1(行数, 列数, 行列) { ・・・ } あるいは function func2(行数, 列数, 行列, 列名) { ・・・ } になります。
csvMatrixHushRC(CSVファイル名, 関数名[. オプション]);
csvMatrixHushCと同様ですが、2つの連想配列項目を持つ行列になります。
行列['阿部']['学部']=工学部; 行列['阿部']['学年']=3;
行列['井上']['学部']=文学部; 行列['井上']['学年']=2;
オプションの有無により、function func1(行数, 列数, 行列) { ・・・ } あるいは function func2(行数, 列数, 行列, 行名, 列名) { ・・・ } になります。

ローカルファイル(fileAPI)

getLocalFileDB(入力場所, 関数名);
ダイアログボックスにより指定したローカルファイル(PCにあるファイル)のfilesオブジェクトを、指定した関数の引数として戻します。
<div id="glfdb入力場所"></div>に参照ボタンが自動的に作られます。
関数名を "func1" とすれば、呼び出すHTMLで、getLocalFileDB実行後の処理をする function func1(files) { ・・・ } の記述が必要です。
files[i].name i番目のファイルの名称、files[i].urn、files[i].type、files[i].lastModifiedDat が得られます。
getLocalFileDD(入力場所, 関数名);
getLocalFileDBと同様ですがドラッグ&ドロップになります。<div id="入力場所"></div>にドロップする枠が自動的に作られます。

外部HTMLファイルへの書き出し表示

外部HTMLファイル
openNewHtml(head部内容個数, body部内容個数
  [, head部表示内容1, head部表示内容2, … ,body部表示内容1, body部表示内容2, …]);
"表示内容"に蓄えた文字列(HTMLのソースコード)により一時的なHTMLファイルを生成して、ポップアップウインドウとして表示します。
組込みの document.write と同様な機能ですが、<html>や<body>などの「決まりタグ」の記述が不要なこと、多様な個所で生成した"表示内容"を順序を変えて編集できる便利さがあります。

行列

連想配列名称 = keynameHushMatrix(行列);
入力(行列)                    戻り値(連想配列名称)
  行列['氏名'] = ['阿部', '井上', '宇田'];     連想配列名称[0] = '氏名'
  行列['学部'] = ['工学部', '文学部', '文学部'];  連想配列名称[1] = '学部'
のように、一つの連想配列項目を持つ行列から連想配列項目の名称を得ます。
連想配列名称 = keynameHushMatrixRC(行列);
二つの連想配列項目を持つ行列から行名、列名を得ます。
入力(行列)                                                                         戻り値(連想配列名称[i][j])
  var 行列 = new Array();                                                               j→  0      1      2
  行列['阿部'] = new Array();  行列['阿部']['学部']='工学部'; 行列['阿部']['学年']=3; ↓i 
  行列['井上'] = new Array();  行列['井上']['学部']='文学部'; 行列['井上']['学年']=2;  0   '阿部' '井上' '宇田'
  行列['宇田'] = new Array();  行列['宇田']['学部']='文学部'; 行列['宇田']['学年']=3;   1   '学部' '学年'
順位 = orderMatrix(行列, ソート項目);
行列の指定した列番号の値により昇順にソートしたときの各行の順位を戻します。順位[k] = i とは、昇順ソートしたとき、k番目になる行が i であることを示します。
連想配列を持つ行列では、ソート項目を連想配列名称("氏名"など)で指定します。