JavaScript小技集

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

　赤字：JavaScriptの部分／青字：自由に変更可能な部分／緑字：変更可能だがそのままコピーして使うことを推奨する部分

戻る

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

    --- 実例 ---

    戻る

    --- 例文 --- 

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

    --- 解説 ---

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

  2. 飛ばないリンク

    --- 実例 ---

    クリック

    --- 例文 ---

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

    --- 解説 ---

    　マウスをリンクの位置に持ってきたときに、onMouseOverやonMouseOutを使って画面に変化をつけることがあります。そういうときに、クリックでリンク先に飛ぶ必要ない場合があります。そういうときにリンクを無効にするために使います。

  3. ボタン型リンク

    --- 実例 ---

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

    --- 例文 ---

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

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

    --- 解説 ---

    　ボタンを押すと link() というファンクション（プログラム）を呼び出すようになっています。
    　document.location は「この.場所（フレーム）に.ファイルを呼び出す」という意味です。その呼び出されるファイルは index.html に設定していますが、画像ファイルにも使えます。
    　また、link() の中にランダムでファイルを切り替えるようにすることで、ランダムリンクを作ることもできます。

    --- 応用 ---

    　メールアドレスを隠しておいて、リンクをクリックすると正しくメールソフトを起動して、メールを送らせるためのリンクを作ってみましょう。 　「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">
//この文章はJavaScriptに影響を及ぼしません。
function alt() {
  //アラートの呼び出し
  //alert("ようこそJavaScriptのページへ！");
}
</SCRIPT>

    --- 解説 ---

    　前述のアラートを例にしていますが、ここでは「//」を解説します。
    　スクリプト中のどこでも使うことができ、「//」から行の終わり（改行）までが注釈文となります。
    　注釈文はスクリプトの実行上、完全に無視される部分になります。
    　スクリプトを書いたり消したりしながら動作テストを繰り返すときに便利で、一時的にスクリプトを動かしたくないときにスクリプトの前に「//」を付けておけば、複数の命令を試して切り替えることが簡単にできます。

    　上記の実例では、alt()内の注釈文だけでなくアラートの部分にも「//」がついているので、実行される命令がありません。

  5. 乱数を発生させる

    --- 実例 ---

    --- 例文 ---

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

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

    --- 解説 ---

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

    --- 応用 ---

    　サイコロのように1〜6の数字を出させる手順を説明します。
    　(1) 乱数（random）に6でかけ算を行います。
    　(2) 0〜6未満の小数が発生しますので、これを切り捨て（floor）ると、0〜5の整数になります。
    　(3) それに1を足せば1〜6の整数が乱数として取得できることになります。
    　この(1)〜(3)を数式に直すと次のようになります。
    　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>

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

    --- 実例 ---

    --- 例文 --- 

    <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>

  7. お気に入りに追加（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')"

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

    --- 実例 ---

    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 となりますので、選択項目を変更したり増やしたりする場合には注意してください。
    　入力内容の最終確認や年齢認証によるリンク先の分岐にも使用できます。また、ラジオボタンを増やして選択に応じたページや画像を呼び出すメニューにも使えます。

  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()」は、２つあると正常に動作しませんので、複数の機能を盛り込むときは注意が必要です。

戻る