JavaScriptの小技

　簡単に役立つ JavaScript の使い方を紹介します。コマンドの単機能で使えるようなものばかりです。

　赤字：JavaScriptの命令や重要なタグ／青字：用途に応じて変更する部分／緑字：変更可能な変数名やユーザー関数名

戻る

  1. 元のページに戻るリンク

    --- 実例 ---

    戻る

    --- 例文 --- 

    <A HREF="JavaScript:history.back()">戻る</A>

    --- 解説 ---

    　ブラウザの戻るのボタンと同じ機能を持ったリンクを作ります。これにより複数のページからリンクされたページでも、正しくリンク元のページへ戻ることができるようになります。
    　このリンクの「戻る」の部分は、文字の代わりに<IMG>タグでも代用できます。
    　 history.back() はブラウザの戻るボタンと同じです。

    --- 応用 ---

    　リンク元から新しいウインドウとして開いた場合、戻るページがないため、この戻る機能は使えません。
    　そこで、戻るページがない場合は「閉じる」と表示を変更し、クリックするとウインドウを閉じるようにします。
    　履歴の数を調べて戻るページがあるかどうか判断し、２つの表示と機能を切り替えます。

    例文 
    <script language="javascript">
    if (history.length == 0) {document.write("<a href='javascript:self.close();'>閉じる</A>");}
    else {document.write("<a href='javascript:history.back();'>戻る</A>");}
    </script>

  2. 飛ばないリンク

    --- 実例 ---

    クリック

    --- 例文 ---

    <A HREF="JavaScript:void(0)">クリック</A>

    --- 解説 ---

    　 イベント処理を行うためにリンク（アンカー）を使う場合、クリックには反応させたくない場合があります。このようにリンクを無効にしたいときにこれを使います。
    　 マウスのイベント処理には、リンクにマウスを置いたとき（onMouseOver）やマウスを外したとき（onMouseOut）に機能するものがあります。例えば、写真を表示したり、アイコンを切り換えたりする場合です。

    　「HREF=""」とすると、リンク先をそのページ自身と読み取って、ページを再読込します。
    　「HREF」を削除してもイベント処理は行われますが、リンクの表示（色やアンダーラインの表示）が出ないため、イベント処理が行われる場所が判りません。

  3. ボタン型リンク

    --- 実例 ---

    （ブラウザの戻るボタンで戻ってきてください）

    --- 例文 ---

    <INPUT TYPE="button" VALUE="トップへ" onClick="document.location='index.html';">

    --- 解説 ---

    　onClickはマウスイベントで、ボタンをクリックすると呼び出され、その中身を実行します。
    　document.location はブラウザで表示するページを指し示しています。 それを「index.html」に変更しなさいというJavaScriptの命令文になっています。

    --- 応用１ ---

    　イベント処理を行う場合、直接的に命令を書くよりも、ユーザー関数を呼び出して処理する方が良いでしょう。
    　下記では、ボタンを押すと、functionで定義されたユーザー関数「link()」が呼び出されます。
    　このように命令の実行文を分けてしまえば、１つの<SCRIPT>タグ内に複数のユーザー関数をまとめて、メンテナンスを効率良く行うことができます。また、１つの命令文を複数の場所から呼び出したり、複雑な処理も記述しやすくなります。

    実例 例文 
    <FORM><INPUT TYPE="button" VALUE="トップへ" onClick="link()"></FORM> 

<SCRIPT LANGUAGE="JavaScript">
function link() {
	document.location = "index.html";
}
</SCRIPT>

    --- 応用２ ---

    　メールアドレスを隠しておいて、リンクをクリックすると正しくメールソフトを起動して、メールを送らせるためのリンクを作ってみましょう。 　「user@dammy.com」などとメールアドレスをそのまま表記すると、スパムメールのためにメールアドレスが収集される恐れがあります。それを回避するため、スクリプトでメールアドレスを作ってしまおうというものです。

    実例 例文 
    <FORM><INPUT TYPE="button" VALUE="メール" onClick="sendmail()"></FORM> 

