うさのJavaScript講座

うさのJavaScript講座 - Blog館 - http://blog.usagi-js.com/ このサイトでは「うさのJavaScript講座」の情報やブログにも使えるJavaScriptサンプルをお届けしています♪ ja Copyright 2007 Fri, 08 Jun 2007 03:06:24 +0900 http://www.sixapart.com/movabletype/ http://blogs.law.harvard.edu/tech/rss ちっちゃなキーボード♪ ドスパラでゲットしたのはコレ！オウルテックのスーパーミニキーボード！小さすぎてカワイすぎます！USB接続もPS/2接続もできちゃいます。今複数のPCちゃんたちは切替機が接続されているのですが、かれこれ10年ほど前に購入したものなのでPS/2しか対応してないんです。PS/2はありがたいです～。ちなみに写真のウサギはケーブルホルダーです。

]]> http://blog.usagi-js.com/archives/2007/06/post_5.html http://blog.usagi-js.com/archives/2007/06/post_5.html 雑記 Fri, 08 Jun 2007 03:06:24 +0900 サンプル更新しました♪ 明けましておめでとうと言って半年が経ちました。う゛う゛う゛。忙しぃんです凹凹凹 …と言い訳してみる。。。

さてさて、最近迷惑ポスティングだらけでご迷惑をおかけしている質問BBSにご質問のあったものから、少しサンプルを作成してみました。迷惑対策CGIアップデートがんばりますですm(_ _)m

サンプル集2-83～85 今までウィンドウを立ち上げ（子ウィンドウ）、そこから文字列を渡してみたりするサンプルがほとんどでしたが、今回は、逆方向、すなわち元のウィンドウから文字列を渡してみるサンプルをご用意いたしました。

サンプル集2-86 子ウィンドウを複数起動したときは、元のウィンドウは最新のものしかハンドルできないので多重起動をしないためにどうすればいいか、をサンプルにしてみました。名づけてundefinedを使いこなそう！？

サンプル集1-70,71 正規表現を使った文字列の置換のご相談がありましたので、2つほどサンプルをご用意いたしました。

いずれもまだIEでしかテストしておりませんが、他ブラウザでテスト完了した際には、各ページがしれっとアップデートされていますので是非ご覧くださいませ。

最近10台のマシンをなんとか3台にしようとたくらんでいる＠うさでした。]]> http://blog.usagi-js.com/archives/2007/06/post_4.html http://blog.usagi-js.com/archives/2007/06/post_4.html 更新履歴ウィンドウサンプル正規表現 Tue, 05 Jun 2007 02:25:59 +0900 謹賀新年あけましておめでとうございます。旧年中もうさのJavaScript講座に遊びに来てくださいましてありがとうございました。昨年は更新履歴をRSSで配信したくBlog形式をスタートさせてみました。従来のメール配信を楽しみにしてくださっていたみなさまには大変ご迷惑をおかけいたしましたが、どうぞご支援くださいませ。サイトのほうもまだまだ使い勝手が悪いですが、少しづつ更新できれば、と考えております。本年度もよろしくお願いいたします。最近「働きマン」と「サラリーマン体操」にはまってる＠うさでした。 http://blog.usagi-js.com/archives/2007/01/post_3.html http://blog.usagi-js.com/archives/2007/01/post_3.html Wed, 03 Jan 2007 23:30:51 +0900 カウントダウンスクリプト♪ 仕事が忙しすぎて全然サイトのリニューアル間に合ってないです･･･。ウェブ関係のお仕事なら楽しめただろうけど、なんせウェブぢゃない分野のエンジニアなもんで～。とまぁ言い訳はこの辺にして、うさのように年末までビッチリ仕事詰まってる人にもそうでない人にも新年は来るものです♪
新年を楽しみにしている人にもそうでない人にもお送りするカウントダウンスクリプト。
2007年だけだとあっという間にくるのでついでに22世紀カウントダウンもつけちゃいます。
なお、このサンプルはうさのJavaScript講座のサンプル集1のサンプル67でもダウンロードしていただけます。
2007年まであと
22世紀まであと

