SQLの窓 イラストAC フリー素材

2014年11月10日

二回目のロードは無視する、JavaScrip ライブラリの基本スケルトン

一般によく使われている、グローバル変数を作成しない実行として、(function(仮引数){処理})(実引数); という形になっています。

テストに、正規表現を使った置き換えを使用していますが、これを最初作った当時(2009年)は全角の空白は対象外だったと思いますが今は全部OK です。

※ 参考 / MDN : String.prototype.trim()

リンク先では、IE に関するバグ報告が、\u00A0 に関して書かれていますが、IE8 以前の問題でした。

▼ 漢字スペースと \u00A0 と 半角スペースを含めてテストしています
<script type="text/javascript">
// **************************************
// 無駄なグローバル変数を定義しない
// **************************************
(function(jslibname) {
	if (!window[jslibname]) {
		console.log("1回目の実行です");
		window[jslibname] = {
			// プロパティ
			version: 1.01
			,
			// メソッド
			trim : function( str ) {
				return str.replace(/^\s+|\s+$/g,'');
			}
		};
	}
})("mylib");

(function(jslibname) {
	if (!window[jslibname]) {
		window[jslibname] = {
			// プロパティ
			version: 1.01
			,
			// メソッド
			trim : function( str ) {
				return str.replace(/^\s+|\s+$/g,'');
			}
		};
	}
	else {
		console.log("2回目は実行されません");
	}
})("mylib");

</script>
<input 
	type="button" 
	value="trimメソッドの実行" 
	onClick='alert("|"+mylib.trim("\u00A0   abc   ")+"|");'>
<input 
	type="button" 
	value="純正trimメソッドの実行" 
	onClick='alert("|"+"\u00A0   abc   ".trim()+"|");'>


タグ:javascript
posted by at 2014-11-10 19:32 | JavaScript | このブログの読者になる | 更新情報をチェックする

2014年11月07日

ブックマークレットから、ページ中央に固定する IFRAME ウインドウを作成する

position = 'fixed'; 等 により、ページをスクロールしても、IFRAME が画面中央に留まります






これで何をするかというと、この IFRAME の中に SCRIPT 要素を document.write して、画面作成します。画面が出来たら、元々の親ページをコントロールする機能を実装します。

▼ ブックマークレット
ページ中央固定 IFRAME

<a href="javascript:if(!window['_bI']){window._bI={};(function(w,h,b,z,v,c){var%20wnd=document.createElement('iframe');with(wnd){width=w;height=h;with(style){border='solid%20'+b+'px%20#000000';position='fixed';left='50%';top='50%';zIndex=z;display=v;marginLeft=(((w/2)*-1)+'px');marginTop=(((h/2)*-1)+'px');borderRadius='8px';boxShadow='0%2015px%2010px%20-10px%20rgba(0,0,0,0.5),0%201px%204px%20rgba(0,0,0,0.3),0%200%2040px%20rgba(0,0,0,0.1)%20inset';}}document.body.appendChild(wnd);window._bI.wnd=wnd;wnd.contentWindow.document.write('<style>body{background-color:#'+c+';}</style>');wnd.contentWindow.document.close();})(400,200,1,1000,'','DDE8BE');}" onclick=" 
		alert('ブックマークバーにドロップか、IEでは右クリックでお気に入りに登録(お気に入りバー)が簡単です'); 
		if (window.navigator.appName.toLowerCase().indexOf('microsoft') > -1) { 
			event.returnValue = false; 
		} 
		event.preventDefault(); 
		event.stopPropagation();
	">ページ中央固定 IFRAME</a>
上のコードは、ブックマークレット登録用に作成されています。以下のコードは、内容を正しく確認する為に通常の整形をしたものです。
<script type="text/javascript">
if (!window['_bI']) {
    window._bI = {};
    (function(w, h, b, z, v, c) {
        var wnd = document.createElement('iframe');
        with(wnd) {
            width = w;
            height = h;
            with(style) {
                border = 'solid ' + b + 'px #000000';
                position = 'fixed';
                left = '50%';
                top = '50%';
                zIndex = z;
                display = v;
                marginLeft = (((w / 2) * -1) + 'px');
                marginTop = (((h / 2) * -1) + 'px');
                borderRadius = '8px';
                boxShadow = '0 15px 10px -10px rgba(0,0,0,0.5),0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset';
            }
        }
        document.body.appendChild(wnd);
        window._bI.wnd = wnd;
        wnd.contentWindow.document.write('<style>body{background-color:#' + c + ';}</style>');
        wnd.contentWindow.document.close();
    })(400, 200, 1, 1000, '', 'DDE8BE');
}
</script>

