JavaScript 実技集 |
|
「 JavaScript の事」のページの実践スクリプトと、幾らかの現地での実験。コピペ可。 |
|
JavaScript 談義 サイトホーム 履歴転進 |
<script language="javascript">←ここからですよ、という記述 <!-- // うんち100回 ←こういうのを「コメント」と言う// ←1行コメント記号 for( var i = 0; i < 100; i++ )// ←回数変更可能 { document.write('うんち'); }//(ここにこの様にスクリプト呪文を書き込む) /* ←これらの記号でこうすると、 その間は何行でも コメントになる→ */ //--> </script>←ここまで、という記述 <script>〜</script>←最低、これだけでも良い
※赤字部分は消して下さい。
以下、スクリプト主要部のみ記述(ここにスクリプトを書き込む)部分に書くモノ。
コラム:やり過ぎ
JavaScript は多彩な使い方があり、それぞれに人を目を楽しませたり、驚かせたりする力がある。
ところが調子に乗って、要らない所まで JavaScript に支配させると、思わぬ障害が発生しかねない。
JavaScript を受付けない設定にしている人にとっては意味の無いページになりかねない。リンクなどは通常のHTML方式のモノも併記すべきである。
ましてや履歴の支配とか、アンロードに絡ませた仕掛けなど、甚だ印象が悪い。
何事も程々が肝要である。
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秒毎に呼び出せば良いです。
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@.te' + 'ke.ne.jp')); // ↑ホントは折り返さずに一行にまとめて書くよ // @ は@マークのエンティティ化表示・書き直さないでね←クリックするとインチキメーラーが出ます、注意!
こうする事によってメアドを回収屋から隠すつもり…なのですが効果はやや薄くて、やらんよりやった方がマシといった感じです。
(ちょっと賢いロボットには回収されそうな脆弱さ)
@ (アットマーク)以外の部分を適宜書き直して使います。もちろん、既に回収されてしまっている場合には効果はありません。
( 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>