JavaScript 実技集

←オススメ　←普通　←寝てろ

基本の書き方とコメント記号

<script language="javascript">←ここからですよ、という記述
<!--
//　うんち100回　←こういうのを「コメント」と言う// ←１行コメント記号

for( var i = 0; i < 100; i++ )// ←回数変更可能
{ document.write('うんち'); }//（ここにこの様にスクリプト呪文を書き込む）

/* ←これらの記号でこうすると、
その間は何行でも
コメントになる→ */
//-->
</script>←ここまで、という記述

<script>〜</script>←最低、これだけでも良い

　※赤字部分は消して下さい。

　以下、スクリプト主要部のみ記述（ここにスクリプトを書き込む）部分に書くモノ。

　コラム：やり過ぎ
　JavaScript は多彩な使い方があり、それぞれに人を目を楽しませたり、驚かせたりする力がある。
　ところが調子に乗って、要らない所まで JavaScript に支配させると、思わぬ障害が発生しかねない。
　JavaScript を受付けない設定にしている人にとっては意味の無いページになりかねない。リンクなどは通常のHTML方式のモノも併記すべきである。
　ましてや履歴の支配とか、アンロードに絡ませた仕掛けなど、甚だ印象が悪い。
　何事も程々が肝要である。

（改めて）うんち100回

for( var i = 0; i < 100; i++ )// ←回数変更可能
{ document.write('うんち'); }
//		↑セリフを書き換える・点々は消さない。

　これで表記すれば、偽装キーワードスパムとは認識されません多分。でなけりゃ「うんち」で引っ掛かりまくりますわい。

---

画像繰り返し

for( var i = 1; i < 9; i++ )// ←回数変更可能
{
	document.write('<img src="../../kao/smlnag.gif"');
	document.write(' class="sml" alt="' + i + '番め">');
}
//	↑長くなったので２行にしている

　↑サンプル：ここに書いた。やってる事は「うんち」と一緒。
　「長くなった」からと、普通に行替えするとエラーの元。上の例では途中で切って命令を出し直している。

---

最終更新

　あると便利かもしれませんが、見ない人には全く不必要な仕掛けの代表。

←こんな

document.write('<b>最終更新：' + document.lastModified + '</b>');
//	document.lastModified は、決まり文句（最終更新時刻データ）

　これを表示したい所に<script> 〜 </script>で挟むなりして書き込むだけ。

　（ 2008/12/24 追記）
　このままでは少々見にくいので日本語順に並べたい場合の話。
　まず、出てきたデータを new Date( ) を使って好きな名前（ koshin とか）にした変数に入れます。ちょうど雑モノ箱を作って外にkoshinと書く様なモノです。
　あとはその「koshin箱」から欲しい情報を「個別に」取り出せば良い、その取り出し方は以下の通り。

koshin = new Date(document.lastModified);// koshin という箱（変数）に入れる
ne = koshin.getFullYear();// koshin から FullYear （西暦4ケタ）取り出す
ga = koshin.getMonth() + 1;// 〃　から Month （月数）取り出す（ +1 が必要）※
hi = koshin.getDate();// 〃　から Date （日数）取り出す
//
document.write('<b>最終更新：西暦'+ne+'年'+ga+'月'+hi+'日</b>');
// ↑表示命令・出したい様に書いておく↑（時分秒は略した）

　 ←こんな

　※月数の +1 …コンピュータ制御用？に0〜11の数が出て来るから

---

実践・ページをロードした（開いた）時刻

　___[ ]

　「動く時計」はリソースを無駄に消費させるので作りませんが、これを関数仕立てにして1秒毎に呼び出せば良いです。

var jikan = new Date();// ←「時刻」のオブジェクト
var ji = jikan.getHours();// ←「時刻」から「時」だけ出す
var fun = jikan.getMinutes();// ←「時刻」「分」だけ出す
var byo = jikan.getSeconds();// ←「時刻」「秒」だけ出す

document.write('<b>ロード時刻：' + ji + '時' + fun + '分' + byo + '秒</b>');
//		表示したい順に並べる↑

　変数 jikan の中には、他にも年月日や曜日番号（日曜が０）が入っています。

---

少しは撃退！迷惑メール

hensuu = 'メールはこちら';// 表示したい文字列
document.write(hensuu.link(
String.fromCharCode(109,97,105,108,116,111,58)
 + 'uso_no_ado@.te' + 'ke.ne.jp'));
//		↑ホントは折り返さずに一行にまとめて書くよ
//		@ は＠マークのエンティティ化表示・書き直さないでね

　←クリックするとインチキメーラーが出ます、注意！

　こうする事によってメアドを回収屋から隠すつもり…なのですが効果はやや薄くて、やらんよりやった方がマシといった感じです。
　（ちょっと賢いロボットには回収されそうな脆弱さ）
　&#64; （アットマーク）以外の部分を適宜書き直して使います。もちろん、既に回収されてしまっている場合には効果はありません。

　（ 2008/11/20 事後改造）
　最初の mailto: の部分を Latin-1 コードに置換えてみました。参考→置換え機
　String.fromCharCode( ) で読めば、メアドがそこにある様に振舞います。
　つまり、自分のメアド部分も置換えれば…（偏執狂）

---

脅かす仕掛け

moto = ' アナタのサイトのホームURL ';
//
if (document.referrer != moto)// referrer には跳び元のデータが入ってる
{ location.href = moto; }
//	つまり、跳び元がホームではない場合に「強引に」ホームへ跳ばすワケ

　要するに直リンを防ぐ仕掛けです。
　ただ、これは（勝手に動作するので）嫌われる可能性もあります。
（いかがわしいサイト風だし）

---

ちょっとした書き換えの一例

　ナイスでーす。

　ドンマイでーす。

<img align="left" name="KAKA"
src="../../kao/smlnagb.gif" class="sml" alt="右でーす。"
onmouseover="this.src='../../kao/smlnag_an.gif'"
onmouseout="this.src='../../kao/smlnagb.gif'">// 赤字はマウス乗せ仕掛け

<a href="javascript:void(0);"
onmouseover="KAKA.src='../../kao/smlnag.gif'">ナイスでーす。</a>
<a href="javascript:void(0);"
onmouseover="KAKA.src='../../kao/smlnagb.gif'">ドンマイでーす。</a>

　画像 img タグの中に name="KAKA" （名前は任意）と書いておき、a タグ（リンク）の onmouseover で起動する仕組み。
　ここでは void(0) （無効化）としているのでクリックしても何も起きない。
　画像サイズにもよるが、プレロード相当をしておくと安心。（ここでは他に貼ってる）

　（ 2008/11/20 事後改造）
　左の画像にマウスポインタを乗せると、また別の画像になります。
　img タグに直接書いても働くという一例です。（ this 指定・アニメしんどかった）

---

実用中・履歴無しにページトップへ飛ばすリンク

　よく「ページのトップへ」というリンクがありますが、しばしば「戻る」ボタンで戻る時に「元の位置」まで戻ってしまい混乱する場合があります。
　scrollTo(0,0);は「巻き上げるだけ」なので、履歴になりません。
　0, 0 はページの座標です（つまり最も左上）。

<div align="right">
<a href="javascript:scrollTo(0,0);">ページトップ</a></div>

---