window['_bI']

window['_bI'] は、window._bI というプロパティが定義されていない場合にのみ処理を行うようにしたもので、処理が行われると、window._bI = {}; が実行されて、2回目以降はなにも実行されなくなります。
※ 最初は、window['_bI'] は undefined です。

IFRAME を作成

document.createElement で、動的に iframe 要素を作成して、その iframe の属性を設定する為に、with(wnd) ブロック内で iframe の プロパティを設定しています。document.createElement で作成された要素は、そのままでは有効にならず、document.body.appendChild(wnd); で本体の body に追加されて有効(表示される)になります。

※ 23行目で、window._bI に作成した iframe をセットしているので、後からプロパティの変更が可能です。

IFRAME の背景色を設定

wnd.contentWindow.document.write によって( 最後に wnd.contentWindow.document.close() が必要です )、自由に iframe 内にコンテンツを作成する事ができます。この時点では、まだ CSS だけですが、画面定義や外部参照ライブラリによって iframe 内を JavaScript だけで完成させる事ができます


関連する記事

親(parent) フレームに jQuery が無い場合に jQuery をインストールする。



posted by at 2014-11-07 13:32 | JavaScript | このブログの読者になる | 更新情報をチェックする

2014年10月10日

JavaScript の全ての オブジェクトに同じ機能を持たせる

Object オブジェクトには、JavaScript のその他のすべてのオブジェクトが含まれます。このため、このオブジェクトのメソッドとプロパティのすべてを、その他のすべてのオブジェクトが使用できます。



ただ、これを実行してしまうと、あらゆる処理に影響が出るので、このページでも実行できませんでした。
<input onclick="test()" type="button" value="TEST">
<script type="text/javascript">

// 全ての JavaScript オブジェクトに プロパティを追加
Object.prototype.myVersion = "lightbox 1.1"

// 関数オブジェクトの定義
function MyFunc () {
	this.Version = "1.2"
}

function test() {

	console.log( "String:" + "全ての文字列".myVersion );

	// 引数
	console.log( "arguments:" + arguments.myVersion );

	// Boolean オブジェクト
	console.log( "Boolean:" + (1==1).myVersion );

	console.log日付オブジェクト
	var dateObj = new Date();
	console.log( "Date:" + dateObj.myVersion );

	// 関数オブジェクト
	console.log( "Function:" + test.myVersion );

	var f = new MyFunc();
	console.log( "Function:" + f.myVersion + " ,固有は " + f.Version + " です" );

	// Math オブジェクト
	console.log( "Math:" + Math.myVersion );

	// Number オブジェクト
	console.log( "Number:" + (1).myVersion );

	// RegExp オブジェクト
	console.log( "RegExp:" + RegExp.myVersion );

	// Regular Expression オブジェクト
	console.log( "Regular Expression:" + (/pattern/).myVersion )
}

</script>



posted by at 2014-10-10 12:29 | JavaScript | このブログの読者になる | 更新情報をチェックする

2014年09月25日

JavaScript : コンボボックスの OPTION 部分の操作でたいていのテクニック

コンボボックスのリストを全て削除

▼ 実際の実行
<script type="text/javascript">
function resetCombo() {

	var combo = document.frm1.combo1
	combo.length = 0;

}
</script>
<form name="frm1">
	<select name="combo1"
		style='width:150px;'>
		<option value="1">データ1
		</option>
		<option value="2">データ2
		</option>
		<option value="3">データ3
		</option>
		<option value="4">データ4
		</option>
	</select>
</form>
<input type="button"
	value="全て削除"
	onclick='resetCombo();'>
一つづつ削除する場合は、combo.remove(index) です。


コンボボックスにリストを追加する

▼ 実際の実行
<script type="text/javascript">
function addCombo() {

	var combo = document.frm2.combo2;
	var option = null;

	for( i = 0; i < 4; i++ ) {
		option = document.createElement("option");
		option.value = i+1;
		option.text = "オプション"+(i+1);
		combo.appendChild(option)
	}

}
</script>
<form name="frm2">
	<select name="combo2"
		style='width:150px;'>
	</select>
</form>
<input type="button"
	value="データ追加"
	onclick='addCombo();'>
