javascript

癖のあるオブジェクト分割代入「{ hoge: value } = obj」

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment 以下構文で「valueという変数を宣言し、その中に右辺オブジェクトのhoge要素の内容を代入する」という操作が行える。 var obj = { hoge: "hogehoge", f…

requestAnimationFrame

https://developer.mozilla.org/ja/docs/Web/API/Window/requestAnimationFrame requestAnimationFrame(f)は、setTimeout(f, ms)に似た、処理実行を予約するHTML標準関数。 setTimeoutは指定した「時間の経過」タイミングで処理が実行されるが、requestAnima…

window.resizeToで「アクセスが拒否されました」エラー

http://scripting.cocolog-nifty.com/blog/2006/12/htamovetoresize_dbc4.html IEではwindow.resizeToやmoveToメソッドが実行される瞬間にマウス左ボタンが押された状態だと「アクセスが拒否されました」のシステムエラーが発生するという意味不明な挙動をす…

viewport

https://qiita.com/ryounagaoka/items/045b2808a5ed43f96607 基本 <meta name="viewport" content="width=《幅》">1. 《幅》pxのウインドウサイズを持つ仮想的なブラウザで、画面表示を行う 2. 仮想的なブラウザの画面内容を、実デバイスの画面幅にフィットするように拡大縮小して表示する ※《幅》に"devic</meta>…

javascriptで画面サイズ、ウインドウサイズを取得する方法まとめ

https://web-designer.cman.jp/javascript_ref/window/size/ ↑狭い ウインドウ全体 - ウインドウ枠 - スクロールバー: document.body.clientWidth/Height ウインドウ全体 - ウインドウ枠 : window.innerWidth/Height ウインドウ全体 : window.outerWidth/Hei…

Workerオブジェクト(Web Worker API)

https://developer.mozilla.org/ja/docs/Web/API/Worker Promiseとは別に、バックグラウンドで行われるタスクを管理するためのWorkerオブジェクトというものが存在する。 Promiseより古い仕様?

MutationObserver

https://developer.mozilla.org/ja/docs/Web/API/MutationObserver MutationObserver は、指定したコールバック関数を DOM の変更時に実行してくれる標準オブジェクト。 DOM仕様に含まれている。 // オブザーバインスタンスを作成 const observer = new Muta…

linqのgroupByのような処理をjavascriptで使う

groupByは抽象化されたブレーク処理だと考えることができるので、使い所は多い。 // groupByの定義 Array.prototype.groupBy = function(convertKeyFunc) { let groupList = []; let group = null; let first = true; for (const item of this) { const curr…

javascriptのみでShift-JISやEUC-JPでURLエンコードを行うにはecl.js

https://www.junoe.jp/downloads/itoh/enc_js.shtml RentaとAmazonKindleを同時に検索するものを作ろう思ったらRentaがこのご時世にEUC-JPを使ってたのでecl.jsを使う羽目になった。 通常javascriptのencodeURIはUTF-8のエンコードした文字列を返すが、これ…

= [b, a] でスマートに値を入れ替える

https://qiita.com/artistan/items/9eb9a0fb14f4ec3a8764 『tmp=a; a=b; b=tmp;』という泥臭い方法はもう終わり。 『[a, b] = [b, a]』で一発だ! とはいえ、初学者には前者を知った上で後者を使ってほしい。

= [b, a] でスマートに値を入れ替える

https://qiita.com/artistan/items/9eb9a0fb14f4ec3a8764 『tmp=a; a=b; b=tmp;』という泥臭い方法はもう終わり。 『[a, b] = [b, a]』で一発だ! とはいえ、初学者には前者を知った上で後者を使ってほしい。

javascriptの数値は全てdouble型である

https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Numbers_and_dates JavaScriptでは、数値はすべて64ビット倍精度浮動小数点数であり、整数用の型は存在しない。 整数を表現する場合、15桁までの整数しか適切に扱える保証がない。 小数は10進数…

「_=>」のアンダースコアは単なる変数名である

javascriptでアロー関数は普通「value=>value」と書くが、たまに「_=>_」というコードを見ることがある。 これはそういう構文があるわけではなく、単に変数名「_」を引数に指定しているだけである。 Scala言語のアンダースコア構文に由来すると思われる。

ラムダ式(アロー演算子)は、引数なしをアンダーバーで表せる

f = _=> "no argument function";以下と等価である。 f = ()=> "no argument function";

javascriptを無効にしてもまだコピペ禁止されてる場合、それを解除する呪文。

Array.from(document.querySelectorAll("*")).forEach((el) => { el.setAttribute("style", "-webkit-user-select: auto;-moz-user-select: auto;-ms-user-select: auto;user-select: auto;"); });

javascriptでCSSメディアクエリの切り替えを検知する

https://teratail.com/questions/69215 $(window).on('load resize', function(){ if( window.matchMedia('(max-width:767px)').matches ){ $('p').css('color','red'); } });

Service Worker

http://qiita.com/horo/items/175c8fd7513138308930 https://developers.google.com/web/fundamentals/getting-started/primers/service-workers?hl=ja ブラウザによってバックグラウンドで実行されるスクリプト。 ページからのネットワークリクエストを横取…

FetchAPI

https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch http://jxck.hatenablog.com/entry/whatwg-fetch XMLHttpRequest の後継となる非同期通信用DOM API。 WHATWGによって標準化されている。 以下のように使う。 fetch("http://example.co…

EcmaScript 6 のアロー演算子はfunction(){}の『シンタックスシュガーではない』

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/arrow_functions アロー関数は、this の値をレキシカルに束縛します。 function Person() { // Person() のコンストラクターは自分自身を `this` として定義します。 this.age = 0; setInte…

1分でわかるe.preventDefault(); e.stopPropagation(); return false; の違い

http://iwb.jp/return-false-preventdefault-stoppropagation/ 超わかりやすい。 e.preventDefault() イベント本来の動きを止める。Aタグのクリックイベントでこれを実行すると、リンク先へページ移動しない。 ただし、イベントの伝播は止めない。入れ子にな…

jQueryで、Enterを押したときに次/前のコントロールにフォーカスを移す

<html> <script src="http://www.google.com/jsapi"></script><script>google.load("jquery", "1");</script> <script> $(function(){ $(document).keyup(function(e){ if (e.keyCode == 13 && e.shiftKey == false) { $(document.activeElement).nextAll("input:first").focus(); } else if (e.keyCode == 13 && e.shiftKe…</html>

WSHでCoffeeScript簡易コンパイラを作る

// CoffeeScript簡易コンパイラ // CoffeeCompile.jse // カレントをスクリプトのあるパスにする var fso = new ActiveXObject("Scripting.FileSystemObject") var WShell = new ActiveXObject("WScript.Shell") WShell.CurrentDirectory = fso.GetFile(WScr…

coffee-script.jsのコンパイルでsyntax errorが出た行を取得する方法

s=""; s+="f=->\n"; s+=" alert[ 'Hello. #{language}.'\n"; try { compiled = CoffeeScript.compile(s); console.log(compiled); } catch(e) { console.log(e.location.first_line); console.log(e.location.first_column); console.log(e.message); }

Array.reduceで指定条件に一致するオブジェクトを取得する

リテラル値の配列から任意の要素を取得したいのであればindexOfでよいが、オブジェクトの配列で、オブジェクトの属性で検索して、オブジェクトそのものを得たい場合はそれが出来ない。 なので、こんな感じで取ってくるというのはどうだろう。 var objList = …

MS Office付属の、プログラムから操作可能なOCR「MODI」

http://itpro.nikkeibp.co.jp/article/COLUMN/20140407/548947/ Microsoft Office Document Imaging。 "MODI.Document"というPGIDのActiveXオブジェクトとして提供される。

strictモード

https://developer.mozilla.org/ja/docs/Web/JavaScript/Strict_mode JavaScriptを厳密に動作させるモード。 グローバルなスコープ、または関数の1番上の行に "use strict";というコードを追加することでstrictモードが有効になる。 strictモードでは、javas…

jQueryのバージョン確認方法

http://senta.me/blog/javascript/check-the-version-of-jquery/ $().jquery

jQueryのバージョン確認方法

http://senta.me/blog/javascript/check-the-version-of-jquery/ $().jquery

CoffeeScriptを直接動かす方法

http://tmlife.net/programming/javascript/no-node-js-windows-coffeescript-usage.html 以下でできる。 <script src="http://jashkenas.github.com/coffee-script/extras/coffee-script.js"></script> <script src="script.coffee" type="text/coffeescript"></script> <script type="text/coffeescript"> f=-> language = "Coff…

coffee script で自動生成される__extends関数

__extends関数を整形して、コメントを追加した。 ctorオブジェクトのところを理解するのにわりと苦労した。 あとconstructorプロパティの存在を知らなかったので、なんでこれで child.__super__.constructor() が出来るのかかなり悩んでしまった。結論として…