「備忘録（javascript)」カテゴリーアーカイブ

[docker]Error: Cannot find module ‘timers/promises'[起動しない]

ある日、コンテナをビルドしなおしてみるとエラーとなってコンテナが起動しない。

container_name  | /usr/local/lib/node_modules/npm/lib/es6/validate-engines.js:31
container_name  |     throw err
container_name  |     ^
container_name  |
container_name  | Error: Cannot find module 'timers/promises'
container_name  | Require stack:
container_name  | - /usr/local/lib/node_modules/npm/node_modules/@npmcli/agent/lib/util.js
container_name  | - /usr/local/lib/node_modules/npm/node_modules/@npmcli/agent/lib/index.js
container_name  | - /usr/local/lib/node_modules/npm/node_modules/make-fetch-happen/lib/remote.js
container_name  | - /usr/local/lib/node_modules/npm/node_modules/make-fetch-happen/lib/cache/entry.js
container_name  | - /usr/local/lib/node_modules/npm/node_modules/make-fetch-happen/lib/cache/index.js
container_name  | - /usr/local/lib/node_modules/npm/node_modules/make-fetch-happen/lib/fetch.js
container_name  | - /usr/local/lib/node_modules/npm/node_modules/make-fetch-happen/lib/index.js
container_name  | - /usr/local/lib/node_modules/npm/node_modules/npm-registry-fetch/lib/index.js
container_name  | - /usr/local/lib/node_modules/npm/lib/utils/replace-info.js
container_name  | - /usr/local/lib/node_modules/npm/lib/utils/error-message.js
container_name  | - /usr/local/lib/node_modules/npm/lib/utils/exit-handler.js
container_name  | - /usr/local/lib/node_modules/npm/lib/cli-entry.js
container_name  | - /usr/local/lib/node_modules/npm/lib/cli.js
container_name  | - /usr/local/lib/node_modules/npm/bin/npm-cli.js
container_name  |     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
container_name  |     at Function.Module._load (internal/modules/cjs/loader.js:725:27)
container_name  |     at Module.require (internal/modules/cjs/loader.js:952:19)
container_name  |     at require (internal/modules/cjs/helpers.js:88:18)
container_name  |     at Object.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/@npmcli/agent/lib/util.js:3:16)
container_name  |     at Module._compile (internal/modules/cjs/loader.js:1063:30)
container_name  |     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
container_name  |     at Module.load (internal/modules/cjs/loader.js:928:32)
container_name  |     at Function.Module._load (internal/modules/cjs/loader.js:769:14)
container_name  |     at Module.require (internal/modules/cjs/loader.js:952:19) {
container_name  |   code: 'MODULE_NOT_FOUND',
container_name  |   requireStack: [
container_name  |     '/usr/local/lib/node_modules/npm/node_modules/@npmcli/agent/lib/util.js',
container_name  |     '/usr/local/lib/node_modules/npm/node_modules/@npmcli/agent/lib/index.js',
container_name  |     '/usr/local/lib/node_modules/npm/node_modules/make-fetch-happen/lib/remote.js',
container_name  |     '/usr/local/lib/node_modules/npm/node_modules/make-fetch-happen/lib/cache/entry.js',
container_name  |     '/usr/local/lib/node_modules/npm/node_modules/make-fetch-happen/lib/cache/index.js',
container_name  |     '/usr/local/lib/node_modules/npm/node_modules/make-fetch-happen/lib/fetch.js',
container_name  |     '/usr/local/lib/node_modules/npm/node_modules/make-fetch-happen/lib/index.js',
container_name  |     '/usr/local/lib/node_modules/npm/node_modules/npm-registry-fetch/lib/index.js',
container_name  |     '/usr/local/lib/node_modules/npm/lib/utils/replace-info.js',
container_name  |     '/usr/local/lib/node_modules/npm/lib/utils/error-message.js',
container_name  |     '/usr/local/lib/node_modules/npm/lib/utils/exit-handler.js',
container_name  |     '/usr/local/lib/node_modules/npm/lib/cli-entry.js',
container_name  |     '/usr/local/lib/node_modules/npm/lib/cli.js',
container_name  |     '/usr/local/lib/node_modules/npm/bin/npm-cli.js'
container_name  |   ]
container_name  | }
container_name exited with code 7
続きを読む →

