Webフォームのヘッダータグ内「<head>...</head>」にSCRIPTタグを追加してjQuery、String.format、TraceWriteのライブラリーを取り込みます。
さらにSCRIPTタグを追加して、次のようなJavaScript/jQueryのコードを入力します。
TIP:「html.replace(/</g, '<');」をWebページ上に表示させるには「&」を「&」のように記述します。
Article014.aspx:
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
<script src="js/StringFormat.js"></script>
<script src="js/TraceWrite.js"></script>
<script type="text/javascript">
// jQuery Document Ready Event...
$(function () {
// TraceWriteOption(), TraceWrite()
var opt = new TraceWriteOption();
opt.trace = true;
opt.foreColor = 'red';
opt.bgColor = 'white';
$('.run1JQ').click(function () {
var e = $('#myId')[0];
opt.foreColor = 'red';
TraceWrite('Run 1(JQ): id={0}'.format(e.id), opt);
});
$('.run1JS').click(function () {
var e = document.getElementById('myId');
opt.foreColor = 'blue';
TraceWrite('Run 1(JS): id={0}'.format(e.id), opt);
});
$('.run2JQ').click(function () {
var es = $('div');
opt.foreColor = 'red';
TraceWrite('Run 2(JQ): number of div elements={0}, tagName[0]={1}'.format(es.length, es[0].tagName), opt);
});
$('.run2JS').click(function () {
var es = document.getElementsByTagName('div');
opt.foreColor = 'blue';
TraceWrite('Run 2(JS): number of div elements={0}, tagName[0]={1}'.format(es.length, es[0].tagName), opt);
});
$('.run3JQ').click(function () {
var es = $('.myClass');
opt.foreColor = 'red';
TraceWrite('Run 3(JQ): number of class elements={0}, class={1}'.format(es.length, es[0].className), opt);
});
$('.run3JS').click(function () {
var es = document.getElementsByClassName('myClass');
opt.foreColor = 'blue';
TraceWrite('Run 3(JS): number of class elements={0}, class={1}'.format(es.length, es[0].className), opt);
});
$('.run4JQ').click(function () {
var es = $('div.myClass');
opt.foreColor = 'red';
TraceWrite('Run 4(JQ): number of class elements={0}, class={1}'.format(es.length, es[0].className), opt);
});
$('.run4JS').click(function () {
var es = document.querySelectorAll('div.myClass');
opt.foreColor = 'blue';
TraceWrite('Run 4(JS): number of class elements={0}, class={1}'.format(es.length, es[0].className), opt);
});
$('.run5JQ').click(function () {
var text = $('#myId').text('Hello jQuery!').text();
opt.foreColor = 'red';
TraceWrite('Run 5(JQ): text={0}'.format(text), opt);
});
$('.run5JS').click(function () {
document.getElementById('myId').textContent = 'Hello JavaScript!';
var text = document.getElementById('myId').textContent;
opt.foreColor = 'blue';
TraceWrite('Run 5(JS): text={0}'.format(text), opt);
});
$('.run6JQ').click(function () {
var html = $('#myId').html('<span style="color: red;">Hello jQuery!</span>').html();
html = html.replace(/</g, '<'); // replaceAll()
html = html.replace(/>/g, '>'); // replaceAll()
opt.foreColor = 'red';
TraceWrite('Run 6(JQ): html={0}'.format(html), opt);
});
$('.run6JS').click(function () {
document.getElementById('myId').innerHTML = '<span style="color: blue;">Hello JavaScript!</span>';
var html = document.getElementById('myId').innerHTML;
html = html.replace(/</g, '<'); // replaceAll()
html = html.replace(/>/g, '>'); // replaceAll()
opt.foreColor = 'blue';
TraceWrite('Run 6(JS): html={0}'.format(html), opt);
});
});
</script>
String.format()ライブラリーの内容です。なお「String.format()」については、
「Article012」で解説していますのでそちらを参照してください。
StringFormat.js:
String.prototype.format = String.prototype.f = function () {
var s = this,
i = arguments.length;
while (i--) {
s = s.replace(new RegExp('\\{' + i + '\\}', 'gm'), arguments[i]);
}
return s;
};
今回紹介するTraceWrite()ライブラリーの内容です。
このライブラリーはTraceWriteOption()とTraceWrite()から構成されています。
TraceWriteOption()ではTraceWrite()のオプションを定義します。引数として「trace」「foreColor」「bgColor」を指定します。
引数「trace」はbool型で「true, false」を指定します。引数「foreColor」と「bgColor」ではCSSの前景色、背景色を指定します。
TraceWriteOption()のデフォルト値は「trace=true, foreColor=#000, bgColor=#fff」です。
TraceWrite()では引数(msg)で指定したデータをDIV要素(id="trace")に出力します。これでWebページ上にトレース情報として表示されます。
TraceWrite.js:
// TraceWriteOption()
function TraceWriteOption(trace, foreColor, bgColor) {
this.trace = trace ? trace : true;
this.foreColor = foreColor ? foreColor : '#000';
this.bgColor = bgColor ? bgColor : '#fff';
}
// TraceWrite()
function TraceWrite(msg, option) {
if (!option) {
option = {}; // avoid undefined exception
}
this.trace = option.trace ? option.trace : true;
this.foreColor = option.foreColor ? option.foreColor : '#000';
this.bgColor = option.bgColor ? option.bgColor : '#fff';
if (this.trace) {
var trace = $('div#trace');
var traceData = $(trace).html();
var str = '{0}<br /><span style="color: {1}; background-color: {2};">{3}</span>'.format(traceData, this.foreColor, this.bgColor, msg);
$(trace).html(str);
}
}