About Code Homepage JavaScript Memo MovableType PhpScript Study Template Tools Vista 

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>

〔注〕jsファイルと呼び出すファイルの文字コードを同じにする。

〔例〕
<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 + "日")

お気に入り(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
※Firefox3にバグがあるようだ。

ブラウザのステータスバーにメッセージを流す

ブラウザー画面の一番下にあるステータス・バーを見てください。下記のJavaScriptのなかのvar m1〜var m3で指定したテキスト・メッセージが左に流れて表示されます。

※表示されない場合(Firefox)
(1)ブラウザーのメニューバー「表示(V)」の中の「ステータスバー(B)」をクリックしてチェックをつけてください。
(2)「ツール」-[オプション]のコンテンツタブで「Javascriptを有効にする」にチェックをつける。「詳細設定」で、「ステータスバーのテキストを変更する」にチェックをつける。

続きを読む "メッセージを流す" »

簡易電卓

=

Degrees Radians Gradients

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

《編集方法》
<!--画像ファイルの指定-->と書いてある部分で動かしたい画像を指定する。画像は8個まで指定できる。次にJavaScript 内の画像の数、移動方向、移動速度、揺れ幅、揺れの周期、画像のサイズを適宜指定する。
サンプル表示

■ 画像の上下移動 No.2
単純に画像が上から下に向かって移動する。雪が降ったり、あるいは落ち葉が散るようなイメージ表現に使える。

《編集方法》
<!-- 画像の指定 -->と書いてある部分で動かしたい画像を指定する。指定できる画像は一種類のみ。
サンプル表示

■ 画像の上下移動 No.3
こちらは非常に細かくパラメータが設定できるスクリプト。縦一列に移動させる事もできるし、画面いっぱいに降らせることもできる。また、一定の速度で移動したり、次第に加速させるような移動も可能である。

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

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

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

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

1.<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>タグについても同じように変更する。

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

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

続きを読む "JukeBox Script" »

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

続きを読む "任意の曲を連続演奏" »

ようこそ、だるまの世界へ
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.

ボタンを押すとサーバから取得した文字列をページに表示する簡単な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など、どのような開発環境でも利用できる。
<?php echo '<p>ボタンがクリックされました。</p>'; ?>
5. これで、ボタンがクリックされるとサーバから取得したデータで、ページ内の指定した部分が書き換えられる。 Sample:

ボタンを押すとこのテキストが書き換わります。

【注】phpソースはunicodeで保存しないと文字化けするようだ。
IE6およびFirefoxで正常動作することを確認した。

http://example.com/からしかリンクできないようにする。
リンク先につぎのスクリプトを書く。
<script language="JavaScript">
x = document.referrer;
y = "http://example.com/";
if (x!=y) {
window.location= "ng.html";
}
</script>

◆文書の書き込み document.write(msg [, msg...])

続きを読む "Document" »

◆window.location.xxxxxx
href の値が "http://www.example.com:2096/aaa/index.cgi?key=pc#home" のとき、各xxxxxxの値は以下のようになる。

protocol: "http:"
・host:     "www.example.com:2096"
・hostname: "www.example.com"
・port:     "2096"
・pathname: "/aaa/index.cgi"
・search:   "?key=pc"
・hash:     "#home"

Free JavaScripts provided
by The JavaScript Source

<スクリプト例>

<script type="text/javascript">
<!-- Begin
function Swap1over() {
  document.image1.src="画像1"
}
function Swap1out() {
  document.image1.src="画像2"
}
// End -->
</script>


<画像入れ替えのIMGタグ>

<div align="center">
<img src="画像2" name="image1" border="0" onMouseOver="Swap1over()" onMouseOut="Swap1out()">
</div>