【JavaScript】メソッド・オブジェクト・関数について

# 記事概要
JavaScriptのメソッド・オブジェクト・関数について、まとめる。

# まとめ(メソッド)
## console.log
ブラウザのコンソールにテキストを表示させるメソッド

```javascript
// 値「Hello」を出力する
console.log("Hello")
 =>Hello

// 定義した値を出力する
const apple = "りんご"
console.log(apple)
 =>りんご
```

## lengthメソッド
文字数をカウントする

## addEventListener()メソッド
イベント発火の際に、実行する関数を定義するためのメソッド

```javascript
要素.addEventListener('イベント名', 関数)
```

```javascript
// id'lists'のHTML要素を取得
// 取得したHTML要素を、変数'pullDownButton'に代入
const pullDownButton = document.getElementById("lists")

// 変数'pullDownButton'でクリックインベントのインベント発火
// コンソールに、「click OK」と表示される
pullDownButton.addEventListener('click', function() {
	console.log("click OK")
})
```

```javascript
// post起動後、コンソールに「イベント発火」と表示
function post (){
  console.log("イベント発火");
};

// ページが読み込まれることをトリガーにした、loadイベントでイベント発火
// post処理が起動される
window.addEventListener('turbo:load', post);
```

## setAttributeメソッド
指定した要素上に新しい属性を追加、または既存の属性の値を変更する

```javascript
// nameは属性の名前を文字列で指定
// valueは属性に設定したい値を指定
要素.setAttribute(name, value)
```

```html
<!-- 参照するHTML -->
<div id="test">テスト</div>
```

```javascript
const sample = document.getElementById("test")

sample.setAttribute("style", "color: red;")
// <div id="test" style="color: red;">テスト</div> が取得できる
```

## removeAttributeメソッド
指定した要素から、特定の属性を削除する

```javascript
// nameは属性の名前を文字列で指定
要素.removeAttribute(name)
```

```html
<!-- 参照するHTML -->
<div class="contents" id="apple">りんご</div>
```

```javascript
const apple = document.getElementById("apple")

apple.removeAttribute("class")
// <div id="apple">りんご</div> が取得できる
```

## getAttributeメソッド
要素上の指定した属性の値を戻り値として返す

```javascript
要素.getAttribute('属性名')
```

```html
<!-- 参照するHTML -->
<div class="contents" id="apple">りんご</div>
```

```javascript
const apple = document.getElementById("apple")

apple.getAttribute("class")
// => contents というclass名が取得できる
```

## open()メソッド
リクエストを初期化するメソッド
`XHR.open("POST", "/posts", true);`のように表記する

|記述場所|目的|記述例|
|-|-|-|
|第一引数|HTTPメソッドの指定|POST|
|第二引数|パスの指定|/posts|
|第三引数|非同期通信のON/OFF|true|

```javascript
function post (){
  const form = document.getElementById("form");
  form.addEventListener("submit", () => {
    const formData = new FormData(form);
    const XHR = new XMLHttpRequest();
    XHR.open("POST", "/posts", true);
  });
};

window.addEventListener('turbo:load', post);

---

// idを含む場合
XHR.open("GET", `/checks/revert/${articleId}`, true);
```

## send()メソッド
リクエストを送信するメソッド

```javascript
function post (){
  const form = document.getElementById("form");
  form.addEventListener("submit", () => {
    const formData = new FormData(form);
    const XHR = new XMLHttpRequest();
    XHR.open("POST", "/posts", true);
    XHR.responseType = "json";
    XHR.send(formData);
  });
};

window.addEventListener('turbo:load', post);
```

## preventDefault()メソッド
既定のイベントを無効化するためのメソッド
既定のイベントとは、「投稿ボタンをクリックする」のようなものを指す

