では、早速ですがサンプルです。

<script type="text/javascript">
<!--
function Keisanki(){
var obj = window.document.form1.text1;
var keisanshiki = obj.value;
if (keisanshiki == "") { return; }
obj.value = eval(keisanshiki);
}
//-->
</script>
<form name="form1">
<input type="text" name="text1" size=8 maxlength=8>
<input type="button" value="計算" onClick="Keisanki()">
</form>

それでは実行してみましょう。テキストボックスに計算式を入れて、計算ボタンを押すと、テキストボックスの中身が計算結果になったはずです。

しかしながら、この計算機は、例外処理をしていないので、変な数式を入力すると変な結果になってしまいます。 余力があれば、入力フォーマットを設定して、不正な文字を入力したときには「入力が不正です」といったメッセージを表示するようにして見て下さい。

さて、ここまでJAVAスクリプトの事例や素材をご紹介してきましたが、いかがでしたでしょうか。 初心者の方の入門用の講座として、解説してきましたが、あなたの参考になれば幸いです。

JAVAスクリプト初心者入門講座は、これで最終回となりますが、今まで閲覧頂き有難うございました。

この機能も、JAVAスプリクトを用いて実現することが出来るのです。それでは、早速ですがサンプルを見てみましょう。

<script type="text/javascript">
<!--
function AddFavorite(){
window.external.AddFavorite('http://www.google.co.jp','Google');
}
//-->
</script>

<input type="button" value="お気に入りに追加" onClick="AddFavorite()">

さて実行してみましょう。画面には「お気に入りに追加」というボタンが表示され、押してみると、このサンプルの場合Googleがお気に入りに登録できます。このサンプルのURLの部分と、タイトルの部分を自分のお気に入りに登録させたいページに変更すれば、自分のページにも組み込むことが出来ますね。

さて、問題があります。実はこの機能はInternetExplorerでしか使うことが出来ません。 すなわち、InternetExplorer以外のブラウザでアクセスしたときには、この機能は使えないという旨のメッセージを表示しなければいけませんね。

そこで、サンプルを以下のように変更します。

<script type="text/javascript">
<!--
function AddFavorite(){
var appName = window.navigator.appName.charAt(0);
if (appName == "M") {
window.external.AddFavorite('http://www.google.co.jp','Google');
} else {
window.alert("この機能はIntenetExplorerのみです");
}
}
//-->
</script>

<input type="button" value="お気に入りに追加" onClick="AddFavorite()">

さて、どうなったでしょうか。InternetExplorerしかブラウザを使っていない人は確認できませんが、FirefoxなどInternetExplorer以外のブラウザを使っている場合は、 ボタンをクリックしたときに、ちゃんと機能が対応していない旨のメッセージが表示されたはずです。

そこで、今回はJAVAスプリクトを使って、人によってはうっとうしいと感じるかもしれませんが、ページを移動するときに確認をしてくるようなページを作ってみようと思います。

理論は、大体分かると思いますが、リンクをクリックしたときに、アラートを表示させる関数を実行するだけです。 それでは、早速ですがサンプルを見てみましょう。

<script type="text/javascript">
<!--
function kakunin(){
var hoge = confirm("ページを移動しますが構いませんか？");
if(hoge){
location.href = "http://www.google.co.jp"
}
}
//-->
</script>

<a href="#" onClick="kakunin();return false;">リンク</a>

それでは、早速実行してみましょう。画面に表示された「リンク」をクリックすると、本当に移動するかの確認を求められ、OKを押すとそのままジャンプしますが、キャンセルを押した場合、 ジャンプはしません。

一見ばかばかしいことのように見えますが、たとえば、ある一連のアニメーションや効果を見せているとき、見せている方としてはそのまま最後まで見せたいですよね。 しかしながら、ユーザーが途中で他のページに飛ぼうとしてしまうことがあります。

そういったときに、本当にいいのか、の確認をするときに、この手法は有効です。

