[Home] [-5] [<] [>] [+5]
JavaScriptサンプル

JavaScript のプログラムのサンプルです。多くのブラウザで動作し、設置も容易で実用的なものを中心に紹介します。
【リンクを制御する】
<A HREF="javascript:history.go(-1)">いま来た道を戻る</a> ↓このようになります
いま来た道を戻る

<HEAD>
<SCRIPT Language="JavaScript">
<!--
function LinkSelect(form, sel)
{
adrs = sel.options[sel.selectedIndex].value;
if (adrs != "-" ) location.href = adrs;
}
// -->
</SCRIPT>
</HEAD>
<FORM Method="POST" Name="LINK">
<SELECT NAME="selLink" onChange="LinkSelect(this.form, this)">
<OPTION Value="-" SELECTED>=== M E N U ===
<OPTION Value="color1.html">カラーサンプル１
<OPTION Value="color2.html">カラーサンプル２
<OPTION Value="color3.html">カラーサンプル３
<OPTION Value="color4.html">カラーサンプル４
<OPTION Value="-">−−−−−−−−−
<OPTION Value="pic1.html">サンプル画像１
<OPTION Value="pic2.html">サンプル画像２
<OPTION Value="pic3.html">サンプル画像３
</SELECT>
</FORM>
↓このようになります

【マウスの動きに合わせた変化】
<HEAD><SCRIPT LANGUAGE="JavaScript">
<!--
if (document.images) {
　img1 = new Image(); img1.src = "pic/61b.gif";
　img2 = new Image(); img2.src = "pic/62b.gif";
　img3 = new Image(); img3.src = "pic/63b.gif";
}
function setImage(img, image) {
　if (img) {
　img.src = image;
　}
}
// -->
</SCRIPT>
</HEAD>
<BODY>

<A HREF="pic1.html" onMouseOver="setImage(document.img1, 'pic/61r.gif')"
onMouseOut="setImage(document.img1, 'pic/61b.gif')">
<IMG NAME="img1" SRC="pic/61b.gif" BORDER=0>サンプル画像１</A><BR><BR>
<A HREF="pic2.html" onMouseOver="setImage(document.img2, 'pic/62r.gif')"
onMouseOut="setImage(document.img2, 'pic/62b.gif')">
<IMG NAME="img2" SRC="pic/62b.gif" BORDER=0>サンプル画像２</A><BR><BR>
<A HREF="pic3.html" onMouseOver="setImage(document.img3, 'pic/63r.gif')"
onMouseOut="setImage(document.img3, 'pic/63b.gif')">
<IMG NAME="img3" SRC="pic/63b.gif" BORDER=0>サンプル画像３</A>
↑このサンプルを表示

【メールフォームのチェック】
<HEAD><SCRIPT LANGUAGE="JavaScript">
<!--
function kakunin() {
if (document.F1.namae.value == "") {
alert("名前を記入して下さい");
document.F1.namae.focus();
return(false);
}
if (document.F1.yuubin.value == "") {
alert("〒番号を記入して下さい");
document.F1.yuubin.focus();
return(false);
}
if (document.F1.jusyo.value == "") {
alert("住所を記入して下さい");
document.F1.jusyo.focus();
return(false);
}
return(true);
}
// -->
</SCRIPT>
</HEAD>
<BODY>

<FORM NAME="F1" onSubmit="return kakunin()" ACTION="mailto:katsu030@mail.infoseek.co.jp" METHOD="POST" ENCTYPE="text/plain">

お名前：<INPUT TYPE="text" NAME="namae" SIZE="30"><BR><BR>
〒番号：<INPUT TYPE="text" NAME="yuubin" SIZE="15"><BR><BR>
ご住所：<INPUT TYPE="text" NAME="jusyo" SIZE="60"><BR><BR>
↑このサンプルを表示

【運試し】
<HEAD><SCRIPT LANGUAGE="JavaScript">
<!--
function kuji(){
k = new Array("絶好調！","　好調！","ごっつええ","いい感じ！","ええがな！","いいかも","　ええで","そこそこ","ぼちぼち","まあまあ","　不　調","あかんわ");
r = Math.floor(Math.random()*12);
document.omikuji.kekka.value = k[r];
} -->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="omikuji">
<INPUT TYPE = "button" VALUE = "☆占ってみる☆" onClick =kuji()>
<INPUT type="TEXT" name="kekka" size="10" maxlength="10" value="">
</FORM>
↓このようになります

【スクロールメッセージ】
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
var spd = 200;
var m1= "このようにステータスバーに";
var m2= "スクロールメッセージが表示されます";
var m3= "実はリンク先が確認できなくなって邪魔です。";
var msg=m1+m2+m3;
var msg=msg+msg;function scro() {
msg=msg.substring(2,msg.length)+msg.substring(0,2);
window.status = msg; setTimeout("scro()",spd); }
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF" onLoad="scro()">
↑このサンプルを表示

☆　Java Script の注意　☆
  • Java Script は、最新のブラウザを使っていても設定により使用できない環境もあります。 必ずしもすべての人が見られるわけではありません。重要な内容の場合は、Java Script を必要としないページを別に用意するか、別に普通の表示も併記するかしておきましょう。
  • プログラムのデータが大きすぎると、見ている人に対して非常に負担となります。場合によってはハングアップやシステムフリーズの原因になるので、「index.html」など必ず訪れるところは避け、あらかじめ注意を促しておいたページとするか、できる限り軽いプログラムとしましょう。