コンボボックスにリストを挿入する

▼ 実際の実行
<script type="text/javascript">
function insertOption() {

	var combo = document.frm3.combo3;
	var option = document.createElement("option");
	option.value = 1.5;
	option.text = "データ1.5";
	combo.insertBefore(option,combo.options[1]);
}
</script>
<form name="frm3">
	<select name="combo3"
		style='width:150px;'>
		<option value="1">データ1
		</option>
		<option value="2">データ2
		</option>
		<option value="3">データ3
		</option>
		<option value="4">データ4
		</option>
	</select>
</form>
<input type="button"
	value="リスト挿入"
	onclick='insertOption();'>
コンボボックスのリスト移動する

▼ 実際の実行
<script type="text/javascript">
function moveOption() {

	var combo = document.frm4.combo4;
	combo.insertBefore(combo.options[1],combo.options[3]);
}
</script>
<form name="frm4">
	<select name="combo4"
		style='width:150px;'>
		<option value="1">データ1
		</option>
		<option value="2">データ2
		</option>
		<option value="3">データ3
		</option>
		<option value="4">データ4
		</option>
	</select>
</form>
<input type="button"
	value="リスト移動"
	onclick='moveOption();'>
コンボボックスのテキスト部分を取得

▼ 実際の実行
<script type="text/javascript">
function getOptionText() {

	var combo = document.frm5.combo5;
	alert( combo.options[2].text );

}
</script>
<form name="frm5">
	<select name="combo5"
		style='width:150px;'>
		<option value="1">データ1
		</option>
		<option value="2">データ2
		</option>
		<option value="3">データ3
		</option>
		<option value="4">データ4
		</option>
	</select>
</form>
<input type="button"
	value="リスト参照"
	onclick='getOptionText();'>
コンボボックスの選択状態を操作する

▼ 実際の実行
<script type="text/javascript">
function selectOption() {

	var combo = document.frm6.combo6;
	combo.selectedIndex = 2;

}
function noSelectOption() {

	var combo = document.frm6.combo6;
	combo.selectedIndex = -1;

}
</script>
<form name="frm6">
	<select name="combo6"
		style='width:150px;'>
		<option value="1">データ1
		</option>
		<option value="2">データ2
		</option>
		<option value="3">データ3
		</option>
		<option value="4">データ4
		</option>
	</select>
</form>
<input type="button"
	value="データ3を選択"
	onclick='selectOption();'>
<input type="button"
	value="未選択"
	onclick='noSelectOption();'>
昔はこの方法は使え無いブラウザがあったかもしれません。全て直感的な操作ですが、本来 options コレクションに対して実行するような内容が、コンボボックスに直接可能になっています。



タグ:javascript
posted by at 2014-09-25 23:54 | JavaScript | このブログの読者になる | 更新情報をチェックする

2014年05月24日

JavaScript : 文字列で表現された日付を論理チェック

業界では、日付の妥当性チェックを日付論理チェックと言ったりします。(ひょっとしたら死語かもしれませんが)

JavaScript の Date オブジェクトの実装は試してみると解りますが、結構中途半端です。結局日付チェックとしては後述のような結構長い記述になってしまいます。

"2014/03/01".isDate() とかすると、true が返ります。

あと、通常は未入力をエラーとしたくないので "".isDate() は true が返ります。

フォーマットチェックは、/^\d{4}\/[\d]+\/[\d]+$/ です。
<script type="text/javascript">
String.prototype["isDate"] = function() {
	var str = this.valueOf();
	if ( str == "" ) {
		return true;
	}
	if ( !str.match(/^\d{4}\/[\d]+\/[\d]+$/) ) { 
		return false; 
	} 
	var parts = str.split( "/" );
	var nYear = Number(parts[0]); 
	var nMonth = Number(parts[1]) - 1;
	var nDay = Number(parts[2]);
	// 月,日の妥当性チェック 
	if ( 0 <= nMonth && nMonth <= 11 && 1 <= nDay && nDay <= 31 ) { 
		var dt = new Date(nYear, nMonth, nDay); 
		if( isNaN(dt) ) { 
			return false; 
		}
		else if(
			dt.getFullYear() == nYear &&
			dt.getMonth() == nMonth &&
			dt.getDate() == nDay ) {
			return true;
		}
		else{ 
			return false;
		}
	}
	else{ 
		return false;
	}
};

var str = "2014/2/29";
console.log(str.isDate());

