とほほのJavaScript入門(サンプル)

2000年4月26日版

はじめに

JavaScriptの使用例をいくつかあげてみました。 (e3/N2)は、Netscape Navigator 2.0以降、Internet Explorer 3.0以降で使用可能であることを意味します。

現在の時刻を表示する

new Date()で現在の時刻を得ることができます。(e3/N2)

  <HTML>
  <HEAD><TITLE>テスト</TITLE></HEAD>
  <BODY>
  <SCRIPT LANGUAGE="JavaScript">
  <!--
  dd = new Date();
  document.write("ただ今の時刻は");
  document.write(dd.getHours() + "時");
  document.write(dd.getMinutes() + "分です。");
  // -->
  </SCRIPT>
  </BODY>
  </HTML>

今日の日付を表示する

今日の日付を YYYY/MM/DD 形式で表示します。(e3/N2)

  <HTML>
  <HEAD><TITLE>テスト</TITLE></HEAD>
  <BODY>
  <SCRIPT LANGUAGE="JavaScript">
  <!--
  xx = new Date();
  yy = xx.getYear();
  mm = xx.getMonth() + 1;
  dd = xx.getDate();
  if (yy < 2000) { yy += 1900; }
  if (mm < 10) { mm = "0" + mm; }
  if (dd < 10) { dd = "0" + dd; }
  document.write(yy + "/" + mm + "/" + dd);
  // -->
  </SCRIPT>
  </BODY>
  </HTML>

ランダムな画像を表示する

0～9までの乱数により、ランダムな画像を表示します。この文書と同じディレクトリに 0.gif ～ 9.gif の画像を用意しておいてください。(e4/N3)
  <HTML>
  <HEAD><TITLE>テスト</TITLE></HEAD>
  <BODY>
  <SCRIPT LANGUAGE="JavaScript">
  
  </SCRIPT>
  </BODY>
  </HTML>

ブラウザによって処理を振り分ける

appNameとappVersionからブラウザのバージョンを識別します。IE3.0はappVersionで2や3を返すものがあるので注意が必要です。(e3/N2)

  <HTML>
  <HEAD><TITLE>テスト</TITLE></HEAD>
  <BODY>
  <SCRIPT LANGUAGE="JavaScript">
  <!--
  app = navigator.appName.charAt(0);
  ver = navigator.appVersion.charAt(0);
  if (app == "N") {
    if (ver == 2) {
      document.write("Netscape Navigator 2.0<BR>");
    } else if (ver == 3) {
      document.write("Netscape Navigator 3.0<BR>");
    } else if (ver == 4) {
      document.write("Netscape Navigator 4.0<BR>");
    }
  } else if (app == "M") {
    if (ver == 2) {
      document.write("Internet Explorer 3.0<BR>");
    } else if (ver == 3) {
      document.write("Internet Explorer 3.0<BR>");
    } else if (ver == 4) {
      document.write("Internet Explorer 4.0<BR>");
    }
  }
  // -->
  </SCRIPT>
  </BODY>
  </HTML>

別ウィンドウに表示する

リンクをクリックすると、別ウィンドウを開いてそこに xx.html を表示します。open()の引数を設定することで、別ウィンドウの大きさやツールバーの有無を制御することもできます。(e3/N2)
  <HTML>
  <HEAD><TITLE>テスト</TITLE></HEAD>
  <BODY>
  <A HREF="#" onClick="window.open('xx.html', 'XX')">
  リンクテキスト
  </A>
  </BODY>
  </HTML>

「別ウィンドウに表示」を制御する

ページ上に「別ウィンドウに表示する」チェックボックスを表示します。これにチェックするとリンクをクリックした時に別ウィンドウに表示されるようになります。(e3/N3)
  <HTML>
  <HEAD>
  <SCRIPT LANGUAGE="JavaScript">
  
  </SCRIPT>
  </HEAD>
  <BODY onLoad="func()">
  <FORM NAME=form1>
  <INPUT TYPE=checkbox NAME=cb1 onClick="func()">
  別ウィンドウに表示する
  </FORM>
  <A HREF="xxx.html" TARGET=out>XXX</A>
  </BODY>
  </HTML>

フォームの入力をチェックする

フォームに入力した文字列が8文字以内かどうか調べます。(e3/N2)

  <HTML>
  <HEAD>
  <TITLE>テスト</TITLE>
  <SCRIPT LANGUAGE="JavaScript">
  <!--
  function check() {
    len = document.form1.passwd.value.length;
    if ((len < 1) || (8 < len)) {
      alert("Passwordは1～8文字でなくてはなりません。");
      return false;
    } else {
      return true;
    }
  }
  // -->
  </SCRIPT>
  </HEAD>
  <BODY>
  <FORM NAME=form1 onSubmit="return check()" ACTION="...">
  Password: <INPUT TYPE=password NAME=passwd>
  <INPUT TYPE=submit VALUE="OK">
  </FORM>
  </BODY>
  </HTML>

現時刻をリアルタイムに表示する

setTimer()関数を用いて、現在の時刻を1秒刻みに表示します。(e3/N2)

  <HTML>
  <HEAD>
  <TITLE>テスト</TITLE>
  <SCRIPT>
  <!--
  function func() {
    dd = new Date();
    year = dd.getYear(); if (year < 2000) year += 1900;
    mon  = dd.getMonth() + 1; if (mon < 10) mon = "0" + mon;
    date = dd.getDate(); if (date < 10) date = "0" + date;
    hour = dd.getHours(); if (hour < 10) hour = "0" + hour;
    min  = dd.getMinutes(); if (min < 10) min = "0" + min;
    sec  = dd.getSeconds(); if (sec < 10) sec = "0" + sec;
    document.form1.text1.value =
      year + "/" + mon + "/" + date + " " +
      hour + ":" + min + ":" + sec;
    setTimeout("func()", 1000);
  }
  // -->
  </SCRIPT>
  </HEAD>
  <BODY onLoad="func()">
  <FORM NAME=form1>
  <INPUT TYPE=text NAME=text1>
  </FORM>
  </BODY>
  </HTML>

複数のフレームの内容を書き換える

3分割されたフレーム(A,B,C)で、Aのページにあるリンクをクリックした時に、B,Cのページを書き換えます。(e3/N2)

======<frame.html>======
<HTML>
<HEAD><TITLE>Frame Test</TITLE></HEAD>
<FRAMESET COLS="30%,*">
 <FRAME SRC="A.html" NAME="A">
 <FRAMESET ROWS="30%,*">
  <FRAME SRC="B.html" NAME="B">
  <FRAME SRC="C.html" NAME="C">
 </FRAMESET>
</FRAMESET>
</HTML>

======<A.html>======
<HTML>
<HEAD>
<SCRIPT><!--
function jump(url1, url2) {
  window.parent.B.location.href = url1;
  window.parent.C.location.href = url2;
  return false;
}
// --></SCRIPT>
<BODY>
<A HREF="#" onClick="return jump('D.htm', 'E.htm')">XXX</A>
</BODY>
</HTML>