JavaScript
JavaScript とは、Netscape Communications 社が開発したプログラミング言語です。
Microsoft 社の Internet Explorer でもver.3.0以降では、 同様の機能がサポートされています。
JavaScript を用いると、WEBページに通常のHTMLだけでは実現できない「動き」を追加することが可能です。プログラミングそのものは決してやさしくはないですが、インターネット上で公開されている、さまざまな JavaScriptを利用するのは簡単です。
ここでは、公開 JavaScriptを利用する方法に関して説明します。
たとえば、
とほほのJavaScriptレファレンス参照
以下のようにHTMLファイルに書いたとします。
<html>
<head>
<title>サンプル</title>
</head>
<body>
<script type="text/javascript">
<!--
document.write("やっほー");
// -->
</script>
</body>
</html> |
ここで、<script type="text/javascript">と </script>の間に書かれているものがjavaScriptです。
document.write("やっほー");
というのは「やっほー」と書け！ という命令ですので、実際にはこんな感じになります。
この程度の命令なら、通常のHTMLでも可能なわけですが、
<html>
<head>
<title>サンプル</title>
</head>
<body>
<script type="text/javascript">
<!--
dd = new Date();
document.write(dd.toLocaleString());
// -->
</script>
</body>
</html>
|
だと、こうなります。
dd = new Date();
document.write(dd.toLocaleString());
が、日付・時間を書け！ という命令なわけです。これは、表示リクエストのある都度変わるわけですから、通常のHTMLでは無理なわけです。
基本的には
<script type="text/javascript">と </script>の間でスクリプトを定義して、HTMLの適当なところで記述して実行させる、というのがJavaScriptの使い方です（いきなり使えるコマンドもあります）。
プログラムですから、スクリプトの書き方にはいろいろと決まりがあります。
詳しいことは、以下を参照してください。
公開スクリプトの利用
インターネット上では、便利なスクリプトが公開されています。使い方の説明なども併記されていますから、コピーして変更すれば自分のサイトで利用可能です。いくつか実例を示します。
アラート
以下のようなHTMLにおいて、onMouseOver="alert('○○○○')"の部分は「マウスを重ねたら『○○○○』というアラートを出す」という命令です。
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</CENTER>
<A href="#" onMouseOver="alert('○○○○')">ここにマウスを重ねる</A>
</CENTER>
</BODY>
</HTML>
|
たとえば、
ここにマウスを重ねてみてね
背景色変更
背景色は<BODY BGCOLOR="#???????">と指定するわけですが、これもJavaScriptで制御することが出来ます。
<HTML>
<HEAD>
<TITLE>選択した背景色に変更（ボタン）</TITLE>
</HEAD>
<SCRIPT language="JavaScript">
<!--
function changeColor(num){
if(num==0){
document.bgColor="#ffffff";
}else if(num==1){
document.bgColor="#ffcccc";
}else if(num==2){
document.bgColor="#ccffcc";
}else if(num==3){
document.bgColor="#ccccff";
}
}
// -->
</SCRIPT>
<BODY>
<CENTER>
<FORM>
<INPUT type="button" value="white" onClick="changeColor(0)">
<INPUT type="button" value="red" onClick="changeColor(1)">
<INPUT type="button" value="green" onClick="changeColor(2)">
<INPUT type="button" value="blue" onClick="changeColor(3)">
</FORM>
</CENTER>
</BODY>
</HTML>
|
ここで、<FORM>から</FORM>までは、フォームという機能で通常のHTMLですが、その中で「changeColor」という定義済のスクリプトを選択させています。
実際には、下のようなボタンとして表示されます。クリックするとスクリプトが実行されます。
このように、既存のスクリプトを使うだけでも、普通のHTMLだけでは出来ないことがいろいろと可能となることが分かります。
さまざまなサイトがありますが、以下に分かりやすいサイトを紹介します。
課題
JavaScript使うと以下のようなページも作れます。
- 例 医薬品情報
医薬品の種類を変えて作ってみて下さい（薬品数は２以上）
｢java**P????.html」（**P????は昨日まで使っていたもの）という名前のファイルをMoodle上に提出してください。
|