関数・変数について書いていくよ
「JavaScriptを書いてみよう」でも登場したfunctionについて詳しくみてみよう。
いくつものJavaScriptの指令を１まとめにして実行する。
何かの計算をしてその結果を出力する時に使用。
（⇒引数のページへ）
↓小文字アルファベット
function hello() {
alert=("HELLO")
}
関数はfunctionで指定し、
半角空けて、関数名を指定する。任意でO.K.
（上の場合はhelloが関数名）
小文字アルファベットから始め、後に括弧( )をつける。
カッコの中には引数と言うものが入ります。
次に半角中括弧{ }を付け、 その中に指令文を記入
していきます。
引数（ひきすう）は後述します。（⇒引数のページへ）
<head>内が良い
(<body>内にも書けるが．．)
HTMLは<body>の中身より先に<head>の中身を読み込むので、
<body>に書いてしまうと読み込みができていなくてエラーになって
しまうことがあるから。先に読み込む<head>内がベター！
指令を１まとめにするとは…
2つの指令ソースを同じボタンで実行
id="demo" の Hello My Friends ! を
「 I like you ! 」に換えるソース１
document.getElementById("demo")
.innerHTML="<p>I like you !</p>"
id="demo" の How Are You ?を
「 I'm Fine ! 」に換えるソース２
document.getElementById("demo")
.innerHTML="<p>I'm Fine !</p>"
<head>
<script>
function changeWord() {
document.getElementById("demo1")
.innerHTML="<p>I like you !</p>";
document.getElementById("demo2")
.innerHTML="<p>I'm Fine !</p>";
}
</script>
</head>
<body>
<p id="demo1">Hello My Friends !</p>
<p id="demo2">How Are You ?</p>
<button onclick="changeWord()">click it</button>
</body>
を１つのボタンクリックで実行するようにまとめると
→
(id名は１つのソース中で重複できないので
demo1とdemo2に変えてあります）
2つのボタンAとBで同じ指令を実行する
<head>
<script>
function aisatu(){
alert("おはよう");
alert("こんにちは");
alert("こんばんは");
}
</script>
</head>
<body>
<button onclick="aisatu()">ボタンA</button><br>
<button onclick="aisatu()">ボタンB</button>
</body>
コピーして試してみてくださいね。
上では
Hello My Friends ! と
How Are You ?
の2文がワンクリックで
I like you ! と
I'm Fine !
に置き換わりましたよね。
また、
左のソースでは、A・Bそれぞれのボタンで
同じことができましたよね。