msdm.work

msdmです　ものづくり練習ページ

--------------------------------------------------------
 191022 イラスト
--------------------------------------------------------


### 即興おじさん 他

* 即興で人の顔を描く試み
    + 普段成人男性の絵を描かな過ぎて特におじさんの造形についてよくわかっていなかった
    + 資料を見てもうすこし寄せたい [おじさんのストックフォト - iStock](https://www.istockphoto.com/jp/%E5%86%99%E7%9C%9F/%E3%81%8A%E3%81%98%E3%81%95%E3%82%93?istockcollection=&phrase=%E3%81%8A%E3%81%98%E3%81%95%E3%82%93&sort=mostpopular)


![](images/191022_1.png)

### オリキャラ

スタンプにしたいです

![](images/191022_2.png)
![](images/191022_3.png)

### ヨッシー

![](images/190818.png)


--------------------------------------------------------
 190818 [JavaScript実践 〜スロットアプリの制作〜](https://schoo.jp/class/1908)
--------------------------------------------------------


### 目的
 
* jQuery不使用のコードに慣れる

### やること
 
* リンク先にて配布されているsampleソースを理解（一部写経）
* 上記ソースを書き換え、スロット数を2つ固定 → 可変にする

### 結果

スロットjsを開く (別窓)

### 備考

#### jsイベントリスナー関数の性質 ループ使用時のよくある間違い
* 動的に配置したスロット停止ボタンにイベントリスナー登録する際にfor文を使用したところ、
   リスナー関数内にわたったiの値がすべてループ完了後の値になり、最後のボタンしか反応しなかった。
* 参考
    + [クロージャ - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Closures#Creating_closures_in_loops_A_common_mistake) 「よくある間違い」らしい
    + [javascriptでループでaddEventListenerを登録するときの覚書](https://kurubusi.net/tips/javascript-tips/pitfall/)
    + [【JavaScript】for 内でイベントリスナとか登録するときにやっちゃいがちな間違い. とその対処法を３つほど. | TM Life](http://tmlife.net/programming/javascript/javascript-for-eventlistener-bug-closer.html)
    + [【JavaScript】forループ内でクロージャを生成する - Yohei Isokawa](https://blog.yuhiisk.com/archive/2015/07/30/generate-the-closure-in-for-loop.html
)
    + [JavaScriptの動かないコード（中級編） forループ内でイベントリスナを定義したら，動作がおかしい。（クロージャや関数オブジェクトの性質を理解していないために発生するエラー） - 主に言語とシステム開発に関して](https://language-and-engineering.hatenablog.jp/entry/2016/04/12/JavaScript%E3%81%AE%E5%8B%95%E3%81%8B%E3%81%AA%E3%81%84%E3%82%B3%E3%83%BC%E3%83%89%EF%BC%88%E4%B8%AD%E7%B4%9A%E7%B7%A8%EF%BC%89_for%E3%83%AB%E3%83%BC%E3%83%97%E5%86%85%E3%81%A7%E3%82%A4)


* 即時関数を用いる手法が多く目についたが、今回はwindow内のクリックイベントをすべて監視し、
   イベントターゲットのidによって処理をわける手法をとった。
    + これまでjQueryだよりでスルーできてしまった部分だと思う。jQueryなら複数要素のクリックイベントは `$(window).on('click, '.target', function(){...})` でとってしまう。
    
---