科学の箱

科学・IT・登山の話題

javascript

MDN Day4

投稿日:

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によるデータ取得に基本

  1. API Keyなどを準備しAPIによるデータ取得を可能にしておく。
  2. 入力パラメータを選択する。
  3. 入力パラメータからAPI用のパラメータを作成する
  4. APIを呼び出す。
  5. APIからの結果を取得する
  6. htmlできれいに表示する

お絵描きの考え方

  1. 画面に丸とか、三角とか書いてみる。
  2. マウスダウン・アップをイベントで取得→console.log
  3. マウスの移動をイベントで取得→console.log
  4. マウスの軌跡に合わせて線を引く
  5. マウスのダウン・アップに合わせて線の有効・無効とする

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

メタ情報

inarticle



メタ情報

inarticle



-javascript
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

MDN Day1

Javascriptの勉強。まずはMDNを仕上げてみる。ここが基本なので多少は時間がかかるかもしれないがじっくりすすめていく。   scriptタグの位置は</body>の直前 …

no image

MDN Day3

objectとmapの比較 keyが実行時まで不明の場合にはmap, keyがprimitiveならmap、メンバーを処理する関数が必要ならobject set 配列、ただし値はユニーク object …

no image

MDN Day2

objectのメンバー、関数を確認 object.prototype object操作でとりあえず頭に入れておく置くこと prototype, __proto__, プロトタイプチェーンを利用して作成 …

2019年9月
« 8月    
 1
2345678
9101112131415
16171819202122
23242526272829
30  

side bar top



no image

2019/09/11

CSS Depth – Day4

no image

2019/09/09

CSS Depth – Day3

no image

2019/09/08

CSS Depth – Day 2

no image

2019/09/07

MDN Day4

no image

2019/09/06

MDN Day3