</script>
このコードで重要な部分は( このチェックと言うより、Date オブジェクトの特性 )
if(
	dt.getFullYear() == nYear &&
	dt.getMonth() == nMonth &&
	dt.getDate() == nDay ) {
	return true;
}
のところで、new Date(nYear, nMonth, nDay) で渡す 月と日で正しく無い内容でも、起点となる日付の経過日数として換算して、オブジェクトが作成されてエラーとならないからです。出来上がった日付と、最初の文字列が同じならば意図した結果ですが、そうで無い場合はいわゆる『論理エラー』となっています。
posted by at 2014-05-24 00:53 | JavaScript | このブログの読者になる | 更新情報をチェックする

2014年03月15日

HighslideJS 用貼り付けコード作成

HighslideJS は、LightboxShadowbox と同様の画像やコンテンツをページの中央でギャラリー的に表示するライブラリです。Lightbox は画像用として、Shadowbox はオールマイティ、HighslideJS は、HTML が強いと思います。

ライセンスは、商用で使わなければフリーです。

ただ、実際問題 WEB 上で使うとなると、HighslideJS は少々敷居が高いので、簡単に HTML コードを作成するツールがこちらです。



※ プレビューが可能です。
※ クリップボード経由でコードをすぐ取得できます



posted by at 2014-03-15 22:57 | JavaScript | このブログの読者になる | 更新情報をチェックする

2014年02月27日

テキストエリアに入れた JSON データをチェックするコード(F12等の開発者ツールも使う) / JSON.stringify と JSON.parse

事前に JSON 文字列をテキストエリアにセットしていますが、置き換えて使用します。( そのままでもテストできます )
もう一つのテキストエリアには、一旦 JSON 化したオブジェクトをタブで整形して再度出力しています。この際、一旦内部文字列に変換されるので、\u7d75\u3092 というような文字列は元に戻って読めるようになります。


▼ HTML と JavaScript
<input type="button" value="console.dir で出力(F12等でデベロッパーツールを開いておいて下さい)" onclick='console.dir(JSON.parse(document.getElementById("json_data").value))'><br><textarea id="json_data" style='width:600px;height:500px;'>{
    "id": 91500526,
    "simple_array": [1,2,3,4,5],
    "object_array": [
        {"high":1,"middle":2,"low":3},
        {"high":4,"middle":5,"low":6},
        {"high":71,"middle":81,"low":91}
    ],
    "profile_background_tile": false,
    "notifications": false,
    "profile_sidebar_fill_color": "FFF7CC",
    "location": "\u5927\u962a\u5e9c",
    "screen_name": "sworc",
    "profile_image_url": "http:\/\/a0.twimg.com\/profile_images\/2388651010\/zmq5cwm5nsvngpfrtr3f_normal.png",
    "contributors_enabled": false,
    "utc_offset": 32400,
    "time_zone": "Osaka",
    "is_translator": false,
    "default_profile": false,
    "profile_background_color": "000000",
    "name": "night w\u00e1lker",
    "geo_enabled": false,
    "lang": "ja",
    "protected": true,
    "profile_background_image_url": "http:\/\/a0.twimg.com\/profile_background_images\/59645045\/bbs_img_4598c0b36c78d.jpg",
    "id_str": "91500526",
    "listed_count": 6,
    "profile_link_color": "FF0000",
    "follow_request_sent": false,
    "description": "\u7d75\u3092\u63cf\u304f\u30d7\u30ed\u30b0\u30e9\u30de\u3002\u597d\u304d\u306a\u98df\u3079\u7269\u306f\u6c34\u9903\u5b50\u3002\u624b\u66f8\u304d\u30d6\u30ed\u30b0\u3002DAZ3D\u3002GIMP\u3002Three.js\u3002\u30d5\u30ea\u30fc\u30d5\u30a9\u30f3\u30c8\u3067\u7c21\u5358\u30ed\u30b4\u4f5c\u6210\u3000http:\/\/lightbox.on.coocan.jp\/html\/fontImage.php http:\/\/goo.gl\/HDqTM",
    "profile_use_background_image": true,
    "following": false,
    "profile_text_color": "0C3E53",
    "url": "http:\/\/winofsql.jp\/",
    "friends_count": 25,
    "profile_background_image_url_https": "https:\/\/si0.twimg.com\/profile_background_images\/59645045\/bbs_img_4598c0b36c78d.jpg",
    "created_at": "Sat Nov 21 04:24:25 +0000 2009",
    "default_profile_image": false,
    "profile_sidebar_border_color": "F2E195",
    "verified": false,
    "status": {
        "in_reply_to_status_id_str": null,
        "geo": null,
        "place": null,
        "created_at": "Sun Sep 23 16:49:33 +0000 2012",
        "in_reply_to_user_id_str": null,
        "retweeted": false,
        "in_reply_to_screen_name": null,
        "truncated": false,
        "possibly_sensitive_editable": true,
        "possibly_sensitive": false,
        "id_str": "249913404016427008",
        "contributors": null,
        "in_reply_to_status_id": null,
        "in_reply_to_user_id": null,
        "favorited": false,
        "source": "\u003Ca href=\"http:\/\/winofsql.jp\/\" rel=\"nofollow\"\u003ETwitLink\u003C\/a\u003E",
        "coordinates": null,
        "id": 249913404016427008,
        "retweet_count": 0,
        "text": "\u5bb6\u306b\u6301\u3061\u5e30\u3063\u305f mdb \u3067\u7c21\u5358\u306b php \u304b\u3089\u30a2\u30af\u30bb\u30b9\u3057\u3066\u30c6\u30b9\u30c8\u30d7\u30ed\u30b0\u30e9\u30e0\u3092\u4f5c\u308b( DB\u30af\u30e9\u30b9\u4ed8\u304d ) http:\/\/t.co\/bDzKDGLY"
    },
    "favourites_count": 1,
    "statuses_count": 6120,
    "profile_image_url_https": "https:\/\/si0.twimg.com\/profile_images\/2388651010\/zmq5cwm5nsvngpfrtr3f_normal.png",
    "followers_count": 55
}</textarea>