ソースはこちら↓

<script language="javascript">
<!--
//------------------------------------------------------------
//javascript by ＠うさ http://www.usagi-js.com/
//------------------------------------------------------------
var tid;
function ShowTime()
{
	//変数宣言
	var dtToday = new Date();

	//記念日をいれてください。
	//注意：月、日は０からスタートしているのに注意してください。
	var dtNextCentury = new Date(2101, 0, 0);　//2007年元旦の場合は、2007,0,0
	//計算結果を表示します。
	var nCal, nSecB, nSec, nMin, nHour;
	nCal = dtNextCentury.getTime() - dtToday.getTime();

	//秒から逆算
	nSecB = nCal/1000;
	nHour = Kirisute((nSecB/60)/60);
	nMin = Kirisute(nSecB/60 - nHour*60);
	nSec = Kirisute(nSecB - nMin*60 - nHour*60*60);

	//ここでは時間を表示します。
	document.getElementById("time22").value=nHour+"時間"+nMin+"分"+nSec+"秒";

	//タイマーを開始
	tid=setTimeout('ShowTime()',999);
}
//時刻の切捨て関数
function Kirisute(nVal)
{
	var nTemp = nVal.toString();
	if (nTemp.indexOf(".") < 0)
	{
		return nTemp;
	}
	return nTemp.substring(0, nTemp.indexOf("."));
}
//-->
</script>

HTMLはこちら↓
BODYで開始するパターンです。このブログはボタンクリックで表示するようにしています。
]]> http://blog.usagi-js.com/archives/2006/12/hourcountdown.html http://blog.usagi-js.com/archives/2006/12/hourcountdown.html JavaScript de ブログカウントダウンサンプル時間 Tue, 26 Dec 2006 17:57:01 +0900 Windowsカラーダイアログで選択した色を反映 Windows環境でカラーダイアログはダイアログヘルパーという位置づけで提供されているので、オブジェクトをHTMLに貼り付け、公開されている関数を呼び出すとダイアログが表示される、という仕組みになっています。
それでは、カラーダイアログで選択された色をDIVタグ内の文字列の色に反映するサンプルです。Windows+IEをお使いの方は是非お試しくださいませ。
なお、このサンプルはうさのJavaScript講座サンプル集７のサンプル22でもご覧いただけます。テスト済環境は、Windows XP + IE6.0, Windows XP + IE7.0, Windows 2003 + IE7.0, Windows Vista + IE7.0です。

ここの文字列の色を変更します♪

ソースはこちら↓

HTMLはこちら↓
]]> http://blog.usagi-js.com/archives/2006/11/colordialog.html http://blog.usagi-js.com/archives/2006/11/colordialog.html JavaScript de ブログ更新履歴 ActiveX OBJECTタグカラーダイアログサンプル Tue, 28 Nov 2006 19:51:26 +0900 画像をウィンドウサイズにあわせてスライドということで、こんどはウェブサイトにもブログにも、動くものがほしいときのアクセントを作ってみるなんていかがでしょうか。
DIVタグで表示している画像を、ブラウザの高さに従ってスライドさせてみるサンプルをご紹介いたします。ただスライドしていくのには、現在のX軸Y軸のポジションをインクリメント/ディクリメント（＋－）すればいいのですが、せっかくJavaScriptでは、現在のWindow枠のサイズが取得できますのでその値を利用しながら動かしてみることにします。
↓のボタンをクリックすると、ブラウザの左上から左下まで画像が下向きに動いていきます。
うさのJavaSript講座では、サンプル集８-２４でDLすることができます。サンプル集８にはそのほか右へスライドしたり斜めへスライド、そしてウィンドウを1周グルリとするものもございます。お楽しみ下さいませ♪

レイヤー部分です

ソースはこちら↓

