JavaScriptサンプル集 2004-10-19T09:11:50Z tag:www.banlo.com,2007:/javascript//16 Movable Type Copyright (c) 2004, riche セレクトメニューの内容を変更 2004-09-15T14:31:16Z 2004-09-15T23:31:16+09:00 tag:www.banlo.com,2004:/javascript//16.723 2004-09-15T14:31:16Z ラジオボタンでセレクトメニューの内容を変更 riche http://www.banlo.com/ info@banlo.com 01フォーム:01ラジオボタン ▼ソース
<HEAD>
<SCRIPT type="text/javascript" language=JavaScript>
<!--
function listkey(){
  var i;
  var opn = document.check;
  var ope = opn.key;
  var n = -1;
//ラジオボタンの選択状況をチェック
  for( i=0; i<=opn.list.length -1; i++){
    if(opn.list[i].checked) n = i;
  }
  relist(ope);
  if(n != -1){
    mykey = n;
    if(mykey == 0){
      list_key1(ope);
    }else if(mykey == 1){
      list_key2(ope);
    }else if(mykey == 2){
      list_key3(ope);
    }
  }
}

//セレクトメニューをリセットして1行目を表示
function relist(sel) {
  sel.selectedIndex = 0;
}

//リスト1を選択
function list_key1(lis) {
  lis.options.length = 2;
  lis.options[0].text = "リスト1-1";
  lis.options[1].text = "リスト1-2";
}

//リスト2を選択
function list_key2(lis) {
  lis.options.length = 3;
  lis.options[0].text = "リスト2-1";
  lis.options[1].text = "リスト2-2";
  lis.options[2].text = "リスト2-3";
}

//リスト3を選択
function list_key3(lis) {
  lis.options.length = 4;
  lis.options[0].text = "リスト3-1";
  lis.options[1].text = "リスト3-2";
  lis.options[2].text = "リスト3-3";
  lis.options[3].text = "リスト3-4";
}
//-->
</SCRIPT>
</HEAD>

<BODY onload="listkey()">
<FORM name=check>
<INPUT type=radio value=0 name=list onclick=listkey() checked>リスト1
<INPUT type=radio value=1 name=list onclick=listkey()>リスト2
<INPUT type=radio value=2 name=list onclick=listkey()>リスト3
<P>
<SELECT name=key>
<OPTION selected>検索項目
<OPTION>
<OPTION>
<OPTION>
</SELECT>
</FORM>
</BODY>

]]> ▼サンプル


リスト1
リスト2
リスト3



]]> リンク　type1 2004-09-16T07:47:03Z 2004-09-16T16:47:03+09:00 tag:www.banlo.com,2004:/javascript//16.731 2004-09-16T07:47:03Z ラジオボタンとボタンでリンク riche http://www.banlo.com/ info@banlo.com 01フォーム:01ラジオボタン ▼ソース
<HEAD>
<SCRIPT type="text/javascript" language="JavaScript">
<!--
function Check() {
  var tolink = document.url
  for(i=0 ; i<=tolink.list.length -1 ; i++){
    if (tolink.list[i].checked) {
      var n = tolink.list[i].value;
      document.location.href=n;
    }
  }
}
//-->
</SCRIPT>
</HEAD>

<BODY>
<FORM name="url">
<input type="radio" name="list" value="1.html">テスト表示1
<input type="radio" name="list" value="2.html">テスト表示2
<input type="button" name="ok" value="ＯＫ" onclick="Check()">
</FORM>
</BODY>

]]> ▼サンプル


テスト表示1
テスト表示2


]]> リンク　type2 2004-09-16T08:14:39Z 2004-09-16T17:14:39+09:00 tag:www.banlo.com,2004:/javascript//16.732 2004-09-16T08:14:39Z ラジオボタンのみでリンク riche http://www.banlo.com/ info@banlo.com 01フォーム:01ラジオボタン ▼ソース
<HEAD>
<SCRIPT type="text/javascript" language="JavaScript">
<!--
function Check(tourl) {
  document.location.href=tourl;
}
//-->
</SCRIPT>
</HEAD>

