2009年02月13日

JavaScriptを使う上において重要で基本的な事柄

まず、第一に JavaScript が実行されるタイミングによって意味が違ってきます。

1) ページの表示中の実行
2) ページが完全に表示し終わってから、ユーザの操作による実行

この違いは大きく、やりたい事も目的も大きく違います。
ページのカスタマイズは、前者。つまり、ページのまさに表示されている進行中に
状態を変更または追加していこうという事が目的になります。

後者は、ページになんらかの「機能」を追加するのが目的で、おもに function と
いうものと共に処理が記述されます。

次に、記述位置ですが、JavaScript を JavaScript として機能させるには、
SCRIPT タグを書いて、その中に記述する必要がありますが、記述位置は
ページのどこに書いてもかまいません。HEAD タグの中に書かなければいけない
なんて事は全くありません。むしろ、通常のレンタルブログで HEAD 位置には記述
できないかもしれません。

そして、記述する位置で操作できるコンテンツは、JavaScript が記述されるより
前に記述されていなければなりません。
( イベント登録というテクニックを使えば先に書く事もできますが、熟練者以外は使用しないほうが良いです )

<script type="text/javascript">
window.status="script:start"
</script>
上記は、ココログで JavaScript を書ける場所である、
ブログのサブタイトルに書いて試したものです。

この書き方で、document.write という構文を使って、HTML そのものを書き出す事ができます。
例えば、ループ処理を用いて、数行で100行のテーブルを表示する事もできます。

また、STYLE 要素を document.write で書き出せば、それ以降に表示される
コンテンツに対して新たに表示属性を追加する事もできます
( よくやるのは 条件による表示・非表示の切り替え )

以下は、URL の内容に従って処理している例です。

var str = location + '';
var adata = str.split('/');
var at = adata[adata.length-1];
if ( at.substr(0,7)=='Article' && at.length > 12 && at.substr(at.length-5,5)=='.html' ) {
   at = (at.replace('.html','')).replace('Article','');
   at = 'index.php?module=Article&action=Edit&article_id='+at;
   document.write('<br><A href="'+at+'" target="maglogedit">記事の編集</A></br>');
   document.write('<style type="text/css"> .photo { display:none; }</style>');
}

この処理は、URL をチェックして、一覧ページか単体の記事ページかを
判断して、記事ページならば、「記事の編集」という、この記事を編集
する為の管理ページへのリンクを追加作成しています。

また、この記事ページでのみ非表示にするクラスを定義しているので、
このクラスを使うと、一覧ページでは表示されるけれども、単体記事ページ
では表示されないブロックを作成する事ができます。
posted by night wálker at 11:56| JavaScript

2009年02月16日

【文字列内に含まれる文字列の判断】indexOf メソッド

URL や リンクのテキストを取得しても、その文字列をどうするかを考える前に、
その文字列が「何か」「どうなっているのか」を判断する必要があります。

ですから最初に必要になるのが、「こういう文字列が含まれてるかな?」という
疑問に答える「文字列検索」のメソッドが必要になります。

var strSearch = window.location+"";
if ( strSearch.indexOf( "BBS" ) == -1 ) {
	  if (window.attachEvent){
	  	  window.attachEvent('onload', setcat);
	  }
	  else {
	  	  window.addEventListener('load', setcat, false);
	  }
}



上の例は、ブラウザに表示されている URL を、window.location でまず取得しています。
window は省略できます。window というカテゴリの中の location という文書だと思えば良いです。
location の中にはまだデータが分類整理されているので、+"" として、文字列としてデフォルトの
データを確実に取得するようにしています。( 文字列を足すと文字列として返ってきます )

ですから、strSearch は、文字列として保証された「文字列オブジェクト」になるわけで、
文字列オブジェクトになれば、メソッドが使えます。

indexOf というメソッドで、"BBS" という文字列を探し、-1 だと見つからなかったという事です。
( みつかったら位置が返ります )

で、掲示板ページ以外で行う処理をしているわけです。


Mozilla の indexOf の説明

Microsoft の indexOf の説明


indexOf は、大文字小文字を区別する事に注意して下さい。
区別しないように検索するには、正規表現を使用する必要があります。


posted by night wálker at 12:10| JavaScript

【大文字小文字を区別しないで含まれる文字列の判断】search メソッド