<SCRIPT LANGUAGE="JavaScript">
function sendmail() {
  acount = "user"; 
  //アカウント
  domain = "dammy.com";
  //ドメイン
  document.location = "mailto:" + acount + "@" + domain; //メールアドレス生成
}
</SCRIPT>

    　通常のリンクで良い場合は、ボタン部分（<FORM>〜</FORM>）を「<A HREF="JavaScript:sendmail()">メール</A> 」とします。
    　さらなる応用例はこちらをどうぞ。→http://www.guardian.ne.jp/program.html

  4. 乱数を発生させる

    --- 実例 ---

    --- 例文 ---

    <FORM><INPUT TYPE="button" VALUE="乱数表示" onClick="alt()"></FORM> 

<SCRIPT LANGUAGE="JavaScript">
function alt() {
  r = Math.random(); //乱数の発生
  alert(r); //アラートの呼び出し
}
</SCRIPT>

    --- 解説 ---

    　乱数は0〜1未満の間で発生します。ボタンを押す毎に数字が変わることを確認してください。
    　実際には発生させた乱数を10倍、100倍にして、小数点以下を切り捨てるなどして整数に直して使用します。

    　ボタンを押すとアラート（警告）用のダイアログが表示されますので、他の操作ができなくなります。ダイアログ内の「OK」ボタンを押すと、アラートが消えて元に戻ります。
    　アラートについては、「メッセージを表示する」で解説しています。

    --- 応用 ---

    　乱数を使ってサイコロを作ってみましょう。
    　まず、1〜6の数字を出すための手順を説明します。
    　(1) 乱数（random）を発生させ、0〜1未満の数値を取り出します。
    　(2) (1)に６を掛けて、0〜6未満の数値にします。
    　(3) (2)の数値の小数点以下を切り捨てて（floor）、0〜5の整数にします。
    　(4) (3)に1を足して、1〜6の整数にします。
    　この(1)〜(4)の手順を数式に直すと次のようになります。
    　「r = Math.floor(Math.random()*6) +1」
    　これで r には1〜6の数字のどれかが入るということになります。

    実例 例文 
    <FORM><INPUT TYPE="button" VALUE="サイコロ" onClick="alt()"></FORM> 

<SCRIPT LANGUAGE="JavaScript">
function alt() {
  r = Math.floor(Math.random()*6) +1; //1〜6の乱数を発生
  alert(r); //アラートの呼び出し
}
</SCRIPT>

  5. ウインドウの大きさを決めて開く

    --- 実例 ---

    --- 例文 --- 

    <FORM><INPUT TYPE="button" VALUE="開く" onClick="win_open()"></FORM> 

<SCRIPT LANGUAGE="JavaScript">
function win_open() {
  window.open("InstantJoker.html","","status=0,width=200,height=200,menubar=0,toolbar=0,location=0"); 
}
</SCRIPT>

    --- 解説 ---

    　ボタン（リンク）を押すと、新しいウインドウが開きます。
    　上記例文では新しいウインドウの設定値として、ステータスバーを「なし」、横幅を「200」、高さを「200」、メニューバー、ツールバー、ロケーションバーを「なし」にしています。

    --- 応用 ---

    　開いたウインドウをJavaScriptで閉じるには、下記のスクリプトを埋め込みます。

    例文１ 
    <FORM><INPUT TYPE="button" VALUE="閉じる" onClick="win_close()"></FORM>

