A painter and a black cat

# JavaScript

{{rawhtml(<canvas id="map"></canvas><script src="/javascripts/pagemap.min.js"></script><script>pagemap(document.querySelector("#map"));</script>)}}

{{toc}}

# Portal,TextBook,Cheat Sheet

Lastest Hacking News - JavaScript Cheat Sheet Free Download

http://www.cheatography.com/davechild/cheat-sheets/javascript/pdf/

はてな教科書 JavaScript 編

https://hatena.github.io/Hatena-Textbook-JavaScript/

JavaScript Programming お気楽 ECMAScript2015 超入門

http://www.geocities.jp/m_hiroi/light/js2015.html

K-TechLaboゼミ用学習ノート - JavaScriptのテキスト

http://www.k-techlabo.org/blog2/?page_id=1022

JavaScriptの入門書を jsprimer.net で公開しました

https://efcl.info/2018/10/26/jsprimer.net/ https://jsprimer.net/

JavaScript Promiseの本

http://azu.github.io/promises-book/

trekhleb/javascript-algorithms

https://github.com/trekhleb/javascript-algorithms/blob/master/README.ja-JP.md

>多種多様なアルゴリズムやデータ構造に関するサンプル例がまとめられたリポジトリ

初心者に分かりやすい！JavaScript 入門チートシート

https://commte.net/javascript-basics

モダンJavaScriptについて

https://qiita.com/ayuoyk/items/b0183b36881f69b91282

# Gadgets

## jQuery の使用

次のコードを実行することにより、jQuery を読み込んでいないページでも jQuery を使用することができる。

```Javascript

if (!window.jQuery) {

    document.body.appendChild((function(){

        var s = document.createElement("script");

        s.type = "text/javascript";

        s.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js";

        return s;

    })());

}

```

## jQueryの使用(Chrome DevToolsのSnippets機能編)

ChromeのDev Toolsを開き(Ctrl+Shift+IかF12キーを押す)、Sourcesパネルを開いてその中のSnippetsタブをクリック。その後、左側の空白欄を右クリックしてメニューを表示し、その中の『New』をクリック。

そうすると新しいsnippetが追加され、真ん中にコード記入欄ができるのでsnippetの名前を『jqueryfy』、コード下記のように記入し保存。

```

(function () {

  if ( !window.jQuery ) {

    var dollarInUse = !!window.$;

    var s = document.createElement('script');

    s.setAttribute('src', '//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js');

    s.addEventListener('load', function(){

      console.log('jQuery loaded!');

      if(dollarInUse) {

        jQuery.noConflict();

        console.log('`$` already in use; use `jQuery`');

      }

    });

    document.body.appendChild(s);

  }else if( !window.$ ){

      window.$ = window.jQuery;

      console.log("'$' is jQuery")

  }

})();

```

jqueryfyの箇所を右クリックしてメニューを表示し、『Run』をクリックする。

while(isプログラマ) - Chrome DevToolsのSnippets機能がすごい便利そう

http://am-yu.net/2014/08/07/chrome-devtools-snippets/

## ページ内に仕掛けられた全てのEventListenersの設定元の一覧をダンプ

last log - ページ内に仕掛けられた全てのEventListenersの設定元の一覧をダンプし、必要な対策を施す方法

http://uupaa.hatenablog.com/entry/2014/09/05/004431

実際にconsoleに貼り付ける時は、関数の中身だけをコピペする

```javascript

function getAllNodeEventListeners() {

  var nodes = [].concat(window, [].slice.call(document.getElementsByTagName("*")));

  nodes.forEach(function(node) {

    var result = getEventListeners(node);

    for (var type in result) {

      console.log(type, result[type]);

    }

  });

}

```

# Chrome DevTools Snippets

ChromeのDevTools(開発者ツール)にはSnippetsという、コンソールでデバッグの際に使うスクリプトを保持してくれる機能がある。

DevTools Snippets