Javascript のオブジェクトのプロパティ一覧を取得する方法

とあるjavascriptのライブラリを利用していたときのこと、欲しい値が取得できるかどうか調べていたのだけど、オブジェクトの中にその値があるかどうかが不明。
しかし、文献を調べてみてもプロパティ一覧がないので、プロパティ名が分からない。

そんなときには次の方法で取得できる。

for (key in Obj) {
    if (typeof Obj[key] ==  "function") {
        console.log(Obj[key]());
    }
    else {
        console.log(Obj[key]);
    }
}

これで無事値を取得できた。

IEとその他のブラウザでjavascriptの挙動が違う

とあるシステムを構築中にハマった体験を。

javascript内でPHPをパラメタ付きで呼び出すのですが、Firefoxでは正常に動作するも、IE９では正常に動作しない。
パラメタには日本語を含めていました。
なぜ？？？
いろいろと調べた結果、文字コードの問題でした。
HTML,PHP,javascript全てUTF−８で記述しているのですが、パラメタを渡すとSJISとして渡ってしまう。
うーん、metaタグとかscriptタグにcharset=”UTF-8″を付加してるのになぜ。
結局、javascript内で以下のような記述をすることでIE、Firefoxともに同じ動作をするようになりました。
var Str = encodeURIComponent(文字列);
原因がわかるのに、苦労しました(–;)

要素の座標を取得 javascript

javascriptで指定した要素の座標を簡単に取得する方法です。

function getElementPosition(e)
{
    var p = {x:0,y:0};
    if( !e.offsetParent ){
        return p ;
    }
    else{
    }
    p.x = e.offsetLeft;
    p.y = e.offsetTop;
    if(e.offsetParent){
        var pp = getElementPosition(e.offsetParent);
        p.x += PixNum( pp.x );
        p.y += PixNum(pp.y );
    }
    return p;
}
function PixNum(sz)
{
    var s = (sz + “”).replace(/\D/g,””);
    var n = parseInt(s);
    return n;
}

IEとFireFoxではbackgroundcolorの認識が違う

javascriptで背景色で分岐して、処理を行うことしようとしていたのですが、ＩＥだと正常に動作してFireFoxだと指定した条件が無視されるという現象が発生。

if(row.cells.item(x).style.backgroundColor == “#ffdddd”){
　　　　処理Ａ；
}
else{
　　　　処理Ｂ；
}

原因は、firefoxだと、RGB形式で色を指定しないとダメでした。

なので、

