JavaScript « 夢茶爺＆空茶爺のPC奮戦備忘録

UI -> 概要

Posted by muchag | jQuery |
初回投稿：2015-04-07 (火) 16:43:17 | 最終更新：2015-04-07 (火) 16:46:49

jQuery のユーザーインターフェース担当。

jQuery UI

DL

jQuery UI：Download Builder
ここから、全体、もしくは必要機能に絞った DL ができる。

テーマ

ユーザーインターフェースのテーマが、デフォルトで24種類用意されている。

jQuery UI：ThemeRoller
ここの左ペインにある ThemeRoller。
Roll Your Own タブでカスタマイズができる。
Gallary タブで、デフォルト24種類を一覧できる。

Posted by muchag | jQuery |
初回投稿：2015-04-07 (火) 16:43:17 | 最終更新：2015-04-07 (火) 16:46:49

Comments (0)

.each()

Posted by muchag | jQuery |
初回投稿：2015-04-05 (日) 21:56:46 | 最終更新：2016-02-27 (土) 12:06:10

エレメント集合の１つ１つに順番にアクセスするメソッド。

jQuery：.each()

【環境】
jQuery:1.11.2

書式

<ul>
<li>foo</li>
<li>bar</li>
</ul>

$( "li").each(function(index) {
console.log(index + ": " + $(this).text());
});

continue, break

continue → return true
break → return false

地潜の日記：jQuery の each() の continue / break は・・・

Posted by muchag | jQuery |
初回投稿：2015-04-05 (日) 21:56:46 | 最終更新：2016-02-27 (土) 12:06:10

Comments (0)

jquery.combobox.js

Posted by muchag | jQuery,Library & PlugIn & AddIn |
初回投稿：2015-04-03 (金) 10:15:30 | 最終更新：2015-04-03 (金) 10:15:30

選択、入力ともにできるコンポーネントが欲しくて
コンボボックスのやり方を調べてみた。

HTML5 になって、テキストボックスに候補を表示することができるようになったみたいだけど、オートコンプリート機能のためらしく、１文字入れるだけで候補が絞られちゃう。
仕方ないので、JavaScript で実現。
作者の方、ありがとうございます！

DL

SQL の窓：使いどころが難しいですが、入力をコンボボックス化する jQuery プラグインの実装が不便だったので、modify しました。
のリンクから
jquery.combobox.js
style.css
をいただいてきた。

導入

上記プラグインファイルと CSS ファイルを読み込む。

<input type="text" id="hoge" />

$( '#hoge' ).combobox([
'1',
'2',
'3',
]);

これで終わり！
かんた～ん♪

Posted by muchag | jQuery,Library & PlugIn & AddIn |
初回投稿：2015-04-03 (金) 10:15:30 | 最終更新：2015-04-03 (金) 10:15:30

Comments (0)

Highstock -> ローソク足（CandleStick）

Posted by muchag | JavaScript |
初回投稿：2015-03-31 (火) 16:56:55 | 最終更新：2015-04-01 (水) 16:09:35

【環境】
Highstock 2.1.4

tooltip

ツールチップのカスタマイズ。

formatter

var options = {
tooltip: {
formatter: function() {
var s = '';
$.each( this.points, function( i, point ) {
s += moment.utc( point.x ).format( 'YYYY-MM-DD' ) + '<br />';
s += '<b>' + moment.utc( point.x ).format( 'hh:mm' ) + '</b><br />';
s += '始値：' + point.point.open + '<br />';
s += '高値：' + point.point.high + '<br />';
s += '安値：' + point.point.low + '<br />';
s += '終値：' + point.point.close;
});
return s;
},
},
};

i

引数の i は、index
複数データ系列（series）の場合には、index で、どのデータ系列の値かを判別。

$.each( this.points, function( i, point ) {
if ( i == 0 ) {
s += moment.utc( point.x ).format( 'YYYY-MM-DD' ) + '<br />';
s += '<b>' + moment.utc( point.x ).format( 'hh:mm' ) + '</b><br />';
s += '始値：' + point.point.open + '<br />';
s += '高値：' + point.point.high + '<br />';
s += '安値：' + point.point.low + '<br />';
s += '終値：' + point.point.close + '<br />';
}
else {
s += '売買高：' + point.point.y;
}
});

