JavaScriptの覚え書き (NEXTFEEL)


JavaScript
■selectボックスで選択して新しいWindowを開く

<HEAD>〜</HEAD>間のスクリプト
<SCRIPT LANGUAGE="JavaScript">
<!--
function jump(sel) {
if (sel.options[sel.selectedIndex].value) {
wo1=window.open(sel.options[sel.selectedIndex].value,"Window1");
}
}
//-->
</SCRIPT>


<select>ボタンを任意の場所に設置
<select name="sel" onchange="jump(this)">
<OPTION VALUE="">■サーチエンジン
<OPTION VALUE="http://www.google.co.jp/">Google
<OPTION VALUE="http://www.yahoo.co.jp">Yahoo
<OPTION VALUE="http://www.infoseek.co.jp">infoseek
<OPTION VALUE="http://www.excite.co.jp/">Excite
</select>

■アラートボックスの表示

スクリプト [ 表示したい場所へ記入]
[テキストリンク]
 <A href="javascript:alert('表示内容を記述')">[説明]</A>

[ボタン]
<form>
<INPUT type="button" value=" 説明 " onClick="javascript:alert('内容を記述')">]
</form>

■子ウィンドウを開き一定時間で閉じる

<HEAD>〜</HEAD>間のスクリプト

<SCRIPT LANGUAGE="JavaScript">
<!-----
function wopen1(){
wo1=window.open("","Window1", "toolbar=No,location=no,directories=no,
  status=no,menubar=no,scrollbars=no,resizable=yes,width=300,height=300");

wo1.document.write("<head><title></title>");
wo1.document.write("<script language=\"javascript\">

   self.setTimeout(\"self.close()\",5000);</script>");
wo1.document.write("</head><body>");
wo1.document.write("<center><p><hr>ここに表示したい物を記入<p>5秒で自動的に閉じます");
wo1.document.write("<hr>");
wo1.document.write("<A HREF=\"javascript:self.close()\" TARGET=\"_top\">[CLOSE]</a>");
wo1.document.write("<center>");
wo1.document.write("</body></html>");
wo1.document.close();
}
//----->
</SCRIPT>

<BODY>〜</BODY>間への記入
<A HREF="#" onClick="wopen1();return true">子ウィンドウを開く</a>

■ヒストリーを使用してページの移動

1ページだけ戻る
 <a href="javascript:history.back();">[BACK]</a>
任意のページ数戻る
 <a href="javascript:history.go(-3);">[3Page Back]</a>
任意のページ数進む
 <a href="javascript:history.go(3);">[3Page Forward]</a>
1つだけ戻る[ボタン]
 <INPUT type="button" value="戻る" onClick="javascript:history.back()"">

■Selectボタンでフレーム越えのジャンプ

<HEAD>〜</HEAD>間
 <script language=""JavaScript"">
 <!--
  function jump(sel) {
  if (sel.options[sel.selectedIndex].value) {
  parent.frame_no2.location.href = sel.options[sel.selectedIndex].value;
  }
 }
 // -->
 </script>

 <select>ボタンを任意の場所に設置

 <select onchange=""jump(this)"">
 <option value="""">--- 選択してください ---
 <option value=""page1.html"">ページ1
 <option value=""page2.html"">ページ2
 <option value=""page3.html"">ページ3
 </select>"
(frame_no2はフレーム名)


■selectボックスで選択して全領域でページを開く(フレーム用)

<select>ボタンを任意の場所に設置

<form id="selectmenu">
<select id="menu" onChange="top.location.href = value;">
<option value="">Select</option>
<option value="http://www.google.co.jp/">Google</option>
<option value="http://www.yahoo.co.jp/">Yahoo! Japan</option>
<option value="http://www.google.co.jp/">Amazon</option>
</select>

</form>


JAVA Scriptを便利に使う、調べる いろいろと参考になるサイトのご紹介。
とほほのJavaScriptリファレンス
JavascriptのフリーWeb素材 | ホームページ制作素材ダウンロード
簡単JavaScript素材集
【JavaScriptサンプル】 / 【超初心者のホームページ作成】