<SCRIPT LANGUAGE="JavaScript">
function win_close() {
  window.close();
}
</SCRIPT>
    例文２ 
    <A HREF="JavaScript:window.close()">閉じる</A>


    　例文１はボタンとスクリプトを組み合わせています。
    　例文２はリンクに直接スクリプトを記述しています。

    　開いたウインドウに写真などを表示する場合、ウィンドウを額縁として使う場合は、HTMLファイルの余白を「0」に設定します。（MARGINLEFTとMARGINTOPはIE用、MARGINWIDTHとMARGINHEIGHTはFireFox用）
    　 下記例では、リンク内から必要な要素を関数に送っていますので、複数のスクリプトを用意する必要がありません。また、ウインドウサイズは変更できないようにしています。

    実例
    開く
    例文 
    <A HREF="javascript:win_open2('sample1-1.html','sample',
      'width=320,height=240,toolbar=no,menubar=no,location=no,directories=no,status=no,scrollbars=no,resizable=no')">開く</A>

<SCRIPT LANGUAGE="JavaScript">
<!--
function win_open2(wURL,wName,wOption){
  window.open(wURL,wName,wOption);
}
-->
</SCRIPT>
    sample1-1.html 
    <BODY LEFTMARGIN="0" TOPMARGIN="0" MARGINWIDTH="0" MARGINHEIGHT="0">
<A HREF="javascript:CloseWin()"><IMG SRC="IMG/sample320x240.GIF" WIDTH="320" HEIGHT="240" BORDER="0"></A>
</BODY>

<SCRIPT LANGUAGE="JavaScript">
<!--
function CloseWin(){ 
  window.close();
}
//-->
</SCRIPT>

  6. お気に入りに追加（IE専用）

    --- 実例 ---

    --- 例文 --- 

    <FORM><INPUT TYPE="button" VALUE="お気に入りに追加" onClick="AddPageLink()"></FORM>

<SCRIPT LANGUAGE="JavaScript">
function AddPageLink() {
  window.external.AddFavorite("http://www.shurey.com/","Labyrinthe Noir");
}
</SCRIPT>

    --- 解説 ---

    　WindowsのInternet Explorerでないと動作しません。
    　URLと登録される名称を記述するだけです。リンクにも使用できます。

    --- 応用 ---

    　通常のリンクを使っても可能です。以下に１つにまとめています。

    実例
    お気に入りに追加
    例文 
    <A HREF="javascript:window.external.AddFavorite('http://www.shurey.com/','Labyrinthe Noir')">お気に入りに追加</A>

    　ボタンの場合、onClickの中に直接スクリプトを記述することも出来ます。
    　onClick="window.external.AddFavorite('http://www.shurey.com/','Labyrinthe Noir')"

  7. フォームの内容で動作を切り換える

    --- 実例 ---

    Yes No

    --- 例文 ---

    <FORM NAME="formChecker">
<INPUT TYPE="radio" NAME="rbtn" VALUE="yes"> Yes
<INPUT TYPE="radio" NAME="rbtn" VALUE="no" checked> No
<INPUT TYPE="button" VALUE="送信" onClick="check()">
</FORM>

< SCRIPT LANGUAGE="JavaScript">
function check() {
  rcheck = document.formChecker.rbtn[0].checked; //ラジオボタンrbtnの１つ目（rbtn[0]）の状態を取得
  //rcheckの内容がtrue（ボタンが押されている状態）かどうかで条件分岐
  if (rcheck) { //tureの場合
      document.location = "index.html"; //リンク先を呼び出す
  } else { //falseの場合
    alert("送信できません"); //アラートを表示する
  }
}
</SCRIPT>

    --- 解説 ---

    　送信ボタンを押したときに、チェック項目がYesかNoかによって処理を分岐させます。
    　上記例では Yes なら rcheck が true となりリンク先へ、No なら rcheck が false となりアラートを表示します。処理内容は好きなように変更してください。
    　rbtn[0] が１つ目のボタンを意味しており、ここでは「Yes」を選択した場合に rcheck が true となりますが、rbtn[1] とすると「No」を選択した場合に rcheck が true となりますので、選択項目を変更したり増やしたりする場合には注意してください。
    　入力内容の最終確認や年齢認証によるリンク先の分岐にも使用できます。また、ラジオボタンを増やして選択に応じたページや画像を呼び出すメニューにも使えます。

  8. フォーム内テキストの自動選択

    --- 実例 ---

    --- 例文 --- 

    <form>
    <input name="textfield" type="text" value="ここをクリック" onFocus="javascript:this.select()">
    </form>

    --- 解説 ---

    テキストフィールドにフォーカスがきたときにテキストが全選択されます。
    onClickにしてしまうとテキスト編集のためにクリックできなくなりますので、ここではonFocusを使います。

  9. ブラウザの判定

    --- 実例 ---

    Interntet Explorerの判定：

    --- 例文 --- 

    Interntet Explorerの判定：
