Java Scriptとは
・ユーザー側Webブラウザと、Webサイトやサービスの相互間のやり取りを円滑にするもの。
・Webページに動的コンテンツのような複雑な機能を付けられる。
・私たちがブラウザで体験していることは、JavaScriptの処理によるもの。
・JavaScriptは最も人気なプログラミング言語であると言える。
身近なJavaScript活用例
・適切な形式でメアドをフォームに入力したかの確認。
・ページロード時、テキストカーソルを検索ボックスに自動出現させる。
・Webサイトとサーバの情報送受信を行わずに即時タスク処理ができる（パスワードの認証など）。
jQueryとは
・JavaScriptのライブラリであり、JSをより使いやすく拡張したもの。
・7割以上のWebサイトがjQueryを使用している！！
・短いコードでアニメーションや入力フォームといった動きを付けられる。
・どのブラウザであっても使用できる。
ProgateのJavascript(ES6)編で新たに学んだこと
知っとくと◯
・基本コード末尾に;つける。
・定数(const)は変数(let)と異なり、値を更新できない。
しかし、コードが長くなった際、 予期せぬ値の更新を防止できる。
Ⅰ
if文
if (条件式１){true時ここのコードを実行} else if(条件式２){条件式１がfalse時ここのコードを実行} else{条件式２がfalse時ここのコードを実行}
で条件分岐。
switch文
switch(条件の値) { case 値1: 条件の値と値1が等しい時の処理を記述 break; case 値２: 条件の値と値2が等しい時の処理を記述 break;
・・・
default: 上記どの値とも等しくなかった場合の処理を記述 break; }
比較演算子
・a===bでaとbが等しいかを調べる。
・a!==bでaとbが異なるかを調べる。
(ex)
const number=12; console.log(number===12);
コンソール「true」
その他
・console.log();で（）内の文字記述。
・//でその行はコメント出力。
・let 変数名=値 ;で変数を定義。上書き時はletは不要。
・const 定数名=値 ;で定数を定義。
・${}で定数や変数を文字列化。この時、文字列全体は「ㅤ｀ㅤ」で囲む。
・X && Yで複数条件（XかつY）
・X || Yで複数条件（XまたはY）
Ⅱ
while文
while (条件式){ 条件式が続く間、ここのコードを実行 }←;は不要。
(ex)
while(number<=100){ console.log(number); number+=1; }
コンソール
「1 2 3・・・」
for文
for(変数の定義;条件式;変数の更新){ 条件式が続く間、ここのコードを実行 }←;は不要。
(ex)
for(let number=1 ;number<=100; number+=1{ console.log(number); }
コンソール
「1 2 3・・・」
その他
・+=1=++
・-=1=--
・オブジェクト内にオブジェクトを入れることができる。
呼び出しは「オブジェクト名.オブジェクト名.プロパティ」
（ex）
const cafe = { name: "カフェ", businessHours: { opening:"10:00(AM)", closing:"8:00(PM)", }, };
Ⅲ
・const 定数名=function(){...};で関数を作る。
・function()は()=>に省略化（アロー関数）。楽チン！
・定数名();で関数を呼びだす。
・const 定数名=(引数名)=>{...};で引数を受け取る。
・returnを関数内にかくと、その後の関数は実行されず、呼び出し元で値を受け取れる。
Ⅳ
・class クラス名{...}でクラス（設計図のようなもの）を設計。
・class クラス名 extends 継承するクラス{...}で元のクラスを継承。
以下のコードはコンストラクタ内で使用する
・new クラス名();でクラスからオブジェクトを生成。
・constructor(){...}でインスタンス生成時の処理を追加。
・this.プロパディ＝値;でインスタンスにプロパディと値を追加。
・super()で()内の親コンストラクタを呼びだす。
Ⅴ
インポートとエクスポート
・export default クラス名;でそのクラスを他のファイルで使える準備をする。
・import クラス名 from "./ファイル名";で準備したファイルをインポート。
ディレクトリが異なる場合はimport クラス名 from "../ディレクトリ名/ファイル名";
この時ファイル名の最後にある.jsは省略可。
上記の方法では1ファイルで1つしか定義できない。
複数定義したい場合は、名前付きエクスポートを使用する。
・export {クラス名1,クラス名2,クラス名3...};で名前付きエクスポート。
・import {クラス名1,クラス名2,クラス名3...} from "./ファイル名";で名前付きインポート。
その他
import 定数名 from "パッケージ名;"でパッケージを自分のプログラムで使用。
Ⅵ
findメソッド
・コールバック関数の処理の条件式に合う最初の要素を取り出す。
(ex1)
const numbers = [1, 3, 5, 7, 9]; const foundNumber=numbers.find((number)=>{return number%3===0}); console.log(foundNumber);
コンソール
「3」
(ex2)
const characters = [ {id: 1, name: "にんじゃわんこ", age: 6}, {id: 2, name: "ベイビーわんこ", age: 2}, {id: 3, name: "ひつじ仙人", age: 100}, {id: 4, name: "とりずきん", age: 21} ]; const foundCharacter =characters.find((character)=>{return character.id===3}); console.log(foundCharacter);
コンソール
「{id: 3, name: "ひつじ仙人", age: 100}」
filterメソッド
・findメソッドとは異なり、条件式に合う要素を全て取り出す。
mapメソッド
・配列内全ての要素に処理を行う。
その他
・配列クラス.push(◯◯);で配列の最後に新たな要素を追加。
・配列クラス.forEach((引数)=>{console.log(引数))};で配列クラスの要素を1つずつ処理。
Ⅶ
コールバック関数
・引数に渡される関数のこと
(ex)
const printWanko = () => { console.log("にんじゃわんこ"); }; const call = (callback) => { console.log("コールバック関数を呼び出します。"); callback(); }; call(printWanko);
コンソール
「コールバック関数を呼び出します。
にんじゃわんこ"」
ProgateのjQuery編で新たに学んだこと
基本のき
・全てを$(function(){.....});で囲む。
・$('セレクタ').メソッド（引数）;で何をどうするか記述。
・メソッドが多い場合は、メソッド（引数）.メソッド（引数）.メソッド...;と繋げられる。
(ex)
・$('セレクタ').イベント名（function(）{...});で、イベント発生時に処理する。
(ex)
$('#wrapper).hover（function(）{...});でマウスを乗せた時に反応。
初級編
・<head>の直後くらいに<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>を記述。
・htmlの</body>の直前に<script src="script.js"></script>を記述。
・ .classと似たものに#idが存在する。 ・$('セレクタ').css('プロバティ名','値');でcssを変更。 'セレクタ'をthisにすると、その要素だけ反応（全てのpなどが反応してしまうのを防ぐ。）。 ・$('p').html('こんばんは');`といったように、HTMLも可。
メソッドを使用したアニメーション
・fadeOut();で徐々に消える。（反対はfadeIn();）
fadeOut(1500);で、1500ミリ秒(=1.5秒)、fadeOut（'slow'）でゆっくり消える。
・slideUp();要素が下から上に消える。(反対はslideDown();)
・show();で消えた要素を表示。元の要素をdisplay:none;にしておく
中級編
モーダル表示をするための3ステップ
1.cssでオブジェクト{display:none;}入れる。
2.'(#...).click(function(){...});'でクリックイベント作る。
3.イベント内で行う動作を記述。
その他
・$('.クラス名').addClass('追加するクラス名');で新たなクラスを追加(反対はremoveClass)。
・$('.クラス名').hasClass('判定する引数');で、オブジェクトが判定する要素を持っていればtrue、なけりゃfalse。
上級編
・animateでアニメーションを付けられる。
・$(◯).eq(△).反応させたい内容;でeqに指定した数字の引数のみ反応。
(ex)
$('li').eq(2).css('color','red');だと、3行目の「li」のみ赤文字になる。
・prevで1つ前の要素の要素を取得（反対はnext)
・var html=$('#main').html();のように、html要素を取得できる（この場合はidのmainを取得）。
・var fontSize=$('h1').css('font-size');のように、cssの要素を取得することもできる。
セットや取得の様々な例
・$('h1').attr('id','title');
=h1要素にtitleというidをセット
・var url=$('a').attr('href');
=a要素のhref属性（https...）を取得。
・var name=$('#name).val();
=htmlのinputに実際に書かれた文字が格納される。