DOM
htmlの構造。レイアウトとは違う。wordで言うところのアウトライン。Live DOM Viewer が便利。エレメントノードはhtml要素。すべてはノードで表現される。ルート、子、子孫、親、兄弟、テキスト等がある。
要素の取得方法
documentに記述されている要素（ノード）を取得する方法は伝統的な方法から最新の方法まで多岐にわたる。現在は、querySelectorを用いる方法が望ましい。
document.querySelector(“a”);
伝統的な方法としてはgetElementById()とgetElementByTagName()がある。ただしこれらは古いブラウザとの互換性を考慮する場合のみ用いるべきである。あまり便利な方法とは言えない。
from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
chromeだとオプションを指定する必要がある。Edgeだとそのあたりのセキュリティが緩いのでローカルファイルにアクセスできる。
プロミス
プロミスオブジェクトを返す関数をどのように見分けるのか。fetchとか？プロミスの戻りはthenで受ける。ただしthen内の関数はその場では実施されない。
Third Party APIによるデータ取得に基本
- API Keyなどを準備しAPIによるデータ取得を可能にしておく。
- 入力パラメータを選択する。
- 入力パラメータからAPI用のパラメータを作成する
- APIを呼び出す。
- APIからの結果を取得する
- htmlできれいに表示する
お絵描きの考え方
画面に丸とか、三角とか書いてみる。- マウスダウン・アップをイベントで取得→console.log
- マウスの移動をイベントで取得→console.log
- マウスの軌跡に合わせて線を引く
- マウスのダウン・アップに合わせて線の有効・無効とする
localStorage
ブラウザを閉じてもデータは存続する。ただしドメインごとに別のlocalStorageが存在するために、別ドメインのデータにはアクセスできない。
クロージャ
クロージャは、関数と関数が生成した scope オブジェクトを組み合わせたものです。クロージャは状態を保存します。従って、オブジェクトの代わりとしてよく使用されます。クロージャのすばらしい解説 を読むことができます。
だったら、オブジェクトを利用すればよいのではないか？
レキシカルスコープ
入れ子された関数から外側の変数にアクセスできる
クロージャの例
function makeFunc(a) {
var name = a;
function displayName() {
alert(name);
}
return displayName;
}
var myFunc1 = makeFunc("ああああ");
var myFunc2 = makeFunc("いいいい")
myFunc1()
myFunc2()
クロージャをループで使う場合の注意点
document.getElementById(item.id).onfocus = function() {
showHelp(item.help);
}この処理は正しくは動かない。おそらくfunction()で返す場合には無名としてanonymous = function(){}みたいになると考えられる。これ以降function(){}で呼び出されたときにはすべてanonymousを参照していると思われる。対応方法としてはもう一つ別の関数を挟み新しいfunctionを生成して戻すことである。
クロージャを使うべきでないときはprototypeを使う。
this.getMessage = function() {
return this.message;
};
これはクロージャを使うことでオブジェクト生成のたびに関数が生成される。よって非効率であるのでprototypeに追加してあげるとよい。
ArrayBufferの基本サイズは16byte
型によりこれを2～16に分けて利用する。分けるのはviewerを利用する。
ガベージコレクタのアルゴリズム
マークアンドスイープ式のガベージコレクタ
とりあえず一回おしまい
時間があるときに見ること
- Promiseを使う
- 上級編-継承とプロトタイプチェーン
- 上級編-Strictモード
- export/import
