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

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の構成要素)

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
  • URL.createObjectURL (古い)
ローカルWebサーバ

  • python3 -m http.server
  • python -m SimpleHTTPServer
  • http://localhost:8000
    • ドキュメントルートは、コマンドを実行したディレクトリ

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
  • HTML 属性リファレンス
  • CSS リファレンス
  • HTMLクイック・リファレンス
  • ブラウザのストレージ制限と立ち退き基準
  • cache API
WebGL error

sample の cube表示は、GL_INVALID_OPERATION: texture format does not support mipmap generation. の警告で描画出来ていない。

プログラム開発

Posted by iwadjp