上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 補足編です。なんだかよく分からない方は、「Javaスクリプト入門」からご覧下さい。

 第8回までやって、一応スクリプトは書けるようになりました。しかし、今まで使っていたものの中に、実は「DOM」というJavaスクリプトの純粋な仕様とはちょっと違う構文を用いていました。これは、HTMLの内容を参照する為のもので、「getElement…innerHTML」「getElement…style」と言うヤツがそれです。
 これは、HTMLの内容を参照する為、HTMLが読み込まれる前に実行してしまうと、エラーが出たり動作しなかったりするため、先に使用する「要素」を書いて、その後にスクリプトを書くように設定していました。

 しかし、テンプレートを書くとき、スクリプトがHTMLのあちこちに散らばっているのは、最適化の観点からどうなの?…と言うことになります。
 これら、すべてを「head内」に入れ込む方法をご紹介します。




HTML読み込み完了後に動かす公式



<script type="text/javascript"><!--
window.onload = function () {

ここにスクリプトを書く

}
//--></script>


 この中に、いつものようにJavaスクリプトの構文を書いていけば、この「{ }」内にあるスクリプトは、HTML読み込み完了後に実行されます。
 これで、今までHTML上に煩雑に書いてしまっていたスクリプトを、「HEAD内」にすべて纏めて記述することが出来ます。




HTMLタグ内に「onclick=""」等を書かず、完全にスクリプトを独立させる



 「イベントハンドラ」を今まではHTMLタグ内に書いていました。このボタンを押したら、「GOGO()」を実行しろ。とか言う感じのヤツです。
 これも、「HEAD内」に纏めてしまうことが出来ます。

document.getElementById("test").onclick = function () {

ここに、「div id="test"」を「onclick」クリックしたときに実行させるスクリプトを書く

}

 これで、「onclick=""」も、Javaスクリプト内に入れ込んでしまうことが出来ます。




スクリプト自体も最適化



 スクリプトで「document.getElementById("")」って、結構長いし、同じ文ばかりを何度も書くのは大変だし、データは大きくなる感じがするし…
 そんな時は、「変数」が活躍します。

obj = document.getElementById("test");

obj.onclick = function () {
obj.innerHTML="こんな変数の使い方";
obj.style.backgroundColor="red";
}

 「document.getElementById("test")」自体を「変数obj」に入れ込んでみました。
 こんな事も出来てしまいます。Javaスクリプト、結構スゴイです。





動作サンプル



 それでは、実際に動作するかどうか、確かめてみてください。

クリック



<script type="text/javascript">
window.onload = function () {

obj=document.getElementById("test");

obj.onclick = function () {
obj.innerHTML="こんな変数の使い方";
obj.style.backgroundColor="red";
}

}
</script>
<div id="test">クリック</div>



■次回は「変数の連番」「配列」の作り方です。
変数の連番を使う
このエントリーをはてなブックマークに追加
Sat.03.26.2011
Comment
Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。