point

こちらの場合は、始値などは point.open では undefined となり
point.point.open でないと取れなかった。

pointFormat

var options = {
tooltip: {
pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}:<br/>始値: {point.open:.2f} <br> 高値: {point.high} <br> 安値: {point.low} <br> 終値: {point.close}' ,
},
};

{point.open:.2f} とすることで、有効桁数が小数点第２位までとなるみたい。

{point.x} とすることで、X軸値を取ることができたけど
タイムスタンプの整形する方法がわからなかった。

参考サイト

Highcharts：OHLC and Candlestick Localization
stackoverflow：Highstock – How can i display the open, high, low, close in the line or area charts tooltip

Posted by muchag | JavaScript |
初回投稿：2015-03-31 (火) 16:56:55 | 最終更新：2015-04-01 (水) 16:09:35

Comments (0)

Highcharts 4.1.4

Posted by muchag | JavaScript,Library & PlugIn & AddIn |
初回投稿：2015-03-30 (月) 14:20:41 | 最終更新：2016-01-17 (日) 11:53:06

歩み値からチャートについて
Flotr2 で頑張ってみたけど
X軸値が日付（タイムスタンプ）のせいか、うまくローソクの幹を描画できなかったので
Highcharts を試してみる。

2016-01-17

バージョンアップが行われたので、念のため新しく書き直し。
新記事：Highcharts 4.2.1

2016-01-17

【環境】
Highcharts 4.1.4
Highstock 2.1.4
Highmaps 1.1.4

導入

ダウンロード

Highcharts：Download
ここにダウンロード用のリンクがある。

Highcharts 4.1.4
Highstock 2.1.4
Highmaps 1.1.4
３種あり、Highstock Demos › Candlestick を見る限りでは
ローソク足を実現するには、Highstock みたい。

オリジナルパッケージ

必要な物だけをパッケージしてくれる
Download builder (experimental)
というものもある。

直リンク

Highcharts へリンクを張るのでもいいみたい。

… or just grab the files directly from code.highcharts.com.

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>

書式

$( '#chart_candlestick' ).highcharts( 'StockChart', getOptions() );

基本設定

Highcharts：Options Reference
Highcharts
Highstock
→部品説明
 Highmaps

navigator

adaptToUpdatedData

データがアップデートされたときに、ナビゲーターを最適化するか。

これを false にして、リアルタイム更新グラフを作成すると
X軸の表示幅が自動で変更にならないので
グラフは生成されているのに、見えないエリアが出てくる。

デフォルトは true。

plotOptions（描画オプション？）

series

marker

プロットマーカーの表示、非表示。

enabled: false,

turboThreshold

データ個数最大値。
デフォルトが 1000。
0 で無制限。

PILOG：Highcharts JSは1000件を超えるデータはプロットできません。デフォルトでは。

xAxis（X軸）

xAxis

gridLineWidth

0 に設定すると、縦のグリッド線は引かれない。

minRange

X軸ズームの最低値。

range

X軸値の表示幅？

識別子

日時

識別子	内容
%Y	西暦：４桁
%y
%m	月：２桁（0Full）
%b	月：英語３桁
%d	日：２桁（0Full）
%e
%H	時：２桁（0Full）
%M	分：２桁（0Full）
%S	秒：２桁（0Full）
%L	ミリ秒：３桁（0Full）

Posted by muchag | JavaScript,Library & PlugIn & AddIn |
初回投稿：2015-03-30 (月) 14:20:41 | 最終更新：2016-01-17 (日) 11:53:06

Comments (0)

Flotr2 -> ローソク足（CandleStick）

Posted by muchag | JavaScript,Library & PlugIn & AddIn |
初回投稿：2015-03-28 (土) 19:00:47 | 最終更新：2015-03-31 (火) 11:56:27

