JSsample

このホームページで使われているJavaScriptについて

初心者が書いた初心者のためのページ！！
このページで使われているJavaScriptのsampleです。コピーアンドペーストして御自由にお使いください。
間違いがあったら、教えてください。

目次
1.挨拶文
2.アクセスされた日付、時間を表示する
3.マウスを重ねると画像が変化する
4.警告の表示

1.挨拶文
トップページにある時間によって変わるルビーのメッセージの作り方。

<Script Language="JavaScript">
<!--
function Array(n)
{
    this.length=n;
    for(i=0;i>n;i++)this[i]="";
}　　// n個の配列を作る関数を定義
mes = new Array(24);
mes[0]="午前０時です。";
mes[1]="午前１時です。";
mes[2]="午前２時です。";
    :
    :
mes[23]="午後１１時です。";
 　　// 24個のメッセージを作る
function message(){
     d = new Date();
     h = d.getHours();
     document.write(mes[h]);
}      
       // n時のときにmes[n]を表示するように関数を定義
// -->
</script>
<!-- 
         ここまでの部分をヘッダに埋め込む
　　    <head>
          <title>タイトル</title>
         上のプログラム
          </head>というように書く
// -->
<script Language="JavaScript">//メッセージを表示させたい場所に下のように書く
<!--
       message();
// -->
</script>

目次に戻る

2.アクセスされた時の日付、時間を表示する
まずヘッダ内で関数を定義する。

<Script Language="JavaScript">
<!--
function timewrite(){
  d=new Date();
  mo=d.getMonth()+1; //０から始まるので１足す
  da=d.getDate();
  h=d.getHours();
  m=d.getMinutes();
      // 月、日、時、分を取得する
  gogo=12;
  if(h >= 12){
   g=h-gogo;
      // 午前、午後で表示する場合に、午後の時間から12を引く
   document.write(mo+"月"+da+"日午後"+g+"時"+m+"分"+"です。");
}
  else{
    document.write(mo+"月"+da+"日午前"+h+"時"+m+"分"+"です。");
 }
}
// -->
</script>

<script Language="JavaScript">
<!--
      timewrite();
// -->
</script>

このほかにgetDayというコマンドを使えば、メッセージの表示と組み合わせて曜日ごとに違うメッセージを表示することもできる。（但し、メッセージを作るのが大変）

目次に戻る

3.マウスを重ねると画像が変化する
この場合はヘッダの中で関数を定義しなくても、scriptタグを使わなくてもよい。

<a href="aaa.html" 
onMouseOver='zzz.src="bbb.gif"; return true'
onMouseOut='zzz.src="ccc.gif"'>
<img src="ccc.gif" name="zzz"  border="0"></a>

bbb.gifとccc.gifという２つのgif画像を用意して、この場合はcccが普段の画像でbbbがマウスを重ねたときに現われる画像とした。クリックすると同じディレクトリ内のaaa.htmlというファイルにジャンプする。ここのトップページのように同じ画像を使って複数のアイコンを使う場合はzzzの部分をそれぞれ違う名前に変えればいい。

目次に戻る

4.警告の表示

まずはこのボタンを押してください。

警告の表示が出ましたか？
これはフォームの送信のボタンになどにつけると便利です。
ここで使われているサンプルは次のとおりです。

<script Language="JavaScript"> //ヘッダに関数を定義する
<!--
  function alerter(){
    alert("アラートのテスト");
}
// -->
</script>

<!-- ボタンをつけたいところに書く // -->
<form action="" method="get">
<input type="button" value="PUSH!" onClick="alerter()">
</form>

関数内の"アラートのテスト"の部分を実際使うように書き換える。

次にこのボタンを押してください

これは、"OK"だけでは困るボタンにつけると便利です。
これを使うにはalert("アラートのテスト")の部分をf=confirm("消去してよいですか？");return fというように変えれば作れます。

<script Language="JavaScript"> //ヘッダに関数を定義する
<!--
  function confirmer(){
    f=confirm("YES or NO ?");
    return f
}
// -->
</script>

<!-- ボタンをつけたいところに書く // -->
<form action="" method="get">
<input type="button" value="PUSH!" onClick="confirmer();return f">
</form>

目次に戻る

ホームに戻る

ishizawa@mxw.mesh.ne.jp