MASHの 初心者的JavaScript なツール

 

最近の思い・・・今や、WEB2.0が様々なビジネスモデルとして具現化しつつあり、その中で、ネットのあちら側で動く「WEBアプリ」が
浸透してくるだろう。そうすると、このJavascriptの発展形というか進化合体形となるAjax(Google Earthもそれ)が面白くなる。。。
(2006年 初秋に思う)
息抜きにどうぞ!>>  海水魚・水族館/ ネコ/ バラ/ ビジュアル詩/ 音楽サークル/  四駆/
 
マウスに画像が軌跡を描くようについてくる」を追加。(2004/11/27)
HPの背景色・文字色を一発選択」を追加。お好みのデザインが簡単にセットできます。(2004/8/27)
「揺れるサブウィンドウ」を追加。揺れる+サブウィンドウを開くの合体です。(2003/7/11)
有名な「降る雪」から「泳ぐ魚」を作ってみました。結構かわいいかも(2003/5/15)
うちのニャンコが寝たまま八の字に遊泳します。ボーッとしながら見てると癒されます・・・・か?(2003/4/30)
お馴染みの「ダンス系」を 顔文字くんに置き換えてアップしました。いろいろと顔文字のパターンを変えて お楽しみ下さい。(2003/4/20)

自称「初心者」の方は、以下の説明をお読みの上、ここのJavaScriptサンプルをお使い下さい。尚、できれば、HTMLのことを少し
勉強してからの ご利用をオススメします。 このページの説明は、WindowsMe、もしくは、XP Home環境下での検証に基づく説明ですので、
その点、ご容赦下さい。 ブラウザーは、一応、 Internet Explorer 6.0とNetscape Navigator 7.0までの動作を確認済みです

使い方

1)下表内のリンクより開いたHTMLファイルを、ご自分のPCのHDへ、一度、保存して下さい。保存時のファイル拡張子は、.html,
または .htmです。

2)保存したHTMLファイルをブラウザーで開き、ブラウザーのメニューで「表示」から「(ページの)ソース」を選びます。
( Internet ExplorerとNetScapeで若干、 異なります)

3) 秀丸エディター、メモ帳、ノートパッドなどのテキストエディターでそのソースをコピーして、スクリプトを組み込みたいHPの
HTMLソース・ファイルへ上記2)のJavaScript1単位(<Script Language="JavaScript"></script>の間が1単位)をペーストして
ブラウザーで動作確認しながら作業していきます。ただし、<HEAD></HEAD>タグと<BODY></BODY>タグに分かれて使用されるものも
あるので、注意して下さい。また、最近のHTMLエディターでは、JavaScript入れ子を予め作ってから貼り込みできるものもありますので、
それを利用されても結構だと思います。

4)そのHPを保存して、ブラウザーで確認して下さい。サンプル・スクリプトと同じ動作をしていればOKですが、動作しなかったり、
スクリプト・エラーが 発生した場合には、ペーストしたスクリプトのみを削除して下さい。尚、ご使用のブラウザーで、JavaScript を
無効にしている方は有効にすれば、 動作する可能性がありますが、セキュリティー面で不安があれば、無理に、ここのスクリプトを
使用しないようにして下さい。

5)スクリプトの動作OKであれば、次は、ホームページ内でのレイアウト変更ですが、JavaScriptをやろうという方は、ある程度、HTMLを
知っていると思いますので、HTMLを使って、自分の気に入るレイアウト作りにトライしてみて下さい。

動作確認済みのブラウザー&バージョン

時計関連

ns2.gif (260 バイト) ns3.gif (261 バイト) ns4.gif (266 バイト) com_47_src.gif (1003 バイト) ie3.gif (187 バイト) ie4.gif (190 バイト) IElogo.gif (2932 バイト) フォームで表示されるリアルタイム時刻表示
ns2.gif (260 バイト) ns3.gif (261 バイト) ns4.gif (266 バイト) com_47_src.gif (1003 バイト)   ie3.gif (187 バイト) ie4.gif (190 バイト) IElogo.gif (2932 バイト) ステータスバーに表示されるリアルタイム時刻
ns2.gif (260 バイト) ns3.gif (261 バイト) ns4.gif (266 バイト) com_47_src.gif (1003 バイト)   ie3.gif (187 バイト) ie4.gif (190 バイト) IElogo.gif (2932 バイト) アクセス時刻表示
ns2.gif (260 バイト) ns3.gif (261 バイト) ns4.gif (266 バイト) com_47_src.gif (1003 バイト) ie3.gif (187 バイト) ie4.gif (190 バイト) IElogo.gif (2932 バイト) 時間によって変化する絵 コンテンツも必要ですよ=>moon.gif sunrise.gif sun.gif
ns2.gif (260 バイト) ns3.gif (261 バイト) ns4.gif (266 バイト) com_47_src.gif (1003 バイト) ie3.gif (187 バイト) ie4.gif (190 バイト) IElogo.gif (2932 バイト) リアルタイム表示+時間によって変化する絵 コンテンツも必要ですよ=>moon.gif sunrise.gif sun.gif
動作確認済みのブラウザー&バージョン リンク
    ns4.gif (266 バイト) com_47_src.gif (1003 バイト) ie3.gif (187 バイト) ie4.gif (190 バイト) IElogo.gif (2932 バイト) ジャンプアップ・メニュー
動作確認済みのブラウザー&バージョン 日付/メッセージ関連
ns2.gif (260 バイト) ns3.gif (261 バイト) ns4.gif (266 バイト) com_47_src.gif (1003 バイト) ie3.gif (187 バイト) ie4.gif (190 バイト) IElogo.gif (2932 バイト) ステータスバーに流れるメッセージ
ns2.gif (260 バイト) ns3.gif (261 バイト) ns4.gif (266 バイト) com_47_src.gif (1003 バイト) ie3.gif (187 バイト) ie4.gif (190 バイト) IElogo.gif (2932 バイト) 時間によって変化するメッセージ(挨拶)
ns2.gif (260 バイト) ns3.gif (261 バイト) ns4.gif (266 バイト) com_47_src.gif (1003 バイト) ie3.gif (187 バイト) ie4.gif (190 バイト) IElogo.gif (2932 バイト)

祝日やイベントを表示

動作確認済みのブラウザー&バージョン チェック関連
ns2.gif (260 バイト) ns3.gif (261 バイト) ns4.gif (266 バイト) com_47_src.gif (1003 バイト) ie3.gif (187 バイト) ie4.gif (190 バイト) IElogo.gif (2932 バイト) ブラウザー・バージョン・チェック
動作確認済みのブラウザー&バージョン 画像&アニメ 関連
  ns3.gif (261 バイト) ns4.gif (266 バイト) com_47_src.gif (1003 バイト)     ie4.gif (190 バイト) IElogo.gif (2932 バイト) アニメーションGIF/JPEG画像     コンテンツもどうぞ=>pic0.gif pic1.gif pic2.gif pic3.gif
  ns3.gif (261 バイト) ns4.gif (266 バイト) com_47_src.gif (1003 バイト)     ie4.gif (190 バイト) IElogo.gif (2932 バイト) 画像スライドショー(Image Pager)

コンテンツも、よろしければ どうぞ=>0.jpg 1.jpg 2.jpg

    ns4.gif (266 バイト) com_47_src.gif (1003 バイト)     ie4.gif (190 バイト) IElogo.gif (2932 バイト) ★の回転運動
    ns4.gif (266 バイト) com_47_src.gif (1003 バイト)     ie4.gif (190 バイト) IElogo.gif (2932 バイト) ★の回転運動(同ページ内のGIFアニメ対応)

MSIE5.0以上で、引数不正への対応をとりました。

コンテンツ(kyo3さんの)もDLしておいてね=>pic4.gif

    ns4.gif (266 バイト) com_47_src.gif (1003 バイト)     ie4.gif (190 バイト) IElogo.gif (2932 バイト) 転がっていくボール
      com_47_src.gif (1003 バイト)     IElogo.gif (2932 バイト) 踊る顔文字くん
    ns4.gif (266 バイト) com_47_src.gif (1003 バイト)       IElogo.gif (2932 バイト)

8の字遊泳するニャンコ

 これもDLしてね!→ニャンコ画像

            IElogo.gif (2932 バイト)

群れ泳ぐ魚たち

これもDLしてね!→魚(トゲチョウ)の画像

    ns4.gif (266 バイト) com_47_src.gif (1003 バイト) ie4.gif (190 バイト) IElogo.gif (2932 バイト)

かわいいサブウィンドウが揺れる!

これもDLして同じフォルダーへ!→ニャンコ画像 サブウィンドウ

          IElogo.gif (2932 バイト)

マウスに画像が軌跡を描きながらついてくる

これもこれもDLして同じフォルダーへ!→SAMPLE画像

動作確認済みのブラウザー&バージョン 乱数関連
ns2.gif (260 バイト) ns3.gif (261 バイト) ns4.gif (266 バイト) com_47_src.gif (1003 バイト) ie3.gif (187 バイト) ie4.gif (190 バイト) IElogo.gif (2932 バイト) 乱数を利用したラッキーカラー占い
      com_47_src.gif (1003 バイト)   IElogo.gif (2932 バイト) 乱数を利用したランダム・リンク/アクセス
動作確認済みのブラウザー&バージョン 音楽・音 関連
  ns3.gif (261 バイト) ns4.gif (266 バイト) com_47_src.gif (1003 バイト)   ie4.gif (190 バイト) IElogo.gif (2932 バイト) 時間によって変化するBGM+画像
動作確認済みのブラウザー&バージョン 色変化 関連
    ns4.gif (266 バイト) com_47_src.gif (1003 バイト) ie4.gif (190 バイト) IElogo.gif (2932 バイト) HPの背景色・文字色を一発選択 
      com_47_src.gif (1003 バイト)     IElogo.gif (2932 バイト) 背景色を調整