歩み値からチャート推移を再現しようとして
このプラグインに当たった。

【環境】
Flotr2:バージョン不明

導入

Flotr2：Basic Candle
ここからサンプルソースをコピペ。

書式

Flotr.draw(
target,
[data],
[options],
)

target（描画対象）

チャートを描画するエレメントを指定。

var target = document.getElementById( "chart_candlestick" );
var target = $( "#chart_candlestick" ); // jQuery 形式だとうまくいかない

jQuery 形式だとうまくいかない。
なぜかしらね～。

data（データ）

書式

var data = [
[ X軸値, 始値, 高値, 安値, 終値 ],
[ X軸値, 始値, 高値, 安値, 終値 ],
・・・
];

options（設定）

GitHub：flotr2.js

基本設定

1600行目辺りから基本設定。

Flotr.defaultOptions = {
colors: ['#00A8F0', '#C0D800', '#CB4B4B', '#4DA74D', '#9440ED'], //=> The default colorscheme. When there are > 5 series, additional colors are generated.
ieBackgroundColor: '#FFFFFF', // Background color for excanvas clipping
title: null, // => The graph's title
subtitle: null, // => The graph's subtitle
shadowSize: 4, // => size of the 'fake' shadow
defaultType: null, // => default series type
HtmlText: true, // => wether to draw the text using HTML or on the canvas
fontColor: '#545454', // => default font color
fontSize: 7.5, // => canvas' text font size
resolution: 1, // => resolution of the graph, to have printer-friendly graphs !
parseFloat: true, // => whether to preprocess data for floats (ie. if input is string)
preventDefault: true, // => preventDefault by default for mobile events. Turn off to enable scroll.
xaxis: {
ticks: null, // => format: either [1, 3] or [[1, 'a'], 3]
minorTicks: null, // => format: either [1, 3] or [[1, 'a'], 3]
showLabels: true, // => setting to true will show the axis ticks labels, hide otherwise
showMinorLabels: false,// => true to show the axis minor ticks labels, false to hide
labelsAngle: 0, // => labels' angle, in degrees
title: null, // => axis title
titleAngle: 0, // => axis title's angle, in degrees
noTicks: 5, // => number of ticks for automagically generated ticks
minorTickFreq: null, // => number of minor ticks between major ticks for autogenerated ticks
tickFormatter: Flotr.defaultTickFormatter, // => fn: number, Object -> string
tickDecimals: null, // => no. of decimals, null means auto
min: null, // => min. value to show, null means set automatically
max: null, // => max. value to show, null means set automatically
autoscale: false, // => Turns autoscaling on with true
autoscaleMargin: 0, // => margin in % to add if auto-setting min/max
color: null, // => color of the ticks
mode: 'normal', // => can be 'time' or 'normal'
timeFormat: null,
timeMode:'UTC', // => For UTC time ('local' for local time).
timeUnit:'millisecond',// => Unit for time (millisecond, second, minute, hour, day, month, year)
scaling: 'linear', // => Scaling, can be 'linear' or 'logarithmic'
base: Math.E,
titleAlign: 'center',
margin: true // => Turn off margins with false
},
x2axis: {},
yaxis: {
ticks: null, // => format: either [1, 3] or [[1, 'a'], 3]
minorTicks: null, // => format: either [1, 3] or [[1, 'a'], 3]
showLabels: true, // => setting to true will show the axis ticks labels, hide otherwise
showMinorLabels: false,// => true to show the axis minor ticks labels, false to hide
labelsAngle: 0, // => labels' angle, in degrees
title: null, // => axis title
titleAngle: 90, // => axis title's angle, in degrees
noTicks: 5, // => number of ticks for automagically generated ticks
minorTickFreq: null, // => number of minor ticks between major ticks for autogenerated ticks
tickFormatter: Flotr.defaultTickFormatter, // => fn: number, Object -> string
tickDecimals: null, // => no. of decimals, null means auto
min: null, // => min. value to show, null means set automatically
max: null, // => max. value to show, null means set automatically
autoscale: false, // => Turns autoscaling on with true
autoscaleMargin: 0, // => margin in % to add if auto-setting min/max
color: null, // => The color of the ticks
scaling: 'linear', // => Scaling, can be 'linear' or 'logarithmic'
base: Math.E,
titleAlign: 'center',
margin: true // => Turn off margins with false
},
y2axis: {
titleAngle: 270
},
grid: {
color: '#545454', // => primary color used for outline and labels
backgroundColor: null, // => null for transparent, else color
backgroundImage: null, // => background image. String or object with src, left and top
watermarkAlpha: 0.4, // =>
tickColor: '#DDDDDD', // => color used for the ticks
labelMargin: 3, // => margin in pixels
verticalLines: true, // => whether to show gridlines in vertical direction
minorVerticalLines: null, // => whether to show gridlines for minor ticks in vertical dir.
horizontalLines: true, // => whether to show gridlines in horizontal direction
minorHorizontalLines: null, // => whether to show gridlines for minor ticks in horizontal dir.
outlineWidth: 1, // => width of the grid outline/border in pixels
outline : 'nsew', // => walls of the outline to display
circular: false // => if set to true, the grid will be circular, must be used when radars are drawn
},
mouse: {
track: false, // => true to track the mouse, no tracking otherwise
trackAll: false,
position: 'se', // => position of the value box (default south-east). False disables.
relative: false, // => next to the mouse cursor
trackFormatter: Flotr.defaultTrackFormatter, // => formats the values in the value box
margin: 5, // => margin in pixels of the valuebox
lineColor: '#FF3F19', // => line color of points that are drawn when mouse comes near a value of a series
trackDecimals: 1, // => decimals for the track values
sensibility: 2, // => the lower this number, the more precise you have to aim to show a value
trackY: true, // => whether or not to track the mouse in the y axis
radius: 3, // => radius of the track point
fillColor: null, // => color to fill our select bar with only applies to bar and similar graphs (only bars for now)
fillOpacity: 0.4 // => opacity of the fill color, set to 1 for a solid fill, 0 hides the fill
}
};