<input type="button" value="JSON化した内部文字列をタブで整形します" onclick='document.getElementById("json_result").value=JSON.stringify( JSON.parse(document.getElementById("json_data").value),null,"\t" )'><br><textarea id="json_result" style='width:600px;height:500px;'></textarea>


posted by at 2014-02-27 00:21 | JavaScript | このブログの読者になる | 更新情報をチェックする

2014年02月14日

エレメント(主にPRE)を選択状態にする

HTMLやスクリプトでできた部品を埋め込む為に、クリップボードを利用する場合、一般的には テキストエリアにコードを表示させて、ユーザがクリップボードを使いやすいようにするのがコード提供側で最も簡単な方法です。textarea に対して、select メソッドを実行するだけなので、テキストエリアそのものに以下のように仕込むだけです

<textarea onclick="this.select();">この文字列を選択</textarea>
しかし、選択肢としては汎用性を持たせる為に、PRE 要素内を使用するのもいいかと思います。正攻法で実装すると少し面倒ですが、jQuery を使うと汎用性も出て来ます。
エレメント(ここでは PRE)を選択状態にする
ここを選択します
ここの文字列は、CSS の設定によって改行コードを挿入しなくても、自動的に折り返すようになっています。また、overflow: hidden; によって、選択状態を枠の中に納めています。さらに、CSS での効果もいろいろ期待できます。

▲ の正攻法の実装コード
<a
	href='javascript:void(0);'
	onclick='
		if (window.navigator.appName.toLowerCase().indexOf("microsoft") > -1) {
			var s = document.selection;
			var range = s.createRange( );
			range.moveToElementText(document.getElementById("my_src"))
			range.select();
		}
		else {
			var s = window.getSelection();
			s.selectAllChildren(document.getElementById("my_src"));
		}
	'
>エレメント(ここでは PRE)を選択状態にする</a>
<style>
#my_src {
	white-space: pre;
	white-space: pre-wrap;
	white-space: -pre-wrap;
	white-space: -o-pre-wrap;
	white-space: -moz-pre-wrap;
	white-space: -hp-pre-wrap;
	word-wrap: break-word;
	overflow: hidden;
	border-radius: 10px;
	box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
</style>
<pre id="my_src" style="width:400px;border: 1px solid #000000;padding:10px;">
ここを選択します
</pre>

indexOf("microsoft") > -1 に関しては、IE10 までの対応です。IE11 からは下のほうの処理が実行されます( 元々この処理方法は、Microsodt 製品内で行っていたので、それにあわせて IE11 での仕様変更で microsoft の文字列がなくなっており、選択処理の仕様も他のブラウザと同じになりました )

