Memo on JavaScript

問題別

[Q] iframe要素を選択されたときのマウスイベントが取れない

[A] iframe上に divをoverlapさせ、そこでマウスイベントを拾う
　 (iframe側にマウスイベントが行かなくなるが)

[Q] callbackに classの methodを渡したが、呼び出されたとき thisが windowになってしまう

[A] 関数objectを渡すときに .bind(this) で渡す

[Q] ブラウザ上のJavaScriptからFile保存したい

[A] 基本的にはできない。Local resourceにアクセスする権限がないため。
　 代替案としては、a tagを使ってdownloadさせるようにする (下記Blobをfileに保存)

[Q] CSSを動的に書き換えられない

[A] Element.sheet.cssText や cssRules[n] に直接textをセットしようとしても拒否される (Read only ?)
　 Element.sheet.deleteRule(n) や Element.sheet.insertRule(n) を使って書き換える

[Q] CSSを書き換えてもinnerHTMLにあるstyleタグの内容が変化しない

[A] element.innerHTMLでの情報取得は諦めよう。
element.style.cssTextには変更が反映されているのでそちらを取得。

[Q] sheet.cssTextに @keycode定義が入っていない

[A] animation定義はcssTextに入っているが、@keycodeは入らない。sheet.cssRuls[n+1] には@keycode定義があるにも関わらず。
これ、CSSの仕様でしょうか。だとしたら、言いたくないけどよくこんな馬鹿みたいな仕様にしたなという感想です。cssTextってCSSのTextが入るんじゃないのか？keycodeはCSSではないのか？
対策はdocument.styleSheets[n].cssRules[nn] を１つ１つ探して回るしかない。
馬鹿みたいな仕様に振り回されてコードも馬鹿みたいになる。

[Q] Mouse eventの event.targetが期待していたElementではない

[A] Event.targetには event発生位置にある、最も手前のelementがセットされる。
　 そのためeventを拾いたいelementにchild elementが居るとそちらが指される。
　 DOM treeを辿って親elementを探すなどの対応が必要。

[Q] DOM elementにデータを保持させたい

[A] ２つ + α の方法がある

1. data属性に保持する (ただし文字列のみ)
   設定： element.dataset.＝”text";
   取得：let str = element.dataset.;
2. setUserData, getUserDataを使う
   設定： element.setUserData(key,data,handler);
   取得： element.getUserData(key);
3. WeakMapを使って DOM element と object を関連付けた配列を作成、管理する

[Q] 配列に格納した実体文字列を上書きできない。Readonly propertyだという errorが出力される。

[A] 諦めるしかなさそう。
let str=[]; str="ABC".contain(); とすると "ABC" の実体が格納され、
console.log(str[0]); console.log(str[1]); でそれぞれ "A", "B" と出力されるが、
str[0]="Z"; とした途端に上記エラーが発生する。
どうも最初に定義した "ABC" を1つの文字列として扱っているように見える。なぜ？JavaScriptって柔軟な型変換が売りなんじゃなかったのか？他の言語なら静的テキスト定義領域とデータ領域は別だから文字列の途中で変更できないというのは理解できるが、なぜJavaScriptで？
これがconsole.log(str[0]);で "ABC" が出力されるなら「定義された形で１つとして扱っているのか」と理解できるがそこは一文字ずつ表示される。しかし書き込めない。なんかおかしくない？
昨日は一日中、JavaScriptで「複数のElementの動きを同期させるため、各Elementから参照させた文字列の実体 '''"配列A"''' のアドレスを変えずに中の文字だけを書き換える」方法を探していたのだが徒労に終わってしまった。

[Q] 要素に幅や高さを設定しているにも関わらず、element.style.widthやheightで値を取得できない

[A] Element.style.***は Elementに直接設定している場合のみ値取得が可能らしい。そのためCSS classでサイズを定義し、そのclassを要素に持たせることで要素の見た目を変化させた場合は element.style.*** には値は設定されていない。
document.styleSheets[n].cssRules[nn] から該当するCSS classを探して値を取得する。

必殺技

CSSやJavaScriptを習得する過程で発見した、いろんな意味で必殺技というか最終奥義に近い技を書いていきたい。
大抵の場合、どこかに致命的な欠陥がある。失敗すれば自らも致命的な傷を負ってしまう……だからこその必殺技なのだ。

【必殺1】 [CSS] ボタンを押したときに、ずっと親の要素や遠くの要素を変更したい

CSSは親要素の変化を子要素や兄弟要素に伝えることはできるが、子要素から親要素には伝えられない。
それを実現するには target疑似要素を使う。
1. 変更したい対象要素か、同じツリーでそれより上にある要素からid付きのものを探す
2. ユーザー入力ボタンとして <a href="#"&bt; を作成し、CSSでボタンの形にする
3. 目的の変更を入れたCSSを作成する
(変更対象 == id要素) #:target {background-color: red}
(変更対象 != id要素)
上から下へは普通のCSS定義で選択できるため、id要素から目的要素まで下りていけばいい #:target > childClass指定 > childClass指定 {background-color: red} など
【欠点】 parma linkで移動しようとするため、表示が中途半端にガクッとスクロールする
　　　何か別のlinkを押下されるとtargetが消え、元の状態に戻る

その他

Blobをfileに保存

ファイル保存処理をまとめた形で Pastebinにアップした。
MSDNに[MSDN] UWPアプリのファイルアクセスという資料があるが、callbackの引数説明がないわ、file object取得したらそれっきりで一番肝心な中身を保存する箇所について何の説明もないわという、真面目に読んだことを後悔するような資料しかないためにPastebinにまとめた。

CSSの適用優先順位

1. Elementに直接指定 (JSで element直接指定 と HTML tagに style属性直接指定のどちらが優先かは未確認)
2. CSSで 「id」指定
3. CSSで 「要素 と class」での指定
4. CSSで 「selector と class」での指定
5. CSSで 「classのみ」指定

CSSの設定

JavaScriptでelement.styleに値セットすると、elementのタグ上にstyle="" として反映される。この設定が非常に優先度が高い。
CSS fileに定義した情報はdocument.styleSheetから辿れるが、Read-only属性がtrueになっている。
設定変更したい場合は CSS file呼び出しよりも後のタイミングで createElement('style'); 作成し、insertRule() 後に appendChild()して設定を上書きする。

document.elementFromPoint(x,y)

x, y は __文書に対してのx, y座標__ を指定する (evt.pageX, evt.pageY)

JavaScriptの関数

JavaScriptは関数もobjectなので "操作を渡したい" というときには関数を渡せばいい。
渡す時に "関数名.bind(this, arg1, arg2)" とすれば渡したい引数もセットにできる。
実行処理をqueueに積むときにこれで格納していけば、出す時は var data = dequeue(); → data(); だけで済む。queue管理側が処理内容に全く触れずに済む。

機能拡張について

ボタンにCSSやJavaScriptを登録して機能拡張できる設計にしたらよかったのかもしれない。

Visual Studio での パフォーマンス計測方法

こちら (まだ試していない)

InnerHTMLは使わない方がよい

InnerHTMLは