<script language="javascript">
<!--
//------------------------------------------------------------
//javascript by ＠うさ http://www.usagi-js.com/
//------------------------------------------------------------
var nLayerHeight = 70; //レイヤーの高さのピクセル数をいれてください。
var nXPos;
var nYPos;
var nTimer;
function Init()
{
	nXPos = 0;
	nYPos = 0;
	SampleStartMove();
}
function SampleStartMove()
{
	nYPos++;
	//NNの場合
	if (navigator.appName=="Netscape")
	{
		//画面の大きさを取得します
		nHeight = window.innerHeight - nLayerHeight;
		//次の座標が画面よりも大きければなにもしません
		if (nYPos > nHeight)
		{
			return;
		}
		//NN4
		if(document.layers)
		{
			//レイヤーの幅と高さをマウス座標にセット
			document.layerSample.left = nXPos;
			document.layerSample.top = nYPos;
		}
		//NN6
		else
		{
			document.getElementById("layerSample").style.left = nXPos;
			document.getElementById("layerSample").style.top = nYPos;
		}
	}
	//IEの場合
	if (document.all)
	{
		//画面の大きさを取得します。
		nHeight = document.body.clientHeight - nLayerHeight;
		//次の座標が画面よりも大きければなにもしません
		if (nYPos > nHeight)
		{
			return;
		}
		//レイヤーの幅と高さを座標にセット
		layerSample.style.left = nXPos;
		layerSample.style.top = nYPos;
	}
	nTimer=setTimeout("SampleStartMove()",10); //タイマー
}
//-->
</script>

HTMLはこちら↓
]]> http://blog.usagi-js.com/archives/2006/11/imageslide.html http://blog.usagi-js.com/archives/2006/11/imageslide.html JavaScript de ブログサンプルレイヤー画像スライド Mon, 20 Nov 2006 20:01:28 +0900 XSLT内にJavaScriptを記述うさのJavaScript講座サンプル集にある、XMLやXSLTと連動するサンプル集１２に、XSLT内でJavasScriptを記述するサンプルを追加いたしました。 XMLにはダイレクトにXSLTを見に行くようにしていますので、サンプル見るアイコン

をクリックしていただくと、お使いのブラウザでXMLを起動しどのような感じになるかご覧いただけます。是非お試しくださいませ～♪]]> http://blog.usagi-js.com/archives/2006/11/xsltjavascript.html http://blog.usagi-js.com/archives/2006/11/xsltjavascript.html 更新履歴 XSLT サンプル Fri, 10 Nov 2006 20:59:07 +0900 XMLとXSLTをくっつけるJavaScriptサンプルえ？＜?xml-stylesheet type="text/xsl" href="xsltファイル名"?＞をXMLに書けばいいからJavaScriptでやらなくってよい？そんな場合もあります。でも、XMLがどんなものでもいい場合や、XMLはどこかのコードで生成されていてスキーマしか分かっていない場合、XSLTを動的に切り替えたい場合なんかには役に立つかもしれません。
ということで、今回もIE6,7,Firefox2.0,Opera9.0で動作確認していますサンプルをお届けしますのでお楽しみくださいませ♪
なお、このサンプルは、このブログのRSSをXMLとしていますが、うさのJavaScript講座サンプル集12-サンプル5ではHTML/XML/XSLTセットでDLできます。

ソースはこちら↓

