SQLの窓

2016年10月10日


JavaScript : 入力文字列を 変数用16進数表現 に変換する

\u を使って、ソースコードに埋め込む文字列として、キャラクタセットに依存せずにコードを作成する為に使用します。( "あ" == "\u3042" )
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function htmlentities2() {
	var a = $("#do_encode").val();
	var w = "";
	var n = 0;
	var p;
	for( var i = 0; i < a.length; i++ ) {
		p = (a.charCodeAt(i)).toString(16);
		if ( p.length > 2 || a.substr( i, 1 ) == "\"" || a.substr( i, 1 ) == "'" ) {
			w += "\\u" + ("00"+p).substr(2+p.length-4,4);
		}
		else {
			w += a.substr( i, 1 );
		}
	}
	$("#result").text( w );
}
</script>
<input id="do_encode" type="text" size="60">
<br>
<input
	type="button"
	value="入力文字列を alert 用16進数表現 に変換"
	onclick='htmlentities2()'>
<pre id="result"></pre>

※ JavaScript外部ファイル を charset を使用せずに作成する為に htmlentitie と併用します。


関連する記事

JS : 入力文字列を htmlentitie に変換する


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

JavaScript : 入力文字列を htmlentity に変換する

一文字づつプログラムで判断して、都合のいいように変換する方法です。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function htmlentities() {
	var a = $("#do_encode").val();
	var w = "";
	for( var i = 0; i < a.length; i++ ) {
		if ( $("#check").prop("checked") ) {
			if ( a.substr(i,1) == '&' ) {
				w += "&amp;";
			}
			else if ( a.substr(i,1) == '<' ) {
				w += "&lt;";
			}
			else if ( a.substr(i,1) == '>' ) {
				w += "&gt;";
			}
			else if ( a.substr(i,1) == '"' ) {
				w += "&#" + a.charCodeAt(i) + ";";
			}
			else if ( a.substr(i,1) == "'" ) {
				w += "&#" + a.charCodeAt(i) + ";";
			}
			else {
				if ( $("#check_jp").prop("checked") ) {
					if ( a.charCodeAt(i) > 255 ) {
						w += "&#" + a.charCodeAt(i) + ";";
					}
					else {
						w += a.substr(i,1);
					}
				}
				else {
					w += a.substr(i,1);
				}
			}
		}
		else {
			w += "&#" + a.charCodeAt(i) + ";";
		}
	}
	$("#result").text( w );
}
</script>
<input id="do_encode" type="text" size="60">
<br>
<input
	type="button"
	value="入力文字列を htmlentitie に変換"
	onClick='htmlentities()'>
<br>
<label for="check">変換を必要最低限にする</label>
<input type="checkbox" id="check">
 / 
<label for="check_jp">但し、日本語は変換する</label>
<input type="checkbox" id="check_jp">
<br>
▼ 以下に表示されます
<pre id="result"></pre>
&# を使用して数字で文字列を表す方法に変換します

変換後の文字列は、ボタンの下に表示されます。選択してコピーして下さい。

この文字列は alert 内では、文字列の代替えとしては使用できません


/
▼ 以下に表示されます


関連する記事

JavaScript : 入力文字列を 変数用16進数表現 に変換する



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

2016年07月08日


HTML5 で行われる入力チェックを :invalid :valid 疑似クラスと JavaScript を使用してリアルタイムにエラーを視認させる

単純な、メッセージのカスタマイズは以下をご覧下さい
HTML5 で行われる入力チェックのエラーメッセージをカスタマイズする JavaScript の記述

ここでは、さらに CSS で :invalid と :valid 疑似クラスを使用する事によって、常に色を使ってエラーの状態をユーザに訴えます。

:valid で枠線を緑に指定

エラーが無ければ、この状態になります

:invalid で枠線を赤に指定

この指定によって、ここでは未入力チェックとして required を指定しているフィールドが最初から枠線が赤くなります。

required と pattern で色を変える

まず、CSS で、クラスに required と pattern で別の色を指定します。いずれも、枠線の太さを太くし(IE11 は元々そうなるので正しくコントロールできませんでした)、背景色を別々に設定します。

さらに、oninvalid(FORM 送信時のイベント) で、対応するクラスを追加してやると、required では、背景がピンクになり、pattern では背景がオレンジになります。

リアルタイムに色を変える

このままでは、送信時にしか色が変わらないので、onchange イベントを追加して、oninvalid と同じ内容を追加します。そうすると、入力した内容が変化する毎に色が変わる事になります。

※ いずれも、oninput で $(this).removeClass("required pattern"); が必要です。
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<style>
input:invalid {
	border: 1px solid red;
}
input.required:invalid {
	border: 2px solid red;
	background-color: pink;
}
input.pattern:invalid {
	border: 2px solid red;
	background-color: orange;
}

input:valid {
  border: 1px solid green;
}
</style>

<script>
$(function(){
	$("#mydata")
		.on("invalid", function(e){
			if ( e.currentTarget.validity.valueMissing ) {
		                this.setCustomValidity("必須入力です");
				$(this).addClass("required");
			}
			if ( e.currentTarget.validity.patternMismatch ) {
		                this.setCustomValidity("数値を入力して下さい");
				$(this).addClass("pattern");
			}
		})
		.on("change", function(e){
			if ( e.currentTarget.validity.valueMissing ) {
		                this.setCustomValidity("必須入力です");
				$(this).addClass("required");
			}
			if ( e.currentTarget.validity.patternMismatch ) {
		                this.setCustomValidity("数値を入力して下さい");
				$(this).addClass("pattern");
			}
		})
		.on("input",function(){
			$(this).removeClass("required pattern");
			this.blur();
			this.setCustomValidity("");
			this.focus();
		});
});
</script>

<form
	action="http://winofsql.jp/php_get.php"
	target="myframe1"
	accept-charset="utf-8">
	<input
		type="text"
		id="mydata"
		name="mydata"
		required
		pattern="[0-9]+">
	<input type="submit" name="send" value="送信">
</form>
<iframe
	name="myframe1"
	frameborder="1"
	scrolling="yes"
	width="100%" height="100"
	style="margin-top:10px;">
</iframe>



タグ:jquery HTML5
posted by lightbox at 2016-07-08 16:54 | Comment(0) | JavaScript | このブログの読者になる | 更新情報をチェックする

HTML5 で行われる入力チェックのエラーメッセージをカスタマイズする JavaScript の記述( この手のコントロールはとてもデリケートです。いろいろなパターン検証が必要です )

このサンプルでは、required 属性と pattern 属性でのエラー結果のメッセージをカスタマイズしています。また、JavaScript のイベント部分の登録には jQuery を使用しています。

validity の下には以下のようなプロパティがあり(Google Chrome 調べ)、個別に対応が可能なようです。
badInput
customError
patternMismatch
rangeOverflow
rangeUnderflow
stepMismatch
tooLong
tooShort
typeMismatch
valid
valueMissing
※ 実践しないと詳細は解りませんが、だいたいの意味は MDN で日本語で書かれています。
customError だけは特殊なプロパティのようで、invalid イベントの中で、setCustomValidity を実行して空文字以外を指定していると true になるようです。
しかも、実行順序とか関係無く、記述されていると invalid の中ではそうなっていました
▼ 何もカスタマイズしないで、デフォルトエラー発生後、コンソールで確認したものです。 required 属性の場合は、未入力だと valueMissing になり、pattern の対象外だと、patternMismatch になりました。詳細は未調査ですが、思ったような対応はおそらく可能だと思います。 ▼ 参考にした Stack Overflow HTML5 form required attribute. Set custom validation message? Stack Overflow でも書かれていますが、oninput での処理が重要となります。(そもそも、この手の validate 処理は、業務アプリでは重要になります。やっと、HTML でそれがサポートされるようにはなりましたが、結果的には JavaScript の力を借りる事は避けられないようです。)
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
$(function(){
	$("#mydata")
		.on("invalid", function(e){
			if ( e.currentTarget.validity.valueMissing ) {
		                this.setCustomValidity("必須入力です");
			}
			if ( e.currentTarget.validity.patternMismatch ) {
		                this.setCustomValidity("数値を入力して下さい");
			}
		})
		.on("input",function(){
			this.blur();
			this.setCustomValidity("");
			this.focus();
		});
});
</script>

<form
	action="http://winofsql.jp/php_get.php"
	target="myframe1"
	accept-charset="utf-8">
	<input
		type="text"
		id="mydata"
		name="mydata"
		required
		pattern="[0-9]+">
	<input type="submit" name="send" value="送信">
</form>
<iframe
	name="myframe1"
	frameborder="1"
	scrolling="yes"
	width="100%" height="100"
	style="margin-top:10px;">
</iframe>
oninput で setCustomValidity("") でカスタムメッセージをクリアしているのは、例えば、required だけメッセージを変更していた場合、setCustomValidity("") でクリアしなければ、pattern のエラーになっているにもかかわらず 『必須入力です』 と表示されてしまいます。

