2007/09/12 01:43
最近、というか今日から、HTML や ASPX と対になる JS ファイルの書き方を変えてみた。
こんな感じ。
HogePage.js
// HogePage.html を制御するオブジェクトを生成します。
function HogePage()
{
// Fuga ボタンです。
this._fugaButton = document.getElementById("_fugaButton");
// Piyo ボタンです。
this._piyoButton = document.getElementById("_piyoButton");
// Fuga テキストボックスです。
this._fugaTextBox = document.getElementById("_fugaTextBox");
this._registerEventHandlers();
return this;
}
/* Static Members { */
HogePage.piyo = "Piyo";
/* } Static Members */
/* Methods { */
// 各イベントハンドラを登録します。
HogePage.prototype._registerEventHandlers =
function()
{
var _this = this;
this._fugaButton.onclick = function(){_this._fugaButton_Click();};
this._piyoButton.onclick = function(){_this._piyoButton_Click();};
};
// ふがふがします。
HogePage.prototype._fugaFuga =
function()
{
alert("Hello " + this._fugaTextBox.value + "!!");
};
// ぴよぴよします。
HogePage.prototype._piyoPiyo =
function()
{
alert("Hello " + HogePage.piyo + "!!");
};
/* } Methods */
/* Event Handlers { */
// Fuga ボタンのクリック時に呼び出されます。
HogePage.prototype._fugaButton_Click =
function()
{
this._fugaFuga();
};
// Piyo ボタンのクリック時に呼び出されます。
HogePage.prototype._piyoButton_Click =
function()
{
this._piyoPiyo();
};
/* } Event Handlers */
// ページのロード時に HogePage オブジェクトを生成します。
this.onload =
function()
{
new HogePage();
};
要は、ページに対応する JavaScript を一つのオブジェクトにまとめたという感じ。
イベントハンドラの登録が少し遠回りなコードになってしまったのが残念。
ちなみに、これと対になる HogePage.html はこんな。
HogePage.html
<?xml version="1.0" encoding="shift_jis"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>Hoge</title>
<script type="text/javascript" src="HogePage.js"></script>
</head>
<body>
<input id="_fugaTextBox" type="text"/>
<button id="_fugaButton">Fuga</button>
<button id="_piyoButton">Piyo</button>
</body>
</html>
あと、僕の以前の書き方は、このブログの JS ファイルを見るとわかる通り、少し強引に C# っぽく書いていた ＾＾； ( つーか、Setting～メソッド重複部分多すぎ・・・なんでこんな重複コードを平然と書いてるんだオレ・・・ｗ )
こんな感じ。
HogePage.js
// HogePage.html を制御するオブジェクトを生成します。
function HogePage()
{
// Fuga ボタンです。
this._fugaButton = document.getElementById("_fugaButton");
// Piyo ボタンです。
this._piyoButton = document.getElementById("_piyoButton");
// Fuga テキストボックスです。
this._fugaTextBox = document.getElementById("_fugaTextBox");
this._registerEventHandlers();
return this;
}
/* Static Members { */
HogePage.piyo = "Piyo";
/* } Static Members */
/* Methods { */
// 各イベントハンドラを登録します。
HogePage.prototype._registerEventHandlers =
function()
{
var _this = this;
this._fugaButton.onclick = function(){_this._fugaButton_Click();};
this._piyoButton.onclick = function(){_this._piyoButton_Click();};
};
// ふがふがします。
HogePage.prototype._fugaFuga =
function()
{
alert("Hello " + this._fugaTextBox.value + "!!");
};
// ぴよぴよします。
HogePage.prototype._piyoPiyo =
function()
{
alert("Hello " + HogePage.piyo + "!!");
};
/* } Methods */
/* Event Handlers { */
// Fuga ボタンのクリック時に呼び出されます。
HogePage.prototype._fugaButton_Click =
function()
{
this._fugaFuga();
};
// Piyo ボタンのクリック時に呼び出されます。
HogePage.prototype._piyoButton_Click =
function()
{
this._piyoPiyo();
};
/* } Event Handlers */
// ページのロード時に HogePage オブジェクトを生成します。
this.onload =
function()
{
new HogePage();
};
要は、ページに対応する JavaScript を一つのオブジェクトにまとめたという感じ。
イベントハンドラの登録が少し遠回りなコードになってしまったのが残念。
ちなみに、これと対になる HogePage.html はこんな。
HogePage.html
<?xml version="1.0" encoding="shift_jis"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>Hoge</title>
<script type="text/javascript" src="HogePage.js"></script>
</head>
<body>
<input id="_fugaTextBox" type="text"/>
<button id="_fugaButton">Fuga</button>
<button id="_piyoButton">Piyo</button>
</body>
</html>
あと、僕の以前の書き方は、このブログの JS ファイルを見るとわかる通り、少し強引に C# っぽく書いていた ＾＾； ( つーか、Setting～メソッド重複部分多すぎ・・・なんでこんな重複コードを平然と書いてるんだオレ・・・ｗ )
スポンサーサイト
タグ: JavaScript
2006/11/19 22:04
ソースコードの装飾を行うためのJavaScriptクラスライブラリを作ってみました。
概要
動作環境
試してみる
使い方
DecorationContextについて
Download
【 概要 】
ソースコードの装飾を行います。
ソースコードの装飾が動的に行われるため、Webサイトにソースコードを掲載する際に、わざわざ手作業で装飾する必要がなくなります。
現在の所、C#コードの装飾、JavaScriptコードの装飾、XMLの装飾をサポートしています。
また、自分で装飾の規則を作成することもできます。 ( 指定した正規表現にマッチする箇所に対して、文字色・背景色の着色，太字指定，下線指定，フォントサイズ指定，フォントファミリ指定ができます。 )
【 動作環境 】
動作確認済みのブラウザは以下のブラウザになります。その他のブラウザでの動作は未確認です。
【 試してみる 】
テストページを用意しました。
入力エリアにソースコードを入力し、装飾タイプを設定後、実行ボタンをクリックしてみてください。
TextDecoration.js テストページ
【 使い方 】
[ HtmlDecoratorのインスタンス化 ]
まず、YokoKen.TextDecoration.HtmlDecoratorクラスを引数なしでインスタンス化します。
var decorator = new YokoKen.TextDecoration.HtmlDecorator();
[ DecorationContextの生成 ]
DecorationContextについてを参照してください。
[ HtmlDecoratorオブジェクトにDecorationContextオブジェクトを設定 ]
HtmlDecoratorオブジェクトのsetDecorationContextメソッドを使って、DecorationContextオブジェクトを設定してやります。
decorator.setDecorationContext(context);
[ 装飾 ]
装飾したい文字列を引数に指定してdecorateメソッドを使うと、装飾されて戻ってきます。
var textbox1 = document.getElementById("textbox1");
var text = textbox1.value;
var decorationText = decorator.decorate(text);
decorateメソッドに渡す文字列は、HTML化された文字列ではなく、純粋な文字列を渡してください。（ようするに、実体参照とか改行タグとかダメです。）
YokoKen.TextDecoration.HtmlDecorator クラスのparseHtmlToTextという静的メソッドを使えば、実体参照や改行タグを含んだ文字列を純粋な文字列に変換してくれます。（改行タグ以外のタグは含めないで下さい。改行タグ以外は無視します。）
var div1 = document.getElementById("div1");
var text = YokoKen.TextDecoration.HtmlDecorator.parseHtmlToText(div1.innerHTML);
var decorationText = decorator.decorate(text);
【 DecorationContextについて 】
DecorationContextクラスは、装飾規則を表すクラスです。
現在の所、このDecorationContextの生成方法には、以下の方法があります。
[ 予め用意されている着色規則を利用する ]
YokoKen.TextDecoration.Specialized.DecorationContextFactoryオブジェクトのメソッドを使用して、予め用意されているDecorationContextオブジェクトを生成することができます。
現状、このオブジェクトには、以下の３つのメソッドが用意されています。
[ XMLファイルに記述する ]
独自の装飾規則を、XMLファイルに記述して利用することができます。
XMLファイルには、装飾する箇所を示す正規表現の指定、文字色・背景色の着色，太字指定，下線指定，フォントサイズ指定，フォントファミリ指定ができます。 ( もう少し詳しい解説が欲しいという方は、この記事にコメントしてください。 )
XMLファイルに記述する際は、 DecorationContext XMLスキーマ に従う必要があります。( アップローダの都合でファイル名の末尾に".txt"が付加されています。ローカルに保存後、ファイル名末尾の".txt"を削除してください。 )
以下、参考までに。( ローカルに保存後、ファイル名末尾の".txt"を削除してください。 )
C#コードの装飾規則 XMLファイル
JavaScriptコードの装飾規則 XMLファイル
XMLコードの装飾規則XMLファイル
作成したXMLファイルを利用するには、YkoKen.TextDecoration.DecorationContext.createInstanceFromXmlメソッドを使用します。
var context = YkoKen.TextDecoration.DecorationContext.createInstanceFromXml("CSharp.xml");
decorator.setDecorationContext(context);
【 DownLoad 】
TextDecoration.js
※ 使用する際は、直リンクせず、自分のWebサイトにTextDecoration.jsを配置して使用してください。
概要
動作環境
試してみる
使い方
DecorationContextについて
Download
【 概要 】
ソースコードの装飾を行います。
ソースコードの装飾が動的に行われるため、Webサイトにソースコードを掲載する際に、わざわざ手作業で装飾する必要がなくなります。
現在の所、C#コードの装飾、JavaScriptコードの装飾、XMLの装飾をサポートしています。
また、自分で装飾の規則を作成することもできます。 ( 指定した正規表現にマッチする箇所に対して、文字色・背景色の着色，太字指定，下線指定，フォントサイズ指定，フォントファミリ指定ができます。 )
【 動作環境 】
動作確認済みのブラウザは以下のブラウザになります。その他のブラウザでの動作は未確認です。
- Internet Explorer 6.0
- Internet Explorer 7.0
- FireFox 1.5
【 試してみる 】
テストページを用意しました。
入力エリアにソースコードを入力し、装飾タイプを設定後、実行ボタンをクリックしてみてください。
TextDecoration.js テストページ
【 使い方 】
[ HtmlDecoratorのインスタンス化 ]
まず、YokoKen.TextDecoration.HtmlDecoratorクラスを引数なしでインスタンス化します。
var decorator = new YokoKen.TextDecoration.HtmlDecorator();
[ DecorationContextの生成 ]
DecorationContextについてを参照してください。
[ HtmlDecoratorオブジェクトにDecorationContextオブジェクトを設定 ]
HtmlDecoratorオブジェクトのsetDecorationContextメソッドを使って、DecorationContextオブジェクトを設定してやります。
decorator.setDecorationContext(context);
[ 装飾 ]
装飾したい文字列を引数に指定してdecorateメソッドを使うと、装飾されて戻ってきます。
var textbox1 = document.getElementById("textbox1");
var text = textbox1.value;
var decorationText = decorator.decorate(text);
decorateメソッドに渡す文字列は、HTML化された文字列ではなく、純粋な文字列を渡してください。（ようするに、実体参照とか改行タグとかダメです。）
YokoKen.TextDecoration.HtmlDecorator クラスのparseHtmlToTextという静的メソッドを使えば、実体参照や改行タグを含んだ文字列を純粋な文字列に変換してくれます。（改行タグ以外のタグは含めないで下さい。改行タグ以外は無視します。）
var div1 = document.getElementById("div1");
var text = YokoKen.TextDecoration.HtmlDecorator.parseHtmlToText(div1.innerHTML);
var decorationText = decorator.decorate(text);
【 DecorationContextについて 】
DecorationContextクラスは、装飾規則を表すクラスです。
現在の所、このDecorationContextの生成方法には、以下の方法があります。
[ 予め用意されている着色規則を利用する ]
YokoKen.TextDecoration.Specialized.DecorationContextFactoryオブジェクトのメソッドを使用して、予め用意されているDecorationContextオブジェクトを生成することができます。
現状、このオブジェクトには、以下の３つのメソッドが用意されています。
- createCSharpDecorationContextメソッド ( C#コード装飾用のDecorationContextオブジェクトを生成 )
- createJavaScriptDecorationContextメソッド ( JavaScriptコード装飾用のDecorationContextオブジェクトを生成 )
- createXMLDecorationContextメソッド ( XML装飾用のDecorationContextオブジェクトを生成 )
[ XMLファイルに記述する ]
独自の装飾規則を、XMLファイルに記述して利用することができます。
XMLファイルには、装飾する箇所を示す正規表現の指定、文字色・背景色の着色，太字指定，下線指定，フォントサイズ指定，フォントファミリ指定ができます。 ( もう少し詳しい解説が欲しいという方は、この記事にコメントしてください。 )
XMLファイルに記述する際は、 DecorationContext XMLスキーマ に従う必要があります。( アップローダの都合でファイル名の末尾に".txt"が付加されています。ローカルに保存後、ファイル名末尾の".txt"を削除してください。 )
以下、参考までに。( ローカルに保存後、ファイル名末尾の".txt"を削除してください。 )
C#コードの装飾規則 XMLファイル
JavaScriptコードの装飾規則 XMLファイル
XMLコードの装飾規則XMLファイル
作成したXMLファイルを利用するには、YkoKen.TextDecoration.DecorationContext.createInstanceFromXmlメソッドを使用します。
var context = YkoKen.TextDecoration.DecorationContext.createInstanceFromXml("CSharp.xml");
decorator.setDecorationContext(context);
【 DownLoad 】
TextDecoration.js
※ 使用する際は、直リンクせず、自分のWebサイトにTextDecoration.jsを配置して使用してください。
2006/11/02 14:08
innerHTMLって、特定の実体参照以外は、勝手に解釈して実体（文字）に置換するみたい。
特定の実体参照ってのは、以下の４つ。
[ 実体：" " ]
< [ 実体："<" ]
> [ 実体：">" ]
& [ 実体："&" ]
この４つを除く実体参照がinnerHTMLに設定されても、実体に置換されてしまう。
JavaScriptからではなく、HTMLに直接記述した場合も同様。
この４つの実体参照をinnerHTMLに設定した場合は、実体参照のまま設定されるのだが、
を除く３つの実体参照は、その実体をinnerHTMLやinnerTextに設定した場合も、
実体参照に置換されて設定される。 （ ただし、"&"に関しては、実体としてinnerHTMLに設定することはできない。 ）
なお、数値文字参照 （ 例えば、< [ 実体："<" ] ） を指定しても、文字実体参照 （ この場合、< ） に置換される。
検証コードvar div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var div3 = document.getElementById("div3");
var div4 = document.getElementById("div4");
div1.innerHTML = ""ω"; // これらは実体に置換される。
div2.innerHTML = "\"ω"; // そのまま。
div3.innerHTML = "<>&"; // そのまま。
// ↓だと&を設定できない。
// div4.innerHTML = "<>&";
div4.innerText = "<>&"; // これらは実体参照に置換される。
alert(div1.innerHTML);
alert(div2.innerHTML);
alert(div3.innerHTML);
alert(div4.innerHTML);
ちなみに、HTMLに直接記述した場合にも、同様の処理が適用される。
[ 参考 ]
実体参照 - Wikipedia
Wikipedia:特殊記号 - Wikipedia
特定の実体参照ってのは、以下の４つ。
[ 実体：" " ]
< [ 実体："<" ]
> [ 実体：">" ]
& [ 実体："&" ]
この４つを除く実体参照がinnerHTMLに設定されても、実体に置換されてしまう。
JavaScriptからではなく、HTMLに直接記述した場合も同様。
この４つの実体参照をinnerHTMLに設定した場合は、実体参照のまま設定されるのだが、
を除く３つの実体参照は、その実体をinnerHTMLやinnerTextに設定した場合も、
実体参照に置換されて設定される。 （ ただし、"&"に関しては、実体としてinnerHTMLに設定することはできない。 ）
なお、数値文字参照 （ 例えば、< [ 実体："<" ] ） を指定しても、文字実体参照 （ この場合、< ） に置換される。
検証コードvar div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var div3 = document.getElementById("div3");
var div4 = document.getElementById("div4");
div1.innerHTML = ""ω"; // これらは実体に置換される。
div2.innerHTML = "\"ω"; // そのまま。
div3.innerHTML = "<>&"; // そのまま。
// ↓だと&を設定できない。
// div4.innerHTML = "<>&";
div4.innerText = "<>&"; // これらは実体参照に置換される。
alert(div1.innerHTML);
alert(div2.innerHTML);
alert(div3.innerHTML);
alert(div4.innerHTML);
ちなみに、HTMLに直接記述した場合にも、同様の処理が適用される。
[ 参考 ]
実体参照 - Wikipedia
Wikipedia:特殊記号 - Wikipedia
タグ: JavaScript
Calendar
