JavaScriptのprototypeをつかったオブジェクト指向サンプルソース

セレクトボックスで選択した値に応じて特定要素の表示を切り替える11行のJavaScriptを
prototypeを使ったオブジェクト指向の組み方などでがっちりかためてみたサンプルです。

$(function(){
	var ui_selecter = $('select[data-script*="visible-selector"][data-target]');
	if(ui_selecter[0]) ui_selecter.each(function(i, o) {
		if($($(o).attr('data-target'))[0]) $(o).on('change', function() {
			var current = $(this).find('option[data-id]:selected'),
				$target = $($(o).attr('data-target')).find('[data-id="' + current.attr('data-id') + '"]');
			if($target[0]) $target.show().siblings('[data-id]').hide();
		});
		$(o).trigger('change');
	});
});

See the Pen visible selector by webdev (@webdev-jp-net) on CodePen.0

線分の角度を取得するJavaScript

javascriptで線分の角度を取得します。

Math.atan2 でラジアン単位の角度を取得してから度数法に変換しています。

var redian = Math.atan2((終点Y座標 - 始点Y座標), (終点X座標 - 始点X座標));
var angle = redian * (180 / Math.PI); // ラジアンを度数へ変換

See the Pen Get angle of line segment by webdev (@webdev-jp-net) on CodePen.0

Vue.js の イベント装飾子で preventDefault と stopPropagation

Vue.js 2では、テンプレートでイベント装飾子を使うと簡単にpreventDefaultやstopPropagationを定義できます。

参考:
イベントハンドリング – Vue.js

event.preventDefault -> .prevent

<a href="#" @click.prevent="ファンクション">link</a>

event.stopPropagation -> .stop

<a href="#" @click.stop="ファンクション">link</a>

重ね付け

<a href="#" @click.prevent.stop="ファンクション">link</a>

サンプル

formの枠をクリックで背景色が点滅
リンク先の設定してあるリンクにclickイベントを付与し、.preventと.stopのサンプル
actionでURLが設定してあるformのbuttonにclickイベントを付与し、.preventと.stopのサンプル

See the Pen Vue.js event modifier by webdev (@webdev-jp-net) on CodePen.0

登録なしで地図を組込みたいなら Leaflet.jsで国土地理院地図を表示

2016年の6月からGoogleMapsAPIのサービスが、APIキー必須になったため
無料とはいえ、地図を設置するWEBサイトを登録することが必須になりました。

そこで、代わりというには少し毛色が違うかもしれませんが
ルート検索などの機能はついていないものの、登録なしで自由にさわられる地図表示の仕組みとして
JavaScriptライブラリLeaflet.jsを使い、国土地理院が無料で公開している地理院地図のタイルデータを表示するサンプルを紹介します。

See the Pen Leaflet.jsで国土地理院地図を表示 by webdev (@webdev-jp-net) on CodePen.0

“登録なしで地図を組込みたいなら Leaflet.jsで国土地理院地図を表示” の続きを読む

JavaScriptでカラーコードをHEX(16進数)/RGB変換

HEX(#ff000などの16進数カラーコード)をrgbに変換するJavaScriptです。
HEX指定の色を、半透明にしたくてrgbaコードがほしい時に使いました。

See the Pen HEX <--> RGB by webdev (@webdev-jp-net) on CodePen.0

HEX→RGB

HEXは、R2桁+G2桁+B2桁が集合した6桁なので
この手順でRGBに変換できます。

  1. substringで2桁ずつ3つに分解
  2. parseIntで16進数から10進数に変換

RGB→HEX

HEXからRGBの逆パターンです。

  1. R,G,Bそれぞれの値をparseIntで10進数から16進数に変換
  2. 6桁に結合

IEにも対応 javaScriptでSVGのpathをアニメーション描画

SVGのpathに沿って線が徐々にのびていき描画しているようにみせるアニメーション。

これは、波線を制御するstroke-dashoffsetの値を大きめに設定し0に近づけていくことで実現でき
CSSのアニメーションでも設定できます。

参考:
SVGでアウトラインをカスタマイズしてみよう | Webクリエイターボックス

が!!
IEはver.11(2016年12月現在の最新版)でもこれに対応していないため
何も表示されていない状態で静止してしまいます。

IEでもSVGをアニメーションさせるには、stroke-dashoffsetの値をjavaScriptのループで少しずつ大きくする形で制御します。

See the Pen SVG path drewing by webdev (@webdev-jp-net) on CodePen.0