そこで、setCustomValidity("") でクリアだけ実行すると、 『必須入力です』 というメッセージが表示されている状態のままで数字以外を入力すると、 『デフォルトのpattern のエラーメッセージ』 が表示されますい。これが、required のカスタマイズだけなら正しいのですが、pattern のメッセージもカスタマイズしている場合に新しいメッセージに切り替わりません。

そこで、いったんフォーカスを外して現在の表示をキャンセルして setCustomValidity("") でカスタムメッセージをクリアして、フォーカスを戻すという処理を行っています
textarea で pattern 属性は使用できません ( MDN のドキュメント ) 関連する記事 HTML5 で行われる入力チェックを :invalid :valid 疑似クラスと JavaScript を使用してリアルタイムにエラーを視認させる
タグ:jquery HTML5
posted by lightbox at 2016-07-08 13:39 | Comment(0) | JavaScript | このブログの読者になる | 更新情報をチェックする

2015年08月01日


テーブルのセルをクリックして背景色を rgb(0,0,0) から #000000 の変換で、eval を使う事の考察

ちょっとした文字列処理でいろいろな解法があると思うのですが、eval 使うと一番簡単に作れると思います。rgb と言う関数を用意しておいて、eval( "rgb(0,0,0)" ) で rgb 関数の戻り値が eval メソッドの戻り値として返って来ます。もし、rgb という関数名にはちょっと違和感感じるのであれば、"rgb(0,0,0)".replace("rgb","関数名") で関数名は好きにできます。

ですが、無条件に eval 使うのはあまり良く無いので、引数部分だけ取り出して eval してみました。引数部分ならば、処理は必ず自分の関数内で行われるので、問題を排除するのは容易だと思います。

ただ、ここまでするのであれば、eval を使う意味もあまり無いのも事実ですが、処理分割がとてもはっきりされた上に、やっている事の内容が解りやすいコードになったと思います。

1) 正規表現で、rgb( n,n,n ) の引数部分である "n,n,n" を取得
2) 新たに関数部分を付加して eval で実行
3) 処理関数( a, b, c ) で個別の処理を記述する

3) は、いきなり eval で使える関数です
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function __myrgb1(a){
	var str  = "__myrgb2("+a+")";
	return eval(str);
}
function __myrgb2(a,b,c){
	return	"#"+(
		((a<16)?"0":"")+
		a.toString(16)+
		((b<16)?"0":"")+
		b.toString(16)+
		((c<16)?"0":"")+
		c.toString(16)
	).toUpperCase();
}
$(function(){
	$("td").click(function(){
		a = $(this).css("background-color");
		a.match(/rgb\((.+?)\)/);
		alert( __myrgb1(RegExp.$1) );

	});
});
</script>



white black whitesmoke yellowgreen
aliceblue antiquewhite aqua aquamarine
azure beige bisque yellow
blanchedalmond blue blueviolet brown
burlywood cadetblue chartreuse chocolate
coral cornflower cornsilk crimson
cyan darkblue darkcyan darkgoldenrod
darkgray darkgreen darkkhaki darkmagenta
darkolivegreen darkorange darkorchid darkred
darksalmon darkseagreen darkslateblue darkslategray
darkturquoise darkviolet deeppink deepskyblue
dimgray dodgerblue firebrick floralwhite
forestgreen fuchia gainsboro ghostwhite
gold goldenrod gray green
greenyellow honeydew hotpink indianred
indigo ivory khaki lavender
lavenderblush lawngreen lemonchiffon lightblue
lightcoral lightcyan lightgoldenrodyellow lightgreen
lightgrey lightpink lightsalmon lightseagreen
lightskyblue lightslategray lightsteelblue lightyellow
lime limegreen linen magenta
maroon mediumaquamarine mediumblue mediumorchid
mediumpurple mediumseagreen mediumslateblue mediumspringgreen
mediumturquoise mediumvioletred midnightblue mintcream
mistyrose moccasin navajowhite navy
oldlace olive olivedrab orange
orangered orchid palegoldenrod palegreen
paleturquoise palevioletred papayawhip peachpuff
peru pink plum powderblue
purple red rosybrown royalblue
saddlebrown salmon sandybrown seagreen
seashell sienna silver skyblue
slateblue slategray snow springgreen
steelblue tan teal thistle
tomato turquoise violet wheat


posted by lightbox at 2015-08-01 19:11 | JavaScript | このブログの読者になる | 更新情報をチェックする

2014年10月27日


JavaScript & VBScript : ブラウザから Windows の OS のバージョンを判定