<script language="javascript">
<!--
//------------------------------------------------------------
//javascript by ＠うさ http://www.usagi-js.com/
//------------------------------------------------------------
var xmlDocument, xslDocument;
var fileName = "index.xml";
var xsltFileName = "sample5.xslt";
var browserFlag = false;
//読み込みスタート
function ViewTitle()
{
	if (document.implementation.createDocument)
	{
		browserFlag = true;
		//XML
		xmlDocument = document.implementation.createDocument("", "sampleXML", null);
		xmlDocument.onload = loadXslt;
		xmlDocument.load(fileName);
	}
	else //IE
	{
		//XML
		xmlDocument = new ActiveXObject("Microsoft.XMLDOM");
		xmlDocument.async = false;
		xmlDocument.load(fileName);
		//XSLT
		xslDocument = new ActiveXObject("Microsoft.XMLDOM");
		xslDocument.async = false;
		xslDocument.load(xsltFileName);
		appendXslt();		
	}
	
}
//IE以外の場合のXSLTのロード
function loadXslt()
{
	if (browserFlag)
	{
		xslDocument = document.implementation.createDocument("", "sampleXSLT", null);
		xslDocument.onload = appendXslt;
		xslDocument.load(xsltFileName);
	}
}
//XMLとXSLTをくっつける関数
function appendXslt()
{
	if (browserFlag)
	{
		xsltProc = new XSLTProcessor();
		xsltProc.importStylesheet(xslDocument);
		outString = xsltProc.transformToFragment(xmlDocument, document);
		//表示
		document.getElementById("xmlValues").appendChild(outString);
	}
	else //IE
	{
		outString = xmlDocument.transformNode(xslDocument);
		//表示
		document.getElementById("xmlValues").innerHTML = outString;
	}
}
//-->
</script>

XSLTはこちら↓

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:variable name="items" select="//*[local-name()='item']" />
  <xsl:template match="*">
    <html>
    <body>
        <xsl:choose>
          <xsl:when test="count($items)>0">
            <table border="1" width="100%">
              <tr>
                <td>タイトル
                </td>
                <td>リンク
                </td>
              </tr>
            <xsl:apply-templates select="$items" mode="item" />
            </table>
          </xsl:when>
        </xsl:choose>
    </body>
    </html>
</xsl:template>
<xsl:template match="*" mode="item">
    <xsl:variable name="item-title" select=".//*[local-name()='title']" />
    <xsl:variable name="item-link" select=".//*[local-name()='link']" />
  <tr>
       <xsl:if test="string-length($item-title)">
        <td>
          <xsl:value-of select="$item-title" />
        </td>
      </xsl:if>
	<xsl:if test="contains($item-link, 'http')">
        <td>
          <a href="{$item-link}">
            <xsl:value-of select="$item-link" />
          </a>
        </td>
      </xsl:if>
    </tr>
  </xsl:template>
</xsl:stylesheet>

]]> http://blog.usagi-js.com/archives/2006/11/xmlxsltjavascript.html http://blog.usagi-js.com/archives/2006/11/xmlxsltjavascript.html JavaScript de ブログ更新履歴 XML XSLT サンプル Fri, 03 Nov 2006 15:47:58 +0900 XMLファイルをロードし表示するサンプルうさのJavaScript講座サンプル集12に追加しました。
あたためてきたXML関連サンプル（もう何年もたっちゃっていつのまにかActiveXのよびだすObject名変わってましたが（汗））です。
以前ActiveXサンプルで一瞬だけ公開していたのですが、今日現在での動作確認をして再度整理してみました。FirefoxとOpera、IEで確認しています。7年くらい前からシステム屋さんやってたころ以来なんでもXMLでしたが、Webの世界もRSSやWebService、AjaxをはじめとしてなんでもXMLがわからないと・・・という時代なんでしょうか。うさは個人的にXML大好きです。最近システム屋さんの仕事でXPathと久し振りに格闘していましたが楽しくってしょーがない。ｗｗｗ。とまぁ、そんな話はおいといて、このブログのRSSのItemを読むサンプルをここで紹介してみます。channelの下にあるitem内のtitleとlinkのValueですネ。名付けて「プチ★ローカルRSSリーダー」♪

ソースはこちら↓

