JavaScript, jQuery復習用


#まずDOM操作とは？
「Document Object Model」の略で、「ドキュメントを物として扱うモデル」になる。プログラムからHTMLやXMLを自由に操作するための仕組み。
本来は何もしていない状態のHTMLにはJavaScriptから手を出す事が出来ない。そこで、ファイルの特定の部分に目印を付けて「この部分」に「こういう事をしたい」という処理を可能にするための取り決めがDOM。

参照: [JavaScript初心者でもすぐわかる！DOMとは何か？
](https://bityl.co/5ehL)

#
#メソッドとオブジェクトと関数
![スクリーンショット 2021-02-18 14.43.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619224/03579340-9dfd-9433-c969-1a66bf096990.png)

####オブジェクトとは？
jsで操作できる何か。ブラウザのウィンドウを表すwindowオブジェクトやコンソールを表すconsoleやwebページの内容を表すdocumentなんかがある。

オブジェクトは値の一種なので、変数やプロパティ([※プロパティとはそいつがどんな特性を持ってるのか表す情報](https://wa3.i-3-i.info/word11066.html))に入れる事ができる。
例えばconsoleやdocumentは、windowオブジェクトのプロパティ。だが、多くの場合省略可能でわざわざwindow.documentと書いたりする必要はなく、そのままdocumentだけで動かす事ができる。

####メソッドとは？
オブジェクトのプロパティに入れた関数の事。

####関数とは？
作り方
![スクリーンショット 2021-02-18 15.50.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619224/f1920d4b-e332-455d-3ea8-29baa459ad45.png)

現在はES2015が主流だが、ES5の古い書き方だとletではなくfunctionだったりする

#繰り返し構文これだけは覚えとけ
![スクリーンショット 2021-02-18 15.29.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619224/56102350-faf3-18e6-ecbf-ed58432df7e8.png)

```example.js
for(let num = 0; num < 10; num++ ) {
　　　console.log( num + '回目のハロー');
}
//解説文 
//1. 新規作成した変数peopleを数値0で初期化し、継続条件「変数peopleが10より小さい」が真ならば、以下を繰り返せ
//2. {文字列「ハロー」をコンソールに表示しろ} 変数peopleに1を足す

=> //出力結果は以下
//０回目のハロー　１回目のハロー　２回目のハロー　３回目の・・・ 10回目のハロー

//逆順にしたいなら
for (let num = 10; num > 0; num-- ) {
　　　console.log( num + '回目のハロー');
}

//10ずつ増やしたいなら
for (let num = 10; num > 0; num+=10  ) {
　　　console.log( num + '回目のハロー');
}

```

####forとwhileの違いは回数が指定できるかできないか
![スクリーンショット 2021-02-18 15.48.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619224/f90d39d0-8be9-a4ea-ed60-4c397849afaa.png)


#振り仮名をふってみよう

| 1 | 2 | 3 |
|:-:|:-:|:-:|
| let  |  新規作成 |   |
|  prompt | ユーザーに入力を促す、入力させる | メソッド  |
| log  |  表示しろ | メソッド  |
| perseInt  | 整数化せよ  | 関数  |
| isNaN(引数)  | 引数の中身が数値に変換不可ならtrue、可ならtrueを返せ  |  関数 |
| >=  | 左辺は右辺以上  | 演算子  |
|  == |  左辺＝右辺 |   |
|  != | 左辺≠右辺  |   |
| ==  | 左辺は右辺と厳密に等しい  |   |
| !==  |  左辺は右辺と厳密に等しくない |   |
| &&  | かつ(AND)  |  論理演算子 |
| ||  |  または(OR) | 論理演算子  |
| !  |  ではない(NOT) |  論理演算子 |


| オブジェクト | 解説 | 参考リンク |
|:-:|:-:|:-:|
|  document |  ブラウザ上に表示されたドキュメントを操作できる |  [JavaScriptでdocumentオブジェクトを使う方法](https://bityl.co/5ehd) |



| 1 | 2 | 3 |
|:-:|:-:|:-:|
| getElementById  | htmlからidを取得する  |   |
| querySelector  | セレクタで問い合わせる  | idかclassか意識する必要なしで柔軟  |
| addEventListener  | イベントリスナーを追加  |  イベントとそれに対応する関数を結びつける |
|  innerText |  内部にあるテキストを取得する |   |
|  classList | 後にaddやremoveを続けてクラスの追加・削除が簡単に行える  | https://bityl.co/5vLy  |
| onload  |  ページや画像が読み込みが完了した時点でイベントを実行・自動的に処理を実行したい場合など | https://bityl.co/5y3v  |
|  getAttribute |  属性値を取得する | 引数の属性から属性値を取得  |
| setAttribute  | 属性値を設定する  | 引数の属性にセット。新規属性の追加/既存属性を変更  |
|  removeAttribute | 属性値を削除する  |   |
|   |   |   |

classListについては、今までjQueryでは簡単にできてたけど生jsではクソめんどくさかったクラスの追加・削除が簡単に実現できるようになるやつって覚えとけばokかな？

###addEventListenerの使い方
例えばハンバーガーボタンをクリックしたらメニュータブが開く、って時、内側ではこうなってる。
![スクリーンショット 2021-02-18 16.12.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619224/8cea7ca4-ca29-7b13-1dfd-b3a948676ef1.png)

これをjsで表すと、以下のようになる。

```example.js
変数.addEventLisner('click', 関数);

//または
変数.addEventLisner('click', () => {
　関数内の処理
} );
```

#困ったらこれを見ろ
・[フロントエンドエンジニア御用達の MDN web docs を網羅した](https://qiita.com/snakada/items/07347d6ad10ae661fbc6)
[MDN web docs](https://developer.mozilla.org/ja/)を、日本人にわかりやすいようにリンク分してくれ得ている。jsのみでなくhtml, cssなども網羅しているので、辞書的な感じで使える。それぞれチュートリアルもある。


#jQuery
jQueryで何をしてるかをざっくり言ってみると、
①操作したいHTML要素を取得
②何かのイベント(クリックされた〜とか)が起こった時に、取得したHTMLに操作（命令）を付与

取得方法は以下

| セレクタ | コード |
|:-:|:-:|
|  基本形 | $("セレクタ")  |
| IDセレクタ  | $("#Selector")  |
|  クラスセレクタ | $(".Selector")  |
| 要素セレクタ  |  $("h1") |



####基本構文

```script.js
$("セレクタ01").on('イベント',function(){
  $("セレクタ02").メソッド(値);
});
```

#####主要メソッド一覧

| メソッド | 基本構文 | 使い所 |
|:-:|:-:|:-:|
| on()  |  対象要素.on( イベント名, セレクタ, データ ,関数 ) |  |
| css()  |   | cssを上書きする |
| remove ()  |   | 指定したHTML要素を削除する |
| attr()  | $("セレクタ").attr("変更したい属性名", "変更したい属性値 ")  | HTML要素の属性値を取得・変更 |
| addClass ()  |  $("p").addClass("red"); | 指定要素に引数のクラスを追加 |
| removeClass()  |  $("p").removeClass("red"); |  指定要素に引数のクラスを削除 |
| toggleClass()  |  $("p").toggleClass("red"); |  指定要素に引数のクラスを削除 |
| hide()  |   | 要素を非表示に  |
|  show() |   |  非表示の要素を表示に |
| toggle  |   | showとhideの機能をまとめたもの  |
|  fadeIn() | $('セレクタ').fadeIn(かかるミリ秒)  | 指定HTML要素をフェードイン  |
| fadeOut()  |  $('セレクタ').fadeIn(かかるミリ秒) | 指定HTML要素をフェードアウト  |
| fadeToggle()  |  $('セレクタ').fadeIn(かかるミリ秒) | 指定HTML要素をフェードイン・アウト  |
|  text |   |  要素内のテキストを取得・変更 |
| children()  |   |  子要素を取得 |
| parent()  |   | 親要素を取得  |
| slideIn  |  要素.slideIn（かかる秒数） | 要素を表示  |
| slideOut  | 要素.slideOut（かかる秒数）  | 要素を非表示  |
|  slideToggle |  要素.slideToggle（かかる秒数） | 要素を表示・非表示どっちも  |

[もっとみたい場合はこちら](https://stand-4u.com/web/javascript/jquery-method.html)

#####主要イベント一覧

| 1 | 2 |
|:-:|:-:|
|  cllick | クリックしたとき  |
|  mouseover | カーソルが要素の上に乗ったとき  |
| mouseout  | カーソルが要素の上から移動したとき  |
|  scroll |  スクロールしたとき |
|  load | ローディングが完了したとき  |


#その他
js用のcssには-jsのプレフィックスをつけておくと管理しやすい


#参考リンク
・[jQuery よく使うメソッドまとめ
](https://qiita.com/fukumone/items/3ecc0c58ff9c811b3f35)
・[jQueryの基礎（概念・メソッド）
](https://qiita.com/chopesu_se/items/8b5c51f9b0b077613cac)

・[Onloadについてめちゃくちゃわかりやすい解説サイト](https://breezegroup.co.jp/202003/javascript-onload/)