JS objects

オブジェクトタイプ

name:value

const person = {
  firstName : "John",
  lastName  : "Doe",
  age     : 50,
  eyeColor  : "blue"
};
//객체 예시

オブジェクトの使用方法:

objectName.property

ex) person.age

objectName["property"]

ex) person["age"]

オブジェクトに他のオブジェクトがある可能性があります

const myObj = {
  name: "John",
  age: 30,
  cars: [
    {name:"Ford", "models":["Fiesta", "Focus", "Mustang"]},
    {name:"BMW", "models":["320", "X3", "X5"]},
    {name:"Fiat", "models":["500", "Panda"]}
  ]
}

これらのオブジェクトにアクセスするには、繰り返し文を使用します.

for (let i in myObj.cars) {
  x += "<h2>" + myObj.cars[i].name + "</h2>";
  for (let j in myObj.cars[i].models) {
    x += myObj.cars[i].models[j] + "<br>";
  }
}

JavaScriptは、オブジェクトのgetterとsetterを作成することもできます.

HTML DOM

DOM(Document Object Model)
:XMLまたはHTMLドキュメントにアクセスするためのインタフェース

このオブジェクトモデル定義ドキュメントのすべての要素

は、各要素にアクセスする方法を提供する.

-->JavaScriptでは、このオブジェクトモデルを使用してHTMLを変更できます.

イベントBubbling vsキャプチャ

bubbling/capturing
Bubbling:エレメントにイベントが発生すると、そのエレメントに割り当てられたハンドラがアクションを実行し、親エレメントのハンドラがアクションを実行します.
最上位の親要素

に遭遇するまで、この手順を繰り返します.各要素に割り当てられたハンドラは、この操作を実行します.
キャプチャ:イベントが最上位から下に伝播する

-->addEventListenerの3番目のパラメータ使用(true:取得/falseの使用:Bubblingの使用)
ここです。で例を確認してください.
ノード間関係を使用したコンテンツの追加

const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);

const element = document.getElementById("div1");
element.appendChild(para);

appendChildは親要素の最後のサブ要素で、新しい要素が含まれています.
-->insertBefore()を使用した置換位置

removeとremoveChild、置換Childも

存在する.

getElementsByTagName()

HTML Collectionオブジェクトを返します.
-->ロードされたタグにインデックスを使用してアクセスできます.

const myCollection = document.getElementsByTagName("p");
myCollection[1]

querySelectorAll()

NoteListオブジェクトに戻る
-->インデックスからアクセス可能

HTMLCollection vs NodeList

二つの物体は極めて似たような特徴を持っている.
But,
HTMLCollection

インデックス、名前、idは

にアクセスできます.
NodeList

インデックスのみが

にアクセス可能

列のように見えますが、列ではありません!

Browser Object Model (BOM)

:このモデルは、JavaScriptによってブラウザの機能要素を直接制御および管理する方法を提供します.

Windowオブジェクト

:Webブラウザのウィンドウを表すオブジェクトで、ほとんどのWebブラウザでサポートされています.

'자바스크립트의 모든 객체, 전역 함수, 전역 변수들은 자동으로 window 객체의 프로퍼티가 됨

window 객체의 메소드는 전역 함수이며, window 객체의 프로퍼티는 전역 변수가 됨

문서 객체 모델(DOM)의 요소들도 모두 window 객체의 프로퍼티가 됨.'

Screenオブジェクト

:ユーザー表示画面に関する各種情報を格納するオブジェクト

Locationオブジェクト

:現在のブラウザに表示されているHTMLドキュメントのアドレスを取得するか、ブラウザに新しいドキュメントをロードするときに使用します.

locationオブジェクトのhref propertyは、現在のドキュメントの完全なURLアドレスを文字列

に返します.

document.write("현재 문서의 주소는 " + location.href + "입니다.");

Historyオブジェクト

:ブラウザの履歴情報をドキュメントとドキュメントのステータスリストのオブジェクトとして保存します.

JavaScriptでは、このオブジェクトへのアクセス方法を制限して、個人情報を保護します.

Navigatorオブジェクト

:ブラウザ・プロバイダおよびバージョン情報など、ブラウザに関するさまざまな情報を格納するオブジェクト.

ダイアログ(ダイアログ)

ユーザーを表示できる簡単なダイアログを作成する方法があります.

alert():ユーザーに短いメッセージを表示し、ユーザーの確認を待つ

confirm():ユーザーに短いメッセージを表示し、ユーザーは「OK」または「キャンセル」(OKまたはCancel)をクリックして結果を宣言された値に戻します.

prompt():ユーザーに短いメッセージを表示し、ユーザーが入力した文字列を返します.

JS Web API

Web Workers API

:Web Workerは、ブラウザのマスターThreadに影響を与えないように、マスターThreadとは独立したThreadを作成または管理します.
ソースの例は良いです.

JavaScript Fetch API

fetch例

Web Geolocation API

ユーザの現在位置を入力するAPI

AJAX

AJAX(非同期JavaScriptとXML、非同期JavaScriptとXML)
:Webページ全体を再ロードする必要はありません.Webページの一部をリフレッシュするだけです.

XMLHttpRequest

:Webブラウザとサーバのデータ交換用

비동기식(asynchronous) 요청
서버에 비동기식 요청을 보내기 위해서는 open() 메소드의 세 번째 인수로 true를 전달하면 됩니다.

이렇게 서버로 비동기식 요청을 보내면, 자바스크립트는 서버로부터의 응답을 기다리면서 동시에 다른 일을 할 수 있게 됩니다.

 

만약 open() 메소드의 세 번째 인수로 false를 전달하면, 서버에 동기식 요청을 보내게 됩니다.

이때 자바스크립트는 서버로부터 응답이 도착할 때까지 대기하게 됩니다.

따라서 사용자는 대기하는 동안 다른 어떤 작업도 할 수 없게 됩니다.