ieBackgroundColor（チャート背景色）

だと思うんだけど、変更しても変わらない。

xaxis（X軸）

mode

‘normal’ か ‘time’。

‘time’ を設定することで、日付や時刻をX軸値に設定できる。
ただし、X軸値はタイムスタンプで設定。
それも、文字列ではなく、数値として設定。
正：[ 1427241960000, 始値, 高値, 安値, 終値 ] 誤：[ ‘1427241960000’, 始値, 高値, 安値, 終値 ]

値自動変換機能がある割には、これは変換してくれない。

noTicks

どうも横幅に対して値が少ない時に、補助の軸線を何分割で引くか
という設定みたい。
1 にすると、どんなに項目間が広くても、補助線なしになる。

tickFormatter

項目値のフォーマット。
関数でも指定できるみたい。
でも、まだ使い方がよくわからない。

tickFormatter: function(x){
var x = parseInt(x);
var myDate = new Date(x*1000);
var string = myDate.getFullYear();
string = string + "-" + myDate.getMonth() + "-" + myDate.getDate();
result = string;
return string;
}

stackoverflow：Putting timestamp onto x axis in Flotr2 line graph

tickDecimals

小数点以下の桁数。
0 で整数表示。

timeFormat

日付のフォーマット。

%h: hours
%H: hours (left-padded with a zero)
%M: minutes (left-padded with a zero)
%S: seconds (left-padded with a zero)
%d: day of month (1-31), use %0d for zero-padding
%m: month (1-12), use %0m for zero-padding
%y: year (four digits)
%b: month name (customizable)
%p: am/pm, additionally switches %h/%H to 12 hour instead of 24
%P: AM/PM (uppercase version of %p)

stackoverflow：Putting timestamp onto x axis in Flotr2 line graph

timeformat “%y/<br>%m” 日時ラベルの書式。htmlタグ使える。

k16’s note：時系列データのグラフをjQueryとFlotで描く

timeMode

‘UTC’ か ‘local’。