<BODY>
<FORM>
<input type="radio" name="list" onclick="Check('1.html')">テスト表示1
<input type="radio" name="list" onclick="Check('2.html')">テスト表示2
</FORM>
</BODY>

]]> ▼サンプル


テスト表示1
テスト表示2

]]> リンク　type3 2004-09-16T08:50:15Z 2004-09-16T17:50:15+09:00 tag:www.banlo.com,2004:/javascript//16.733 2004-09-16T08:50:15Z ラジオボタンとイメージでリンク riche http://www.banlo.com/ info@banlo.com 01フォーム:01ラジオボタン ▼ソース
<HEAD>
<SCRIPT type="text/javascript" language="JavaScript">
<!--
function Check() {
  var tolink = document.url
  for(i=0 ; i<=tolink.list.length -1 ; i++){
    if (tolink.list[i].checked) {
      var n = tolink.list[i].value;
      document.location.href=n;
    }
  }
}
//-->
</SCRIPT>
</HEAD>

<BODY>
<FORM name="url">
<input type="radio" name="list" value="1.html">テスト表示1
<input type="radio" name="list" value="2.html">テスト表示2
<a href="#" onclick="Check()">
<img src="/image/ok.gif" width="37" height="15" border="0" align="absmiddle">
</a></FORM>
</BODY>

]]> ▼サンプル


テスト表示1
テスト表示2



]]> イメージを変更 2004-09-16T09:07:20Z 2004-09-16T18:07:20+09:00 tag:www.banlo.com,2004:/javascript//16.734 2004-09-16T09:07:20Z ラジオボタンでイメージを変更 riche http://www.banlo.com/ info@banlo.com 01フォーム:01ラジオボタン ▼ソース
<HEAD>
<SCRIPT type="text/javascript" language="JavaScript">
<!--
function img(){
  var i;
  var n = -1;
  for(i = 0; i <= 1; i++){
    if(document.rimg.img[i].checked){ n = i;
    }
  }
  myimg(n);
}

function myimg(myno){
  if(myno == 0){
    document.mymap.src = ('img/2.gif'); // 画像を表示する
  }else{
    document.mymap.src = ('img/1.gif'); // 画像を表示する
  }
}
//-->
</SCRIPT>
</HEAD>

<BODY>
<form name="rimg">
<TABLE bgcolor="#F8F9FA" border="1" width="100" cellspacing="1" cellpadding="2">
<tr>
<td width="100" height="100">
<img src="img/1.gif" width="100" height="100" border="0" name="mymap"></td>
</tr>
<tr>
<td>
<input type="radio" name="img" value="0" onClick="myimg(0)">表示
<input type="radio" name="img" value="1" onClick="myimg(1)" checked>非表示</td>
</tr>
</table>
</form>
</BODY>

]]> ▼サンプル


表示 非表示

]]> リンク　type1 2004-09-16T14:02:44Z 2004-09-16T23:02:44+09:00 tag:www.banlo.com,2004:/javascript//16.735 2004-09-16T14:02:44Z セレクトメニューでリンク riche http://www.banlo.com/ info@banlo.com 01フォーム:03セレクトメニュー ▼ソース
<HEAD>
<SCRIPT type="text/javascript" language="JavaScript">
<!--
function jump(c) {
  var i;
  var opn = c.menu;
  for( i=0; i<=opn.options.length -1; i++){
    if(opn.options[i].selected){
      tolink = opn.options[i].value;
      parent.top.location.href = tolink;
    }
  }
}
//-->
</SCRIPT>
</HEAD>

<BODY>
<FORM>
<SELECT name="menu" onChange="jump('this.form')">
<OPTION selected>▼選択してください
<OPTION value="1.html">テスト表示1
<OPTION value="2.html">テスト表示2
</SELECT>
</FORM>
</BODY>

]]> ▼サンプル




]]> リンク　type2 2004-09-16T15:19:39Z 2004-09-17T00:19:39+09:00 tag:www.banlo.com,2004:/javascript//16.736 2004-09-16T15:19:39Z セレクトメニューとボタンでリンク riche http://www.banlo.com/ info@banlo.com 01フォーム:03セレクトメニュー ▼ソース
<HEAD>
<SCRIPT type="text/javascript" language="JavaScript">
<!--
function jump(c) {
  var i;
  var opn = c.menu;
  for( i=0; i<=opn.options.length -1; i++){
    if(opn.options[i].selected){
      tolink = opn.options[i].value;
      parent.top.location.href = tolink;
    }
  }
}
//-->
</SCRIPT>
</HEAD>

