JavaScript覚え書き

概要

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

JavaScript界隈まとめ(作成中)

• 不正確な内容を含む可能性があります

• 例えはRuby, Rails

• サーバーサイド

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

• クライアントサイド

参考リンク

• Node.js を5分で大雑把に理解する
• 5分で理解する React.js
• 【AngularJS vs React.js】どっちがどう使える？JavaScriptフレームワークの最新事情
• Reactとは? – React入門
• 【翻訳】 2016年にJavaScriptを学んでどう感じたか
• ゼロからはじめるExpress + Node.jsを使ったアプリ開発
• ExpressでReactを始める

開発環境

ChoromeのDeveloper Toolsを使います

参考

• JavascriptのChromeでのデバッグ方法個人的まとめ2017
• Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能
• jQueryでコンソールログを使ったデバッグ方法
  • FireFoxやIEでのデバッグ方法もあり

日付注意

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

// 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
================================================

日付チェック (作成中)

> 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】$(ドルマーク)の意味
• 日付のvalidate (入力文字列が存在する日付かどうかを判定する)

型変換

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

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

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

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

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

参考

• 型変換のいろいろ

繰り返し

forEach

> 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

> $.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の違い

フォームの値を取得する(作成中)

<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>

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