ひとつのページ内で、同じプログラムを複数実行させる
ひとつのページ内で、同じプログラムを複数実行させたい場合に、同じソースを貼り付けてしまうと、うまく動作しなかったりエラーになってしまいます。
ボタンでアラートを表示させよう 1 のところで紹介しているプログラムを、同じページにもうひとつ表示させる場合の例でご説明します。
表示の例
ソース
<SCRIPT LANGUAGE="JavaScript">
<!--
function warning(){
alert("このウインドウを「アラート」といいます。\nちょっとしたコメントなんかに便利ですよ。");
}
//-->
</SCRIPT>
<FORM><INPUT type="button" value="ここを押してね!" onClick="warning()"></FORM>
function warning() のwarning() を関数名といいます。このプログラムの名前のようなものです。
<INPUT type="button" value="ここを押してね!" onClick="warning()"> の部分がボタンのソースになっていて、onClick="warning()" となっています。
これは、ボタンをクリックしたら warning() というJavaScriptプログラムを実行させるという意味です。
このソースのコメント部分→(このウインドウを「アラート」といいます。\nちょっとしたコメントなんかに便利ですよ。)だけをかえて別の場所に貼り付けても、同じアラートが表示されてしまいます。
そこでソースの中の warning() という関数名を他の文字にかえて、ちがうプログラムを作ります。下のソースでは、わかりやすいように warning2() としています。
表示の例
ソース
<SCRIPT LANGUAGE="JavaScript">
<!--
function warning2(){
alert("ソースの中の関数名をかえました。\nお好みの数だけ追加できますよ。");
}
//-->
</SCRIPT>
<FORM><INPUT type="button" value="ここを押してね!" onClick="warning2()"></FORM>
変更した関数名は、function warning2() の部分と onClick="warning2()" の部分です。
コメント部分も変更しましたので、ちがうコメント→(ソースの中の関数名をかえました。\nお好みの数だけ追加できますよ。)が表示されます。
同じように warning3() 、warning4() としていけば、ひとつのページ内で、同じプログラムをお好みの数だけ実行させる事ができます。
ソースの文字をかえる時に、" や ; を消してしまわないようにしてください。
5・6年生にもわかるやさしいJavaScriptのTOPへ