<BODY>
<FORM>
<SELECT name="menu">
<OPTION selected>▼選択してください
<OPTION value="1.html">テスト表示用1の画面
<OPTION value="2.html">テスト表示用2の画面
</SELECT>
<input type=button name=ok value="ＯＫ" onclick="jump(this.form)">
</FORM>
</BODY>

]]>





]]> ロード時にフォーカス 2004-09-16T15:36:56Z 2004-09-17T00:36:56+09:00 tag:www.banlo.com,2004:/javascript//16.737 2004-09-16T15:36:56Z ロード時にフォーカスを合わせる riche http://www.banlo.com/ info@banlo.com 01フォーム:04テキストボックス ▼ソース
<BODY onLoad="document.load_focus.fo2.focus()">
<FORM name="load_focus">
<input type="text" value="こちらではなくて" name="fo1"><br>
<input type="text" value="ここにフォーカス" name="fo2"><br>
</FORM>
</BODY>

]]>
▼サンプル


サンプルを表示（新しいWindowを開きます）


]]> フォーカスでクリア、未入力時メッセージ表示 2004-09-16T15:45:56Z 2004-09-17T00:45:56+09:00 tag:www.banlo.com,2004:/javascript//16.738 2004-09-16T15:45:56Z フォーカスでクリア、未入力時メッセージ表示 riche http://www.banlo.com/ info@banlo.com 01フォーム:04テキストボックス ▼ソース
<BODY>
<FORM>
<textarea name="com" rows="4" cols="40" tabindex="1"
onfocus="if(this.value=='コメントを入力してください。')this.value='';"
onblur="if(this.value=='')this.value='コメントを入力してください。';">
コメントを入力してください。
</textarea>
</FORM>
</BODY>

]]> ▼サンプル


]]> ナビゲーター情報の取得 2004-09-17T07:04:47Z 2004-09-17T16:04:47+09:00 tag:www.banlo.com,2004:/javascript//16.748 2004-09-17T07:04:47Z ナビゲーター情報の取得 riche http://www.banlo.com/ info@banlo.com 99その他:90その他 ▼ソース
<BODY>
<SCRIPT type="text/javascript" language="JavaScript">
<!--
document.write("ブラウザ名：",navigator.appName);
document.write("コード名：",navigator.appCodeName);
document.write("バージョン：",navigator.appVersion);
document.write("ユーザーエージェント：",navigator.userAgent);
document.write("マシンタイプ：",navigator.platform);
//-->
</SCRIPT>
</BODY>

]]> ▼サンプル


]]> 時刻表示 2004-09-17T07:14:26Z 2004-09-17T16:14:26+09:00 tag:www.banlo.com,2004:/javascript//16.749 2004-09-17T07:14:26Z 時刻表示 riche http://www.banlo.com/ info@banlo.com 99その他:90その他 ▼ソース
<HEAD>
<SCRIPT type="text/javascript" language="JavaScript">
<!--
function totime() {
  var today = new Date();
  var hour = today.getHours();
  var min = today.getMinutes();
  var sec = today.getSeconds();
  if(hour<10){
    hour = "0"+hour;
  }
  if(min<10){
    min = "0"+min;
  }
  if(sec<10){
    sec = "0"+sec;
  }
  document.watch.watch.value = hour+":"+min+":"+sec;
  setTimeout("totime()",500);
//-->
}
</SCRIPT>
</HEAD>

<BODY onload="totime()">
<FORM name=watch>
  現在の時刻：<INPUT type=text name=watch size=10>
</FORM>
</BODY>

]]>
▼サンプル


