To Know To Think To Love
　ここはWEB学習用で、制作の実験と備忘録に使っています。公開ブログは、"人生は恐れを知らぬ冒険か無か"（http://home.elmblog.com/）です。 ≪管理人用≫以下の内容やリンク先は、管理人が学習と試作に使っており予告なしに変更されます。

Search


Categories

Creative Commons License

JavaScript Archives

PopupWindow

Windowの指定

起動時のWindowの大きさ指定　Sample

<BODY onload="window.resizeTo(300,300);">

Windowの大きさを指定して開く　Sample

<A onclick="window.open('sample01.html','min1','toolbar=0,location=0,directories=0,status=0, menubar=0,scrollbars=0,resizable=0,width=200,height=100')">Sample</A>

<a href="#" onclick="window.open('./chat/','chat','width=400,height=300');">WebChat</a>

Windowの位置を指定して開く　Sample

<A href=# onclick="window.open('sample03.html','min2','left=50,top=50')">Sample</A>

n秒後に別ページへ自動ジャンプ　Refresh

<meta http-equiv="refresh" content="3; url=http://elmblog.com/right.php">

[BACK]　[CLOSE]

<A id="no" href="javascript:history.back()" target="_top">[BACK]　</A><A id="no" href="javascript:window.close()">[CLOSE]</A>

Posted by Dalma on July 27, 2006 |

Update 最終更新日

最終更新日を表示する

<script language="javascript">
document.write("Last Updated : ",document.lastModified);
</script>
update = new Date(document.lastModified)
theMonth = update.getMonth() + 1
theDate = update.getDate()
theYear = update.getYear()
if (navigator.appName == "Netscape") {
       theYear = theYear + 1900
    }
    if (navigator.appName == "Opera") {
       theYear = theYear + 1900
    }
document.writeln("最終更新日：" + theYear + "年" + theMonth + "月" + theDate + "日")

Posted by Dalma on July 27, 2006 |

Bookmark

お気に入り(Bookmark)に追加する

HEADにつぎのスクリプトを書く
<SCRIPT LANGUAGE="JavaScript">
function addbookmark()
{
bookmarkurl="http://www.elmblog.com/"
bookmarktitle="Welcome To The ElmBlog"
if (document.all)
window.external.AddFavorite(bookmarkurl,bookmarktitle)
}
</script>

BODYで呼び出すコード
<a href="javascript:addbookmark()"><b>Bookmark</b></a>

サンプル： Bookmark

Posted by Dalma on July 27, 2006 |

Message

ステータスバーにメッセージを流す

ブラウザー画面の一番下にあるステータス・バーを見てください。下記のJavaScriptのなかのvar m1〜var m3で指定したテキスト・メッセージが左に流れて表示されます。表示されていないときは、ブラウザーのメニューバー「表示(V)」の中の「ステータスバー(B)」をクリックしてチェックをつけてください。

流れる速さを変えたいときは、「var speed=700」の数字を変えます。数字の単位はミリ秒で、この例では700ミリ秒（0.7秒）になっています。数字が小さいほど早く流れます。

<SCRIPT language="JavaScript">
<!--
var speed = 700;
var m1 = 'だるま物語……海外駐在員の旅物語、異国の歴史・';
var m2 = '文化への想いを綴った日記を、心に残る写真とともに';
var m3 = '紹介します。　　　　　　　　　　　　　　';
var msg = m1 + m2 + m3;
msg = msg + msg;
function statusMsg()
{
setTimeout("statusMsg()",speed);
msg = msg.substring(2,msg.length) + msg.substring(0,2);
window.status = msg;
}
statusMsg();
//-->
</SCRIPT>

Posted by Dalma on July 27, 2006 |

Calculator

簡易電卓

=

Posted by Dalma on July 27, 2006 |

Scientific calculator

科学計算用電卓

Degrees Radians Gradients

Posted by Dalma on July 28, 2006 |

Falling Bubble

■　画像の上下移動　No.１
画像がゆっくりと左右に揺れながら、上下に移動する。シャボン玉がふわふわと登っていくイメージに利用できる。

《編集方法》
<!--画像ファイルの指定-->と書いてある部分で動かしたい画像を指定する。画像は８個まで指定できる。次にJavaScript 内の画像の数、移動方向、移動速度、揺れ幅、揺れの周期、画像のサイズを適宜指定する。
サンプル表示
■　画像の上下移動　No.2
単純に画像が上から下に向かって移動する。雪が降ったり、あるいは落ち葉が散るようなイメージ表現に使える。

《編集方法》
<!-- 画像の指定 -->と書いてある部分で動かしたい画像を指定する。指定できる画像は一種類のみ。
サンプル表示
■　画像の上下移動　No.3
こちらは非常に細かくパラメータが設定できるスクリプト。縦一列に移動させる事もできるし、画面いっぱいに降らせることもできる。また、一定の速度で移動したり、次第に加速させるような移動も可能である。

《編集方法》
<!--画像の指定-->と書いてある部分で動かしたい画像を指定する。その際、id をサンプルのように img1〜 の連番で指定する。あとはスクリプト部分に書かれているコメントを参考にしながら各種のパラメータを指定する。
サンプル表示

Posted by Dalma on July 28, 2006 |

ActiveXの処理方法

マイクロソフト社より4月12日に公開されたInternet ExploreのActiveXコントロールを処理する方法が変更された。

　その結果、一部のWebページを閲覧する際FlashやShockwaveなどの<object>、<embed>、または<applet>タグを使用したアクティブコンテンツを有効にするためには、閲覧者がアクティブコンテンツをクリックする必要がある。

この問題を回避し、Webの閲覧者が今までと同じような使い方ができるようにするためには、Webページの修正が必要となる。

１．<object>を外部の.jsファイルに置いて、HTMLファイルから呼び出す方法
  • 外部ファイル(foo.js)で<object>をdocument.writeする。　 
    function RunFoo()
{
    document.write('<object classid="clsid:D27CDB6E..." ...>\n');
    document.write('<param name="movie" value="foo.swf" />\n');
    document.write('</object>\n');
}

  • HTMLファイルの<head>セクションにfoo.jsの呼び出しを追加する。

    <script src="[path]/foo.js" type="text/javascript"></script>

  • 元の<object>タグを、外部ファイルの関数呼び出しに置き換える。

    <script type="text/javascript">RunFoo();</script>
　<embed>や<applet>タグについても同じように変更する。

２．複数のアクティブコンテンツを共通に処理する方法
　　ActiveX コントロールのアクティブ化　または Adobeが提供するJavaScriptソリューションの詳細
　を参照のこと。煩雑ではあるが、サイトで使っているすべてのコンテンツに有効である。

Posted by Dalma on July 30, 2006 | | Comments (0) | TrackBacks (0)

JukeBox Script

MidiPlayerとWeb_Jukeがある。前者はJavaスクリプト、後者はPerlで書かれている。一長一短だが基本はおなじである。自動演奏だけのシンプルなJavaスクリプトもある。

Continue reading "JukeBox Script" »

Posted by Dalma on July 30, 2006 | | Comments (0) | TrackBacks (1)

任意の曲を連続演奏

登録されているmidi音楽をランダムに選曲して連続演奏するスクリプト。ウィンドウ画面をリフレッシュする（キーボードのファンクションキーＦ５を押す）とランダムに選ばれた曲が演奏される。

Continue reading "任意の曲を連続演奏" »

Posted by Dalma on July 31, 2006 | | Comments (0) | TrackBacks (0)

移動する時計

ようこそ、だるまの世界へ
Welcome to The Web Dharma


人生は恐れを知らぬ冒険か無か
Life is a daring adventure or nothing　


There are three kinds of people; those who make things happen, those who watch things happen, and those who don't know what the hell is happening.

管理人用
Index　 Photo　 Guest　 Diary　 Study　 SVC　 Game　 BlogRoll

　　　∇Top Stories　∇The Superficial　∇My Slideshows １　２　３　 popup
左下のボタンをクリックして、スライドを一時停止したり、スクロール速度を変えたりすることができます。マウスを重ねると説明が表示され、クリックすると本文ページが開きます。
Copyright ©1995-2005 Elmblog http://www.elmblog.com/

Posted by Dalma on August 7, 2006 | | Comments (1) | TrackBacks (0)

Ajaxアプリケーション

ボタンを押すとサーバから取得した文字列をページに表示する簡単なAjaxアプリケーションを試す。

1.JavascriptでXMLHttpRequestオブジェクトを作成するコードを作る。ブラウザがIEならばActiveXオブジェクトとして、それ以外ではJavaScriptオブジェクトとして作成する。

ajax = false;
// IE以外
if(window.XMLHttpRequest) {
　　　ajax = new XMLHttpRequest();
// IE用
} else if(window.ActiveXObject) {
　　　try {
　　　　　　ajax = new ActiveXObject("Msxml2.XMLHTTP");
　　　} catch(e) {
　　　　　　ajax = new ActiveXObject("Microsoft.XMLHTTP");
　　　}
}

2. サーバと通信してデータを取得し、ページを書き換える関数(Ajaxエンジン)を作る。この関数は、第1引数に指定されたURLにアクセスして返された文字列で、第2引数で指定されたIDを持つページ内のオブジェクトの中身を書き換える。


function getData(serverURL, objID) {
　　　ajax.open("GET", serverURL);
　　　ajax.onreadystatechange = function() {
　　　　　　if (ajax.readyState == 4 && ajax.status == 200) {
　　　　　　　　　var obj = document.getElementById(objID);
　　　　　　　　　obj.innerHTML = ajax.responseText;
　　　　　　}
　　　}
　　　ajax.send(null);
}

3. このJavaScriptを使うHTMLページを作る。ページ内には段落と、Ajaxを実行するためのボタンを1つ配置する。ボタンは通常のsubmit動作は行わずに、JavaScriptの関数を呼び出すだけ。onClickイベントハンドラで指定しているURLは、スクリプトの置かれているURLに置き換える。


<html>
<head><title>最も簡単なAjaxサンプル</title></head>
<body>
<form>
<input type=button value="取得＆書き換え" onClick="getData('http://www.example.jp/server.php', 'maintext'); return false;">
</form>
<div id="maintext"><p>ボタンを押すとこのテキストが書き換わります。</p></div>
</body>
</html>

4. サーバ側のスクリプトを作る。サンプルとしてHTMLテキストを返すだけのスクリプトを、クライアント側で指定されている /server.phpとして配置する。サーバ側はPerl、PHP、ASP.NET、J2EEなど、どのような開発環境でも利用できる。

echo '

ボタンがクリックされました。

';
?>

5. これで、ボタンがクリックされるとサーバから取得したデータでページが書き換えられる。

Posted by Dalma on August 17, 2006 | | Comments (0) | TrackBacks (0)