今さらJavascript入門!~初心者の私と~
第2回「alertで文字を表示してみよう!」(前編)
はい、2回目です。前回はJavascriptって何なのさという話をしましたので、今回は実際に動かしてみましょう。
この前後編での目標はキャラクターの名前をクリックすると、セリフが出てくるようにすることです。意味は後で分かります。
この前後編での目標はキャラクターの名前をクリックすると、セリフが出てくるようにすることです。意味は後で分かります。
1.Javascriptはどこに書く?
こういうことをやるには、まずHTMLでウェブページをつくる必要があります。
HTMLなんて分からんという方は、とりあえず以下のコードをコピー&ペーストしてメモ帳などに貼り、「test.html」と名前をつけて保存しておいてください。
▼▼ここから下(これはいりません)
<!DOCTYPE html>
<html>
<head>
<title>プログラム村</title>
<script>
</script>
</head>
<body>
<h1>ここはプログラム村だよ!</h1>
<p>話しかけてみる?</p>
<button>村長</button>
<button>宿屋</button>
<button>女の子</button>
</body>
</html>
▲▲これより上(ここはいりません)
こういうことをやるには、まずHTMLでウェブページをつくる必要があります。
HTMLなんて分からんという方は、とりあえず以下のコードをコピー&ペーストしてメモ帳などに貼り、「test.html」と名前をつけて保存しておいてください。
▼▼ここから下(これはいりません)
<!DOCTYPE html>
<html>
<head>
<title>プログラム村</title>
<script>
</script>
</head>
<body>
<h1>ここはプログラム村だよ!</h1>
<p>話しかけてみる?</p>
<button>村長</button>
<button>宿屋</button>
<button>女の子</button>
</body>
</html>
▲▲これより上(ここはいりません)
これを開くとあら不思議、おかしな記号がなくなって、文章だけになっています。これはHTMLをウェブブラウザが読み込んで、HTMLの指定通りに内容を表示してくれているのです。ここではHTMLの細かい説明はしませんが、文章の文脈上の意味などをブラウザに伝えるものだと思っておいてください。
一度開いたら、ブラウザのほうは開きっぱなしにしておいて、今度は先ほど保存した「test.html」をメモ帳などで開きます。開き方は色々ありますが、メモ帳などの「ファイル」→「開く」などで「test.html」を選ぶのがいいのではないでしょうか(ほかのやり方を知っている人はそれでも全然OKです)。
開いたら、中身をとりあえずながめてみましょう。
ざっくりしたパーツとしては以下のような感じです。
開いたら、中身をとりあえずながめてみましょう。
ざっくりしたパーツとしては以下のような感じです。
で、Javascriptはどこに書くのかというと、「諸々の設定とかを書くところ」に入っている<head>と</head>の間に書きます。書き方はいくつかありますが、とりあえずここに書いておきましょう。
<head>の中で、さらに<script>と</script>で挟んだ中にJavascriptは書きます。簡単ですね。なお、ここでは<script>などを最初に書いておきましたが、ないこともあるのでその場合は自分で書いてください。
<head>の中で、さらに<script>と</script>で挟んだ中にJavascriptは書きます。簡単ですね。なお、ここでは<script>などを最初に書いておきましたが、ないこともあるのでその場合は自分で書いてください。
2.問答無用でアラートを表示してみる
まずは、このページに入った瞬間にメッセージを表示させるようにしましょう。OPみたいなものです。
アラートは「警告」みたいな意味ですが、実際はメッセージ表示ぐらいに思っておけばいいです。
<script>から</script>の間に、
▼▼▼
window.alert('ここはプログラム村だよ!');
▲▲▲
と書いて、上書き保存してください。
まずは、このページに入った瞬間にメッセージを表示させるようにしましょう。OPみたいなものです。
アラートは「警告」みたいな意味ですが、実際はメッセージ表示ぐらいに思っておけばいいです。
<script>から</script>の間に、
▼▼▼
window.alert('ここはプログラム村だよ!');
▲▲▲
と書いて、上書き保存してください。
そして、開いていたブラウザを更新してみましょう。すると、先ほど書いたメッセージが表示されるはずです。
出てきたメッセージは「OK」で消えます。
さて、ブラウザをやると出てくる枠を「window」と言います。下の画像のようにPCを使う人は複数の「window」を駆使して普段作業などをしているんですね。アラートを指定したときに出てくるのも枠なので、これも「window」です。
さて、ブラウザをやると出てくる枠を「window」と言います。下の画像のようにPCを使う人は複数の「window」を駆使して普段作業などをしているんですね。アラートを指定したときに出てくるのも枠なので、これも「window」です。
ということで、今書いた命令文(これをコードもしくはスクリプトと言います)は、
『「window」に「alert」(アラート)を出しなさい。その内容は( )内にあるよ!』
という意味です。
このようにJavascriptでは、『「○○」に「××」をさせなさい!その内容は( )内だよ!』を ○○.××();のように書いていきます。最後のセミコロン(;)は、日本語でいう「。」みたいなものなので必ずつけてください。また、( )内などは文字列(好き勝手に書けるもの)の場合、シングルクオテーション(’)で挟みます。
ちなみに、これは「仕掛け」の中でも開いた瞬間に起きるものなので、「何が起きたら」の部分は特に書きません。また、Javascriptは上から順に読まれて実行されるので、例えば同じ構造のコードを続けて書くと、それが素直に連続で実行されます。
<練習>
「プログラム村へようこそ」に続けて、「貴様はもう戻れないぞ!」・「地獄の始まりだ!」・「馬鹿言ってんじゃないよ」・「申し訳ございませんでした」が最初を含めて5つ連続でアラート表示されるようにコードを書きなさい。
(文字はアレンジしてもいいですよ)
<解答例>
(コード)
<script>
window.alert('ここはプログラム村だよ'); /* これは練習とは別 */
window.alert('プログラム村へようこそ');
window.alert('貴様はもう戻れないぞ!');
window.alert('地獄の始まりだ!');
window.alert('馬鹿言ってんじゃないよ');
window.alert('申し訳ございませんでした');
</script>
これでOPが出来ましたね。でも、長ったらしいので、後で消してしまいます(笑)
今回はここまでです!
次回はいよいよキャラがしゃべりますよ!
『「window」に「alert」(アラート)を出しなさい。その内容は( )内にあるよ!』
という意味です。
このようにJavascriptでは、『「○○」に「××」をさせなさい!その内容は( )内だよ!』を ○○.××();のように書いていきます。最後のセミコロン(;)は、日本語でいう「。」みたいなものなので必ずつけてください。また、( )内などは文字列(好き勝手に書けるもの)の場合、シングルクオテーション(’)で挟みます。
ちなみに、これは「仕掛け」の中でも開いた瞬間に起きるものなので、「何が起きたら」の部分は特に書きません。また、Javascriptは上から順に読まれて実行されるので、例えば同じ構造のコードを続けて書くと、それが素直に連続で実行されます。
<練習>
「プログラム村へようこそ」に続けて、「貴様はもう戻れないぞ!」・「地獄の始まりだ!」・「馬鹿言ってんじゃないよ」・「申し訳ございませんでした」が最初を含めて5つ連続でアラート表示されるようにコードを書きなさい。
(文字はアレンジしてもいいですよ)
<解答例>
(コード)
<script>
window.alert('ここはプログラム村だよ'); /* これは練習とは別 */
window.alert('プログラム村へようこそ');
window.alert('貴様はもう戻れないぞ!');
window.alert('地獄の始まりだ!');
window.alert('馬鹿言ってんじゃないよ');
window.alert('申し訳ございませんでした');
</script>
これでOPが出来ましたね。でも、長ったらしいので、後で消してしまいます(笑)
今回はここまでです!
次回はいよいよキャラがしゃべりますよ!