JavaScript

JavaScript ふつうのfunctionと=>の違い

この記事がわかりやすかった。qiita.com 上記いろいろ書いてあるけど、とりあえず自分にとって影響ありそうな違いは下記3つ。 ・アロー関数は関数の外側のthisを参照する ・アロー関数では引数リストが使えない ・アロー関数はあらかじめ変数に入れて定義し…

JavaScript Promise async/awaitの基本がわかるチュートリアルサイト

これ読んでだいたいわかった気になった。 qiita.com あとおまけで下記2つも。 qiita.com qiita.com ググるといろんなサイトが見つかるけど、自分にとってはこれらが一番わかりやすかった。 promiseのallを使うと複数のpromiseが完了するのを並行して待つこ…

JavaScript ビデオを撮影 スクリーンショット スナップショット

スクショ後、ブラウザのダウンロードフォルダに画像をダウンロード var canvas = document.createElement('canvas'); var video = document.querySelector('video'); var ctx = canvas.getContext('2d'); // Change the size here canvas.width = parseInt(v…

JavaScript 独自イベントを作成し、キーバインドの有効・無効を切り替える

elm.addEventListener( "show", function(){ window.dispatchEvent(evInputStart); }); elm.addEventListener( "hide", function(){ window.dispatchEvent(evInputEnd); }); function avoidKeyEvent(e) { // キーバインドなし return; } function dispatchKe…

varとletの違い for文内部でループカウンタを使いたいときはletを使うべき

ボタン1~ボタン3というボタンが3つある ボタン1を押したときはコンソールに1と出す ボタン2~以下略 このとき、ループカウンタをvarで宣言すると、どのボタンを押しても3と出てしまう for - loopCounter is var - JSFiddle - Code Playground これは…

HTML5 JavaScript 複数のボタンに似たような処理を結び付ける

やりたいこと ボタンが10個あって、1~10の番号が振られている。 ボタンを押すと、番号の数字をコンソールに出力する。 実現方法1 ボタンに一つずつ異なるidをつけて、getElementById→addEventListener。 デメリット:似た処理でソースコードが肥大化する。…

JavaScript 同名関数がある場合は、後から定義されたものが優先される

単一のjsファイル内に同じ関数がある場合もそうだし、htmlで下記のようにsrc指定する順番もそう。 hoge.jsとpiyo.jsに同じ名前の関数がある場合、 hoge.js内で自分のファイル内の関数を呼んだつもりでも、piyo.jsの同名関数が呼ばれてしまうので注意。 <script src="js/hoge.js"></script> <script src="js/piyo.js"></script>

ブラウザ全画面・iframeのリロード

// 全画面リロード document.location.reload(); // iframeだけリロード document.getElementById("iframeID").contentWindow.location.reload();

JavaScript 数値かどうかのチェック

Number.isFinite() でOK

JavaScript null, 空文字チェックを同時に行う

if (!prm) でOK。 ただし、prmが数値の0で来る場合も該当してしまうので気を付けること。

JavaScript オブジェクトのプロパティ存在チェック

in演算子を使うと簡単。 var a = {dog:1,cat:2}; console.log('dog' in a);// trueconsole.log('human' in a);// false

JavaScript 例外を出す方法

throw 例外メッセージorその他 で意図的に例外を出せる。 投げた例外はcatch(e)のeに入っている。

JavaScript JSON オブジェクトを比較する方法

要素の順番が保証されている場合 JSON.stringifyを使う。 キー、値がすべて一致する場合 var a = {"WL_Lv1":-1, "WL_Lv2":-1, "WL_Lv3":-1, "WL_Lv4":-1};var b = {"WL_Lv1":-1, "WL_Lv2":-1, "WL_Lv3":-1, "WL_Lv4":-1};if(JSON.stringify(a) === JSON.stri…

JavaScript async await promiseのシンプルな使い方

ググりまくっていろんなページみたけど、下記が一番わかりやすかった。 簡単な説明とサンプルコードから始まってるから実用的。 numb86-tech.hatenablog.com 全部読む必要はない。 全体の1/10くらい、 つまり、そこでの処理が終わるのを待つことなくコードを…

JavaScript JSONで要素数を取得

var info = {"test":{"a":1,"b":2,"c":3}};console.log((info['test']).length);//undefinedconsole.log(Object.keys(info['test']).length);//3

JavaScriptでJSONのconsole.logが[object Object]になる対策

console.dir(value);もしくはconsole.log(JSON.stringify(value)); 参考 console.logでJSON形式の値が[object Object]になる時 - Qiita

URLの指定クエリの値を取得する

// URLパラメータ文字列を取得する var param = location.search alert(param) // 「?lib=jquery&ver=3」が出力 上記から指定したクエリの値だけを取得するコード。 // URL が「http://www.example.com?lib=jquery&ver=3」の場合 alert(getParam('lib')); //…