http://bgrins.github.io/devtools-snippets/

# Debug

JavaScriptが敬遠される理由の7割ぐらいは、このデバックのし難くさにかかっていると思う。

まだ実機で試してないのもあるけど。

JavaScriptのデバッグ方法 – JSを嫌いにならないためのTips

http://postd.cc/how-to-not-hate-javascript-tips-from-the-frontline/

Qiita - JavaScript,jQueryの爆速コーディング、デバッグ方法論の勧め～実践向け逆引き(windows,chrome向け)～

http://qiita.com/shgkt/items/0054670269e1d3aa49b8

javascript-visualizer - JavaScriptの実行内容を可視化

https://tylermcginnis.com/javascript-visualizer

## alert

最も原始的なのが、alert()を使う方法です。同様にconfirm()を使うこともできます。

C言語のprintfで変数を出力したり、Java言語のSystem.out.println()でインスタンスの中身を出力するのと同じです。

```javascript

alert("Alex");

```

## debuggerステートメント

デベロッパーツール側では手動でブレークポイントを配置したものと認識されます。

```javascript

debugger;

```

## console.log,console.warn,console.error,console.info

いずれも以下のようなC言語で使われるような出力フォーマットをサポートします。

```javascript

console.log("Hello %s", "Brian");

```

Qiita - console.logまとめ 2016年夏

http://qiita.com/ykyk1218/items/0f5858d077d43a49cfe2

## console.table()

結果はコンソール上にテーブルで出力され、オブジェクトの属性でソートすることができます。

オブジェクトの中身、JSON(たぶん)、配列が、視覚的に把握しやすくなります。

```javascript

console.table([[1,2,3], [2,3,4]]);

```

## コールトレースを取得する

失敗した時だけでなく、成功した時にもコールトレースを確認することができます。

非標準の関数ですが、主要なデスクトップブラウザではサポートされています。

```javascript

console.trace();

```

非同期コールは、いかが役に立つかもしれません。

```javascript

TraceConsole.trace();

```

## 誰がオブジェクトを変更するか？ Objects.observe + console.trace

オブジェクトのプロパティの一部が変更されることがありますが、誰が犯人か判らないことがよくあります。

このような場合Object.observeが役に立ちます。personオブジェクトに対する全ての変更を確認する場合を見てみましょう。

console.traceと併用すると、コールトレースも確認できるので、誰が犯人かまで判ります。

ただ、現在(2015.05:未確認)は、Chromeのみがこの機能をサポートしているようです。

```javascript

var person = {

  firstName: "John"

}

Object.observe(person, function(changes) {

  // This callback runs asynchronousty and aggregates the changes that happened

  // in the previous execution turn into `changes` param.

  changes.forEach(function(change) {

    consote.log(change.type, change.name, change.oldVatue);

    consote.trace();

  });

});

Object {firstName."John"}

```

## 誰がDOMやHTML要素を変更するのか

MutationObserverと呼ばれるオブジェクトがあり、これによってDOM要素の監視が可能になります。

ドキュメント全体で発生した全ての変更をリストアップしたい場合を考えてみましょう。

この場合、ドキュメントは選択されたどのDOM要素にも当てはまります。

```javascript

var observer = new MutationObserver(function(mutations) {

  mutations.forEach(function(mutation) {

    for (var i = 0; i < mutation.addedNodes.Length; i++)

      console.log(mutation.addedNodes[i]);

  })

});

observer.observe(document, { childList: true });

```

Chromeでは、プログラミング以外の解決策も使えます。DOM Breakpointsと呼ばれるもので、バックグラウンドではMutation Eventを使っています。

## サーバ側でクライアントのエラーログを取る

実に簡単なのですが、Windowオブジェクトにonerrorイベントハンドラを追加するだけでクライアント側の処理は完了です。

ハンドラは、サーバ上にエラー情報を蓄積するRESTのエンドポイントに対してAjaxリクエストを行うことができます。