Windows では IE だけで無く、HTA(mshta.exe) や オブジェクト(InternetExplorer.Application)経由でこの方法を利用する事ができます。

VBS ボタンは、IE11 のエミュレーションで IE10 以前に変更すると動作します。IE11 のまま動作させるには、HTML 側で事前に対処する必要があります。



IE11 で VBScript を使う場合の注意事項 ( 古い社内アプリ移行時必見 )
<script type="text/javascript">
// ***********************************************
// Windows 環境での OS チェック
// ***********************************************
function checkOS() {
	if ( (window.navigator.userAgent).indexOf( "NT 5.0" ) != -1 ) {
		alert("Windows2000")
	}
	if ( (window.navigator.userAgent).indexOf( "NT 5.1" ) != -1 ) {
		alert("WindowsXP")
	}
	if ( (window.navigator.userAgent).indexOf( "NT 6.0" ) != -1 ) {
		alert("WindowsVista")
	}
	if ( (window.navigator.userAgent).indexOf( "NT 6.1" ) != -1 ) {
		alert("Windows7")
	}
}
</script>
<input type="button" value="JS" onClick="checkOS()">



<script type="text/vbscript">
' ***********************************************
' IE11 のエミレータで IE10 以前で動作します
' ***********************************************
Function checkOS() 
	if instr( window.navigator.userAgent & "", "NT 5.0" ) <> 0 then
		alert("Windows2000")
	end if
	if instr( window.navigator.userAgent & "", "NT 5.1" ) <> 0 then
		alert("WindowsXP")
	end if
	if instr( window.navigator.userAgent & "", "NT 6.0" ) <> 0 then
		alert("WindowsVista")
	end if
	if instr( window.navigator.userAgent & "", "NT 6.1" ) <> 0 then
		alert("Windows7")
	end if
End Function
</script>

<input type="button" value="VBS" onClick="Call checkOS" language="VBScript">

初回投稿 : 2009-10-02


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

2014年10月02日


JavaScript : ブラウザ判定( IE11 対応 )

IE11 の登場で少し変わりました(IE11 を一意に識別することが必要な場合があります。 その場合は、Trident トークンを使ってください)

IEのシェアは大きいですが、実際問題として IE6、IE7、IE8、IE9、IE10 が存在します。IE 以外では Firefox と Google Chrome を少なくとも視野にいれる必要があります。( あと、Safari もあります )

そういえば、『Operaが独自路線を転換、ブラウザエンジンをWebKitに切り替え』 なんで、気苦労が少し減りますが、相変わらず IE は増える一方で・・・・

ちにみに、jQuery 1.9 では、$.browser は削除されています
<script>
function browser_name() {
	var userAgent = window.navigator.userAgent.toLowerCase();
	var appVersion = window.navigator.appVersion.toLowerCase();

	if (userAgent.indexOf("msie") > -1) {
		if (appVersion.indexOf("msie 6.0") > -1) {
			alert("IE6");
		}
		else if (appVersion.indexOf("msie 7.0") > -1) {
			alert("IE7");
		}
		else if (appVersion.indexOf("msie 8.0") > -1) {
			alert("IE8");
		}
		else if (appVersion.indexOf("msie 9.0") > -1) {
			alert("IE9");
		}
		else if (appVersion.indexOf("msie 10.0") > -1) {
			alert("IE10");
		}
		else {
			alert("Unknown");
		}
	}
	else if (userAgent.indexOf("trident/7.0") > -1) {
		alert("IE11");
	}
	else if (userAgent.indexOf("firefox") > -1) {
		alert("Firefox");
	}
	else if (userAgent.indexOf("opera") > -1) {
		alert("Opera");
	}
	else if (userAgent.indexOf("chrome") > -1) {
		alert("Google Chrome");
	}
	else if (userAgent.indexOf("safari") > -1) {
		alert("Safari");
	}
	else {
		alert("Unknown");
	}
}
</script>
<input type="button" value="表示" onclick="browser_name();">



関連する記事
prototype.js の Browser メソッドを転用して jQueryの名前空間へ投入。IE バージョンも含めてブラウザ(仕様)判定 String オブジェクトにメソッドとして実装 IE と それ以外の判定方法として "ie".browser() で判定できます。 ▼ 実際の実行


<script type="text/javascript">