固有設定

4200行目辺りからローソク足グラフ専用設定。

options: {
show: false, // => setting to true will show candle sticks, false will hide
lineWidth: 1, // => in pixels
wickLineWidth: 1, // => in pixels
candleWidth: 0.6, // => in units of the x axis
fill: true, // => true to fill the area from the line to the x axis, false for (transparent) no fill
upFillColor: '#00A8F0',// => up sticks fill color
downFillColor: '#CB4B4B',// => down sticks fill color
fillOpacity: 0.5, // => opacity of the fill color, set to 1 for a solid fill, 0 hides the fill
barcharts: false // => draw as barcharts (not standard bars but financial barcharts)
},

candles

wickLineWidth

ひげの線の太さ。

candleWidth

塗りグラフ部分の太さ。
どうもひげの線からどのくらい太くする？　という設定みたい。

fillOpacity

塗りグラフの中をどの程度塗るか。
透明度のイメージ。
0（塗らない）→ 1（ベタ塗り）まで。

Posted by muchag | JavaScript,Library & PlugIn & AddIn |
初回投稿：2015-03-28 (土) 19:00:47 | 最終更新：2015-03-31 (火) 11:56:27

Comments (1)

Flotr2

Posted by muchag | JavaScript,Library & PlugIn & AddIn |
初回投稿：2015-03-28 (土) 18:58:13 | 最終更新：2015-03-31 (火) 11:55:45

歩み値からチャート推移を再現しようとして
このプラグインに当たった。

【環境】
Flotr2:バージョン不明

別に Flot というグラフプラグインも存在するので
Flotr2 は、Flot revision 2 なのかしらね。

Flotr2
GitHub：HumbleSoftware/Flotr2

インストール

GItHub：flotr2.min.js
からコピペ。

グラフの種類

いっぱいｗ
ローソク足（CandleStick）

Flotr2 参照。

基本設定

GitHub：flotr2.js

1600行目辺りから基本設定。

