Browse: Home » Javascript

Javascript

【Javascript】IEにおけるObject.keys関数について。

http://forum.jquery.com/topic/object-keys-fails-in-ie8

 

Object.keys does not exist in IE 8.

 

Object.keys does not exist in IE 8!!!

 

そんな関数IE8では存在しましぇぇぇぇえええん！！！ということらしい。

 

通りでエラーになるわけだ。しかしどうしてIE8のみなのか。もうほんとにこの問題児はいろいろと理解し難い。IEが消えてなくなってくれる日を夢に見て明日も生きてゆこうと思う。

 

2013/09/24 _onichannn , ,

【jQuery】IE9以降とIE6, 7, 8を判別する方法。

IEはゴミ。産廃。異論は認めない。

ということでどうにもこうにも判別しなきゃいけない場面がやってきたので調べてみた。

if(!$.support.opacity){
	// IE6, 7, 8
}else{
	// gt IE9
}

「$.support」はブラウザごとにサポートしている機能をブーリアンで返却してくれるとっても素敵なAPI。なのでIE9からサポートしているopacityの実装状況を判定することで上記のような分岐が可能になるんだね。そうだね。プロテ（ｒｙ
意外と簡単にできちゃうんだね。jQueryがつくづく最強だと感じざるを得ない。

そんなことよりIEは氏ん（ｒｙ。

 

2013/09/24 _onichannn , ,

【CSS】transitionプロパティのeasingアニメーション早見表。

理想の挙動を実現しようとすると一苦労なeasingアニメーション。しかしこの難解なベジェ曲線を一瞬で生成してくれる（されてる）神サービスを見つけたのでメモ。

http://easings.net/

もうドメインからしてeasingのためだけに存在してる気合の入りよう。

アクセスすると下のような図と共にeasingアニメーションの名前一覧が表示される。マウスオーバーでアニメーションの挙動をその場で確認でき、クリックするとそのアニメーションの実装方法が詳細に表示される。

f13bb931f15f665caf339e6d8909c441

解説はそれぞれ、JS、SCSS、CSS、3つでの実装方法が記載されており、全てコピペで動いてしまうという神仕様。特にCSSでの実装はベジェ曲線を自分で描画しないといけないため知識がないと一苦労だが、このチートシートさえあれば自分のような情弱でもサクっとリッチなアニメーションを作成できてしまうのである。

これは今後ほんとにお世話になりそうだ。

 

2013/09/23 _onichannn , , ,

【Javascript】null、undefindの判定方法。

比較演算子を用いずともifに渡せば適切に評価してくれる模様。

var str = null;
if(str){
	// 処理
}

undefindも同様なので割愛。

ちなみに。

if(1){
	// true
}
if(0){
	// false
}
if(-1){
	// true
}

最後が重要。

 

2013/09/22 _onichannn , ,

【Javascript】ランダムな整数を生成する。

戒メモシリーズ。

Javascriptの超基本。教科書の1ページ目レベル。いい加減覚えろ俺。

// 0~99
var num = Math.floor(Math.random()*100);

// 0~50
var num = Math.floor(Math.random()*51);

// 50~70
var num = 50 + Math.floor(Math.random()*21);

 

2013/09/22 _onichannn , ,

【Javascript】GoogleChartsのCandlestickChartで遊んでみた。


GraphApiの中でも異彩を放つCandlestickChartがどの程度カスタマイズできるのか試してみた。

まずは公式リファレンスをざっと読んでみる。

https://developers.google.com/chart/interactive/docs/gallery/candlestickchart

さらっと目を通しただけでもかなりの数のプロパティが確認できる。これはワクテカがとまらない。

ということで網羅的にいろんなオプションをいじってグラフ生成スクリプトを組んでみた。

まずは必要なライブラリをヘッダー内で読みこむ。
※グラフ描画領域の幅を取得するのにjQueryを使用しているので、ここではjQueryも読み込む。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="//www.google.com/jsapi">
<script type="text/javascript" src="//www.google.com/jsapi"></script><script type="text/javascript">
	google.load('visualization', '1', {packages: ['corechart']});
</script>

そして要のスクリプト部分は以下のようにしてみた。

