開始46日目〜超初心者、文系、30代のスタート〜
本日学んだこと：
jQuery（ジェイクエリー）は、前回学んだDOM操作（DOM要素の取得や追加削除など）をもっと短く簡単に書くことができます。
現在やや下火傾向ではありますが、手軽扱えることができることから未だに根強い人気があります。
Webサイト制作などをやりたい場合は、jQueryの知識が必要になります。
① 歴史があるのでリファレンスが多くあり、学習を進めるのが容易
② 機能が限定的でとっつきやすい
③ まだまだ使われている現場が多い
どんな文法があるのか知識を増やすためにも、参考リファレンスをいつもみておく癖はつけておくこと。
・IDセレクタ
→HTML要素のid属性で指定するセレクタのことです。IDセレクタは、取得したいHTML要素のid属性の値に#（ハッシュ）を付けたものをセレクタとして利用します。
・クラスセレクタ
→HTML要素のclass属性で指定するセレクタのことです。取得したいHTML要素のclass属性の値に.（ドット）を付けたものをセレクタとして利用します。
・要素セレクタ
→h1やpのようなHTML要素を対象としたセレクタのことです。HTMLのタグの属性値を指定したい場合、$("[ 属性 = '値' ]")で属性セレクタを取得できます。
・属性セレクタ
→HTMLのタグの属性値を指定したい場合、$("[ 属性 = '値' ]")で属性セレクタを取得できます。
クリックイベントの取得はclick()を使用します。
セレクタを指定すればクリックした要素の値を簡単に取り出してくれます。
関数の中でthisを使うと、イベントの発生元となった要素を取得することができます。
thisはJavaScriptで、非常によく使います。
thisはJavaScriptの機能です。そのためthisで取得した要素は、JavaScriptで使用するDOM要素になっています。
jQueryで使う場合は、$(this)と指定しないとエラーになります。
removeClass()
→jQueryのクラスの削除、要素の指定が必要ない
addClass()
→jQueryのクラスの追加、要素の指定が必要ない
index()
→配列に変換しなくても、集合したDOM要素から引数に指定したDOMと同じ要素番号を戻します。
eq()
→引数に要素番号を取り、集合したDOM要素から選択できます。
submit
→submitイベントは、フォームが送信される時に呼び出されるイベントです。
preventDefault()
→要素のイベントをキャンセルすることができます。
イベントオブジェクト
→イベントに関する情報を持つオブジェクトです。targetやkeyCodeなどのプロパティを使うことでイベントの発生元の要素や押されたキーの種類などを知ることができます。
preventDefault()
→ブラウザが最初から持っているアクションをキャンセルするメソッドです。
find("セレクタ")
→Rubyで使用するfind()メソッドと用途は同じ。Rubyのfind()メソッドは最初に該当する1つだけしか取得ができませんでしたが、
jQueryのfind()メソッド
JavaScriptについて
・ブラウザ上での操作において有益である。
・Webサイト表示を変化させたいとき、画面更新せずにサーバと通信したいとき等に有効。
・Javaは業務システムなどのサーバーサイド側で使用され、データの保管や複雑な処理を行う「裏側」がメインです。Rubyもサーバーサイドに分類。
・JavaScriptは前述の通り、主にフロントエンド、つまり「見た目」の部分で活躍することが多いプログラミング言語。
・JavaScriptの略称はJSです。「ジャバ」とは呼ばずに「ジェイエス」と呼ぶ。
※つまり、JavaとJavaScriptでは全然違う。
JavaScript基本文法
・検証ツールからコンソールを開くことでJavaScriptのコードの記載、実行結果の表示もできる。Rubyにおけるirbみたいなもの。
→操作方法：ブラウザ上で二本指クリック→「検証」を選択→Consoleを選択。
・以下のように、HTMLのコード中にスクリプトタグを埋め込むことで、JavaScriptのコードを呼び出すことができる。
<body>
<script>
// この中にJavaScriptのコードを記述する
</script>
</body>
・window.alert()
→ブラウザでアラートを表示させるメソッド。script.jsに記載することで表示される。
・console.log()
→ブラウザのコンソールにテキストを表示させるメソッド。script.jsに記載することで表示される。Rubyにおけるputsメソッドと同様に使える。
※変数を宣言する際は、varのあとに半角スペースを挟んで変数名を記述
letは、後で書き換えることができる変数宣言です。
constは、後で書き換えることができない変数宣言です。
・条件分岐は、Ruby同様if文を使う。
但し、Rubyと異なるのは以下3点：
・条件式は()でくくること
Rubyにおいては()でくくる必要がありません
・条件式の後に続く波括弧{}内の処理が実行されること
Rubyの記述においては{}で処理を囲む必要はありません。一方で、if文の終わりにendを付与する必要があります
・複数条件を指定する場合は、elseのあとに続けてif文を記述すること
Rubyではelsifですが、JavaScriptではelse ifと書くことを注意しましょう
オブジェクトを作成するには波カッコ{}を用います。
let obj = {};
例)let obj = { name: 'yamada' };
配列について
・0から始まる。
・Rubyと同様にlengthメソッド(要素の取得)、pushメソッド(要素の追加)、popメソッド(配列の削除)、
繰り返しはfor文
num = 1;
for (let i = 0; i < 10; i += 1) {
console.log(num + '回目の出力')
num += 1
}
これで1~10回目の出力が繰り返しされる。
関数の定義：
JS：function文
Ruby：def ~ end
JS：returnで戻り値を明示する必要がある。
Ruby：関数における最後の戻り値が関数の戻り値として処理
2種類の関数定義
1.関数宣言と呼ばれます。
2.無名関数を用いた関数式と呼ばれる方法。
JavaScriptで簡単に画面表示を変える。
・DOM（Document Object Model）とは、HTMLの一つ一つの要素を、JavaScriptのオブジェクトとして扱えるようにする仕組み。
・querySelectorメソッドでは、複雑なセレクタも指定できる。
・addEventListenerは、あるDOMオブジェクトに対して、イベントリスナを追加するメソッド。
①DOM要素を取得する
②JavaScriptでやりたい処理を書く
③イベント発火でHTML側で動かす
・innerHTMLを使用するとHTML要素の中身を書き換えることができます。
・classList.addはクラスの追加、classList.removeはクラスの削除
は、引数にセレクタを指定して、合致するセレクタを全て取得します。
セレクタの属性は、[]を使用します。
明日やること：
jQuery、gitについて学ぶ。
感想：
まさかの派遣切りにあった。
真面目に前向きに取り組んでいる人間が馬鹿を見るパターンにあった。
選んだ派遣先が良くなかったということだ。
これは選んだ自分に責任がある。
残りも変わらず勤めるとしよう。