理論としては、大吉から大凶までを配列に入れておき、その要素数で乱数を発生させて、そこで決まった数に応じて結果を表示させます。

では、早速ですがサンプルを下記に示してみます。

<script type="text/javascript">
<!--
var Count = 6;
var Kekka = new Array(
"大吉",
"中吉",
"小吉",
"末吉",
"凶",
"大凶"
);
var Ransu = Math.floor(Math.random()*Count);
document.write("結果は "+Kekka[Ransu]+" です。\n");
//-->
</script>

上記を書いたら早速実行してみましょう。画面には、結果に応じて・・・

結果は ○○ です。

上記のように表示されるはずです。ちなみに、これは毎回ちゃんと違う値になりますね。ちゃんと全ての結果が出ると思います。確認してみましょう。

また、余力のある人は、結果に応じて大吉なら「おめでとうございます！」、大凶なら「残念！」などと表示するようにサンプルを変えてみてもいいですね。 こうした事は、if文で簡単に作ることが出来ます。

ここで使った乱数の概念は、JAVAスプリクトや他のプログラミング言語において、様々な場面で使うことになり、その発生方法も様々です。また、乱数を使って円周率を求めるモンテカルロ法といったものも存在します。興味のある人は是非調べてみて下さい。

それが、今回のサンプルです。いきなりですがまずはコードを書いてみましょう。

<script type = "text/javascript">
<!--
ImgOne = new Image();
ImgOne.src = "http://www.google.co.jp/logos/Logo_60wht.gif";
ImgTwo = new Image();
ImgTwo.src = "http://www.goo.ne.jp/img2/logo/gh_logo2.gif";
function MouseOut(){
document.ShowImg.src = ImgOne.src;
}
function MouseOn(){
document.ShowImg.src = ImgTwo.src;
}
//-->
</script>
<a href="#" onMouseOver="MouseOn()" onMouseOut="MouseOut()">
<img border="0" name="ShowImg" src="http://www.google.co.jp/logos/Logo_60wht.gif"></a>

さてこのプログラムを実行してみましょう。どうでしょうか。最初画面にはGoogleのロゴが表示され、マウスカーソルを載せるとgooのロゴに変わったと思います。

詳しく説明すると、ImgOneにはマウスカーソルが離れている時、ImgTwoにはマウスカーソルが載っているときの画像が読み込まれ、<a href>のonMouseOver、onMouseOutイベントにより、 それぞれにあった表示を行う関数を呼び出して処理をしています。

画像の変更だけではなく、onMouseOverやonMouseOutは様々な応用が利くので、是非使ってみましょう。

今回は、パスワード認証をして、正しいパスワードを入力したらGoogleのページに飛ぶようなプログラムを書いてみます。 では、サンプルです。この場合パスワードは「java」です。

<script type="text/javascript">
<!--
function PassCheck(){
var num = prompt("パスワードを入力して下さい","");
if(num == "java"){
location.href="http://www.google.co.jp";
} else {
alert("パスワードが間違っています。");
}
}
//-->
</script>
<form>
ここから先は会員だけです。→
<input type="button" value="会員制サイトに入る" onClick="PassCheck()">
</form>

このサンプルを実行してみて下さい。するとパスワードの入力を求められるダイアログが表示され、javaと入力すると、Googleのページにジャンプするはずです。

しかし、これでは欠点がありますね。入力してて気づいたと思いますが、これは入力された文字列をただ判別しているだけなので、ソースを見れば一発でパスワードが分かってしまいます。これを防止するために、通常はパスワードに暗号化を施します。

暗号化といってもやり方は色々ありますが、一番簡単な物は文字列を文字コード化することでしょう。コンピュータで使われる文字列の規格は、ASCII等色々ありますが、全て数字で表すことが出来ます。

興味を持った人は調べて是非暗号化に挑戦してみて下さい。