<script type="text/javascript">
function drawVisualization() {
	var width = $('#chart_div').width()-70;
	var data = google.visualization.arrayToDataTable([["09-01",150,150,150,150],["09-02",150,150,150,150],["09-03",150,150,150,150],["09-04",150,150,150,150],["09-05",150,150,150,150],["09-06",150,150,150,150],["09-07",150,150,150,150],["09-08",150,150,150,150],["09-09",150,150,150,150],["09-10",150,150,150,150],["09-11",150,150,150,150],["09-12",150,150,150,150],["09-13",150,150,150,150],["09-14",150,150,150,150],["09-15",150,150,150,150],["09-16",150,150,150,150],["09-17",150,150,150,150],["09-18",150,150,150,150],["09-19",150,150,150,150],["09-20",150,150,150,150],["09-21",150,150,150,150],["09-22",150,150,150,150],["09-23",150,150,150,150],["09-24",150,150,150,150],["09-25",150,150,150,150],["09-26",150,150,150,150],["09-27",150,150,150,150],["09-28",150,150,150,150],["09-29",150,150,150,150],["09-30",150,150,150,150]], true);
	var options = {
		legend:'none',
		colors:['#7fff00'],
		fontName:'meiryo',
		animation:{
			duration:'600',
			easing:'out'
		},
		backgroundColor:{
			fill:'#000',
			stroke:'#7fff00',
			strokeWidth:'5'
		},
		candlestick:{
			hollowIsRising:true,
			fallingColor:{
				fill:'#FFF',
				stroke:'#7fff00',
				strokeWidth:'1'
			},
			risingColor:{
				fill:'#000',
				stroke:'#7fff00',
				strokeWidth:'1'
			}
		},
		chartArea:{
			left:'50',
			top:'20',
			width:width,
			height:'90%'
		},
		vAxis:{
			baseline:'0',
			baselineColor:'#FFF',
			gridlines:{
				color:'#444',
				count:'10'
			},
			minorGridlines:{
				color:'#222',
				count:'3'
			},
			textStyle:{
				color:'#FFF',
				fontSize:'12'
			},
			title:'Price of a stock',
			titleTextStyle:{
				color:'#FFF',
				fontSize:'12',
				bold:false,
				italic:false
			}     
		},
		hAxis:{
			textStyle:{
				color:'#FFF',
				fontSize:'12'
			},
			maxAlternation:'1',
			slantedText:false
		},
		tooltip:{
			textStyle:{
				color:'#333',
				fontSize:'12',
				bold:false
			}
		}
	};
	var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
	var button = document.getElementById('b1');
	var drawChart = function(){
		button.disabled = true;
		google.visualization.events.addListener(chart, 'ready', function(){
			button.disabled = false;
		});
		chart.draw(data, options);
	};
	button.onclick = function(){
		var prevClose = null;
		var newOpen = null;
		var newClose = null;
		var newHigh = null;
		var newLow = null;
		for(i = 0; i < data.getNumberOfRows(); i++){
			newOpen = (prevClose) ? prevClose : Math.floor(Math.random()*300);
			newClose = Math.floor(Math.random()*300);
			newHigh = newOpen + Math.floor(Math.random()*100);
			newlow = Math.floor(Math.random()*newClose);
			prevClose = newClose;
			data.setValue(i, 1, newlow);
			data.setValue(i, 2, newOpen);
			data.setValue(i, 3, newClose);
			data.setValue(i, 4, newHigh);
		}
		drawChart();
	}
	drawChart();
}
google.setOnLoadCallback(drawVisualization);
</script>

マークアップは以下の通りグラフ描画領域とトリガーのみ。

<div id="chart_div" style="width: 100%; height: 500px;"></div>
<button id="b1" style="margin-top:20px">Randomize</button>

そして上記のスクリプトを実行すると以下のようになる。

これは激熱。グラフAPIくっそ面白い！笑

 

2013/09/22 _onichannn , ,

【jQuery】左右でスライド開閉するメニューを実装する。

jQueryプラグインの「Sidr」を使用。

http://www.berriart.com/sidr/

まずは上記URLからプラグインをダウンロード。

展開して出てきたCSS及びJSをヘッダー内で読み込む。

■CSS
※「Dark」、「light」のいずれかを読み込めばよい

<!-- ダークカラーベース -->
<link rel="stylesheet" type="text/css" href="jquery.sidr.dark.css" />
<!-- ライトカラーベース -->
<link rel="stylesheet" type="text/css" href="jquery.sidr.light.css" />

■Javascript
※ヘッダー内かボディタグ終了直前で読み込む

<script type="text/javascript" src="jquery.sidr.min.js"></script>

■マークアップ

<div id="sidr">
  <h3>メニューヘッダー</h3>
  <ul>
    <li><a href="javascript:void(0)">メニュー</a></li>
    <li class="active"><a href="javascript:void(0)">メニュー</a></li>
    <li><a href="javascript:void(0)">メニュー</a></li>
    <li><a href="javascript:void(0)">メニュー</a></li>
    <li><a href="javascript:void(0)">メニュー</a></li>
    <li><a href="javascript:void(0)">メニュー</a></li>
  </ul>
</div>

あとはメニューを開閉するためのトリガーを任意の要素に結び付けてあげればOK。

以下トリガーの設定例。

<button type="button" id="sidr-trigger">Menu</button>

例えば上記のようなIDを持つボタンをトリガーに設定したい場合は下記のような感じ。

<script>
$(function(){
	$('#sidr-trigger').sidr();
})
</script>

これでボタンに対してトリガーが割り当てられる。めっちゃ簡単。
加えてsidr()関数にオプションを渡すことでメニューの開閉速度などを好みに設定することが可能。

$('#sidr-trigger').sidr({
	// 開閉スピード
	speed:500,
	// メニューの位置（left or right）
	side:'right'
	// jQueryのセレクターを指定可能
	source:'#selector'
});

sourceに関数を渡すとコールバックとして実行してくれたりもする。
その他のパラメーターは公式サイトを参照されたし。

 

2013/09/22 _onichannn , ,

【jQuery】動的にスクリプトを読み込む方法。

スクリプト実行中にライブラリを動的読み込みしたい時とか。

$.getScript('//example.com/ex.js', function(){
	// 任意のコード
})

$.getScript()を用いることで、外部JSを動的に読み込むことが出来る。第二引数にてコールバックを指定すれば、スクリプトファイルの読み込み完了後に実行してくれるので非常に便利。

 

2013/09/18 _onichannn , ,