JavaScriptの使い方

〜JavaScriptをページに組み込む〜

JavaScriptの宣言

実際にJavaScriptをページに組み込むときには次の3つの方法がある

    

  1. 本文の中に直接書き込む

  2. HEAD内で関数を作成し、本文中で呼び出す

  3. 別ファイルに関数を作成し、本文中で呼び出す


今回は本文中（BODY内）に「JavaScript起動中」と文字を表示させるものを作成する。
なお、関数として使用する場合、関数名は「Kidou()」とする。


本文の中に直接書き込む

関数を作成する必要がなく、Scriptタグの中に命令を書き込むだけでよいのでとても簡単だが、
その反面複雑な命令を実行するときや同じ手順が何度も出てくるような場合にはあまり適さない。







BODY内の任意の場所に以下のように書き込む


<script language="JavaScript">
<!--
document.write("JavaScript起動中")
-->
</script>


実行結果









HEAD内で関数を作成し、本文中で呼び出す

一般的なJavaScriptの使い方。
複雑な命令や何度も出てくるものであっても関数としてひとまとまりの命令を作るので
とても使い勝手が良い。






1、HEAD内に次のように書き込む


<HEAD>
<script language="JavaScript">
<!--
function Kidou(){
document.write("JavaScript起動中")
}
-->
</script>

<script type="text/javascript" charset="UTF-8" src="//cache1.value-domain.com/xrea_header.js" async="async"></script>
</head>

2、BODY内の任意の場所に以下のように書き込む


<script language="JavaScript">
<!--
Kidou()
-->
</script>


実行結果









別ファイルに関数を作成し、本文中で呼び出す

ちょっと高度な使い方。
JavaScriptのソースを見られたくない場合や、複数のページで同じ命令を実行したいときに使われる。
ちなみにこのページの左側で上下しているメニューもこの方法を使っている。







1、テキストエディタ（メモ帳など）で次のように書き込む


function Kidou(){
document.write("JavaScript起動中")
}


注：scriptタグおよびコメントタグは不要


2、手順1で作成した文書を「任意の名前.js」という名前で保存

これによって「任意の名前.js」という名前のファイルが作成される


3、HEAD内に次のように書き込む


<HEAD>
<script language="JavaScript" src="任意の名前.js"></script>

<script type="text/javascript" charset="UTF-8" src="//cache1.value-domain.com/xrea_header.js" async="async"></script>
</head>

srcのところには先ほど作成した

「.js」という拡張子のついたファイルのある場所を書き込む。

これによってJavaScriptの書かれたファイルが本文中に読み込まれる。


4、BODY内の任意の場所に以下のように書き込む


<script language="JavaScript">
<!--
Kidou()
-->
</script>


実行結果










前へ　メニューへ　次へ