とほほの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>
すでにウィンドウが開いている場合は、そのウィンドウを最全面に表示します。(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/ )