JAVAスプリクトにおいても、関数等を外部ファイルに定義して、読み込んで使うことが出来ます。さっそく簡単な関数を外部ファイルで定義してみましょう。

まずは適当にメモ帳などのエディタを立ち上げます。次にソースを記述しますが、ここで注意です。 外部ファイルで定義するときは、HTMLソースに書いたときのような、

<script type="text/javascript">
<!--
//-->
</script>

この一連のタグを入力する必要はありません。直接プログラムを書いてもよいと言うことです。

では、次の関数を定義します。

function Sum(){
var a = 10;
var b = 5;
var c = a + b;
document.write("a + bは"+c+"です\n");
}

記述したら、そのファイルを sample.js というファイル名を拡張子で保存しましょう。

さて、次はHTML内での記述です。ここで注意ですが、外部ファイルを読み込むときは、<head>タグ内の<script>タグに以下のように付け加えます。

<script type="text/javascript" src="sample.js">

src="sample.js"　がC言語でいう#includeの働きをしていると思って下さい。また、関数を定義しているため、<head>タグ内の<script>タグです。間違えて<body>タグ内の<script>タグに記述しないように気をつけましょう。

そうしたら、コードの記述部分に・・・

Sum();

として、HTMLファイルを開いてみましょう。 どうでしょうか。画面には a + b は15ですと表示されましたか？

外部ファイルの利用は、本体のプログラムを見やすく簡素な物にするためにも、有効的に使うようにしましょう。

理論としては、上で言ったとおりで、あらかじめ用意されている文章を、時間ごとに徐々に表示させていくだけです。

それでは、サンプルプログラムです。 まずは関数部分です。<head>タグ内に記述して下さい。

<script type="text/javascript">
<!--
ShowMsg = "JAVAスプリクトの世界へようこそ！";
CntHensu = 0;
function ShowMessage(){
document.myForm.myFormMessage.value = ShowMsg.substring( 0 , CntHensu )+"_";
CntHensu = ( CntHensu == ShowMsg.length ) ? 0 : CntHensu+1;
}
//-->
</script>

ここから下は<body>タグ内に記述しましょう。

<form name="myForm">
<input type="text" size="30" name="myFormMessage">
</form>
<script type="text/javascript">
<!--
setInterval("ShowMessage()",200);
// -->
</script>

以上です。このサンプルを実行してみて下さい。画面には、テキストボックスが現れ、その中には「JAVAスプリクトの世界へようこそ！」と、徐々に入力されていったはずです。

よりリアルにするために、入力課程においては文末に"_"を表示するようにしています。

余力がある人は、最初はひらがなで入力して、ある一定のラインまで行ったら変換するような効果を作ってみましょう。 ヒントとしては、表示テキストを配列に入れて、変換ポイントまで来たら条件分岐をしてそのときにテキストボックスの表示内容を変える、といったところでしょうか。

何かの解説や講座を行っているページに多いですね。そういったページでは扱う内容も豊富なので、ジャンルごとに分けて、細かいメニューはプルダウンメニューを使って、といったようになっています。

この機能も、JAVAスプリクトを使って簡単に実装することが出来ます。理論としては、プルダウンメニューの上から順に配列で番号をつけて、選んだ項目の番号を代入してそこで条件判断している、という感じです。

それでは、サンプルです。以下のサンプルはすべて<body>タグ内に記述することになります。

<script type="text/javascript">
<!--
function GoLocation(){
mySelectValue = document.myForm.myMenu.selectedIndex;
location.href = document.myForm.myMenu.options[mySelectValue].value;
}
//-->
</script>

<form name="myForm">
<select name="myMenu">
<option value="http://www.google.co.jp">Google
<option value="http://www.yahoo.co.jp">Yahoo! JAPAN
<option value="http://www.microsoft.com">Microsoft
<option value="http://www.apple.com/">Apple
<option value="http://www.ibm.com">IBM
</select>
<input type="button" value="ジャンプ" onClick="GoLocation()">
</form>