<SCRIPT LANGUAGE="JavaScript">
//ブラウザの表示サイズを取得
if (document.all) {
	//Internet Explorer
	brs = "Internet Explorer";
} else {
	//その他のブラウザ
	brs = "Internet Explorer以外のブラウザ";
}
document.write("あなたは<font color='#FF0000'>" + brs + "</font>を使っています。");
</SCRIPT>

    --- 解説 ---

    「document.all」はInternet Explorerで真となりますので、IE専用の命令を使う必要があるときに、処理を分岐することができます。
    その他のブラウザとして、Firefox、Safariの動作を確認しました。

  10. 画面サイズを取得する

    --- 実例 ---

    画面サイズ：

    ウィンドウサイズ：

    --- 例文 --- 

    画面サイズ：
<SCRIPT LANGUAGE="JavaScript">
document.write("横幅 = " + window.parent.screen.width + " / 高さ = " + window.parent.screen.height);
</SCRIPT>

ウィンドウサイズ：
<SCRIPT LANGUAGE="JavaScript">
//ブラウザの表示サイズを取得
if (document.all) {
	//Internet Explorer
	sW = document.body.clientWidth;
	sH = document.body.clientHeight;
} else {
	//その他のブラウザ
	sW = window.innerWidth;
	sH = window.innerHeight;
}
document.write("横幅 = " + sW + " / 高さ = " + sH);
</SCRIPT>

    --- 解説 ---

    画面サイズは、モニタ画面の解像度を示しています。
    ウインドウサイズは、ブラウザの表示画面内部のサイズを示しています。

    --- 応用 ---

    ウィンドウサイズを変更すると、連動してリアルタイムにサイズが表示されます。

    実例
    ウィンドウサイズ：横幅 = / 高さ =
    例文 
    <form name="winsize">
ウィンドウサイズ：横幅 = <input name="sw" type="text" size="10"> / 高さ = <input name="sh" type="text" size="10">
    </form>

<SCRIPT LANGUAGE="JavaScript">
window.onresize = function() {
	if (document.all) {
		//Internet Explorer
		sW = document.body.clientWidth;
		sH = document.body.clientHeight;
	} else {
		//Firefox
		sW = window.innerWidth;
		sH = window.innerHeight;
	}
	document.winsize.sw.value = sW;
	document.winsize.sh.value = sH;
}
</SCRIPT>

    次の応用では、フォームを使わず、DOMを使っています。

    実例
    -
    例文 
    <span id="winsize"></span>
<SCRIPT LANGUAGE="JavaScript">
//読み込み時の表示
window_load();

//ウィンドウサイズ変更時に更新
window.onresize = window_load;

//サイズの表示
function window_load() {
	if (document.all) {
		//Internet Explorer
		sW = document.body.clientWidth;
		sH = document.body.clientHeight;
		document.getElementById("winsize").innerText = "ウィンドウサイズ：横幅 = " + sW + " / 高さ = " + sH;
	} else {
		//Firefox
		sW = window.innerWidth;
		sH = window.innerHeight;
		document.all["winsize"].innerText = "ウィンドウサイズ：横幅 = " + sW + " / 高さ = " + sH;
	}
}
</SCRIPT>

    「window.onresize = function()」は、２つあると正常に動作しませんので、複数の機能を盛り込むときは注意が必要です。

戻る