String.prototype.browser = function() {
	var userAgent = window.navigator.userAgent.toLowerCase();
	var appVersion = window.navigator.appVersion.toLowerCase();
	var target = this.valueOf();

	if (userAgent.indexOf("msie") > -1) {
		if (appVersion.indexOf("msie 6.0") > -1) {
			return ( target == "ie6" || target == "ie" );
		}
		else if (appVersion.indexOf("msie 7.0") > -1) {
			return ( target == "ie7" || target == "ie" );
		}
		else if (appVersion.indexOf("msie 8.0") > -1) {
			return ( target == "ie8" || target == "ie" );
		}
		else if (appVersion.indexOf("msie 9.0") > -1) {
			return ( target == "ie9" || target == "ie" );
		}
		else if (appVersion.indexOf("msie 10.0") > -1) {
			return ( target == "ie10" || target == "ie" );
		}
		else {
			return false;
		}
	}
	else if (userAgent.indexOf("trident/7.0") > -1) {
		return ( target == "ie11" || target == "ie" );
	}
	else if (userAgent.indexOf("firefox") > -1) {
		return ( target == "firefox" );
	}
	else if (userAgent.indexOf("opera") > -1) {
		return ( target == "opera" );
	}
	else if (userAgent.indexOf("chrome") > -1) {
		return ( target == "chrome" );
	}
	else if (userAgent.indexOf("safari") > -1) {
		return ( target == "safari" );
	}
	else {
		return false;
	}
}
</script>
<select id="browser">
	<option value="chrome">chrome
	</oprion>
	<option value="firefox">firefox
	</oprion>
	<option value="opera">opera
	</oprion>
	<option value="safari">safari
	</oprion>
	<option value="ie11">ie11
	</oprion>
	<option value="ie10">ie10
	</oprion>
	<option value="ie9">ie9
	</oprion>
	<option value="ie8">ie8
	</oprion>
	<option value="ie7">ie7
	</oprion>
	<option value="ie6">ie6
	</oprion>
	<option value="ie">ie
	</oprion>
</select>
<input type=button
	value="ブラウザ判定"
	onclick='alert((document.getElementById("browser").value).browser())'>

jQuery の名前空間に登録
<script>
if ( window[window.location.hostname+'.loadjQuery'] !== true ) {
	window[window.location.hostname+'.loadjQuery'] = true;
	if ( !window.jQuery ) {
		document.write("<"+"script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></"+"script>");
	}
}
</script>
<script>
$.extend({
	browser_name: (function(){
	var userAgent = window.navigator.userAgent.toLowerCase();
	var appVersion = window.navigator.appVersion.toLowerCase();
	var browser_string = "unknown"

		if (userAgent.indexOf("msie") > -1) {
			if (appVersion.indexOf("msie 6.0") > -1) {
				browser_string = "IE6";
			}
			else if (appVersion.indexOf("msie 7.0") > -1) {
				browser_string = "IE7";
			}
			else if (appVersion.indexOf("msie 8.0") > -1) {
				browser_string = "IE8";
			}
			else if (appVersion.indexOf("msie 9.0") > -1) {
				browser_string = "IE9";
			}
			else if (appVersion.indexOf("msie 10.0") > -1) {
				browser_string = "IE10";
			}
		}
		else if (appVersion.indexOf("trident/7.0") > -1) {
			browser_string = "IE11";
		}
		else if (userAgent.indexOf("firefox") > -1) {
			browser_string = "Firefox";
		}
		else if (userAgent.indexOf("opera") > -1) {
			browser_string = "Opera";
		}
		else if (userAgent.indexOf("chrome") > -1) {
			browser_string = "Chrome";
		}
		else if (userAgent.indexOf("safari") > -1) {
			browser_string = "Safari";
		}
		return browser_string;

	})()
});

console.log($.browser_name);

</script>

▼ オリジナルコード
http://winofsql.jp/VA003334/infoboard.php?id=070828100942&mid=sjscript&pid=3


IE と それ以外だけの判定
<script type="text/javascript">

	var ie = window.navigator.appName.toLowerCase().indexOf("microsoft") > -1;
	ie |= window.navigator.userAgent.toLowerCase().indexOf("trident/7.0") > -1;
	if (ie) {
		// IE 用
		console.log("IE");
	}
	else {
		// IE 以外用
		console.log("IE以外");
	}

</script>



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

2014年09月27日


Firefox、IE11 の canvas で動作する楕円( ellipse )関数

ellipse 関数は、Google Chrome で動作しますが、現時点で Firefox と IE11 で動作してなかったので、計算で Google Chrome の ellipse をエミュレートしました。
<style type="text/css">
#circle {
	border: solid 1px #000000;
}
</style>

<canvas id="circle"></canvas>

