今さらJavascript入門!~初心者の私と~
第3回「alertで文字を表示してみよう!(後編)」
第3回です。前回はwindow.alert();を使ってみました。今回は、ちょっと進んでページ上にあるキャラクターのボタンをクリックすると、alertでセリフが出るように設定してみましょう。
1.「仕掛け」のきっかけ
第1回で説明しましたが、Javascriptは「仕掛け」を設定するものです。「仕掛け」ということは、ある事が起きたら、何かが起きるということですよね。
前回はページが開くと同時に起きる仕掛けをつくったので、特に何も設定しませんでしたが、今回は「村長というボタンをクリックすると」という「仕掛け」発生のきっかけがあります。
これを設定してあげないといけません。
第1回で説明しましたが、Javascriptは「仕掛け」を設定するものです。「仕掛け」ということは、ある事が起きたら、何かが起きるということですよね。
前回はページが開くと同時に起きる仕掛けをつくったので、特に何も設定しませんでしたが、今回は「村長というボタンをクリックすると」という「仕掛け」発生のきっかけがあります。
これを設定してあげないといけません。
2.命令文(コード)の内容
「仕掛け」のための、「ある事が起きたら」の部分ですが、その「ある事」はどれに対して起きるでしょうか。
そうです。今回の目標から言えば、「村長」というボタンに対して起こります。
つまり、
「村長というボタン」が「クリックされた」ら、「Window」に「アラートを出しなさい」! その内容は( )内で!
というのが今回の命令です。
「仕掛け」のための、「ある事が起きたら」の部分ですが、その「ある事」はどれに対して起きるでしょうか。
そうです。今回の目標から言えば、「村長」というボタンに対して起こります。
つまり、
「村長というボタン」が「クリックされた」ら、「Window」に「アラートを出しなさい」! その内容は( )内で!
というのが今回の命令です。
3.イベントを使おう!
このような「何かが起きたら、○○が起こせ!」という命令における、「何かが起きたら」の「何か」を「イベント」と呼びます。まあ、確かにイベントですよね。
Javascriptで使われるイベントはたくさんありますが、今回のような「クリック」をイベントとするものは、「onclick」というものを使います。
イベントの書き方はいくつかあるのですが、まだいろいろとスキルが不足しているので、最も簡単なもので設定してみましょう(ただ、ずっとこれだと素人感が出てしまうらしいです(>_<))。
このような「何かが起きたら、○○が起こせ!」という命令における、「何かが起きたら」の「何か」を「イベント」と呼びます。まあ、確かにイベントですよね。
Javascriptで使われるイベントはたくさんありますが、今回のような「クリック」をイベントとするものは、「onclick」というものを使います。
イベントの書き方はいくつかあるのですが、まだいろいろとスキルが不足しているので、最も簡単なもので設定してみましょう(ただ、ずっとこれだと素人感が出てしまうらしいです(>_<))。
4.イベントはタグに直接ぶちこむぜ!
今回やる設定方法はかなり簡単で、イベントをタグ(HTMLの<○>~</○>のこと)の中に直接書いてしまいます。イベントは少し特殊で、Javascriptの中でも異端児です。イベント以外でタグにプログラムを書くことはあまり無いと思います。
さて、具体的には、こうします。
▼▼▼
<button onclick>村長</button>
▲▲▲
今回やる設定方法はかなり簡単で、イベントをタグ(HTMLの<○>~</○>のこと)の中に直接書いてしまいます。イベントは少し特殊で、Javascriptの中でも異端児です。イベント以外でタグにプログラムを書くことはあまり無いと思います。
さて、具体的には、こうします。
▼▼▼
<button onclick>村長</button>
▲▲▲
中に書き込むのは常に前の<>で、セットの後ろにある<>は「このタグはここで終わりだよっ」ということを示す役割しか持ちません。
タグに直接書いているのですから、「村長というボタン」は特定済みですし、「クリックされたら」もイベントを入れたのでOKですね。
タグに直接書いているのですから、「村長というボタン」は特定済みですし、「クリックされたら」もイベントを入れたのでOKですね。
5.クリックしたら何を起こす?
ここまで書いたら、何を起こすかを書き込んでいきます。
何を起こそうとしていたんでしたっけ?
そうです。
「アラートを出しなさい」! その内容は( )内で!
ですね。
これは前回と同じ書き方をします。つまり、
window.alert('出したい文字');
です。
ただし、書き方に注意してください。
イベントの内容を指定する書き方は、
イベント名="コード;"
です。必ず「"」(ダブルクオーテーション)でコードを挟みましょう。;も忘れずに。
これに従って考えると、目標達成にはこうします。
▼▼▼
<button onclick="window.alert('よく来なさったな');">村長</button>
▲▲▲
ここまで書いたら、何を起こすかを書き込んでいきます。
何を起こそうとしていたんでしたっけ?
そうです。
「アラートを出しなさい」! その内容は( )内で!
ですね。
これは前回と同じ書き方をします。つまり、
window.alert('出したい文字');
です。
ただし、書き方に注意してください。
イベントの内容を指定する書き方は、
イベント名="コード;"
です。必ず「"」(ダブルクオーテーション)でコードを挟みましょう。;も忘れずに。
これに従って考えると、目標達成にはこうします。
▼▼▼
<button onclick="window.alert('よく来なさったな');">村長</button>
▲▲▲
HTMLを保存して、ブラウザを更新してみてください。あ、前回の「ここはプログラム村だよ」や5連続セリフのコードは消しておきましょう。邪魔なので(おい)
更新したら、「村長」ボタンをクリック!
更新したら、「村長」ボタンをクリック!
どうですか? 出ましたか?
おめでとうございます!
では、忘れる前に練習してみましょう。
<練習>
「宿屋」と「女の子」に対しても、セリフを指定し、クリックするとセリフがアラートで表示されるようにしなさい。セリフは自由。
<正解例>
(HTML/コード)
<button onclick="window.alert('よく来なさったな');">村長</button>
<button onclick="window.alert('お休みなさいませ');">宿屋</button>
<button onclick="window.alert('あんた誰?');">女の子</button>
上手くいきましたでしょうか。
これで、少しはJavascriptに慣れましたか?
次回はイベントを使って関数というものを扱ってみます。初心者には厄介ですが、分かりやすくなるよう意識します!
では、また次回!
おめでとうございます!
では、忘れる前に練習してみましょう。
<練習>
「宿屋」と「女の子」に対しても、セリフを指定し、クリックするとセリフがアラートで表示されるようにしなさい。セリフは自由。
<正解例>
(HTML/コード)
<button onclick="window.alert('よく来なさったな');">村長</button>
<button onclick="window.alert('お休みなさいませ');">宿屋</button>
<button onclick="window.alert('あんた誰?');">女の子</button>
上手くいきましたでしょうか。
これで、少しはJavascriptに慣れましたか?
次回はイベントを使って関数というものを扱ってみます。初心者には厄介ですが、分かりやすくなるよう意識します!
では、また次回!