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



Admin