<script type="text/javascript">
	var canvas = document.getElementById("circle");
	canvas.width = 300;
	canvas.height = 300;
	var draw = canvas.getContext("2d");

	draw.beginPath();
	draw.fillStyle = "#c0c0c0";

	ellipse( draw, 80, 50, 100, 85, 0, Math.PI*2, false);
	draw.fill();
	draw.lineWidth = 3;
	draw.stroke();

// *********************************
// 楕円関数
// *********************************
function ellipse( obj, x, y, a, b, o1, o2, o3 ) {
	draw.save();
	draw.scale( 1, b / a );
	draw.arc(x, y+((a-b)+((y-a)-(y-a)*(b/a)))*(a/b), a, o1, o2, o3);
	draw.restore();

}
</script>
save と restore は、伸縮する楕円の枠線の太さが変わらないようにする処理です。計算は、scale による伸縮による座標の移動を逆計算したものです。


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

2014年04月02日


文字列を UTF-8(2バイト以上) で表現した時の 16進数表現の文字列を取得する

 という文字を UTF-8 で保存して、コードをダンプすると以下のようになります
          0  1  2  3  4  5  6  7  8  9  A  B  C  D  E  F
------------------------------------------------------------
00000000 E3 81 82                                         縺
つまり、目的は "E38182" という文字列を取得する事です。この場合は、encodeURIComponent を使うと、% が付加されますが、殆どの文字は正しく変換されます。中に仕様上若干変換されませんが、UTF-8 で、2バイト以上の文字の開始バイトは、Cx,Dx,Ex,Fxで、2バイト目は 8x,9x,Ax,Bx なので以下のように書けます
<script type="text/javascript">
function toUtf8Code(str) {
	var _x = encodeURIComponent(str);
	_x = _x.replace(/%/g,"");
	return _x;
}
</script>
<input type="text" id="target_string">
<input type="button" value="変換" onclick='alert(toUtf8Code(document.getElementById("target_string").value))'>

関連する記事

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

2014年03月20日


ブログで jQuery を使用するのに、全ての記事で使うわけでは無いので、記事毎でロードする

Google では、有名な JavaScript ライブラリは、バージョン別にホスティングされています。当然、jQuery もあるので普通に使っています。
<script>
if ( !window.jQuery ) {
	if ( typeof window[window.location.hostname+'.loadjQuery'] === 'undefined' ) {
		if ( window.addEventListener ) {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js';
		}
		else {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js';
		}
	}
	document.write("<"+"script src=\"" + window[window.location.hostname+'.loadjQuery'] + "\"></"+"script>");
}
</script>
普通のページでは、ページのヘッダに jQuery の読込みは終わっているという事を想定し、その場合はそちらを使うようになっています。もし、そのページで、その記事より前に jQuery が読み込まれていない場合のみ、この処理が実行されます。

その場合も、IE の環境では、バージョンによってうまく動かない事があったので、window.addEventListener があるか無いかで対象バージョンを分けています。その際の URL も、window[window.location.hostname+'.loadjQuery'] の内容を使っているので、この記事より前に意図的に URL を変更する事によって、そのバージョンの jQuery を使用できるようにしています。( 特定のバージョンで処理した場合を想定しています )



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

2014年03月06日


JavaScript による2会話アプリケーションのコントロール(2)

▼ pass1 開始 ボタンと pass2 開始 ボタンをクリックして下さい。


 
------------------------------






class 属性を使用して、会話グループ単位に使用可能にしたり使用不能にしたりします

