【Age of Networks(AoN-DB)え~ちゃんぶろぐねっとわ~く】【講座】第4回:みかけがよりプログラム【JavaScript】

東方二次ゲームメインからオリジナル・企業系や漫画へ。TRPGやサバゲのアナログライクも

Age of Networks(AoN-DB)え~ちゃんぶろぐねっとわ~く

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

【講座】第4回:みかけがよりプログラム【JavaScript】

さて、どんどんどこへ向かっているのか分からなくなりつつあるブログですが、今日も講座をやりませう!
お相手はわたくし、志摩嶋エイジが努めます。


今回は外から呼び出す、という名目でちょっとすごく見えるようにしましょうか。
プログラミングらしい事は何一つやりませんが、今までよりプログラムらしいプログラムになることでしょう。

今日は外部ファイルを使ってJavaScriptを動かします。
注目すべきは「<script type="text/javascript" language="javascript">」の部分です。
ここを、
「<script type="text/javascript" src="HelloWorld!.js" language="javascript"></script>」に変えましょう。
ついでに、

<!--
function messeji()
{
alert('Hello,World!');
}
-->
</script>
も消します。

そして、新規ファイルを作成してメモ帳で以下のように入れてください。

function messeji()
{
alert('Hello,World!');
}

ファイル名:print.js
このjsファイルは、前回まで作っていたディレクトリ(フォルダ)と同じ場所に格納してください。

最後に、formタグ内をこのように修正します。
<form name="botan" action="print.js" method="post">


ちょっと一気に行き過ぎましたね。
以下のようになっていればOKです。

【HelloWorld!.html】
<html>
<head>
<title>HelloWorld!</title>
<script type="text/javascript" src="HelloWorld!.js" language="javascript"></script>
</head>
<body>
<form name="botan" action="print.js" method="post">
<input type="button" value="めっせぇじ" onclick="messeji()">
</form>
</body>
</html>

【Print.js】
function messeji()
{
alert('Hello,World!');
}


後は、いつも通りにhtmlファイルをブラウザで起動してボタンを押すだけ!
すると、「HelloWorld!」と表示されます。


しかし、良く見てください。
元々のHTMLファイルにはHelloWorld!と表示させる命令はありませんし、そもそもalert文もありません。
なのにちゃんと出力されます。どういう事でしょうか?

これは、<javascript>の中の、src="print.js"がファイルを呼び出せという命令をしているからです。
ここで注意するのは、あくまでもjavascriptのファイルを呼び出しているだけで、実際に実行する命令をしているのは、onclick="messeji()"の部分です。

日本語で書くと、「JavaScriptのprint.jsというファイルの中にある関数messejiに引数()を渡して実行してくれ」となります。
このやり方を「外部jsファイルの呼び出し」と呼びます。

なんかプログラムを触ってる気分になってきましたか?
目的はあくまでも「ファイルの管理を分かりやすくするため」であって、「プログラミングっぽいから」やるのではない事をお忘れなく。
どういう意味か?
それは、次回に解説しましょうか。


【当日更新まで】

追記

今回は一つだけ。
次回も解説します。

【用語集】
・外部ファイル
今読み込んでいるファイル(html)以外に、別のファイル(今回はprint.js)を呼び出す事。
これにより、HelloWorld!.htmlでprint.jsに書いてある内容を使う事が出来る。

呼び出し方は、<script type="text/javascript" src="ここ"></script>を改変する。

なお、print.jsに書いてない事は使えないし、HelloWorld!.htmlで命令を実行する部分でprint.jsの関数を呼び出す必要がある。
関連記事
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。