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

HOME > とほほのWWW入門 > とほほのJavaScript入門 > サンプル
1998年4月12日版

はじめに

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

現在の時刻を表示する

new Date()で現在の時刻を得ることができます。(N2/e3)
  <HTML>
  <BODY>
  <SCRIPT LANGUAGE="JavaScript">
  <!--
  dd = new Date();
  document.write("ただ今の時刻は");
  document.write(dd.getHours() + "時");
  document.write(dd.getMinutes() + "分です。");
  // -->
  </SCRIPT>
  </BODY>
  </HTML>

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

1〜10までの乱数により、ランダムな画像を表示します。この文書と同じディレクトリに 1.gif 〜 9.gif の画像を用意しておいてください。(N3/e4)
  <HTML>
  <BODY>
  <SCRIPT LANGUAGE="JavaScript">
  <!--
  document.write('<IMG SRC="');
  document.write(Math.ceil(Math.random() * 10));
  document.write('.gif">');
  // -->
  </SCRIPT>
  </BODY>
  </HTML>

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

appNameとappVersionからブラウザのバージョンを識別します。IE3.0はappVersionで2や3を返すものがあるので注意が必要です。(N2/e3)
  <HTML>
  <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 を表示します。(N2/e3)
  <HTML>
  <HEAD>
  <TITLE>テスト</TITLE>
  </HEAD>
  <BODY>
  <A HREF="#" onClick="window.open('xx.html', 'XX')">
  リンクテキスト
  </A>
  </BODY>
  </HTML>

別ウィンドウに表示する(2)

すでにウィンドウが開いている場合は、そのウィンドウを最全面に表示します。(N3/e4)
  <HTML>
  <HEAD>
  <TITLE>テスト</TITLE>
  <SCRIPT LANGUAGE="JavaScript">
  <!--
  w = window;
  function openwin() {
      if (w == window) {
          w = open("xx.html");
      } else {
          w.focus();
      }
  }
  // -->
  </SCRIPT>
  </HEAD>
  <BODY>
  <A HREF="#" onClick="openwin()">
  リンクテキスト
  </A>
  </BODY>
  </HTML>

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

ページ上に「別ウィンドウに表示する」チェックボックスを表示します。これにチェックするとリンクをクリックした時に別ウィンドウに表示されるようになります。(N3/e?)
  <HTML>
  <HEAD>
  <SCRIPT LANGUAGE="JavaScript">
  <!--
  function func() {
    window.name = document.form1.cb1.checked ? "" : "out";
  }
  // -->
  </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文字以内かどうか調べます。(N2/e3)
  <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秒刻みに表示します。(N2/e3)
  <HTML>
  <HEAD>
  <TITLE>テスト</TITLE>
  <SCRIPT>
  <!--
  function func() {
    dd = new Date();
    year = dd.getYear(); if (year < 1900) year += 1900;
    mon  = dd.getMonth() + 1;
    date = dd.getDate();
    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>

Copyright(C) とほほ ( http://www2e.biglobe.ne.jp/~s-hasei/ )