Flotr.defaultOptions = {
colors: ['#00A8F0', '#C0D800', '#CB4B4B', '#4DA74D', '#9440ED'], //=> The default colorscheme. When there are > 5 series, additional colors are generated.
ieBackgroundColor: '#FFFFFF', // Background color for excanvas clipping
title: null, // => The graph's title
subtitle: null, // => The graph's subtitle
shadowSize: 4, // => size of the 'fake' shadow
defaultType: null, // => default series type
HtmlText: true, // => wether to draw the text using HTML or on the canvas
fontColor: '#545454', // => default font color
fontSize: 7.5, // => canvas' text font size
resolution: 1, // => resolution of the graph, to have printer-friendly graphs !
parseFloat: true, // => whether to preprocess data for floats (ie. if input is string)
preventDefault: true, // => preventDefault by default for mobile events. Turn off to enable scroll.
xaxis: {
ticks: null, // => format: either [1, 3] or [[1, 'a'], 3]
minorTicks: null, // => format: either [1, 3] or [[1, 'a'], 3]
showLabels: true, // => setting to true will show the axis ticks labels, hide otherwise
showMinorLabels: false,// => true to show the axis minor ticks labels, false to hide
labelsAngle: 0, // => labels' angle, in degrees
title: null, // => axis title
titleAngle: 0, // => axis title's angle, in degrees
noTicks: 5, // => number of ticks for automagically generated ticks
minorTickFreq: null, // => number of minor ticks between major ticks for autogenerated ticks
tickFormatter: Flotr.defaultTickFormatter, // => fn: number, Object -> string
tickDecimals: null, // => no. of decimals, null means auto
min: null, // => min. value to show, null means set automatically
max: null, // => max. value to show, null means set automatically
autoscale: false, // => Turns autoscaling on with true
autoscaleMargin: 0, // => margin in % to add if auto-setting min/max
color: null, // => color of the ticks
mode: 'normal', // => can be 'time' or 'normal'
timeFormat: null,
timeMode:'UTC', // => For UTC time ('local' for local time).
timeUnit:'millisecond',// => Unit for time (millisecond, second, minute, hour, day, month, year)
scaling: 'linear', // => Scaling, can be 'linear' or 'logarithmic'
base: Math.E,
titleAlign: 'center',
margin: true // => Turn off margins with false
},
x2axis: {},
yaxis: {
ticks: null, // => format: either [1, 3] or [[1, 'a'], 3]
minorTicks: null, // => format: either [1, 3] or [[1, 'a'], 3]
showLabels: true, // => setting to true will show the axis ticks labels, hide otherwise
showMinorLabels: false,// => true to show the axis minor ticks labels, false to hide
labelsAngle: 0, // => labels' angle, in degrees
title: null, // => axis title
titleAngle: 90, // => axis title's angle, in degrees
noTicks: 5, // => number of ticks for automagically generated ticks
minorTickFreq: null, // => number of minor ticks between major ticks for autogenerated ticks
tickFormatter: Flotr.defaultTickFormatter, // => fn: number, Object -> string
tickDecimals: null, // => no. of decimals, null means auto
min: null, // => min. value to show, null means set automatically
max: null, // => max. value to show, null means set automatically
autoscale: false, // => Turns autoscaling on with true
autoscaleMargin: 0, // => margin in % to add if auto-setting min/max
color: null, // => The color of the ticks
scaling: 'linear', // => Scaling, can be 'linear' or 'logarithmic'
base: Math.E,
titleAlign: 'center',
margin: true // => Turn off margins with false
},
y2axis: {
titleAngle: 270
},
grid: {
color: '#545454', // => primary color used for outline and labels
backgroundColor: null, // => null for transparent, else color
backgroundImage: null, // => background image. String or object with src, left and top
watermarkAlpha: 0.4, // =>
tickColor: '#DDDDDD', // => color used for the ticks
labelMargin: 3, // => margin in pixels
verticalLines: true, // => whether to show gridlines in vertical direction
minorVerticalLines: null, // => whether to show gridlines for minor ticks in vertical dir.
horizontalLines: true, // => whether to show gridlines in horizontal direction
minorHorizontalLines: null, // => whether to show gridlines for minor ticks in horizontal dir.
outlineWidth: 1, // => width of the grid outline/border in pixels
outline : 'nsew', // => walls of the outline to display
circular: false // => if set to true, the grid will be circular, must be used when radars are drawn
},
mouse: {
track: false, // => true to track the mouse, no tracking otherwise
trackAll: false,
position: 'se', // => position of the value box (default south-east). False disables.
relative: false, // => next to the mouse cursor
trackFormatter: Flotr.defaultTrackFormatter, // => formats the values in the value box
margin: 5, // => margin in pixels of the valuebox
lineColor: '#FF3F19', // => line color of points that are drawn when mouse comes near a value of a series
trackDecimals: 1, // => decimals for the track values
sensibility: 2, // => the lower this number, the more precise you have to aim to show a value
trackY: true, // => whether or not to track the mouse in the y axis
radius: 3, // => radius of the track point
fillColor: null, // => color to fill our select bar with only applies to bar and similar graphs (only bars for now)
fillOpacity: 0.4 // => opacity of the fill color, set to 1 for a solid fill, 0 hides the fill
}
};

ieBackgroundColor（チャート背景色）

だと思うんだけど、変更しても変わらない。

xaxis（X軸）

mode

‘normal’ か ‘time’。

‘time’ を設定することで、日付や時刻をX軸値に設定できる。
ただし、X軸値はタイムスタンプで設定。
それも、文字列ではなく、数値として設定。
正：[ 1427241960000, 始値, 高値, 安値, 終値 ] 誤：[ ‘1427241960000’, 始値, 高値, 安値, 終値 ]

値自動変換機能がある割には、これは変換してくれない。

noTicks

どうも横幅に対して値が少ない時に、補助の軸線を何分割で引くか
という設定みたい。
1 にすると、どんなに項目間が広くても、補助線なしになる。

tickFormatter

項目値のフォーマット。
関数でも指定できるみたい。
でも、まだ使い方がよくわからない。