さて、上記を実行してみましょう。ちゃんとプルダウンメニューが表示され、選択したページに飛べたでしょうか。 プルダウンメニューを活用して、見やすいページ作りをしましょう。

実はそういう機能の実装にも、JAVAスプリクトが用いられているのです。 それでは、サンプルを見てみましょう。

まず、<head>タグ内で関数を定義します。

<script type="text/javascript">
<!--
function alt() {
window.alert("右クリックは禁止です！");
}
// -->
</script>

そしたら、<body>タグを以下のように変更しましょう。

<body oncontextmenu="alt();return false;">

以上で終わりです。少し作業が複雑でしたが、ちゃんと出来たでしょうか？ このページを開いて、右クリックすると、「右クリックは禁止です！」というアラートが出てきたと思います。

右クリックの禁止は、この方法で実装できました。しかしながら、JAVAスクリプトを使っていると言うことは、あらかじめブラウザの設定でJAVAスクリプトを無効にする設定にしてしまえば、この方法では右クリックを禁止できなくなる、という弱点があります。

いたちごっこにならないためにも、他の方法を探していく必要がありますね。

これはHTMLでも実装することが出来ます。HTMLでやる場合は下記のように行います。

<div title="Webページ上で実行されるインタプリタ言語">JAVAスプリクト</div>

このように<body>タグ内で記述します。試しに実行してみましょう。画面にJAVAスプリクトと表示され、そこにマウスカーソルをあてるとその説明が表示されたはずです。しかし、この手法では、あくまで補足的な物しかできません。あまり長い文章ですと読みにくくなってしまいますし、気づきにくいというのもあります。

JAVAスプリクトを使うと、もっと高度な注釈を作ることが出来ます。では、サンプルです。まず、<head>タグ内で・・・

<script type = "text/javascript">
<!--
function show(msg){
document.form1.field1.value = msg;
}
// -->

この関数を定義します。 そしたら<body>タグ内で・・・

<form action="#" name="form1">
<input type="text" name="field1" size="80">
<p onMouseOver="disp('Webページ上で実行されるインタプリタ言語')" onMouseOut="disp('')">JAVAスプリクト</p>

このようにしてください。さてどうなったでしょうか。こちらの場合、JAVAスプリクトにマウスカーソルを当てると、上のテキストボックスに解説が表示されました。

この方法は、ページ内にとても多くの単語を載せる場合、その説明をいちいちページ内に書くとページを圧迫しますが、この方法を用いると、説明はテキストボックス1つ分だけで済むので、とても見やすいページになります。

そうしたイベントを行うのがタイマーで、これもJAVAスプリクトを用いて簡単に実装することが出来ます。 こうしたタイマーは、数字を指定した秒数カウントして、0になったら条件分岐で所定の処理を実行する、という流れになっています。

試しに、10秒待って10秒たったら「お待たせしました」と表示するようなページを作ってみたいと思います。 では、サンプルです。まず<script>タグの前で・・・

<span id="text" style="font-size:300px;">10</span>

こちらを記述して下さい。 以下はJAVAスプリクト部分です。

var i = 10;
var tid=setInterval("timer10s()",1000);
function timer10s(){
document.getElementById("text").firstChild.nodeValue=i;
if (i == 0){
document.write("お待たせしました");
}
i--;
}

さて、どうだったでしょうか。きちんと10からカウントされて0になったら「お待たせしました」と表示されたでしょうか。

タイマーは、こういったものの他にも、クイズでの制限時間など、様々な応用が利きます。こうした事が出来ると、さらに遊びの幅も広がりますので、色々試してみましょうね。

このとき、画面の解像度が1024×768の環境では、きちんと見ることが出来ますが、それ以下、たとえば640×480等の環境だった場合、画面をはみ出してすべてを一度に見ることが出来ません。

画像を表示させる場合、imgタグでその表示サイズは変えることが出来ますから、ビジターの解像度に応じて、表示サイズを変更させれば、どんな環境でも見せたい部分をすべて見せることが出来るようになるというわけです。