<script type="text/javascript">
function passControl(idstr,pass,enable) {
	var x = window[idstr];
	for( var i = 0; i < x.length; i++ ) {
		if ( x[i].className == pass ) {
			if ( (x[i].tagName).toUpperCase() == 'INPUT' ) {
				if ( (x[i].type).toUpperCase() == 'TEXT' ) {
					if ( enable ) {
						x[i].readOnly = false;
						x[i].style.backgroundColor = "#DCF2F5";
					}
					else {
						x[i].readOnly = true;
						x[i].style.backgroundColor = "#ccc";
					}
				}
				if ( (x[i].type).toUpperCase() == 'BUTTON' ) {
					if ( enable ) {
						x[i].disabled = false;
					}
					else {
						x[i].disabled = true;
					}
				}
			}
			if ( (x[i].tagName).toUpperCase() == 'TEXTAREA' ) {
				if ( enable ) {
					x[i].readOnly = false;
					x[i].style.backgroundColor = "#DCF2F5";
				}
				else {
					x[i].readOnly = true;
					x[i].style.backgroundColor = "#ccc";
				}
			}
			if ( (x[i].tagName).toUpperCase() == 'SELECT' ) {
				if ( enable ) {
					x[i].disabled = false;
				}
				else {
					x[i].disabled = true;
				}
			}
		}
	}
}
function getFormEntry(idstr) {

	// 親要素
	var js_form = document.getElementById(idstr);

	// 配列
	var arr = new Array();

	// input
	var wk = js_form.getElementsByTagName("input");
	for( i = 0; i < wk.length; i++ ) {
		arr.push( wk[i] );
	}

	// textarea
	var wk = js_form.getElementsByTagName("textarea");
	for( i = 0; i < wk.length; i++ ) {
		arr.push( wk[i] );
	}

	// select
	var wk = js_form.getElementsByTagName("select");
	for( i = 0; i < wk.length; i++ ) {
		arr.push( wk[i] );
	}

	window[idstr] = arr;
	console.dir( window[idstr] );

}
</script>
<style type="text/css">
#js_form2 {
	width: 400px;
	padding: 20px;
	border: 1px solid #888;
	border-radius: 10px;
}
</style>
<input type="button" value="pass1 開始" onclick='passControl("js_form2","pass1",true);passControl("js_form2","pass2",false)'>
<input type="button" value="pass2 開始" onclick='passControl("js_form2","pass1",false);passControl("js_form2","pass2",true)'>
<br><br>
<pre id="js_form2">
<input type="text" id="in01" class="pass1"> <input type="button" id="bt01" value="第1会話ボタン" class="pass1">
------------------------------
<input type="text" id="in02" class="pass2">
<input type="text" id="in03" class="pass2">
<textarea id="tx01" class="pass2"></textarea>
<select id="cb01" class="pass2">
<option value="001">001</option>
<option value="002">002</option>
</select>

<input type="button" id="bt02" value="第2会話ボタン" class="pass2">
</pre>
<script type="text/javascript">
getFormEntry("js_form2");
</script>
関連する記事

JavaScript による2会話アプリケーションのコントロール(1)


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

JavaScript による2会話アプリケーションのコントロール(1)

以下のような画面から、まず対象となるコントロールとして、INPUT、TEXTAREA、SELECT の一覧を配列として取得します
 
------------------------------






getFormEntry("js_form"); で取得した配列は、window.js_form として参照可能です。( つまり、js_form というグローバルスコープの変数になります )
<script type="text/javascript">
function getFormEntry(idstr) {

	// 親要素
	var js_form = document.getElementById(idstr);

	// 配列
	var arr = new Array();

	// input
	var wk = js_form.getElementsByTagName("input");
	for( i = 0; i < wk.length; i++ ) {
		arr.push( wk[i] );
	}

	// textarea
	wk = js_form.getElementsByTagName("textarea");
	for( i = 0; i < wk.length; i++ ) {
		arr.push( wk[i] );
	}

	// select
	wk = js_form.getElementsByTagName("select");
	for( i = 0; i < wk.length; i++ ) {
		arr.push( wk[i] );
	}

	window[idstr] = arr;
	console.dir( window[idstr] );

}
</script>
<style type="text/css">
#js_form {
	width: 400px;
	padding: 20px;
	border: 1px solid #888;
	border-radius: 10px;
}
</style>
<pre id="js_form">
<input type="text" id="in01" class="pass1"> <input type="button" id="bt01" value="第1会話ボタン" class="pass1">
------------------------------
<input type="text" id="in02" class="pass2">
<input type="text" id="in03" class="pass2">
<textarea id="tx01" class="pass2"></textarea>
<select id="cb01" class="pass2">
<option value="001">001</option>
<option value="002">002</option>
</select>

<input type="button" id="bt02" value="第2会話ボタン" class="pass2">
</pre>
<script type="text/javascript">
getFormEntry("js_form");
</script>

関連する記事

JavaScript による2会話アプリケーションのコントロール(2)


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

2014年01月23日


JavaScript : Global な undefined 変数に絡むいろいろ

undefined プロパティ

上のリンクは、Microsoft のドキュメントですが、undefined という変数が最初から定義されていて、undefined という特殊な値が入っている事を意味します。

但し、この変数は内容を変更できてしまいますので、確実な値は void( 0 ) を使います。また、ブラウザでは Global オブジェクトと window オブジェクトは同じものであるという事も以下の例で確かめる事ができます。

