変奏現実

パソコンやMMORPGのことなどを思いつくまま・・・記載されている会社名・製品名・システム名などは、各社の商標、または登録商標です。

この画面は、簡易表示です

インターネット

[javascript]QuerySelectorAllの妙な動き

<html>
・・・
<body>
  <br>
  <br/>
  <br>
  <br/>
</body>

</html>

これを

document.querySelectorAll('br')

すると

Array.from(document.querySelectorAll('br')).map((br)=>br.outerHTML)
0:"<br>"
1:"<br>"
2:"<br>"
3:"<br>"
length: 4

となる。

しかし自作タグ(カスタムなタグ)の場合は、

<html>
・・・
<body>
    <sample-element></sample-element>
    <sample-element />
    <sample-element></sample-element>
    <sample-element />
</body>

</html>
Array.from(document.querySelectorAll('sample-element')).map((sample)=>sample.outerHTML)
0:"<sample-element></sample-element>"
1:"<sample-element>\n    <sample-element></sample-element>\n    <sample-element>\n\n\n</sample-element></sample-element>"
2:"<sample-element></sample-element>"
3:"<sample-element>\n\n\n</sample-element>"
length: 4

ブラウザのDevToolsも同様なので、HTMLファイルの読み込み時点で【そのように解釈】されているので仕方が無いんだけどね。(笑

このため、ちゃんと「Autonomous custom element(自律カスタム要素)」として書いても結果は変わらない。(ハズ



[javascript]returnした後に

return  (fValue)?[nCount[name]= 1:nCount[name];
nCount[name]++;

以前はreturn文は戻り値をスタックするだけで、後ろに処理があれば実行してくれた。(時期もあった

でも、今はそんなことは無いので・・・

return (fValue)?[nCount[name]= 1, nCount[name]++][0]: nCount[name]++;

と変な書き方をすることがマレにあるけど

return (fValue)?nCount[name]= 1: ++nCount[name];

の方がマシかな



[javascript]関数の途中のパラメータを省略したい

例えば・・・

let result=function('text',2);

2番目のパラメータを省略するには

let result=function('text');

と書けるけど、1番目のパラメータを省略すると

let result=function(2);

2番目のパラメータのつもりが1番目のパラメータとして渡ってしまう。

そこで、

let result=function(,2);

BASICでは省略したい時は書かないことで通じるので

arg0: SyntaxError: Unexpected token ',' {stack: 'SyntaxError: Unexpected token ','', message: 'Unexpected token ',''}

とエラってしまう。

javascriptでは関数の引数は指定しなければ undefined になるので、

let result=function(undefined,2);

とundefinedを引き渡せば、実質的に1番目のパラメータを省略された様に関数側で処理してくれる。



[javascript]contenteditable

contenteditable=”yes”属性付きのdivタグはブラウザ上で直接編集できる。

しかし、子エレメントの構造が複雑化すると改行位置などが把握しにくいので自動的に改行させないほうがいいと云う記事を見つけたので、試しに作ってみたカスタムエレメント版も。

確かにメンドクサイw

コードしなくてもcontenteditable=”yes”設定で、太文字(Ctrl+B)、アンダースコア(Ctrl+B)、イタリック(Ctrl+I)でテキストを自動的に修正してくれるし、勿論HTMLの中身もどんどん変わっていく。

とりあえず、

  1. divタグからpreタグに変更。※半角空白を表示できるから
  2. inputやkeydownイベントのログ表示
  3. キャロット移動の行背景色変更や「m行m列」※範囲指定時も含む
  4. cssで行番号表示
  5. javascriptソースコードの着色※javadoc部は別処理
  6. ctrl+/でそれっぽく行コメントのトグル(ON/OFF)処理
  7. HTMLソースコードの着色も追加。※画面下の言語で切替
  8. 着色した結果をHTMLファイルでダウンロード。
  9. 言語選択状態に応じたサンプルソースを貼れるようにした。
  10. ソースを分割。
  11. バグ修正
    • 2024/2/17
      • 【彩色】押すと空行が消えてる。
        • CRクラスのspanのmarge属性が未設定だった。
      • ソースが空または1トークン分のテキストしかない場合にエラっていた。
        • 気にしてなかった。
      • 右端に縦にスクロールバーが2つ。
        • 何度調整しても不意に再現する。(謎
      • 01234と数字を入力すると先頭の0が数値扱いにならない
        • 空白のパターン(\x20+)のつもりが(x20+)になっていたせい。
          • ミスってるのに空白判定ができていたのは謎

相変わらず強制的にキャッシュされるのでソースを更新してもちゃんと反映されない。

対処方法1:ブラウザのDevToolのネットワークでキャッシュを無効化。

それでもiframe内のファイルはキャッシュされたままなので

対処方法2:そのiframe.htmlのソースの空っぽな画面だったりコンソールにエラーが表示されていたら・・・【F5】でソースを表示。

大体これで最新になる。

未解決や重複のエラーが出ていたら上の方法でキャッシュをクリアできる。(ハズ

それでもダメな時はブラウザの履歴をごっそり消すしかない様です。

それにしても、予想外の動きをするので大変だわ。(笑

ps.2024/3/21

カスタムエレメント版のHTMLのサンプルが文字化けしていたので修正。



「JavaScript」連番の配列を作ってみる

どうでもいいけど、C言語っぽく

let result = new Array(10);
for (let index = 0; index < 10; index++) {
 result[index]= index + 1;
}
console.log(result);
// (10) [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

では色々注意が必要。

から始まって・・・

let result = []
for (let index = 0; index < 10; index++) {
 result.push(index + 1);
}
console.log(result);
// (10) [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

この時点でまだindexをいっぱい書いてあるから

index + 1じゃなくて let index=1すれば良い!

とか余計な修正をしだすと

index < 10の部分を見落としてそう。

つまり、indexの出現は少ない方が良い。

しかし、

var result = [...Array(10)].map((_, i) => i+1) 
console.log(result);
// (10) [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

では作業用配列をいくつも作ってしまう。

Array(10)とか[…xxx]とかね。

とは云え

var result = Array.from({length: 10},(_, index) => index + 1);
console.log(result);
// (10) [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

に至っては {length:10 } でObjectの振りというか {…}は紛れもなくObjectだけど、

length: 10とよくあるプロパティでArray.fromを騙すのはいいとして

indexが唐突に出てくる感じがするけど・・・

Array.from(arrayLike, mapFn)

Array.fromはこんなパラメータになっているので

Array.prototype.map((value, index) => { ... });

を思い浮かべば、理解してもらえそう。

それに無駄な作業用配列も作らないから

1から1万までの連番配列を作るには丁度良い。

気がする。

そこで

Array.from(arrayLike, mapFn, thisArg)

まで使ってみると

var result = Array.from({ length: 10 }, function (_, index) { return index + this.start; }, { start: 1 });
console.log(result);
// (10) [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

明示的に連番の初期値を設定できて気持ちはすっきりするけど、

アロー関数にとってthisはwindowしかありえないので

無名functionにしないといけないし

スクロールバーが出るくらい長いので蛇足感がある。

だが、連番+αのテストデータを作るのには向いている気がするので次点とした。

結果は・・・

var result = Array.from({length: 10},(_, index) => index + 1);

が良さげ。

/**
 *  連番作成
 * @param {integer} start           開始番号
 * @param {integer} end             終了番号
 * @return {Array of object}        開始番号~終了番号の配列
 */
const range = (start, end) => {
    let rc = Array.from({ length: (end - start + 1) }, (_, index) => index + start);
    if (callbackMap) {
        rc = rc.map(callbackMap);
    }
    return rc;
};

range().map(callback) をラップしてrangeMapを作ってみたが、使い心地は・・・

range(1, rows).map((nRow) => {
    createTrElement(objTable, nRow, ...);
});

rangeMap(1, rows,(nRow) => {
    createTrElement(objTable, nRow, ...);
});

見分けが付かないくらい同じだった。(笑

ps.

クエスチョン:spreadSheetのコードで上のrangeを使ってみると妙に重い(初期表示2秒前後)。何でだろう?

アンサー:今のEXCELって最大1048576行16384列なのでこの最大値に合わてみたら、初期表示で物凄い量の配列を作っていた!普通のfor文に戻すとサクっと初期表示。配列のままでも動かない訳では無いけど、時々Chromeやタスクバーがマウスに反応しなかった原因のような気がする。

100万×1.6万≒160億 だからなぁ~

でもfor文のままなのも、配列じゃなくても連番指定でsomeとmapっぽく動作すればいいから

/**
 *  連番配列っぽいイテレータを作成する
 * @param {integer} start           開始番号
 * @param {integer} end             終了番号
 * @returns {iterator}              開始番号から終了番号を格納した配列っぽいイテレータ
 */
const range = (start, end) => {
    let step = 1

    const rangeIterator = {
        some: function (func) {//someっぽく動作させる
            for (let cnt = start; cnt <= end; cnt += step) {
                if (func(cnt)) {
                    return true;
                }
            }
            return false;
        },
        map: function (func) {//mapっぽく動作させる
            const f = false;//配列を返さない
            let aRc;
            if (f) {
                aRc = new Array(end - start + 1);
            }
            let index = 0;
            for (let cnt = start; cnt <= end; cnt += step) {
                const rc = func(cnt);
                if (aRc) aRc[index++] = rc;
            }
            return aRc;
        },
    };
    return rangeIterator;
}


「javascript」postMessageとPromise

デスクトップに貼ったJSからSJISのCSVをダウンロードさせてみる【その後】の中で、
iframeへ送信したメッセージの応答をawaitで待機するようにしていますが、postMessageは本当にメッセージをポストするダケの機能なのでレス待ちなんで事ができません。

        displayStatus(`サンプルを${encoding}に変換中`);
        let unicode16CSV = await getSampleTextInnerText();

タネを明かすと、これを実現するために外部変数messageResponseStackにPromiseのresolveを保持し、どこかで応答メッセージを受信したらresolveを呼び出してawaitの待機状態を解除してもらっています。

つまり職場(プロセス)に居れば誰でも見れるホワイトボード(外部変数)に取引先(requestID)と連絡先(resolve)を書いてあるので、暇になった人が気が付けばかかってきた電話の相手先(requestID)の要件(event.data.message)を連絡してもらえる(ハズ

な仕組みです。

ついでにrequestIDはワンタイムなIDなのでホワイトボードから消してます。

/**
 * iframeのサンプルを取得する
 * @returns 
 */
const getSampleTextInnerText = () => {
    return new Promise((resolve, reject) => {
        loaderOpen();
        var us = getUniqueStr();
        messageResponseStack[us] = { 'resolve': resolve, 'reject': reject };
        myPostMessage('iframe', "getSampleText", "", us);
    });
};
    messageProcSetup({ ☚ここでmessageListner の応答メッセージタイプ毎のコールバック先をリストアップ
      ・・・
        'getEncodingListResponse': messageResponseProc,
      ・・・
    });
/**
 * メッセージのレスポンス処理 ☚ messageListnerからコールバックされる。
 */
const messageResponseStack = {};
const messageResponseProc = (data) => {
    loaderClose();
    if (data.requestId !== undefined) {
        messageResponseStack[data.requestId].resolve(JSON.parse(data.message));
        delete messageResponseStack[data.requestId];
    } else {
        alert(`not requestId${CRLF}data.type: ${data.type}`);
    }
};
/**
 * メッセージを受信する
 * @param {MessageEvent} event 
 */
const messageListner = (event) => {
    if (event.origin !== myOriginListener || event.type !== 'message') return;
    let data = event.data;
    let messageInfo = messageInfoList[data.type];
    if (messageInfo === undefined) {
        alert(`unkonwn message type = '${data.type}'${CRLF}message: ${data.message}`);
        return;
    }
    if (messageInfo !== undefined && messageInfo !== null) {
        if (Array.isArray(messageInfo)) {
            if (messageInfo.length > 1) {
                messageInfo[0](data, ...(messageInfo.slice(1)));
            } else {
                messageInfo[0](data);
            }
        } else {
            messageInfo(data);
        }
    }
};
/**
 * メッセージを送信する
 * @param {string} textType 
 * @param {string} textMessage 
 * @param {string} textRequestId
 */
const myPostMessage = (to, textType, textMessage, textRequestId) => {
    switch (to) {
        case 'parent':  //  親ドキュメントに送信する
            to = window.parent;
            break;
        case 'iframe': //   iframeへメッセージを送信する
            to = document.querySelector("iframe").contentWindow;
            break;
    }
    to.postMessage({
        type: textType,
        message: textMessage,
        requestId: textRequestId,
    }, myOriginSender);
};

もっといい方法があったらいいなぁ。



デスクトップに貼ったJSからSJISのCSVをダウンロードさせてみる【その後】

あれから6年?(大笑

結局何が原因でうまくいかなかったのかと云えば

FileReader.readAsText(${Blob型データ},”SJIS”);に

未定義あるいはUTF16に変換できない文字を与えるとの大雑把には

  • シフトJISの下位コードのMSBが0の場合は、「0xfffd」「下位コード」の2バイトに変換。
  • シフトJISの下位コードのMSBが1の場合は、「0xfffd」の1バイトに変換。

している様に見えるが・・・

Blobに1文字づつ入れFileReaderで読むと

  • シフトJISの下位コードのMSBに関わらず、「0xfffd」の1バイトに変換。

してしまうので

Blobに複数の文字を入れると、

挙動が不安定になるらしい。

なので、

1文字づつシフトJISをUTF16に変換してシフトJIS変換表を作成するしかない様だ。

実際に動かしてみると、

1秒もかからず変換表を作ってしまうので

これでいいんじゃないかな?

まだ、黑(fc4f)付近で変換に失敗している???

あ、文字領域が拡張されていたw(6年の重みかな?

f040~fc7e、f080~fcfcを変換表に追加。

ついでに外部変数を止めPromiseでガガガと作らせようとしたら・・・

Promiseを100個以上作るとPromise.Allでうまく処理できない ※返事が返ってこない。

ので、awaitで順次処理に変えてみる。※asyncも付けまくる。

さらにダウンロードの直前に変換表を作り直してみると

3秒くらいかかってしまった。

変換表をjsファイルでダウンロードできるようにした方がいいかな?

サンプルをSJIS変換を使って作成してみた。

やはり処理時間が長めだな。

あれ?未定義な文字しかない行が結構ある!

カット!

ちゃんと処理時間を表示してみると長めだなぁ。

サンプルをiframe化しUTF16未対応文字は□に変えてみた。

さらに、EUCとかも対応できそうなのでやってみた。

サンプル

まだ、EUC-jpやiso-2022-jpでコードページを変更するコード(エスケープシーケンス等)が必要な文字は変換時に化けてしまう。

どんどん遅くなっていく。(キニシナイ

外部変数アクセスするのを減らそうとawaitしてみるとasync宣言付けたアロー関数だらけ。

Promise と resolve と await を良い塩梅で混ぜないといけないのも大変。

一番困ったのはVisualStudio Codeでデバッグしてみると

頻繁にPromise.allが暴走するが

それは非同期処理中はエラっても「デバッグコンソール」は裏に隠れたままなので、

SyntaxErrorがあっても気が付かないせい。

暫くしても処理が終わらないなぁ?と思い、

「問題」「出力」「デバッグコンソール」「ターミナル」タグをひっくり返してみると。

xxx変数は未定義です。

とか

xxxにmapプロパティは存在しません。

が見つかる。

でもデバッグを再開してもコンソールは初期化されないので、 2024/3/21現在はクリアされてる。

エラったらコンソールをクリアしてからデバッグしなおさないと泥沼。

postMessageでiframeとやり取りしているので、サンプルに入力した内容等がブラウザの他のタブにもpostされている可能性があります。

またサロゲートペア(𩸽:U+D867とU+DE3D、𠮷:U+D842とU+DFB7とか)にも対応していません。

※サロゲートペアは入力したいサロゲートペア文字の16進コードが判れば、IMEパッドの文字カデゴリの上位サロゲートD867の枠をクリックすると�っぽく表示されますが下位サロゲートからDE3Dの枠をクリックすると𩸽に変わります。

と云うのも、サロゲートペアはUTF16独自のものでSJIS文字に対応する文字の定義が無いっぽいです。SJIS変換表はSJISの文字領域に対して作成していますが行頭の””で囲まれた文字に上記のサロゲートペアが無いのです。または「部」から11画の魚辺の終わりの方にある𩸽を探し出すかですね。

JIS第4水準の第93区に𩸽が、AJ1ベース文字-JIS外に𠮷があるっぽいですが、ISO-2022-JPのザックリとしたエスケープシーケンスでは得られないっぽいです。

  • ASCII: 1b 28 42
  • JIS X 0208: 1b 24 42

一応、ISO-2022-JP-2004も追加してみたけどブラウザ未対応のencoding名らしく組み込んだエスケープ文字がそのまま出力され全角どころか半角すらちゃんと出なくなってしまう。

encodingx.jsのconst encodingInfoList をイジるとブラウザが対応している色々なencodingを試せます。

JISの様に文字の前にエスケープシーケンスが必要なものは配列の5~6番目に配列で記入できます。

  • 5番目は文字を全角等に切替るシーケンス
  • 6番目は半角に戻すシーケンス。

ここに新たなencodingを追加すればHTMLのselectの項目も自動的に増えます。

※まともに動作するかどうかは不明だけど

/**
 * エンコーディング情報
 *  {
 *      "encoding": {
 *          8:  [
 *                  [上位開始バイト,上位終了バイト,下位開始バイト,下位終了バイト,[接頭語...],[接尾語...]]
 *              ... 
 *          ],
 *          16: [
 *                  [上位開始バイト,上位終了バイト,下位開始バイト,下位終了バイト,[接頭語...],[接尾語...]]
 *              ...
 *          ],
 *      },
 *  ...
 *  }
 */
const encodingInfoList = {
    "windows-1252": {
        //  8ビット
        8: [
            [0x0000, 0x0000, 0x0000, 0x00ff],
        ],
    },
    "shift-jis": {
        //  8ビット
        8: [
            [0x0000, 0x0000, 0x0000, 0x00ff],
        ],
        //  16ビット
        16: [
            //  第1面
            [0x0081, 0x009f, 0x0040, 0x007e],
            [0x0081, 0x009f, 0x0080, 0x00fc],
            [0x00e0, 0x00ef, 0x0040, 0x007e],
            [0x00e0, 0x00ef, 0x0080, 0x00fc],
            //  第2面
            [0x00f0, 0x00fc, 0x0040, 0x007e],
            [0x00f0, 0x00fc, 0x0080, 0x00fc],
        ],
    },
    "iso-2022-jp": {
        8: [
            //  8ビット
            [0x0000, 0x0000, 0x0000, 0x00ff, [0x1B, 0x28, 0x42], []],
        ],
        16: [
            // JIS X 0208コード表   1面
            //
            // 記号、英数字、かな(01区~08区)
            [0x0021, 0x0028, 0x0020, 0x007f, [0x1B, 0x24, 0x42], [0x1B, 0x28, 0x42]],
            // 第1水準漢字(16区~47区)
            [0x0030, 0x004f, 0x0020, 0x007f, [0x1B, 0x24, 0x42], [0x1B, 0x28, 0x42]],
            // 第2水準漢字(48区~84区)
            [0x0050, 0x0073, 0x0020, 0x007f, [0x1B, 0x24, 0x42], [0x1B, 0x28, 0x42]],
            [0x0074, 0x0074, 0x0020, 0x002f, [0x1B, 0x24, 0x42], [0x1B, 0x28, 0x42]],
        ],
    },
    "iso-2022-jp-2004": {
        8: [
            //  ASCII
            [0x0000, 0x0000, 0x0000, 0x00ff, [0x1B, 0x28, 0x42], []],
        ],
        16: [
            // JIS X 0213漢字集合1面:コード表
            // 1面(JIS X 0208および第3水準漢字)(01区~94区)
            [0x0021, 0x007e, 0x0020, 0x007f, [0x1B, 0x24, 0x28, 0x51], [0x1B, 0x28, 0x42]],

            // JIS X 0213漢字集合2面:コード表
            // 2面(第4水準漢字)(01区~08区)
            [0x0021, 0x007e, 0x0020, 0x007f, [0x1B, 0x24, 0x28, 0x50], [0x1B, 0x28, 0x42]],
        ],
    },
    "euc-jp": {
        //  8ビット
        8: [
            [0x0000, 0x0000, 0x0000, 0x007f],
            [0x0000, 0x0000, 0x00a0, 0x00df, [0x8e], []],
        ],
        // JIS X 0208コード表   1面
        //
        // 記号、英数字、かな(01区~08区)
        16: [
            [1 + 0x0a0, 8 + 0x0a0, 0 + 0x0a0, 95 + 0x0a0],
            // 第1水準漢字(16区~47区)
            [16 + 0x0a0, 47 + 0x0a0, 0 + 0x0a0, 95 + 0x0a0],
            // 第2水準漢字(48区~84区)
            [48 + 0x0a0, 83 + 0x0a0, 0 + 0x0a0, 95 + 0x0a0],
            [84 + 0x0a0, 84 + 0x0a0, 0 + 0x0a0, 15 + 0x0a0],
        ],
    },
};

ここまでくるとブラウザのJavaScriptのreadAsTextのencodingのチェッカーっぽくなってきた。(笑

今更UTF-8以外のテキストデータをブラウザで使う意味は遠の昔に消えているので、

ExcelがUTF-8のCSVをちゃんと読める様になったら、もう存在意義が無いに等しい。(大笑

なので、あて名書き5をアップ。おっと2014年?2024年に修正っと(笑

なんてこった10年も経ってたのか!

ps.2024/2/13

readAsTextで1文字づつ処理するのはやはり遅い。文字間にNULエリアを挿入してみたら文字同士の影響が無い様なので、エスケープシーケンスも考慮して16バイト毎に文字を配置することで、データの下位バイトの範囲単位で(サンプルの場合は1行単位)で処理するように修正したら、1秒以内に処理を終える様にしたのでchromeで見ているなら【24時間以内の履歴を削除】するとサンプルの変換処理が妙に速くなる。(ハズ

全データの範囲を一度に処理すればもっと速くなるハズ。



[javascript]videoタグ

※大抵のページに動画のファイルをドラッグするとドラッグ処理が無効になっているから別タブで動画が再生される。

videoタグのサンプルを作成した。

何かの動画のファイルをページにドロップすると再生する。

しかし、サーバーに配置しているので、

ローカルの動画ファイルパスを指定してもアクセス不可なので

ファイルパスの指定を諦めてファイルからBlobデータを作ってsrcに設定すれば再生できた。

レイアウト構成をJSON形式で、Import Export できるようにしたのに・・・

[
  {
    "fileName": [
      "file:///${drive-1}:/${path-1}/${file-1}.${ext-1}",
      ...
      "file:///${drive-n}:/${path-n}/${file-n}.${ext-n}"
    ],
    "height": ${height},
    "width": ${width}
  },
  ...
]

複数の動画ファイルをドラッグすると、ページを大きくはみ出て再生しだすので、

【分割】ボタンで適当にページに収まりそうな感じにvideoタグをリサイズしてみた。

Excelのウインドウの整列っぽくするのは難しそう。



[javascript]createElementとかaddEventListenerはダルい

createElementはダルい。

そもそも、innerHTMLを使えば済む。

createElementはタグ名が付いてるダケの空っぽなHTMLエレメントを作るだけなので

var button = createElement('button');
button.className = 'fileButton fileDrag';
button.id = 'fileButton' + buttonId;
button.type = 'button';
button.innerHTML = caption;
parentObj.appendChild(button);

と・・・ダラダラと書かないといけないから

      var fileButton  = createElement('button', {
        className:  ['fileButton','fileDrag'],
        id:         'fileButton' + buttonId,
        type:       'button',
        innerHTML:  caption,
        parent:     parentObj
      });

の様に連想配列でエレメントの属性を一式で指定できればいいのに・・・

と思ったので書いてみた。

    //  HTMLエレメントを作成します
    const createElement = (tagName, options) => {
      var eventList = ['ended'];
      var elm  = document.createElement(tagName);
      Object.keys(options).forEach( (key) => {
        // eventの場合
        if( eventList.includes(key) ) {
          elm.addEventListener(key,options[key]);
        } else {
          // event以外の場合
          switch(key) {
            case 'className': // プロパティはclassNameですが、タグの属性はclassなので別途に処理します。
              if(Array.isArray(options[key])) {
                elm.classList.add(...options[key]); // 配列を展開しパラメータとして引き渡す
              } else {
                elm.classList.add(options[key]);
              }
              break;
            case 'innerHTML': // setAttributeではタグ内にinnerhtml="***"と属性を生成するので別途に処理します。
              elm.innerHTML = options[key];
              break;
            case 'parent':    // setAttributeではタグ内にparent="***"と属性を生成する様で、画面に生成したエレメントを割り付けないので別途に処理します。
              options[key].appendChild(elm);
              break;
            default:
              elm.setAttribute(key, options[key]);
              break;
          }
        }
      });
      return elm;
    };

イベントに対応するeventListの中身が少ないのは、creapteElementの後で毎回addEventListenerするのも面倒なので、スクリプトの最初でクラス指定でイベント登録を済ませたかったから・・・

とは云え、クラス数×イベント数がいっぱいあったら、その分のdocument.addEventListenerは呼び出したくないので、

    const onLoadWindow = () => {
      //  コントロールのイベント処理を登録します
      const classEvents = [
        /* onload */
        { className:  'fileButton',         events:   { 'click':  onClickFileButton}},
      ...
      ];
      registEventListener(classEvents);
    };
    //  documenイベント処理
    var documentEvents = {};
    const documentEventListener = (event) => {
      // 処理
      var target = event.target || event.srcElement;
      Array.from(target.classList).map((className) => documentEvents[event.type][className])
        .filter((func) => func !== undefined)
        .forEach((func) => func(event));
    };
    //  指定クラスを持つHTMLエレメントにイベントを登録します
    const registEventListener = (classEvents) => {
      // classEvents配列数分ループ
      classEvents.forEach((classEvent) => {
        // イベント数分ループ
        Object.keys(classEvent.events).forEach((eventName) => {
          // クラスのイベントごとの処理
          if( documentEvents[eventName] === undefined ) {
            // documentEvents[eventName][classEvent.className]に代入できるように初期化
            documentEvents[eventName] = {};
            document.addEventListener(eventName, documentEventListener);
          }
          // ※同じクラス・同じイベントに対応する処理は1つだけ
          documentEvents[eventName][classEvent.className] = classEvent.events[eventName];
        });
      });
    };
    //  画面初期表示時の処理
    window.onload = onLoadWindow;

イベントごとに1回document.addEventListenerを呼び出し、イベント発生時に呼出された時にイベントターゲットのクラス名からイベントで処理したい関数をリストアップして呼び出す様にしてみた。

const classEvents =[
  {
    className:  'fileButton',
    events:   {
      'click':  onClickFileButton}
    },
  },
  ...
]

この書き方は思いついたイベントを書き殴るには都合がいいけど、documentEventsでは扱いにくいので

var documentEvents = [
  {
    'click': [
      {
        'fileButton': onClickFileButton,
        ...
      }
    ],
  ...
  }
]

に置き換え、documentEvents[‘click’][‘fileButton’]からonClickFileButtonが容易に取得できるようにしている。

で・・・全部済ませたかったが、

videoタグのendedイベントはdocument.addEventListenerで拾えなかったので

自作のcreateElementで作成したHTMLエレメントにaddEventListenerでendedイベントを登録できるようにした。(ワケ

気分的には楽になるけど、

なぜかソースは長くなる。(大笑い



[javascript]matchとか

HTMLで同じようなタグが多いとのidに1とか2とか数値を付けるけど、

この数値の部分だけ欲しい時がある。

parseInt(id.match(/\d+$/))

とするとidの末尾の方の数字を数値で得られる。

matchは配列を返すので [0] を付けてparseIntに渡した方がいいけど、parseIntは引数を文字列に変換する際に配列なら先頭のみを対象とするみたいでこのままでも支障は無い。

ファイルの拡張子ダケ欲しい時

fileName.match(/([.])(.*$)/)[2]

[1]の様に思えるけど

matchはキャプチャグループを使うと

[0]:全体

[1]:1つ目のキャプチャグループ

[2]:2つ目のキャプチャグループ

の様に返すので ピリオドの後の拡張子部分ダケ欲しい場合は[2]になる。




top