JAVAスプリクトにおいて、画面の解像度を取得するには、window.screenプロパティを使います。 それでは、サンプルです。

var monitor = window.screen;
document.write("あなたのモニターの解像度は"+monitor.width+"×"+monitor.height"です");

このサンプルを実行してみましょう。画面にはなんと表示されましたか？仮に解像度が1024×768だったら・・・

あなたのモニターの解像度は1024×768です

と正しく表示されたはずです。 それでは、仮に横幅が1000以上だったら正しく表示されるページを作ったとして、その用件を満たしていれば正しく表示されることを示すメッセージを表示するようにしたいと思います。

ではサンプルです。

var monitor = window.screen;
var x = monitor.width;
if(x >= 1000){
document.write("あなたはこのページを正しく見ることが出来ます。\n");
} else {
document.write("残念ですがですがあなたはこのページを正しく見ることが出来ません。\n");
}

さてどうだったでしょうか？Webページ制作において、どんな環境でも、同じように見える、というように作ると言うことは、とても大事なことです。 JAVAスプリクトを活用して、そういったページづくりが出来るようになりましょう。

今回は、そういったブラウザごとにメッセージを表示するページを作ってみましょう。

ではサンプル素材を下記に示します。

document.write("あなたのお使いのブラウザは");
document.write(navigator.appName);
document.write(ですね\n);

では上記を実行してみましょう。画面にはなんと表示されましたか？仮にInternet Explorer を使っていた場合、画面には・・・

あなたのお使いのブラウザはMicrosoft Internet Explorerですね

上記のように表示されたはずです。この情報を元に、表示される文章やジャンプするページを分岐させるのは簡単ですね。if文などの条件分岐を用い、この文字列かどうかを判別すればいいわけです。

そのサンプルも示しましょう。

x = navigator.appName;
if(x == 'Microsoft Internet Explorer'){
document.write("世界シェアNo.1　Microsoft社のあのブラウザですね？");
}

このサンプルを実行してみましょう。InternetExplorer限定ですが、画面には「世界シェアNo.1　Microsoft社のあのブラウザですね？」と表示されたはずです。他のブラウザ、例えばFirefoxなどを使っていた場合は、 何も表示されません。

理論としては、条件分岐の概念を用い解答によって分岐をして全問正解までを制御します。 大体理解したらサンプルをいじって自分のオリジナルのものを作ってみましょう。それではサンプルです。

まずは関数定義部分です。これを<head>?</head>間で定義します。

<script type="text/javascript">
<!--
function toi1(){
answer = confirm("日本の首都は東京か？　○なら「OK」　×なら「キャンセル」");
if (answer) toi2();
else alert("ハズレ。0問正解");
}
function toi2(){
answer = confirm("日本の首都は東京か？　○なら「OK」　×なら「キャンセル」");
if (answer) toi3();
else alert("ハズレ。1問正解");
}
function toi3(){
answer = confirm("日本の首都は東京か？　○なら「OK」　×なら「キャンセル」");
if (answer) toi4();
else alert("ハズレ。2問正解");
}
function toi4(){
answer = confirm("日本の首都は東京か？　○なら「OK」　×なら「キャンセル」");
if (answer) toi5();
else alert("ハズレ。3問正解");
}
function toi5(){
answer = confirm("日本の首都は東京か？　○なら「OK」　×なら「キャンセル」");
if (answer) alert(お疲れ様でした。全問正解です。);
else alert("ハズレ。4問正解");
}
// -->
</script>

次に実行部分です。これは<body>?</body>内で定義しましょう。

<input type="button" value="クイズスタート！" onClick="toi1()">

問題が大分適当ですが、あとでオリジナルで作ることを考えて、変更しやすいようにこの形にしました。 余力があれば、カウント用の変数を用意して、○問正解の部分を変数で補えば、問題数を増やすのが容易になります。