if( (row.cells.item(x).style.backgroundColor == “#ffdddd”) ||
(row.cells.item(x).style.backgroundColor == “rgb(255, 221, 221)”) ){
　　　　処理Ａ；
}

とすると正常に動作しました。

Javascript イベントハンドラ　まとめ

javascript のイベントハンドラのまとめたものがほしかったので情報を集めて作成。

《イベントハンドラ一覧》

イベントハンドラ 発生条件
onChange フォーム要素の選択、入力内容が変更された時に発生
onSelect テキストが選択された時に発生
onSelectStart ページ内の要素が選択されようとした時に発生　※IEのみ
onSubmit フォームを送信しようとした時に発生
onReset フォームがリセットされた時に発生
onAbort 画像の読み込みを中断した時に発生
onError 画像の読み込み中にエラーが発生した時に発生
onLoad ページや画像の読み込みが完了した時に発生
onUnload ウィンドウを閉じた時、他のページに切り替えた時、ページをリロード（更新）した時に発生
onClick 要素やリンクをクリックした時に発生
onDblClick 要素をダブルクリックした時に発生
onKeyUp 押していたキーをあげた時に発生
onKeyDown キーを押した時に発生
onKeyPress キーを押してる時に発生
onMouseOut マウスが離れたした時に発生
onMouseOver マウス乗った時に発生
onMouseUp クリックしたマウスを上げた時に発生
onMouseDown マウスでクリックした時に発生
onMouseMove マウスを動かしている時に発生
onDragDrop マウスでドラッグ＆ドロップした時に発生　※NN4のみ
onBlur ページやフォーム要素からフォーカスが外れた時に発生
onFocus ページやフォーム要素にフォーカスが当たった時に発生

getElementById 初歩的なことですが・・・

javascriptのgetElementByIdについてですが、
いくら見直しても、スクリプト内で取得した値をフォームのテキストに反映できない。

なぜ？なぜ？

イライラしてきたところで、getElementByIdをよく見直してみると。
値を表示するテキストにIDが指定してない。
初歩的なことでした。

javascript 複数のチェックボックスに一括でチェックを入力する

複数のチェックボックスに対して、一括でチェックを入力するチェックボックス


//一括チェックボックス
<input type=”checkbox” name=”allchk_0″ value=”1″ onclick=”allChk0(this.form.allchk_0)” >
//個別チェックボックス
<input type=”checkbox” name=”check1[1]” value=”1″ >
<input type=”checkbox” name=”check1[2]” value=”1″ >
<input type=”checkbox” name=”check1[3]” value=”1″ >
<input type=”checkbox” name=”check1[4]” value=”1″ >
<input type=”checkbox” name=”check1[5]” value=”1″ >
<input type=”checkbox” name=”check1[6]” value=”1″ >
<input type=”checkbox” name=”check1[7]” value=”1″ >
<input type=”checkbox” name=”check1[8]” value=”1″ >
<input type=”checkbox” name=”check1[9]” value=”1″ >
<input type=”checkbox” name=”check1[10]” value=”1″ >
<input type=”checkbox” name=”check1[11]” value=”1″ >
<input type=”checkbox” name=”check1[12]” value=”1″ >
<input type=”checkbox” name=”check1[13]” value=”1″ >
<input type=”checkbox” name=”check1[14]” value=”1″ >
<input type=”checkbox” name=”check1[15]” value=”1″ >
//一括チェック入力script
<script type=”text/javascript”><!–
function allChk0( Obj ) {
flg = Obj.checked;
document.form.elements[‘check1[1]’].checked = flg;
document.form.elements[‘check1[2]’].checked = flg;
document.form.elements[‘check1[3]’].checked = flg;
document.form.elements[‘check1[4]’].checked = flg;
document.form.elements[‘check1[5]’].checked = flg;
document.form.elements[‘check1[6]’].checked = flg;
document.form.elements[‘check1[7]’].checked = flg;
document.form.elements[‘check1[8]’].checked = flg;
document.form.elements[‘check1[9]’].checked = flg;
document.form.elements[‘check1[10]’].checked = flg;
document.form.elements[‘check1[11]’].checked = flg;
document.form.elements[‘check1[12]’].checked = flg;
document.form.elements[‘check1[13]’].checked = flg;
document.form.elements[‘check1[14]’].checked = flg;
document.form.elements[‘check1[15]’].checked = flg;
}
// –></script>

ＰＨＰと連携して一括チェックボックスを使う。

<?php
    //配列を定義
    $str_arr = array(1=>’aaa’,2=>’bbb’,3=>’ccc’,4=’ddd’,5=>’eee’);
?>
//一括チェックボックス
<input type=”checkbox” name=”allchk” value=”1″ onclick=”allChk(this.form.allchk)” />
<?php
//個別チェックボックスを配列より生成
foreach($str_arr as $key => $elemet){
    if($elemnt){
        ?>
        <input type=”checkbox” name=”check1[<?=key?>]” value=”1″ />
        <?php
    }
}
?>
<script type=”text/javascript”><!–
    function allChk<?=$index?>( Obj ) {
        flg = Obj.checked;
        <?php
        foreach($str_arr as $key => $element){
            if($element){
                ?>
                document.form.elements[‘check1[<?=$key?>]’].checked = flg; // ON・OFFを切り替え
                <?php
            }
        }
        ?>
    }
// –></script>

javascript TEXTAREAの入力制限

とあるWEBアプリを構築していたのですが、TABLE内に配置したTEXTAREAがネックになっていました。
なぜかと言うと、入力の時はTEXTAREAタグ内に文字列が表示されるので、何文字・何行あっても枠のサイズは決まっていたのでレイアウトが崩れることはなかったのですが、それを閲覧モードで表示すると文字数・行数によってはレイアウトが大幅に崩れてしまう。
ウィンドウ内の座標をもとに、レイアウトをしているのでTABLE内のレイアウトが崩れると大変なことになるんです。

そこで、TEXTAREAタグの入力制限を設けようと思い四苦八苦。

やっとのことでできました。

続きを読む →