javascript&jqueryチートシート(今期よく使っている構文などなどまとめ)


よく使っている気がするものを雑多にまとめました。

## javascript
### 変数 | values
##### グローバル変数
```javascript
var hoge = ''; // ES2015から非推奨、さようならvar...
let hoge = ''; // グローバルスコープに書く！
```

##### ローカル変数
```javascript
let hoge = '';
```

### 配列 | array
##### 宣言
```javascript
let hoge = ['apple', 10, 20, true];
console.log(hoge[0]); // apple
```

##### 末尾に追加
```javascript
hoge.push('grape'); // [ 'apple', 10, 20, true, 'grape' ]
console.log(hoge);
```

##### 削除 (番目から, いくつ)
```javascript
hoge.splice(0, 1);
console.log(hoge); // [ 10, 20, true, 'grape' ]

hoge.splice(2, 1);
console.log(hoge); // [ 10, 20, 'grape' ]
```

### オブジェクト | object

##### 連想配列的な
連想配列のような形としても扱える

```javascript
let hoge = {'red':'apple', 'yellow':'banana', 'blue':'grape'};
console.log(hoge['red']); // apple
console.log(hoge['blue']); // grape
```

#### クラスのような
プロパティと関数を一緒に持ってクラスのようなオブジェクト

```javascript
let hoge = {
  age: 23,
  name: 'yasuaki',
  showAge: function(){
    console.log(this.age + "才です。");
  },
  showName: function(){
    console.log("名前は" + this.name + "です。");
  }
};

hoge.showAge(); // 23才です。
hoge.showName(); // 名前はyasuakiです。
```
##### ちゃんとしたクラス
ES2015から導入されているらしい。

```javascript
class Hoge {
  constructor(age, name) {
    this.age = age;
    this.name = name;
  }

  showAge() {
    console.log(this.age + "才です。");
  }

  showName() {
    console.log("名前は" + this.name + "です。");
  }
}

const hoge = new Hoge(23, "yasuaki");
hoge.showAge(); // "23才です。"
hoge.showName(); // "名前はyasuakiです。"

const hoge2 = new Hoge(18, "tarou");
hoge2.showAge(); // "18才です。"
hoge2.showName(); // "名前はtarouです。"
```

オブジェクト配列

```javascript
let hoge =[
  {age: 20, name:'tarou'},
  {age: 21, name:'hanako'},
  {age: 28, name:'yasuaki'}
];
console.log(hoge[1].name); // hanako
console.log(hoge[2].age); // 28
```

### ループ | for or while
##### for
```javascript
for(let i = 0; i < 10; i++) {
  console.log("hello" + i); // hello0 ～ hello9
}
```

##### while
```javascript
let i = 0;
while(i < 10){
  console.log("hello" + i); // hello0 ～ hello9
  i++;
}
```

### 制御 | if or switch
##### 三項演算子
```javascript
let i = 0;
let hoge = i == 0 ? 'true!!!' : 'false!!!';
console.log(hoge); // true!!!
```
##### if
```javascript
let i = 0;
let output = '';
if (i == 1) {
  output = 'aaa';
} else {
  output = 'bbb';
}
console.log(output); // bbb

if (i == 2) {
  output = 'aaa';
} else if (i == 0) {
  output = 'bbb';
} else {
  output = 'ccc';
}
console.log(output); // bbb
```

##### switch
```javascript
let hoge = "bar";
let output = '';
switch(hoge) {
  case "foo":
    output = 'test1';
    break;
  case "bar":
    output = 'test2';
    break;
  case "hoge":
    output = 'test3';
    break;
}
console.log(output); // test2
```

##### その他関数
トリムする

```javascript
let hoge = 'aaa ';
hoge = hoge.trim();
console.log(hoge); // 'aaa'
```

分割する

```javascript
  let test = 'foo,bar,zoo';
  test = test.split(',');
  console.log(test); // 配列になる => [ 'foo', 'bar', 'zoo' ]
```

### WebStorage
容量は1オリジン 5MBまで

```javascript
// セッションストレージはページを閉じるまで
// データの保存
sessionStorge.setItem("キー","値");

// データの取得
sessionStorge.getItem("キー");

// データの削除
sessionStorge.removeItem("キー");

// ローカルストレージは永続的に有効
// データの保存
localStorage.setItem("キー","値");

// データの取得
localStorage.getItem("キー");

// データの削除
localStorage.removeItem("キー");
```

[参考1](https://qiita.com/masamitsu-konya/items/c69515604570150d3ab9, '参考1')
[参考2](http://www.htmq.com/webstorage/, '参考2')

### ES2015について
[ES2015 (ES6)についてのまとめ](https://qiita.com/tuno-tky/items/74ca595a9232bcbcd727,'ES2015 (ES6)についてのまとめ')

対応状況下記、赤が非対応で緑が対応済らしい。IE10以前の場合はいろいろ問題がありそう。
[ECMAScript6 compatibility table](http://kangax.github.io/compat-table/es6/, 'ECMAScript6 compatibility table')

未対応ブラウザについてはbabelを使うこと・・・
[Babelで始める！モダンJavaScript開発](https://html5experts.jp/kyo_ago/16979/, 'Babelで始める！モダンJavaScript開発')

## jquery
### CDN
```html
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
```
### ajax (3系)
```javascript
$.ajax({
  type: 'POST',
  url:'hoge.php',
  dataType: "json",
  data: {mode:'insert', jsonobj:JSON.stringify(select_data)} // json形式でデータポスト
}).done(function(data, textStatus, jqXHR){
  console.log("成功");
}).fail(function(jqXHR, textStatus, errorThrown){
  console.log("失敗");
}).always(function(){
  console.log("処理が終わるとここ通る");
});
```

### 表示・非表示
```javascript
$(".hoge").show(); // 表示
$(".hoge").hide(); // 非表示 (display:none にする)
```

### チェックボックスの状態
##### 状態取得
```javascript
if($(".hoge").prop("checked")){
  console.log("チェックあり");
} else {
  console.log("チェックなし");
}
```

##### つける : はずす
```javascript
$(".hoge").prop("checked", true);
$(".hoge").prop("checked", false);
```
##### nameでチェックされている値取得
```javascript
$("input[name='hoge']:checked").val() 
```
### テキストエリア等の活性・非活性
##### 状態取得
```javascript
if ($('.hoge').prop('disabled')) {
  console.log("非活性");
} else {
  console.log("活;性");
}
```

##### つける : はずす
```javascript
$(".hoge").prop("disabled", true);
$(".hoge").prop("disabled", false);
```

### スタイル変更
```javascript
$(".hoge").css("color", "red");
```

### 属性追加
```javascript
$(".hoge").attr("data", "party!people!!"); // data="party!people!!"がタグに追加される
```

### セレクター
##### セレクトボックス
```javascript
// 選んだoptionのvalue
$("#hoge option:selected").val();
// 選んだoptionのtext
$("#hoge option:selected").text();
```

##### 親がみたい！
```javascript
$(".hoge").parent().css('background', 'red'); // 親の親は $(".hoge").parent().parent() みたいな感じで上の階層を見れる
```

##### 子要素を文字列で検索して！
```javascript
$(".hoge").find(".search").css('background', 'red');
```

### each
子要素が複数取得できるときにループ

```javascript
$(".hoge tbody tr").each(function(idx){ // idxは要素番号
  $(this).html();
});
```