サンプルを表示（新しいWindowを開きます）

]]> アップロードファイルの選択 2004-09-22T14:11:45Z 2004-09-22T23:11:45+09:00 tag:www.banlo.com,2004:/javascript//16.770 2004-09-22T14:11:45Z アップロードファイルの選択 riche http://www.banlo.com/ info@banlo.com 01フォーム:99その他 ▼ソース
<HEAD>
<SCRIPT type="text/javascript" language="JavaScript">
<!--
function uplofile(){
  var i = document.upfile.upload.value;
  if(i == ""){
    alert("アップロードファイルは選択されていません");
  }else{
    alert(i);
  }
}
//-->
</SCRIPT>
</HEAD>

<BODY>
<FORM name="upfile">
 <INPUT type="file" name="upload">
 <INPUT type="button" value="file情報確認" onClick="uplofile()">
</FORM>
</BODY>

]]> ▼サンプル







]]> オンマウスで文字(説明文等)を表示 2004-09-22T14:27:01Z 2004-09-22T23:27:01+09:00 tag:www.banlo.com,2004:/javascript//16.771 2004-09-22T14:27:01Z オンマウスで文字(説明文等)を表示 riche http://www.banlo.com/ info@banlo.com 02イベント:05オンマウス ▼ソース
<HEAD>
<SCRIPT type="text/javascript" language="JavaScript">
<!--
var mes=new Array();
mes[0]='デフォルト文字(空文字でもOK)';
mes[1]='1を表示';
mes[2]='2を表示';
mes[3]='3を表示';
function onmes(num) {
var message=mes[num];
if (document.all){
info.innerHTML=message;
}
if (document.getElementById){
document.getElementById('info').innerHTML=message;
}
if (document.layers) {
var com=document.layers['com'].layers['info'];
com.document.open();
com.document.write(message);
com.document.close();
}
}
//-->
</SCRIPT>
</HEAD>

<BODY>
<A href="" onmouseover="onmes(1)" onmouseout="onmes(0)">1を表示</A>
<A href="" onmouseover="onmes(2)" onmouseout="onmes(0)">2を表示</A>
<A href="" onmouseover="onmes(3)" onmouseout="onmes(0)">3を表示</A>
<p><SPAN ID="info"><ILAYER NAME="com" WIDTH="180" height="120">
<LAYER NAME="info"></LAYER></ILAYER></SPAN>
</BODY>


]]>
▼サンプル


サンプルを表示（新しいWindowを開きます）

]]> オンマウスでイメージを変更 2004-09-22T14:52:04Z 2004-09-22T23:52:04+09:00 tag:www.banlo.com,2004:/javascript//16.772 2004-09-22T14:52:04Z オンマウスでイメージを変更 riche http://www.banlo.com/ info@banlo.com 02イベント:05オンマウス ▼ソース
<HEAD>
<SCRIPT type="text/javascript" language="JavaScript">
<!--
img1 = new Image(); img1.src = "img1_2.gif";
img2 = new Image(); img2.src = "img2_2.gif";

function setImage(img, image) {
  img.src = image;
  return false;
}
//-->
</SCRIPT>
</HEAD>

<BODY>
<A onmouseover="setImage(document.img1, \"img1_2.gif\")"
 onmouseout="setImage(document.img1, \"img1_1.gif\")">
 <IMG src="img1_1.gif" width=100 height=29 border=0 name=img1></A><P>
<A onmouseover="setImage(document.img2, \"img2_2.gif\")"
 onmouseout="setImage(document.img2, \"img2_1.gif\")">
 <IMG src="img2_1.gif" width=100 height=29 border=0 name=img2></A>
</BODY>

]]> ▼サンプル






]]> リンクをsubmitボタンとして利用 2004-10-19T09:11:50Z 2004-10-19T18:11:50+09:00 tag:www.banlo.com,2004:/javascript//16.875 2004-10-19T09:11:50Z リンクをsubmitボタンとして利用 riche http://www.banlo.com/ info@banlo.com 99その他:90その他 ▼ソース
<HEAD>
<SCRIPT type="text/javascript" language=JavaScript>
<!--
function Submit(formName){
  document.forms[formName].submit();
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<form name="myform1" method="post" action="send.cgi">
  <input type="text" value="test">
</form>
<a href="javascript:Submit('myform1')">フォーム内容を送信</a>
</BODY>

]]>