外部ファイルから呼び出せ!

Index

JavaScriptだけを記述した外部ファイルから,関数を呼び出すことも可能です.ここではアラートダイアログを表示する,簡単なサンプルを作成してみました.

[例]

	js.txtファイルの中身					//(1)
	function fn(){
		alert( "js.txtから呼び出しました." );
	}
	
	実際にfn()を呼び出すHTMLの内容(jss27.html)	//(2)
	<head>
	<script src="js.txt"></script>			//(3)
	</head>	

	<body>
	<form>
	<input type=button value="外部ファイルから呼び出す" onclick="fn()">	//(4)
	</form>
	</body>

【解説】

(1)JavaScriptを記述した外部ファイルの中身です.
(2)実際にfn()を呼び出すHTMLの内容です.
(3)<script src="URL"></script>.呼び出すfn()が記述されている外部ファイルの指定.
(4)クリックによりfn()を実行します.

このように外部ファイルでJavaScriptを記述することにより,異なるHTMLファイルで同じ関数を使用する場合,それぞれのファイルに同一のスクリプトを記述するという手間が省けます.また<script src="URL"></script>と指定することにより,第三者も使用可能になります.

【実行してみよう】

【おまけ】

以上のことを応用して,冗談で私が作成したカウンタ?(ページをロードしたときに,777人目だったかのように表示するカウンタもどき)をみなさんのページに表示してみませんか?このカウンタの詳細は777人目?のページを見て下さい.

注意:このカウンタはNetscape4.0以上のブラウザでしか動作しません.あしからず.

● 利用方法

  1. 表示したいHTMLの<head></head>内へ,以下の赤字部分のように,スクリプトのソースのURL指定を行って下さい.
    	<head>
    	<script src="http://www02.u-page.so-net.ne.jp/dc4/morikawa/js.txt"></script>
    	</head>
    
  2. <body>タグに以下のようにonload="counter()"を埋め込んで下さい.
    	<body onload="counter('plyr','clyr')">
    
  3. カウンタを表示したい位置へ以下の内容を記述して下さい.
    	<layer id="plyr" clip="0,0,120,20">
    		<img src="http://www02.u-page.so-net.ne.jp/dc4/morikawa/img/cnt0.gif" width=120 height=20>
    		<layer id="clyr" top=0 left =100>
    			<img src="http://www02.u-page.so-net.ne.jp/dc4/morikawa/img/cnt1.gif" width=20 height=40>
    		</layer>
    	</layer>
    

以上です.


1998(C) Motonari Morikawa