Java Script あつめる

#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('<spam>こんばんは</span>');`といったように、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に実際に書かれた文字が格納される。