[![Image from Gyazo](https://i.gyazo.com/0278075596c90aa54ad5dcf4b7e5429e.png)](https://gyazo.com/0278075596c90aa54ad5dcf4b7e5429e)

```javascript
function post (){
  const form = document.getElementById("form");
  form.addEventListener("submit", (e) => {
    e.preventDefault();
    const formData = new FormData(form);
    const XHR = new XMLHttpRequest();
    XHR.open("POST", "/posts", true);
    XHR.responseType = "json";
    XHR.send(formData);
  });
};

window.addEventListener('turbo:load', post);
```

## insertAdjacentHTMLメソッド
HTMLをある要素の指定した箇所に挿入する

第一引数に指定できるのは以下の4つ
|指定可能な文字列|意味|
|-|-|
|beforebegin|要素の直前|
|afterbegin|要素内部の、最初の子要素の直前|
|beforeend|要素内部の、最後の子要素の直後|
|afterend|要素の直後|

```javascript
<挿入したい要素名>.insertAdjacentHTML(挿入したい位置,挿入したいHTML);
```

## elements()メソッド
`elements`インスタンスを作れる

```javascript
const elements = payjp.elements();
```

### elements.create()
入力フォームを作成できる

```javascript
const hogeElement = elements.create('指定したいフォームのtype')
```

## mountメソッド
引数で要素のid属性を指定し、指定した要素とelementインスタンスが情報を持つフォームとを置き換えるメソッド

```javascript
const hogeElement = elements.create('指定したいフォームのtype')
// #sampleというid属性の要素とフォームを置き換える
hogeElement.mount('#sample')
```

## this
イベント発火元となった要素を取得できる

```javascript
// 「pullDownButton」がイベント発火元
pullDownButton.removeAttribute("style")

// 「pullDownButton」を'this'に変更可能
this.removeAttribute("style")
```

## debugger
ソースコードに`debugger`を記述することで、処理を一旦停止させる場所を指定できる
指定したブレークポイントまで処理が進むことで、処理を一時的に停止できる

処理停止状態で、特定の変数の値を確認したり、1行だけ処理を進めたりなど、幅広いデバッグが可能になる

# まとめ(オブジェクト)
## Arrayクラス
配列は、すべてArrayクラスから生成されている

```javascript
Array.new(3, "a")
=> ["a", "a", "a"]
```

## windowオブジェクト
ブラウザの情報を持っているオブジェクト。ブラウザの情報をもつため、ブラウザオブジェクトと呼ばれている

JavaScriptで予め定義されているメソッドやオブジェクトは全て`window`オブジェクトのプロパティであり、あらかじめ定義されているオブジェクトの最上位

ブラウザオブジェクトは下図のような階層構造になっている。
最上位の`window`オブジェクトを起点として、下位にその他のオブジェクトが属する構造になっている。ブラウザが起動するタイミングで自動的に生成され、JavaScriptからアクセスすることができる

[![Image from Gyazo](https://i.gyazo.com/06ace8542a63cfb38d7d7502fe9a95f8.png)](https://gyazo.com/06ace8542a63cfb38d7d7502fe9a95f8)

### オブジェクトの取得
```javascript
window.alert("ブラウザオブジェクトの取得に成功！")
alert("windowは省略可能！")
```

[![Image from Gyazo](https://i.gyazo.com/096e6ff59e8d28ff0217c10ecb2af4d2.gif)](https://gyazo.com/096e6ff59e8d28ff0217c10ecb2af4d2)

## documentオブジェクト
ブラウザ上で表示された情報(HTML)を操作する事ができるオブジェクト

非常に多くのプロパティやメソッドを持っており、`document`オブジェクトはHTMLに対して何か処理をする際は頻繁に使用することになる

### document.getElementById("id名")
DOMツリーから特定のHTMLの要素を取得するためのメソッドの1つであり、引数に渡したidを持つ要素を取得する
id名はHTML上に必ず1つしか存在しないため、`getElement`は単数系

```javascript
//id名がhogeの要素を指定する場合
document.getElementById("hoge")
```

### document.getElementsByClassName("class名")
DOMツリーから特定のHTMLの要素を取得するためのメソッドの1つであり、引数に渡したclassを持つ要素を全て取得する
HTML上に同じclass名を持つ要素は複数存在する可能性があるため、`getElements`は複数形

```javascript
//class名がfugaの要素を指定する場合
document.getElementsByClassName("fuga")
```

戻り値は、HTMLCollectionというオブジェクト
```html
<!-- 取得するHTML情報 -->
<ul class="hidden" id="modal">
  <li class="modal-list">リスト1</li>
  <li class="modal-list">リスト2</li>
  <li class="modal-list">リスト3</li>
  <li class="modal-list">リスト4</li>
</ul>
```

```javascript
console.log(document.getElementsByClassName("modal-list"))
// => HTMLCollection(4) [li.modal-list, li.modal-list, li.modal-list, li.modal-list]
```

### document.querySelectorAll("セレクタ名")
DOMツリーから特定のHTMLの要素を取得するためのメソッドの1つであり、引数に渡したセレクタを持つ要素を全て取得する

```javascript
//class名がfugaの要素を指定する場合
document.querySelectorAll(".fuga")

//id名がhogeの要素を指定する場合
document.querySelectorAll("#hoge")

//h1タグの要素を指定する場合
document.querySelectorAll("h1")
```

戻り値は、NodeListというオブジェクト
```html
<!-- 取得するHTML情報 -->
<ul class="hidden" id="modal">
  <li class="modal-list">リスト1</li>
  <li class="modal-list">リスト2</li>
  <li class="modal-list">リスト3</li>
  <li class="modal-list">リスト4</li>
</ul>
```

```javascript
console.log(document.querySelectorAll(".modal-list"))
// => NodeList(4) [li.modal-list, li.modal-list, li.modal-list, li.modal-list]
```

### document.querySelector("セレクタ名")
DOMツリーから特定のHTMLの要素を取得するためのメソッドの1つであり、引数に渡したセレクタを持つ要素のうち、1番最初に見つかった要素1つを取得する

```javascript
//id名,class名,タグ名の指定方法は、querySelectorAllメソッドと同じ
document.querySelector("セレクタ名")
```

## FormDataオブジェクト
フォームに入力された値を取得できる
`new FormData(フォームの要素);`と記述することでオブジェクトを生成し、引数にフォームの要素を渡すことで、そのフォームに入力された値を取得できる

```javascript
// ビューファイルのform_withメソッドに、id"form"を設定
function post (){
  const form = document.getElementById("form");
  form.addEventListener("submit", () => {
    const formData = new FormData(form);
  });
};

window.addEventListener('turbo:load', post);
```

## XMLHttpRequestオブジェクト
JavaScriptを用いてサーバーとHTTP通信を行うときに利用する

```javascript
// ビューファイルのform_withメソッドに、id"form"を設定
function post (){
  const form = document.getElementById("form");
  form.addEventListener("submit", () => {
    const formData = new FormData(form);
    const XHR = new XMLHttpRequest();
  });
};

window.addEventListener('turbo:load', post);
```

## innerHTMLプロパティ
HTML要素の取得や書き換えを行える

```html
<!-- 参照するHTML -->
<div class="contents" id="apple">りんご</div>
```

```javascript
const apple = document.getElementById("apple")

console.log(apple.innerHTML)
// => りんご

apple.innerHTML = "青リンゴ"
console.log(apple.innerHTML)
// => 青リンゴ
```

## responseTypeプロパティ
レスポンスのデータフォーマット(＝どのような形式のデータにするか)を指定するプロパティ

リクエストを送信する際に、レスポンスで欲しいデータフォーマットをあらかじめ指定しておく必要がある

```javascript
function post (){
  const form = document.getElementById("form");
  form.addEventListener("submit", () => {
    const formData = new FormData(form);
    const XHR = new XMLHttpRequest();
    XHR.open("POST", "/posts", true);
    XHR.responseType = "json";
  });
};

window.addEventListener('turbo:load', post);
```

## onloadプロパティ
リクエストの送信が成功したときに呼び出されるプロパティのこと
onloadプロパティで、リクエストの送信に成功したときに行う処理を定義する

## responseプロパティ
サーバーからのレスポンスに関する情報が格納されたプロパティのこと

```javascript
function post (){
  const form = document.getElementById("form");
  form.addEventListener("submit", (e) => {
    e.preventDefault();
    const formData = new FormData(form);
    const XHR = new XMLHttpRequest();
    XHR.open("POST", "/posts", true);
    XHR.responseType = "json";
    XHR.send(formData);
    XHR.onload = () => {
      console.log(XHR.response);
    };
  });
};

window.addEventListener('turbo:load', post);
```

## statusプロパティ
返されたHTTPステータスコードを格納する

```javascript
// 200以外のHTTPステータスコードが返された場合はエラーメッセージが表示される

if (XHR.status != 200) {
  alert(`Error ${XHR.status}: ${XHR.statusText}`);
  return null; // JavaScriptの処理から抜け出す
};
```

# まとめ(関数)
## forEach関数
配列に格納されている要素1つひとつに対して、繰り返し処理を行う場合に用いられる関数

```javascript
配列.forEach( function(value){
  // 処理の記述
})
```

```javascript
fruits = ["apple", "orange", "grape"]
fruits.forEach( function(item) {
  console.log(item) 
})

/*
実行結果は下記

apple
orange
grape
*/
```