<script language="javascript">
<!--
// javascript by ＠うさ http://usagi-js.com/
var xmlDocument;
var fileName = "index.xml";
//読み込みスタート
function ViewTitle()
{
	if (document.implementation.createDocument)
	{
		xmlDocument = document.implementation.createDocument("", "sample", null);
		xmlDocument.onload = readXml;
		xmlDocument.load(fileName);
	}
	else //IE
	{
		xmlDocument = new ActiveXObject("Microsoft.XMLDOM");
		xmlDocument.async = false;
		xmlDocument.load(fileName);
		readXml();		
	}
	
}
//ロード時読み込み関数
function readXml()
{
	var outString = "";
	var objItems = xmlDocument.getElementsByTagName("item");
　　　　　　　//とりあえず５つにしておきます。すべてのときは、objItems.lengthまでLoopしてください。
	for (loop = 0; loop < 5; loop++)
	{
		var valueTitle = objItems[loop].getElementsByTagName("title");
		var valueLink = objItems[loop].getElementsByTagName("link");
		outString += "<br><b>アイテム" + (loop+1) + "つめ</b><br>";
		outString += valueTitle[0].childNodes.item(0).nodeValue + "<br>";
		outString += "<a href='" + valueLink[0].childNodes.item(0).nodeValue + "'>続きを読む</a><br>";
	}
	ShowValue(outString);
}
//表示
function ShowValue(textValue)
{
	document.getElementById("titleValue").innerHTML = textValue;
}
-->
</script>

]]> http://blog.usagi-js.com/archives/2006/11/xml.html http://blog.usagi-js.com/archives/2006/11/xml.html JavaScript de ブログ更新履歴 XML サンプル Wed, 01 Nov 2006 23:23:37 +0900 Firefox 2.0でましたネうさのJavaScript講座TOPの右にありますスタイルシートの切り替えは、サンプル集9-30を利用していますが、最新のブラウザ対応でしたら、getElementByIdでLinkタグをキャッチすればうまくいきます。ちなみにgetElementByNameでうまくいかない場合もございましたのでお試しくださいませ♪]]> http://blog.usagi-js.com/archives/2006/10/firefox_20.html http://blog.usagi-js.com/archives/2006/10/firefox_20.html 更新履歴 Mon, 30 Oct 2006 05:07:29 +0900 条件式？：うさのJavaScript講座のReferenceの場所に、演算子、式、変数、オブジェクトの解説ページを復旧いたしましたのでお知らせいたします。
この中に登場する条件式、？：は、以前質問掲示板であがっていたTopicsでもあったので、2003年11月に内容を更新しています。今からちょうど3年も前になっちゃうんですね。（゜゜）遠い目
さて、この、条件式　？　TRUEの場合の処理　：　FALSEの場合の処理
かなりお勧めなのでぜひご利用ください。なにがおすすめって、書かなくちゃいけないコード量が減る！それだけですけどすごいことです。ハイ。
ページに記載されているサンプルコードとは別に、こちらにはさらに短縮版、そしてMovableTypeで動いているコードをもういっこ書いておきますネ。おためしくださいませ。

ソースはこちら↓
]]> http://blog.usagi-js.com/archives/2006/10/post_2.html http://blog.usagi-js.com/archives/2006/10/post_2.html JavaScript de ブログ更新履歴サンプル条件式 Tue, 24 Oct 2006 18:56:59 +0900 マウスオーバーで指定した場所の色が変化するマウスが上にくると、Spanタグ内の色を変えます。一色ぢゃつまらないので、いろんな色を配列に入れて、タイマーでクルクル回してみてます。
ぜひお試しくださいませ♪

ここの→色がかわります♪
マウスを当ててね！

ソースはこちら↓

<script language="javascript">
<!--
//------------------------------------------------------------
//javascript by ＠うさ http://usagi-js.com/
//------------------------------------------------------------
var strColor = new Array("#ff0000","#00cc00","#0000ff","#990099","#999999","#ff80c0","#0080ff","#ff8000"); 
var nLoop = 0;
var nTimer;
function StartColorChange()
{
	clearTimeout(nTimer);
	if (document.getElementById)
	{
		nTimer = setInterval("ChangeColor()", 500);	//変化するスピードの変更はここで。
	}
}
function ChangeColor()
{
	document.getElementById("changeColorArea").style.color=strColor[nLoop];
	//次の準備
	if (nLoop > strColor.length-1)
	{
		nLoop = 0;
		clearTimeout(nTimer);
		return;
	}
	else
	{
		nLoop++;
	}
}
//-->
</script>
<!--以下HTML部です-->
ここの→<span id="changeColorArea">色</span>がかわります♪<BR>
<a href="リンク先" onMouseOver="StartColorChange()" name="lnkMouse">マウスを当ててね！</a>

]]> http://blog.usagi-js.com/archives/2006/10/colorchange.html http://blog.usagi-js.com/archives/2006/10/colorchange.html JavaScript de ブログサンプルマウスイベント色変化 Mon, 23 Oct 2006 22:18:23 +0900 ひとやすみページなどを復旧いたしました予約語・コメント・制御構文のページと、ひとやすみページを更新いたしました。
ここで紹介してる「ドラゴンクエストⅦ エデンの戦士たち」の石版検索フォーム、ブログ上でも設置しておきます。
最近RPGしてない＠うさでした。
]]> http://blog.usagi-js.com/archives/2006/10/break.html http://blog.usagi-js.com/archives/2006/10/break.html 更新履歴 Sun, 22 Oct 2006 22:37:11 +0900 CGIやJAVAアプレットとの連動サンプルを復旧しましたうさのJavaScript講座]]> http://blog.usagi-js.com/archives/2006/10/cgijava.html http://blog.usagi-js.com/archives/2006/10/cgijava.html 更新履歴 CGI JAVAアプレット Perl サンプル Tue, 17 Oct 2006 17:33:43 +0900 ラジオボタンでテキストボックスを表示・非表示このブログのサンプルにも出てくる表示・非表示系ですが、ＤＩＶタグを利用したものがほとんどです。でも！今回ご紹介するのは、ＤＩＶタグではなくとも、スタイルのVisibility値を変更することには変わらない、ということもふまえたForm内でのテキストボックスをラジオボタンで表示・非表示切り替えするサンプルです。
うさのJavaScript講座内サンプルでは、サンプル集4-21にてダウンロード可能となっております。
このサンプルでは表示関数と非表示関数を分離して記述していますが、以前の記事のイメージをDIVで表示・非表示と同様、現在の状態をフラグで保持し切り替えるタイプにするとひとつの関数で処理を行うことも可能です。

毎度の記述になってしまいますが、古いブラウザなど一部のブラウザではFormの指定方法が異なります。サンプル集４・フォーム関連のサンプルをガサガサ見てみてくださいませ。

ソースはこちら↓

<script language="javascript">
<!--
//------------------------------------------------------------
//javascript by ＠うさ http://usagi-js.com/
//------------------------------------------------------------
function Show()
{
	//一部のブラウザでは見れない場合があります。必要に応じてここにブラウザ判定を入れてください。
	document.frmForm.targetTextBox.style.visibility="visible";
                //ブログで公開しているのはこちら↓
　　　　　　　//document.getElementById('targetTextBox').style.visibility="visible";
}
function Hide()
{
	//一部のブラウザでは見れない場合があります。必要に応じてここにブラウザ判定を入れてください。
	document.frmForm.targetTextBox.style.visibility="hidden";
                //ブログで公開しているのはこちら↓
　　　　　　　//document.getElementById('targetTextBox').style.visibility="hidden";
}
//-->
</script>
<!--以下HTML部です-->
<FORM name="frmForm">
<INPUT type="radio" name="rdoSample" value="1" checked onClick="Show()">表示 <INPUT type="radio" name="rdoSample" value="0" onClick="Hide()">非表示
<INPUT size="20" type="text" name="targetTextBox" value="テキストボックス" onclick="Show()"></FORM>

]]> http://blog.usagi-js.com/archives/2006/10/radioswitch.html http://blog.usagi-js.com/archives/2006/10/radioswitch.html JavaScript de ブログサンプルテキストボックスフォームラジオボタン表示非表示 Fri, 13 Oct 2006 05:51:57 +0900