SQLの窓

2014年02月01日


JavaScript の function を外部に置いて、jQuery の ajax で読み出して SCRIPT 要素の innerHTML で動的に関数定義する

通常の div 等の innerHTML に script 要素ごと文字列設定はできませんが、script 要素に対して innerHTML に関数文字列をセットすると、関数が作成されます。但し、上書きはできないので同名の関数は追加で script 要素が必要になります。

しかし、この script 要素を削除しても、関数そのものはメモリに残るようなので、ここでは script 要素は削除しています。( デベロッパーツールで見てみると script 要素がなくなっていました )

外部のテキストは、Google の仮想ディレクトリを使って設置しています( access-control-allow-origin:* を返してくれます )
<script>
if ( !window.jQuery ) {
	document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js\"></"+"script>");

}
</script>
<script type="text/javascript">
function set_script1() {
	$.get( "https://googledrive.com/host/0B9Jymqpro6gSVlB5Wm52U29wTlE/ajax/functionByAjax.txt", function(data) {
		var obj = document.createElement("script");
		document.body.appendChild(obj);
		obj.innerHTML = data;
		document.body.removeChild(obj);
	});
}
function set_script2() {
	var obj = document.createElement("script");
	document.body.appendChild(obj);
	obj.innerHTML = "function message2(p) { alert(\"2:\"+p) }";
	document.body.removeChild(obj);
}

</script>
<input type="button" value="定義1実行" onclick='set_script1()'>
<input type="button" value="定義2実行" onclick='set_script2()'>
<input type="button" value="実行1" onclick='functionByAjax("こんにちは")'>
<input type="button" value="実行2" onclick='message2("こんにちは")'>
定義1 は、外部からの取り出しです。内容は以下のようになっています。

https://googledrive.com/host/0B9Jymqpro6gSVlB5Wm52U29wTlE/ajax/functionByAjax.txt
function functionByAjax(a) {
    alert( "\u30e1\u30c3\u30bb\u30fc\u30b8 : (" + a + ") " );
}



posted by lightbox at 2014-02-01 20:29 | Ajax:jQuery | このブログの読者になる | 更新情報をチェックする

JavaScript オブジェクト作成の4態

1) 通常 JSON 記法
2) 無名 function 記法
3) 有名 function による インスタンス作成
<script type="text/javascript">

var obj1 =  {
	myobj: {
		func: function(){ return this.value },
		value: "OK"
	}
}

var obj2 = new function() {
	this.myobj = {
		func: function(){ return this.value },
		value: "OK"
	}
}

function obj() {
	this.myobj = {
		func: function(){ return this.value },
		value: "OK"
	}
}

var obj3 = new obj();

console.dir(obj1.myobj.func());
console.dir(obj2.myobj.func());
console.dir(obj3.myobj.func());
console.dir(obj1);
console.dir(obj2);
console.dir(obj3);
</script>


この結果では当然ですが、有名ファンクションでは『型』は function 名となっています。

さらに、もう一つの形として、Object 型の最初から myobj を設定しておくと以下のようになります。
<script type="text/javascript">
Object.prototype.myobj = {
	func: function(){ return this.value },
	value: "OK"
}

var obj1 =  {
}

var obj2 = new function() {
	this.myobj = {
		func: function(){ return this.value },
		value: "OK"
	}
}

console.dir(obj1.myobj.func());
console.dir(obj2.myobj.func());
console.dir(obj1);
console.dir(obj2);
</script>


空のオブジェクトでも、myobj が使用可能になりますが、全てのオブジェクトに対して定義されてしまいます。しかし、同名のプロパティを上書きするとそちらが有効になります。





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

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

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

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

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


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

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

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

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

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



フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり