JavaScript覚え書き

# 概要

JavaScriptについてつらつら書きます。自分が調べた順に上から書いています。

# JavaScript界隈まとめ(作成中)

* 不正確な内容を含む可能性があります
* 例えはRuby, Rails

* サーバーサイド
    * Node.js (JavaScript アプリケーションのプラットフォーム。Apache + Passenger + Railsアプリ)
    * (上でRailsは含まれないのでは？)
        * Node.js上のフレームワーク
            * Backbone.js
            * AngularJS (Google製MVC)
            * Express (シンプルなフレームワーク)

* クライアントサイド

## 参考リンク

* [Node.js を5分で大雑把に理解する](http://qiita.com/hshimo/items/1ecb7ed1b567aacbe559)
* [5分で理解する React.js](http://qiita.com/tomzoh/items/7fabe7cb57dd96425867)
* [【AngularJS vs React.js】どっちがどう使える？JavaScriptフレームワークの最新事情 ](https://codeiq.jp/magazine/2015/05/24294/)
* [Reactとは? – React入門](https://www.to-r.net/media/react-tutorial01/)
* [【翻訳】 2016年にJavaScriptを学んでどう感じたか](http://kikuchi1201.hateblo.jp/entry/2016/10/26/172404)
* [ゼロからはじめるExpress + Node.jsを使ったアプリ開発](http://qiita.com/nkjm/items/723990c518acfee6e473)
* [ExpressでReactを始める](http://qiita.com/asma/items/8a34395a5dce0415dbee)

# 開発環境

ChoromeのDeveloper Toolsを使います

## 参考

* [JavascriptのChromeでのデバッグ方法個人的まとめ2017](http://qiita.com/snoguchi/items/8f6bb62a3166eca23ac3)
* [Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能](http://www.buildinsider.net/web/chromedevtools/01)
* [jQueryでコンソールログを使ったデバッグ方法](http://www.flatflag.nir87.com/console-1130)
    * FireFoxやIEでのデバッグ方法もあり



# 日付注意
* new Date(YYYY, MM, DD)の月は、-1することで目的の日付オブジェクトを生成できる
    * new Date("YYYY/MM/DD")やnew Date("YYYY-MM-DD")の形式であれば記載のままの日付オブジェクトを生成できる。
* getMonthは+1することで目的の月の値を得られる

``` javascript
// 2016/10/10の日付オブジェクトを生成したい
> new Date(2016, 9, 10);
================================================
Mon Oct 10 2016 00:00:00 GMT+0900 (東京 (標準時))
================================================
// new Date(2016, 10, 10);だと11月になってしまう
> new Date(2016, 10, 10);
================================================
Thu Nov 10 2016 00:00:00 GMT+0900 (東京 (標準時))
================================================
// "YYYY/MM/DD"や"YYYY-MM-DD"の形式であれば書式通りの日付オブジェクトを生成できる
> new Date("2016/10/10")
================================================
Mon Oct 10 2016 00:00:00 GMT+0900 (東京 (標準時))
================================================
> new Date("2016-10-10")
================================================
Mon Oct 10 2016 00:00:00 GMT+0900 (東京 (標準時))
================================================


// getMonthで10月を取得したい
> dt = new Date(2016, 9, 10);
> dt;
================================================
Mon Oct 10 2016 00:00:00 GMT+0900 (東京 (標準時))
================================================
> dt.getMonth()+1
================================================
10
================================================
// dt.getMonth() だと9月になってしまう
> dt.getMonth()
================================================
9
================================================
```

# 日付チェック (作成中)

``` javascript
> start_date;
================================================
<input type="text" name="start_date" id="start_date" value="2016-09-13" class="datepicker hasDatepicker">
================================================

// $マーク記述はjQueryを呼び出すための省略された記述
> $(start_date);
================================================
jQuery.fn.init[1]
  0: input#start_date.datepicker.hasDatepicker
  context: input#start_date.datepicker.hasDatepicker
    accept: ""
    accessKey: ""
    ...
    value: "2016-09-13"
    ...
  length: 1
  __proto__: Object[0]
================================================

> $(start_date).context;
================================================
<input type="text" name="start_date" id="start_date" value="2016-09-13" class="datepicker hasDatepicker">
================================================

// jQueryを使って値を取得
> $(start_date).context.value;
================================================
"2016-09-13"
================================================

// jQueryを使わずに(?)値を取得
> start_date.value;
================================================
"2016-09-13"
================================================

> ymd = start_date.value.split('-');
================================================
["2016", "09", "13"]
================================================

// integerに変換。第二引数の「10」は10進数であることを明記している。
> var y = parseInt(ymd[0],10);
> y;
================================================
2016
================================================

// m = 9の場合10月を取得する
> var m = parseInt(ymd[1],10);
> m;
================================================
9
================================================

> var d = parseInt(ymd[2],10);
> d;
================================================
13
================================================

// 9月13日ではなく10月13日の日付オブジェクトが生成されていることに注意
> var vd  = new Date(y, m, d);
> vd
================================================
Thu Oct 13 2016 00:00:00 GMT+0900 (東京 (標準時))
================================================
```

## 参考

* [【jQuery】$(ドルマーク)の意味](http://www.task-notes.com/entry/20140713/1405246477)
* [日付のvalidate (入力文字列が存在する日付かどうかを判定する)](http://d.hatena.ne.jp/favril/20090910/1252559761)

# 型変換

## 文字列から数値への型変換

文字列から数値に型変換するとき、変換方法により結果に差があった

``` javascript
// 先頭に数値が入った数値と文字の両方が入った文字列
a = "2016あいうえお"
================================================
"2016あいうえお"
================================================
// 先頭に文字が入った数値と文字の両方が入った文字列
b = "かきくけこ2017"
================================================
"かきくけこ2017"
================================================

// perseIntを使うと先頭が数値の場合は箇所のみ取り出されるが、先頭が文字の場合はNaNになる
parseInt(a)
================================================
2016
================================================
parseInt(b)
================================================
NaN
================================================

// 0を引いて暗黙の型変換を利用するとどちらの場合もNaNになる
a - 0
================================================
NaN
================================================
b - 0
================================================
NaN
================================================
```

## 参考
* [型変換のいろいろ](http://qiita.com/zawascript/items/a25eaf7a222ac3671275)

# 繰り返し

## forEach

``` javascript
> var a = [11, 12, 13, 14];
> a.forEach(function(data) { console.log(data); });
================================================
11
12
13
14
================================================

> [start_date, end_date].forEach(function(data) { console.log(data); });
================================================
<input type="text" name="start_date" id="start_date" value="2016-10-25" class="datepicker hasDatepicker">
<input type="text" name="end_date" id="end_date" value="2016-10-30" class="datepicker hasDatepicker">
================================================

> [start_date, end_date].forEach(function(data) { console.log(data.value); });
================================================
2016-10-25
2016-10-30
================================================
```

## jQuery.each

``` javascript
> $.each([11, 12, 13, 14], function(i){ console.log(i); });
================================================
0
1
2
3
[11, 12, 13, 14]
================================================
> $.each([11, 12, 13, 14], function(i,data){ console.log(i); });
================================================
0
1
2
3
[11, 12, 13, 14]
================================================
> $.each([11, 12, 13, 14], function(i,data){ console.log(data); });
================================================
11
12
13
14
[11, 12, 13, 14]
================================================

> $.each([start_date, end_date], function(i,data){ console.log(data); });
================================================
<input type=​"text" name=​"start_date" id=​"start_date" value=​"2016-10-25" class=​"datepicker hasDatepicker">​
<input type=​"text" name=​"end_date" id=​"end_date" value=​"2016-10-30" class=​"datepicker hasDatepicker">​
[input#start_date.datepicker.hasDatepicker, input#end_date.datepicker.hasDatepicker]
================================================

> $.each([start_date, end_date], function(i,data){ console.log(data.value); });
================================================

[input#start_date.datepicker.hasDatepicker, input#end_date.datepicker.hasDatepicker]
================================================
2016-10-25
2016-10-30
================================================
```

## 参考

* [JavaScript Array.forEachとjQuery.eachの違い](http://qiita.com/PianoScoreJP/items/07491c4c8a4714679f32)

# フォームの値を取得する(作成中)
``` html
<form id="searchForm" class="search" ～ method="get">
～
<input type="text" name="start_date" id="start_date" value="2016-10-27" class="datepicker" />
～
<input type="submit" name="search" value="検索" />
～
</form>
```

``` javascript
<script type="text/javascript">
$('#searchForm').on('submit', function() {
～
console.log(start_date.value)
～
});
</script>
```