リスト3では、フォームに入力されたメッセージをそのまま表示するようにしているが、LogReaderでHTMLタグがエスケープされるようになっているので、フォームに<script>と記述されても、そのまま<script>と表示されるだけで、スクリプトが実行されることはない(図3)。
リスト3 ボタンをクリックされたらログ出力(JavaScript)
// ログ出力ボタンのイベント処理を設定
YAHOO.util.Event.onContentReady( 'category', function() {
// クリック時の処理(ログを出力)
var clicked = function( e ) {
YAHOO.util.Event.stopEvent( e );
// ログ出力(引数はメッセージ、カテゴリの順)
YAHOO.log( YAHOO.util.Dom.get( 'message' ).value,
this.get( 'value' ) );
};
// ボタンの取得
var buttons = new YAHOO.widget.ButtonGroup( 'category' ).getButtons();
// イベント処理設定(ボタンのクリックでログを出力)
for( var i = 0; i < buttons.length; i++ ) {
buttons[ i ].on( 'click', clicked );
}
});
// LogReaderを表示(draggableでドラッグ不可に設定)
YAHOO.util.Event.onContentReady( 'logger1', function() {
this.logger1 = new YAHOO.widget.LogReader( 'logger1', { draggable : false } );
});
図3 HTMLタグはエスケープされる
この連載も次回で最後だ。最終回は、リスト3にも記述されているイベント処理やDOMによるノードの取得といった、YUIの基本について述べたい。