```javascript

window.onerror = function(msg, url, line){

  if(encodeURIComponent) {

    var req = new AjaxRequest();

    var params = encodeURIComponent(url) + encodeURIComponent(msg);

    req.setMethod("POST");

    return req.loadXMLDoc("/my/servtet", params);

  }

  return false;

};

```

# jQuery

【脱JQuery】モダンなJSの書き方

https://qiita.com/tatsumi_t2/items/ec41fdc4cf269bfa86bc

## Cheatsheet

jQuery Cheatsheet

http://lab.abhinayrathore.com/jquery-cheatsheet/

##  Plugin Sample

jQueryを利用した演出がかっこいいWEBサイト50個 

http://designaholic.cc/2011/01/jqueryweb50.html

12個のかっこいいjQueryスライドショープラグインまとめ

http://webdesignfactory.schoolbus.jp/jquery_slide/

流行のjQueryでスクロールするサイトを集めてみました

http://webrocketsmagazine.com/entry/20111102/scrollable-website-with-jquery.html

クライアントワークでよくお世話になっているjQueryプラグインいろいろ

http://webdesignrecipes.com/jquery-plugins-in-cliant-works/

##  使いたいけど難あり

http://grow.weblike.jp/immature_design/jquerys/865.html

http://galleria.io/

# JavaScript Emulator

JSBin

http://jsbin.com/

JSFiddle

https://jsfiddle.net/

glot.io - 様々な言語のコードスニペットが共有できるサイト

https://glot.io/

javascript-visualizer - JavaScriptの実行内容を可視化

https://tylermcginnis.com/javascript-visualizer

# JavaScript Beatutify

Online Javascript beatutify

http://jsbeautifier.org/

# Memo

くんすとの備忘録 - BATファイルにJScriptを埋め込む

http://kunst1080.hatenablog.com/entry/2015/12/15/222711

LintCI(Web上でJavaScriptのLint)

https://lint-ci.io/

Programming Tutorials and Source Code Examples

http://www.java2s.com/

Qiita - ブレークポイントを使ったJavaScriptデバッグを整理してみた【再入門】

http://qiita.com/nekoneko-wanwan/items/02aed17773833c3ad3b2

Qiita - Reactを使うとなぜjQueryが要らなくなるのか

http://qiita.com/naruto/items/fdb61bc743395f8d8faf

Qiita - JavaScript ショートコードテクニック集（ES6含む）

http://qiita.com/ichimonji_haji/items/f602f6c437be9e7daa88

アプギガ - JavaScriptの学習にオススメなWebコードエディタ「Carbide」の万能すぎる可視化ウィジェットがヤバイ！

http://plus.appgiga.jp/masatolan/2016/10/13/57333/

JavaScriptエンジニアなら知ってるよね？ エラー処理のいい書き方、悪い書き方

https://www.webprofessional.jp/proper-error-handling-javascript/

Qiita - ゼロから始めるJavaScript生活

http://qiita.com/takahashim/items/7838334d1451fb0a9811

【翻訳】 2016年にJavaScriptを学んでどう感じたか - 【翻訳】 2016年にJavaScriptを学んでどう感じたか

http://kikuchi1201.hateblo.jp/entry/2016/10/26/172404

Subterranean Flower blog - JavaScriptの関数で何ができるのか、もう一度考える

https://sbfl.net/blog/2016/12/26/javascript-function-revisited/

javascriptのライブラリを一覧にしてまとめてみた

https://trueman-developer.blogspot.jp/2016/05/javascript.html

GitHub - trekhleb/javascript-algorithms

https://github.com/trekhleb/javascript-algorithms

JavaScriptをもうちょっと理解する54のトピック

https://qiita.com/komlabo/items/3f14c8990a2f94fb5323

JavaScriptの"非同期処理"を理解する（Promise/async/await)

https://qiita.com/kkrtech/items/4680c624012bd265714f