MDN Web docs ウェブ開発を学ぶ (JavaScript)

9月 23, 20206月 19, 2023

MDNで、JavaScriptの基礎を再確認した時の覚書です。

---

JavaScript – 動的クライアントサイドスクリプト

JavaScriptの第一歩

• 同期的読込 (デフォルト) async defer
  • onclick 属性は使わない
  • HTMLの途中に JavaScriptコードを書かない
  • DOMContentLoaded や </body> タグの直前に script要素を置く対策は、スクリプトの読込と解析がブロックされるため、パフォーマンスに問題がある。deferは、それを解決している。
  • deferは、実行順が保証される。
• FireFoxの開発者ツールでは、JavaScriptの文法エラーに対して、MDNへのリンクページが出る
• typeof
• toFixed() 小数点以下の丸め
• Number() 数値型に変更
• ** 累乗
  • Math.pow() 古い形式
• === !== 型と値の両方を調べる
  • == != 値のみ調べる
• push() pop() unshift() shift()

JavaScript Building blocks (JavaScriptの構成要素)

• 標準ビルトインオブジェクト
• スコープは、ループや条件ブロックには適用されない
• sqrt(), cbrt()
• イベントリファレンス
  • Node.js、Node.js event model、HTTP connect event docs
  • WebExtensions、runtime.onMessage page 
  • button
    • onclick, onfocus, onblur, ondblclick, onmouserover, onmouseout
    • window.onkeypress, window.onkeydown, window.onkiup
  • イベントハンドラーHTML属性 (インラインイベントハンドラー) は非推奨
  • Document Object Model (DOM) Level 2 Events 仕様 (イベント機構)
  • addEventListener(), removeEventListener() 推奨
    • 同じリスナーに複数のハンドラの登録が可能
    • イベントハンドラープロパティ (onClick など) は、IE8でも動く
    • canvas.addEventListener('keydown', function(e) {});
• バブリングとキャプチャリング
  • モダンブラウザーのデフォルトでは、全てのイベントハンドラーはバブリング段階に登録される。
  • stopPropagation()
  • How JavaScript Event Delegation Works
• data-* 任意の属性を要素に付加する
  • e.target.getAttribute('data-color')
  • buttonBar.style.backgroundColor

Introducing JavaScript objects

• オブジェクトリテラル　記号を使って書くオブジェクト
• getter setter プロパティに’_’を付ける
• JSONLint 
• XMLHttpRequest
• parse(): JSON文字列を引数に取り、それに対する JavaScript オブジェクトを返します。
• stringify(): オブジェクトを引数に取り、等価な JSON文字列形式を返します。

Asynchronous JavaScript

• woker は、DOM にアクセスできない
• JavaScript の非同期処理
  • callback (古い)
    • コールバック地獄
  • promise (新しい)
    • fetch then catch finally
    • Promise.all()
  • async/await
    • エラー処理は、try - catch ではなく、.then.catch
• CORS (Cross-Origin Resource Sharing)
• 特定の時間間隔が経過した後にコードを非同期に実行
  • setTimeout() setInterval() requestAnimationFrame()
  • clearTimeout()
• document.body.addEventListener
• WebRTC
  • RTCPeerConnection
• URL.createObjectURL (古い)
  • HTMLMediaElement.srcObject

Client-side web APIs

• ブラウザAPI
  • DOM API
  • サーバAPI XMHHttpReuest, Fetch API
  • グラフィックスAPI Canvas, WebGL
  • オーディオ・ビデオAPI HTMLMediaElement, Web Audio API, WebRTC
  • デバイス API Notification API, Vibration API
  • ストレージAPI Web Storage API, indexedDB API
• サードパーティーAPI
• Window, Navigator, document オブジェクト
• Live DOM Viewer
• document.querySelector()
  • document.getElementById(), document.getElementByTagName() は古いやり方
• document.createTextNode() appendChild() でテキスト文字を後ろに追加
• 要素を複写して追加するのは、cloneNode()
• {node}.remove() 自身の削除
  • 古いブラウザでは未サポート
  • {node}.parentNode.removeChild({node})
• Document.stylesheets
• style 属性 JavaScriptでは、キャメル backgroundColor で、インラインスタイルでは ハイフン background-color
• input.value
• function(e) {e.target;}
• fetch()
  • XMLHttpRequest() の代替
• canvas のテキストボックスは、左下隅が (0, 0)。他は左上隅。
• fillText(), strokeText()
• ctx.translate(width/2, height/2); 画面の中心に原点を移動
• WebGL API
  • サードパーティ Three.js、PlayCanvas、Babylon.js
• HTML 属性リファレンス
• CSS リファレンス
• HTMLクイック・リファレンス
• ブラウザのストレージ制限と立ち退き基準
• cache API