tickFormatter: function(x){
var x = parseInt(x);
var myDate = new Date(x*1000);
var string = myDate.getFullYear();
string = string + "-" + myDate.getMonth() + "-" + myDate.getDate();
result = string;
return string;
}

stackoverflow：Putting timestamp onto x axis in Flotr2 line graph

tickDecimals

小数点以下の桁数。
0 で整数表示。

timeFormat

日付のフォーマット。

%h: hours
%H: hours (left-padded with a zero)
%M: minutes (left-padded with a zero)
%S: seconds (left-padded with a zero)
%d: day of month (1-31), use %0d for zero-padding
%m: month (1-12), use %0m for zero-padding
%y: year (four digits)
%b: month name (customizable)
%p: am/pm, additionally switches %h/%H to 12 hour instead of 24
%P: AM/PM (uppercase version of %p)

stackoverflow：Putting timestamp onto x axis in Flotr2 line graph

timeformat “%y/<br>%m” 日時ラベルの書式。htmlタグ使える。

k16’s note：時系列データのグラフをjQueryとFlotで描く

timeMode

‘UTC’ か ‘local’。

Posted by muchag | JavaScript,Library & PlugIn & AddIn |
初回投稿：2015-03-28 (土) 18:58:13 | 最終更新：2015-03-31 (火) 11:55:45

Comments (0)

Moment の isValid() が機能しない

Posted by muchag | JavaScript,Library & PlugIn & AddIn,困ったTT |
初回投稿：2015-03-28 (土) 18:29:11 | 最終更新：2015-03-28 (土) 18:30:02

【環境】
moment:2.9.0

Moment.js
Moment.js Documentation

現象

公式ドキュメント：Moment.js Documentation
に

moment("2010 13", "YYYY MM").isValid(); // false (not a real month)

こう書いてあるけど、月を３ケタにすると通っちゃう。

しかも挙動がマチマチ。

// 根本的にフォーマットが違っているパターン
moment( '2010 12', 'YYYY-MM' ).isValid() // true
var date = moment( $( '#month' ).val() );
var datem = date.format( 'YYYY-MM' ).toString(); // datem -> Invalid Date
moment( '2010 99', 'YYYY-MM' ).isValid() // false
moment( '2010 100', 'YYYY-MM' ).isValid() // true
var date = moment( $( '#month' ).val() );
var datem = date.format( 'YYYY-MM' ).toString(); // datem -> Invalid Date
moment( '2010 129', 'YYYY-MM' ).isValid() // true
var date = moment( $( '#month' ).val() );
var datem = date.format( 'YYYY-MM' ).toString(); // datem -> Invalid Date
moment( '2010 130', 'YYYY-MM' ).isValid() // false
// フォーマットは正しいパターン
moment( '2010-100', 'YYYY-MM' ).isValid() // true
var date = moment( $( '#month' ).val() );
var datem = date.format( 'YYYY-MM' ).toString(); // datem -> 2010-04
var datem = date.format( 'YYYY-MM-DD' ).toString(); // datem -> 2010-04-10
moment( '2010-101', 'YYYY-MM' ).isValid() // true
var date = moment( $( '#month' ).val() );
var datem = date.format( 'YYYY-MM' ).toString(); // datem -> 2010-04
var datem = date.format( 'YYYY-MM-DD' ).toString(); // datem -> 2010-04-11
moment( '2010-129', 'YYYY-MM' ).isValid() // true
var date = moment( $( '#month' ).val() );
var datem = date.format( 'YYYY-MM' ).toString(); // datem -> 2010-05
var datem = date.format( 'YYYY-MM-DD' ).toString(); // datem -> 2010-05-09
moment( '2010-130', 'YYYY-MM' ).isValid() // false

上記実験結果をまとめると

２ケタ月は 13～99 について false
３ケタ月は 100～129 について true、130～ false
フォーマットが異なっているときは、moment オブジェクトとしては認めても、Invalid Date
フォーマットが合っているときは、YYYY-DDD として、元日からの総合日数で年月日を算出している模様
ただし、130日以降は NG