indexOf では、大文字小文字を区別して文字列の中の文字列の存在チェック
をしましたが、もっといろんなパターンを容易にチェックするには「正規表現」を使用します。

要は、「ワイルドカード」といわれるものと同じ意味です。
記号を使って、文字列のパターンを定義して、いろいろな文字列にマッチさせるものです。

Windows の ファイルの *.* なんてのがそういうものです。

しかし、今回は「大文字小文字を区別しない」事を目的としているので、
正規表現の本質には触れないで話を進めます。


<SCRIPT type="text/javascript">

var target = "Bbs";

if ( target.search(/bbs/i) == -1 ) {
	alert("含まれません");
}
else {
	alert("含まれます");
}

</SCRIPT>

これは、"Bbs" と言う文字列と "bbs" と言う文字列が同じとして
扱いたい例で、/bbs/i の部分が RegExp というオブジェクトであり、プログラミング
的に「正規表現」と呼ばれる部分であり、オブジェクトです。

Mozilla の RegExp

Microsoft の RegExp

このオブジェクトを、文字列( String オブジェクト ) の search メソッドに渡して
indexOf と同様の結果を得ます。

Mozilla の search

Microsoft の search


ただ、このままでは、探したい文字列が入力値のような場合 / でどうにか
できないので、以下のようにしていったん RegExp を作成してから使用します。

<SCRIPT type="text/javascript">

var target = "Bbs";
var data = new RegExp("bbs", "i");

if ( target.search(data) == -1 ) {
	alert("含まれません");
}
else {
	alert("含まれます");
}

</SCRIPT>

このようにしなくても、対象文字列をいったん全て大文字か
小文字に変換する手法もありますが、こちらは他にも使い道
があるので覚えておく必要があります。

重要ですね。



posted by night wálker at 16:55| JavaScript

2009年03月13日

【エラー処理】try〜catch ステートメント

スクリプト中の任意の行でエラーが起こるかもしれない場合は、
その行( または複数の行範囲 ) を try 〜 catch を使って囲む事によって、
エラーを無視させる事ができます



↑のボタンをクリックすると、↓のコードと同じものが実行され、最初はエラーに対して
特定の処理を実行していますが、二つ目は全くエラーを無視しています。 

<SCRIPT type="text/javascript">

function test() {

	// エラーが発生したら、catch 内のステートメントを実行
	try {
		alert( document.getElementById("abc").value );
	}
	catch(e) {
		alert( e.description );
	}

	// エラーが発生したら、なにもしない
	try {
		alert( document.getElementById("abc").value );
	}
	catch(e){}
}

</SCRIPT>


<INPUT
	type="button"
	value="try〜catch"
	onClick='test();'
>


Microsoft のリファレンス

Mozillad( 英文 ) リファレンス


 

posted by night wálker at 13:07| JavaScript

2009年05月04日

JavaScriptの省略引数

function 内で arguments[n] で参照できますが、arguments.length
に引数の数が入るので以下のようにする事ができます

■引数1つは固定で後はオプションにする。
<script type="text/javascript">

function argumentTest(a) {

	var param2="",param3="",param4="";

	document.write( "■" + a + "<br>" );

	if ( arguments.length > 1 ) {
		param2 = arguments[1];
		document.write( param2 + "<br>" );
	}
	if ( arguments.length > 2 ) {
		param3 = arguments[2];
		document.write( param3 + "<br>" );
	}
	if ( arguments.length > 3 ) {
		param4 = arguments[3];
		document.write( param4 + "<br>" );
	}

}


argumentTest( "ひとつ" );
argumentTest( "ふたつ", 1 );
argumentTest( "みっつ", "A", "B" );
argumentTest( "よっつ", "x", "y", "z" );

</script>



posted by night wálker at 12:24| JavaScript
JavaScript ベーシック
SyntaxHighlighter
クロスブラウジング
その他
Highslide JS
思いの他綺麗に撮れた花
ブログを彩るには、JavaScript が必ず必要です。
特に、Google の存在は大きく、Google MAP をはじめとする
いろいろな先進の技術を簡単に利用できます。
結構知られていないものもあり、少し JavaScript を勉強すれば使えるようになって
自分のブログにいろいろな花を添える事ができるようになると思います。
※ この花は Highslide JS と言って Google とは関係ありません。



Admin