' P '

whatever I will forget

Certified JavaScript Developer Browser and Events Section

Browser and Events

Document.cookie

  • Documentには、Cookieを読み書きできるCookieプロパティが含まれています
  • document.cookieを使用すると、ドキュメントに関連付けられているすべてのCookieセミコロン分離リストを取得します
  • 「key = value」の形式でdocument.cookieを文字列に設定すると、ドキュメントに単一のCookieが追加されます
document.cookie = "reader=1; SameSite=None; Secure";

function checkACookieExists() {
  if (
    document.cookie.split(";").some((item) => item.trim().startsWith("reader="))
  ) {
    const output = document.getElementById("a-cookie-existence");
    output.textContent = '> The cookie "reader" exists';
  }
}

Document.cookie - Web APIs | MDN

ブラウザのlocalStorage

  • データをlocalStorageから取得するには、キーの名前を指定したlocalStorage.getItem()メソッドを使用します
  • 個々のプロパティにアクセスするためには、JSON.parse()メソッドでデータをオブジェクトに変換する必要があります
  • localStorage.getItem('permissions')を実行すると、文字列形式でデータが返されます
const perms = JSON.parse(localStorage.getItem('permissions'));

Browser Cache

  • 下記を行うと、Cacheをクリアすることが可能:
    • DevToolsを開いた状態で、リロードボタンを長押しし、ハードリロードを選択
    • ネットワークパネルにアクセスし、「キャッシュを無効にする」チェックボックスをオンにします

Browser History

history.pushState()

  • 閲覧履歴のスタックにページを追加する

history.replaceState()

  • 閲覧履歴のスタックを入れ替える

history.back()

  • ブラウザのセッション履歴を1ページ前に移動するために使用されます

History.go()

  • セッション履歴から特定のページを読み込みます
  • これを用いると、引数の値に応じて履歴の中を前方や後方に移動することができます
history.pushState({page: \'kitty\'},'', \'?page=kitty\');
history.pushState({page: \'froggy\'},'', \'?page=froggy\');
history.pushState({page: \'bunny\'},'', \'?page=bunny\');
history.replaceState({page: \'bunny\'},'', \'?page=puppy\');
history.go(-1);

// stack: puppy → froggy → kitty、and then go(-1) → "froggy"

Webストレージ

sessionStorage

  • sessionStorage プロパティは読み取り専用で、セッションの Storage オブジェクトにアクセスできます
  • localStorage に保存されたデータに期限がないのに対して、sessionStorage に保存されたデータはページのセッションが終了するときに消去されることです

| localStorage

  • 永続的なストレージで、ブラウザのセッションがウィンドウを閉じて終了した後でも利用可能です
  • 保存されるのは文字列だけなので、JavaScriptオブジェクトはJSON.stringify()を使って文字列に変換が必要.
localStorage.setItem(data.username, JSON.stringify(data))

developer.mozilla.org


Event

CustomEvent()

  • カスタムフィールドの値を含むイベントを発生させるには、CustomEvent()コンストラクタを使用することができます
new CustomEvent(eventName, {
    detail: customData
});

addEventListener()

options parameter

  • オプション・オブジェクトをaddEventListenerメソッドで使用すると、イベントリスナーに関する特定のオプションを指定することができる
  • オプション・オブジェクトには、4つの利用可能なオプションがあります
  • optionsオブジェクトのonceプロパティをtrueに設定すると、listenerの呼び出しを一回のみのとしたいかどうか
survey.addEventListener('click', recordResults, {once: true});

useCapture parameter

  • true に設定されている場合、そのコールバックはキャプチャリングフェーズ中に起動されます
  • パラメータが未指定、または明示的にfalseに設定されている場合、リスナーはバブリングフェーズ中にそのコールバックを実行します
  • キャプチャリングが先に処理され、その後にバブリングが処理される

バブリングとキャプチャリング

キャプチャリングとは

  • 要素の上部から内部(下部)の要素に対して処理されること

バブリングとは

  • 要素の内部から外側に向かって処理されていくこと

ja.javascript.info

  • イベントキャプチャを使用しない場合、イベントバブリングは、イベントが発生したときに発生するデフォルトのイベント伝播のタイプです.
  • イベントが発生すると、まずターゲットとなる要素のイベントハンドラが実行され、そのターゲットの親要素、および要素階層上の各親要素でイベントハンドラが実行されます
  • これは、イベントが最も外側のDOM要素、すなわち<html>に到達するまで続きます.
<div id="content">
   <div id="questions">
     Questions content...
     <button id="check-answer">Check Answer</button>
   </div>
   <div id="finish">
     <p id="submit">
       Once you are ready, click the button to submit your choices.
     </p>
     <button id="submit-choices">Submit Choices</button>
    </div>
</div>
  • この場合、check-answerボタンに関連するイベントハンドラは、ターゲット要素であるため、最初に発火します.
  • 次に、その親要素questions' divイベントハンドラが実行されます。questions divの親要素はcontent divです.
  • content div にアタッチされたハンドラは、最後に発火します.
  • イベントの伝搬は、ターゲット要素から始まり、要素階層を経由して上へ伝搬していく.

eventの取得可能要素

  • addEventListenerは、イベントが発生したときに呼び出される関数を設定します.
  • 1つのHTML要素には、複数のリスナーを追加することができます.
  • リスナーは、JavaScriptで選択できるすべてのHTML要素に追加することができます.
  • これには、documentとwindowが含まれます。

Event.preventDefault()

  • イベントが明示的に処理されない場合に、その既定のアクションを通常どおりに行うべきではないことを伝えます
  • イベントを明示的に処理させたくない場合に使用.
document.querySelector("#id-checkbox").addEventListener("click", function(event) {
         document.getElementById("output-box").innerHTML += "ごめん! <code>preventDefault()</code> がチェックさせません!<br>";
         event.preventDefault();
}, false);

developer.mozilla.org

event.stopPropagation()

  • 子要素にある要素からのイベントの発火時は、自動的に親要素にバブルアップされます
  • これを防ぐには、イベントオブジェクトのstopPropagation()メソッドを使用します.
  • 子要素から親要素へのイベントの伝達を防ぎたい時に使用.

tech.trustbank.co.jp


window object

  • iframeで現HTMLから子画面が呼び出されている場合で、子から親の情報にアクセスしたい場合:
    • window.parent を使用する

| HTMLTableElement

createTBody()

  • HTMLTableSectionElement で、この要素の子要素である新しい <tbody> を返します

insertRow()

  • HTMLTableRowElement でこの表の新しい行を返します

Element

classListプロパティ

  • classListプロパティには、要素クラスのトグル(toggle)、追加(add)、削除(remove)、置換(replace)のための関数が含まれています
div.classList.add("foo", "bar", "baz");
div.classList.remove("foo", "bar", "baz");

HTML Input

checkbox

  • checkboxの値を取得する:
elem.value
elem.getAttribute('value')
/* JavaScript code */
for (let elem of checkboxes) {
  if (elem.checked) { 
    recordResponse(/* enter code here */);
  }
}

Node

Node とは

  • Documentに含まれるすべてのオブジェクトはNodeである
  • 要素は、Nodeオブジェクトを基にしています。例としては、<h1><img><div>などがあります。

document.querySelectorAll()

  • メソッドは、常にNodeの代わりにNodeListを返します.

| Node.insertBefore()

  • 要素A(sp1)を要素B(sp2)の前に挿入する
// 新しい要素を sp2 の手前に挿入
parentDiv.insertBefore(sp1, sp2)
  • insertAfter() メソッドはありません
  • 要素A(sp1)を要素B(sp2)の後に挿入したい、という場合、下記の通りにする:
parentDiv.insertBefore(sp1, sp2.nextSibling)

CanvasRenderingContext2D.fill()

  • 描画する際に使用
for (let circle in circles) {
      ctx.beginPath();
      ctx.fillStyle = circles[circle].color;          
      ctx.arc(150, 150, circles[circle].radius, 0, 2*Math.PI);
      ctx.fill();
      ctx.closePath();
}

Geolocation

  • watchIdの取得:
watchId = navigator.geolocation.watchPosition(handleSuccess, handleError, options);

URL Object

Property: origin

Before: http://cosmicsolutions.com:3000
After: http://cosmicsolutions.com

Property: host

Before: cosmicsolutions.com:3000
After: cosmicsolutions.com

Property: hostname

Before: cosmicsolutions.com
After: cosmicsolutions.com

Property: href

Before: http://cosmicsolutions.com:3000/project/client?name=Microsoft#JavaScript
After: http://cosmicsolutions.com/project/client?name=Microsoft#JavaScript