ホームJ-CONT談義ホーム>JavaScript 実技集

案内嬢

JavaScript 実技集

 「 JavaScript の事」のページの実践スクリプトと、幾らかの現地での実験。コピペ可。
 ただし自己責任でお願いします。

JavaScript 談義 サイトホーム 履歴転進

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

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

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

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 + '番め">');
}
//	↑長くなったので2行にしている

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


最終更新

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

←こんな

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 の中には、他にも年月日や曜日番号(日曜が0)が入っています。


少しは撃退!迷惑メール

hensuu = 'メールはこちら';// 表示したい文字列
document.write(hensuu.link(
String.fromCharCode(109,97,105,108,116,111,58)
 + 'uso_no_ado&#64;.te' + 'ke.ne.jp'));
//		↑ホントは折り返さずに一行にまとめて書くよ
//		&#64; は@マークのエンティティ化表示・書き直さないでね
 ←クリックするとインチキメーラーが出ます、注意!

撃退! こうする事によってメアドを回収屋から隠すつもり…なのですが効果はやや薄くて、やらんよりやった方がマシといった感じです。
 (ちょっと賢いロボットには回収されそうな脆弱さ)
 &#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>

サンプル?→ページトップ


JavaScript 談義 サイトホーム 履歴転進
(c) PHALSAIL HeadQuarters