さらに、定義済の変数は、直接 undefined という値で比較できまかすが、未定義の値は typeof(未定義変数) == 'undefined' という比較方法になります。
<script type="text/javascript">
// テスト用の alert
function alertx(message) {
	console.log(message);
//	alert(message);
}

try {
	// 定義済なので実行可能です
	alertx("定義した未設定の変数の中身 = " + undefined);
	// 未定義なのでエラーになります
	alertx(un_defined);
}catch(e){alertx("未定義変数の参照エラー = "+e.message)}

(function(){
	// 中身を書き換える事ができます
	// ※ ローカルからグローバルにアクセスしています
	window.undefined = "undefined 変数の書き換え";
	// un_defined を定義して、undefined 値をセット
	window.un_defined = void(0);
})();

// ローカルからセットした値が有効です
alertx("undefined の内容 = "+undefined);
alertx("un_defined の内容 = "+un_defined);

var x;
if ( x === un_defined ) {
	alertx("未設定の変数の中身は、void(0)の結果と同じ(定義済の変数とは比較可能)");
}

try {
	if ( y === un_defined ) {
		alertx("if で 未定義の y を参照してエラーになり、ここは実行されません");
	}
}catch(e){alertx("未定義変数の参照エラー = "+e.message)}

if ( typeof(y) == 'undefined' ) {
	alertx("未定義変数かどうかのチェックです");
}




</script>



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

2013年12月26日


簡易縦書き変換

縦書きに向かない文字をいくつか違う記号に変換します。
(Yahoo! ニュースを変換してテストしていました。)



一行の文字数
句点で改行を入れる
改行数
改行は自分で入れる
( 縦書き変換後の文字列を貼り付けて、改行を一つ入れると投稿可能になります )


し電  る時り▲ィ前  ると話晦ルモ電
て話そ と間にや|後各 べかが日コ、気
いのの しにく▼チか社 くらつかムK通
る利た てわくおャらに 控、なら、D信
。用め いたなめ|約よ え▼が元イD事
 を、 るりるでフ3れ るおり日|I業
 一場 。配ことォ0ば よめにに・、者
 時合  信とうン分、 うでくかアソ協
 的に  遅がメに間大 アとくけクフ会
 によ  延予|よは晦 ナうなてセト▼
 制っ  が想ルる、日 ウコるのスバT
 限て  発さ▲▼スか ン|こ約はンC
 すは  生れがおマら スルと21クA
 るユ  す、集め|元 し・が時2モ▲
 こ|  るメ中でト日 たメ予間月バ、
 とザ  可|しとフの 。|想は2イN
 も|  能ル、うォ午  ルさ、5ルT
 あの  性もつコン前  ▲れ携日、T
 る携  が約な|や0  をる帯、ウド
 と帯  あ2がルフ時  なこ電大ィコ

http://headlines.yahoo.co.jp/hl?a=20131225-35041886-cnetj-sci


	text = text.replace(/[”“]/g, "●");
	text = text.replace(/[(【[{『《≪]/g, "▼");
	text = text.replace(/[)】]}』》≫]/g, "▲");
	text = text.replace(/「/g, "▼");
	text = text.replace(/」/g, "▲");
	text = text.replace(/…/g, ":");
	text = text.replace(/[ー〜]/g, "|");

関連する記事

Twitter 縦書き intent



posted by lightbox at 2013-12-26 11:34 | JavaScript | このブログの読者になる | 更新情報をチェックする

2013年12月10日


ブラウザの WebGL チェック : jQuery 名前空間へ変数($.is_webgl)追加

以下のチェック部分のコードは、実際に Three.js のデモで使われていたものです。再度検証していますが正しく動いています。しかし、将来的に正しく動作するかどうかは解らないので、document.implementation.hasFeature("webgl","") でチェックする方法もいずれは考慮する必要があるかもしれません。

document.implementation.hasFeature("webgl","") は、IE を含めた主要なブラウザで動作する事を確認はしていますが、Opera NEXT のみ実装と hasFeature が一致しない可能性があります。
<script>
if ( window[window.location.hostname+'.loadjQuery'] !== true ) {
	window[window.location.hostname+'.loadjQuery'] = true;
	if ( !window.jQuery ) {
		document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js\"></"+"script>");
	}
}
</script>
<script>
$.extend({
	is_webgl: (function() {
		try {
			return !! window.WebGLRenderingContext && !! document.createElement( 'canvas' ).getContext( 'experimental-webgl' ); 
		}
		catch( e ) {
			return false;
		}
	})()
});

console.log( $.is_webgl );
</script>




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

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

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

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

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


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

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

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

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

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


Windows
container 終わり

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

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり