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))
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
に設定されている場合、リスナーはバブリングフェーズ中にそのコールバックを実行します - キャプチャリングが先に処理され、その後にバブリングが処理される
バブリングとキャプチャリング
キャプチャリングとは
- 要素の上部から内部(下部)の要素に対して処理されること
バブリングとは
- 要素の内部から外側に向かって処理されていくこと
- イベントキャプチャを使用しない場合、イベントバブリングは、イベントが発生したときに発生するデフォルトのイベント伝播のタイプです.
- イベントが発生すると、まずターゲットとなる要素のイベントハンドラが実行され、そのターゲットの親要素、および要素階層上の各親要素でイベントハンドラが実行されます
- これは、イベントが最も外側の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);
event.stopPropagation()
- 子要素にある要素からのイベントの発火時は、自動的に親要素にバブルアップされます
- これを防ぐには、イベントオブジェクトの
stopPropagation()
メソッドを使用します. - 子要素から親要素へのイベントの伝達を防ぎたい時に使用.
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
navigator.geolocation.clearWatch(watchId)
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