【個人用】

随時更新
#変数（const,let,var）
||再代入|再定義|備考|
|:----:|:----:|:----:|:----:|
|const|×|×||
|let|○|×||
|ver|○|○|古い。ブロックスコープの無視。変数の巻き上げがおこりバグの原因になる可能性がある。|
###const
```script.js
//再代入できない
const constNumber = 100;
constNumber = 200;
>> "TypeError: Assignment to constant variable."

//再定義できない
const constNumber = 100;
const constNumber = 200;
"SyntaxError: Identifier 'constNumber' has already been declared"

//constが厳密に定数ではない理由
const obj = {
  foo: 100
};
console.log(obj.foo);
>> 100
obj.foo = 200;
console.log(obj.foo);
>> 200 //変数objのfooの値が更新できるため。
```
###let
```script.js
//再代入できる
let letNumber = 100;
console.log(letNumber);
>> 100
letNumber = 200;
console.log(letNumber);
>> 200 //再代入により値が更新された

//再定義できない
let letNumber = 100;
let letNumber = 200;
>> "SyntaxError: Identifier 'letNumber' has already been declared"
```

###ver
```script.js
//再代入できる
//再定義できる
var varNumber = 100;
var varNumber = 200;
console.log(varNumber);
>> 200
```
#条件式（if文）
```
```


#配列
```script.js
let list = ['Ruby', 'Ruby on Rails', 'JavaScript', 'HTML', 'CSS'];
console.log(list);
>> ["Ruby", "Ruby on Rails", "JavaScript", "HTML", "CSS"]
```
###配列の要素を取得
```script.js
let list = ['Ruby', 'Ruby on Rails', 'JavaScript', 'HTML', 'CSS'];
console.log(list[2]);
>> "JavaScript"
```
###配列の要素数を取得
```script.js
let list = ['Ruby', 'Ruby on Rails', 'JavaScript', 'HTML', 'CSS'];
console.log(list.length);
>> 5
```
`lengthメソッド`...配列の要素の数を設定または取得する
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/length
###配列の要素を追加
```script.js
let list = ['Ruby', 'Ruby on Rails', 'JavaScript', 'HTML', 'CSS'];
list.push('GitHub');
console.log(list);
>> ["Ruby", "Ruby on Rails", "JavaScript", "HTML", "CSS", "GitHub"]
```
`pushメソッド`...配列の末尾に要素を追加する
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/push
###配列の要素を削除
```script.js
let list = ['Ruby', 'Ruby on Rails', 'JavaScript', 'HTML', 'CSS'];
list.pop();
console.log(list);
>> ["Ruby", "Ruby on Rails", "JavaScript", "HTML"]

let list = ['Ruby', 'Ruby on Rails', 'JavaScript', 'HTML', 'CSS'];
let poped = list.pop();
console.log(poped);
>> "CSS"
```
`popメソッド`配列の最後の要素を取り除き、呼び出し元にその値を返す。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/pop

```script.js
let list = ['Ruby', 'Ruby on Rails', 'JavaScript', 'HTML', 'CSS'];
list.shift();
console.log(list);
>> ['Ruby on Rails', 'JavaScript', 'HTML', 'CSS']
```
`shiftメソッド`...配列から最初の要素を取り除き、その要素を返す。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/shift


#オブジェクトを扱う
###オブジェクトを定義
```script.js
let obj = { name: 'yamada', age: 25, address: 'tokyo' };
console.log(obj);
>>
[object Object] {
  address: "tokyo",
  age: 25,
  name: "yamada"
}
```
オブジェクトはデータを名前と値をセットで管理。このセットを`プロパティ`と言う。 
`address`はプロパティ名、`'yamada'`は対応する値となる。


###プロパティの値を取得
```script.js
let obj = { name: 'yamada', age: 25, address: 'tokyo' };
console.log(obj.name);
>> "yamada"
```
###プロパティの値を変更
```script.js
let obj = { name: 'yamada', age: 25, address: 'tokyo' };
obj.name = 'tanaka';
console.log(obj);
>>
[object Object] {
  address: "tokyo",
  age: 25,
  name: "tanaka"
}
```
#繰り返し
###for 文
```script.js
num = 1;
for (let i = 0; i < 10; i += 1) {
  console.log(num + '回目の出力')
  num +=  1
}

"1回目の出力"
"2回目の出力"
.
.
"10回目の出力"
```
#関数（ 関数宣言と関数式（無名関数) ）
JavaScriptにおける関数の定義には2種類の方法がある

```script.js
// 関数宣言
function hello(){
  console.log('hello');
}

// 関数式（無名関数）
let hello = function 関数名(){
    console.log('hello');
}
```
`関数式（無名関数）`...関数を変数の中に値として入れたもの。また、関数名が無くても動かすことができる。

###関数を定義
```script.js
function 関数名(引数) {
  // 処理の内容
}

function sayHello(){
  console.log('hello');
}
function sayName(name){
  console.log(name);
}

let myName = 'yamada';
sayHello();
>>hello
sayName(myName);
>>yamada
```
オブジェクトに対してプロパティ名を続けて記載することで値を取り出すことができる。

###return
```script.js
function calc(num1,num2){
  return num1*num2;
}

let num1 = 3;
let num2 = 4;
console.log(calc(num1,num2));

```
####高階関数（関数の中で関数の処理を行っている関数）
```script.js
function 高階関数(コールバック関数) {
  // 色々処理を入れたり...
  コールバック関数();
}
```

####コールバック関数（引数として渡されている関数のこと）
```script.js

```

###
```script.js

```

##HTM要素の取得
```test.js
$("セレクタ")

//クラス属性の取得
$(".classSelector")
//id属性の取得
$("#idSelector")
//要素の取得
$("h1")
//属性の取得
$("input[ type='radio' ]");
```
##thisでイベントの発生元となった要素を取得する
```
```