以下のように jQuery を使うと若干記述が簡潔になります。
jQueryで選択状態にする
ここを選択します
ここの文字列は、CSS の設定によって改行コードを挿入しなくても、自動的に折り返すようになっています。また、overflow: hidden; によって、選択状態を枠の中に納めています。さらに、CSS での効果もいろいろ期待できます。
<style>
#my_src2 {
	white-space: pre;
	white-space: pre-wrap;
	white-space: -pre-wrap;
	white-space: -o-pre-wrap;
	white-space: -moz-pre-wrap;
	white-space: -hp-pre-wrap;
	word-wrap: break-word;
	overflow: hidden;
	border-radius: 10px;
	box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
</style>

<script>
if ( !window.jQuery ) {
	document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js\"></"+"script>");
}
</script>
<script>
$(function(){
	$("#click_text").click(function(){
		if (window.navigator.appName.toLowerCase().indexOf("microsoft") > -1) {
			var s = document.selection;
			var range = s.createRange();
			range.moveToElementText($("#my_src2")[0]);
			range.select();
		}
		else {
			var s = window.getSelection();
			s.selectAllChildren($("#my_src2")[0]);
		}
	}).css({ cursor: "pointer", textDecoration: "underline" });
});
</script>

<span id="click_text">jQueryで選択状態にする</span>
<pre id="my_src2" style="width:200px;border: 1px solid #000000;padding:10px;">
ここを選択します
ここの文字列は、CSS の設定によって改行コードを挿入しなくても、自動的に折り返すようになっています。また、overflow: hidden; によって、<strong><span style="color:#CB0032;">選択状態を枠の中に納めています。</span></strong>さらに、CSS での効果もいろいろ期待できます。
</pre>



posted by at 2014-02-14 21:50 | JavaScript | このブログの読者になる | 更新情報をチェックする

2013年10月15日

JS : function() {} という『無名の処理』の理解

JavaScript は結構難解な言語です。ですが、これだけは押さえて置かなければなりません。

まずはサンプル
<input type="button" id="target" value="ボタンのイベント">
<script type="text/javascript">

document.getElementById("target").addEventListener(
	"click",
	function(){
		alert("こんにちは");
		setTimeout(
			function(){
				alert("3秒後");
			},
			3000
		);
	}
);

</script>

このコードで表示されるボタンをクリックすると、まず『こんにちは』とメッセージボックスが表示されて、それを閉じた3秒後に再びメッセージボックスで『3秒後』と表示されます

通常の認識では、addEventListener ではイベントを登録し、setTimeout では処理を書くようになっている所に、いずれも function() {} という『無名の処理』が記述されて、正しく動作します。

さらに、『無名』ではありますが、名前を使わずに記述そのものを実行する手段も存在します( Windows8 のストアアプリの JavaScript 版ではいきなりこんなのが出て来ます )
<input type="button" id="target" value="ボタンのイベント" onclick="test();">
<script type="text/javascript">

function test() {

	(function(){alert("こんにちは");}) ();

}

</script>


こうなると、C言語的には完全に関数のポインタで、C# 的にはデリゲートで、C# では function() {} のかわりに () => {} というラムダ式を使う事になります。とにかく、function() {} だけでは実行のされないブロックが定義されるだけで、それを実行するにはそれなりの場所へ記述する事になります。これらはインラインとか、インナーとかで表現されるもので、本来定義しておいて名前を付けて後で使うという処理を手っ取り早く『その場で使う』為の記法です。

という前提で jQuery の $(function(){}); を考えるといいと思います。

 jQuery を試すには


関連する記事


posted by at 2013-10-15 00:06 | JavaScript | このブログの読者になる | 更新情報をチェックする

2012年11月18日

GoogleVisualizationAPIを使用したブラウザ比率の円グラフ(2009年3月〜) / IE がまだ半分を占めてます

こちらからページ全体表示


データはウチのサイトのアクセスログのデータです。Webalizer というソフトが入ってるので、そのログを利用しています。

軽快でかっこいいです。( やけに軽いのは VML のせいです )
ウチのサイトは技術サイトなので、ユーザが使っているブラウザは一般より偏ってる可能性あります。

以下は、JavaScript のみの簡単で誰でもすぐ使えるソースコードです
JavaScript : 誰でもすぐ使える Google 円グラフ


タグ:JavaScrpt google
posted by at 2012-11-18 17:57 | JavaScript | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します