面白くていくつか実験してみたけど、解決策があるので、この辺で。
　

解決策

というか正しい書式。

moment('It is 2012-05-25', 'YYYY-MM-DD').isValid(); // true
moment('It is 2012-05-25', 'YYYY-MM-DD', true).isValid(); // false
moment('2012-05-25', 'YYYY-MM-DD', true).isValid(); // true

第３引数に true を入れると「真面目に」チェックしてくれるみたい。 😎
今のところは正常にバリデーションしてくれてます。

と思ったら嘘だった

と、思ったら、次の日、鯖に上げてみたら true が機能しない。
そして、あれ？っと思ってローカルで再び試したら機能していない。
？？？
むぅ。。。

困った

Posted by muchag | JavaScript,Library & PlugIn & AddIn,困ったTT |
初回投稿：2015-03-28 (土) 18:29:11 | 最終更新：2015-03-28 (土) 18:30:02

Comments (0)

時間間隔での繰り返し処理

Posted by muchag | JavaScript |
初回投稿：2015-03-28 (土) 10:58:18 | 最終更新：2015-03-28 (土) 10:58:18

描画に時間が掛かるグラフを連続処理をするにあたって
待ち時間を入れることにしたんだけど
どうもうまくいかないので、Google 先生に聞いてみた。

が、時間がないので、参考サイトのみ。

参考サイト

MAYONAKA：JavaScriptでの繰り返し処理とその停止のやり方

Posted by muchag | JavaScript |
初回投稿：2015-03-28 (土) 10:58:18 | 最終更新：2015-03-28 (土) 10:58:18

Comments (0)

即時関数

Posted by muchag | JavaScript |
初回投稿：2015-03-28 (土) 9:35:19 | 最終更新：2015-03-28 (土) 9:38:50

なんか変な記述を見つけて、びっくりして調べた。
即時関数というそうだ。

【環境】
Firefox:36.0.4

書式

// 基本形
(function(){
処理
})()
// 関数名はあってもなくてもよい
(function hoge(){
処理
})()
// 引数値の指定は、尻尾の()で行う
(function( arg ){
処理
})( '引数' )
// 引数指定用の()の位置は下記でもよい
(function(){
処理
}())

比較

// 一般
function hoge() {
alert( 'test' );
}
hoge(); // test
// 即時関数
(function hoge() {
alert( 'test' );
})();

意義

「グローバル変数の使用を抑える」ことができる。

JavaScript の場合、変数も関数もグローバル変数となる。

var hoge;
function hoge() {}

これらは共にグローバルオブジェクトのプロパティとして定義される。

ブラウザの場合は、Window オブジェクトがグローバルオブジェクトなので

window.hoge

でアクセス可能。

即時関数の場合は、その場使い捨てなので、
グローバルオブジェクトに登録されない。
＝「グローバル変数の使用を抑える」

付加効能

関数定義と呼び出しを一括で行える
＝スクリプトを１行削ることができる 🙄

注意事項

記述場所

読み込み時にその場で実行してしまうので
処理対象に DOM 要素を設定している場合は
DOM 出力後に記述しないと、エラーとなってしまう。

つまり、<head> で直接記述したり、外部ファイルを読み込んではダメ。
</body> 直前に記述したり、外部ファイルを読み込んでやること。

参考サイト

三等兵：知ってて当然？初級者のためのJavaScriptで使う即時関数(function(){…})()の全て

Posted by muchag | JavaScript |
初回投稿：2015-03-28 (土) 9:35:19 | 最終更新：2015-03-28 (土) 9:38:50

Comments (0)

ブログ内検索

Main Menu

カテゴリー

最近のコメント

アーカイブ

メタ情報

UI -> 概要

.each()

jquery.combobox.js

Highstock -> ローソク足（CandleStick）

Highcharts 4.1.4

Flotr2 -> ローソク足（CandleStick）

Flotr2

Moment の isValid() が機能しない

時間間隔での繰り返し処理

即時関数