うさのJavaScript講座 - Blog館 -

2007年06月05日

サンプル更新しました♪

ず～～～～～～～いぶんご無沙汰しております。＠うさです。
明けましておめでとうと言って半年が経ちました。う゛う゛う゛。忙しぃんです凹凹凹 …と言い訳してみる。。。

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

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

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

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

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

最近10台のマシンをなんとか3台にしようとたくらんでいる＠うさでした。

Permalink
by
at 02:25
Comments (0)
Trackbacks (0)

2006年11月28日

HTMLで記述するOBJECTタグ。これはActiveXやJAVAやFlashなど拡張オブジェクトを貼り付けるタグです。この中には様々な種類のものがありますが、今回は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はこちら↓

Permalink
by
at 19:51
Comments (0)
Trackbacks (0)

2006年11月10日

XSLT内にJavaScriptを記述

うさのJavaScript講座サンプル集にある、XMLやXSLTと連動するサンプル集１２に、XSLT内でJavasScriptを記述するサンプルを追加いたしました。
XMLにはダイレクトにXSLTを見に行くようにしていますので、サンプル見るアイコンをクリックしていただくと、お使いのブラウザでXMLを起動しどのような感じになるかご覧いただけます。
是非お試しくださいませ～♪

Permalink
by
at 20:59
Comments (0)
Trackbacks (0)

2006年11月03日

XMLとXSLTをくっつけるJavaScriptサンプル

前回おとどけした、XMLを読み込むサンプルに引き続き、今回はXSLTをAppendしてあげようではないか！というサンプルです。
え？＜?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>

Permalink
by
at 15:47
Comments (1)
Trackbacks (0)

2006年11月01日

XMLファイルをロードし表示するサンプル

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>

Permalink
by
at 23:23
Comments (0)
Trackbacks (1)

2006年10月30日

Firefox 2.0でましたネ

ということで、サンプル集にFirefox2.0の動作結果を少しづつアップしています。
基本的にはgetYear関数だけは利用できない（getFullYearをご利用ください）のと、最近のブラウザと同様ステータスバー表示が×なのと、新規ウィンドウハンドル系が、タブとのからみの都合上△となっています。
質問掲示板にもございました当Blog館とうさのJavaScript講座TOPの右にありますスタイルシートの切り替えは、サンプル集9-30を利用していますが、最新のブラウザ対応でしたら、getElementByIdでLinkタグをキャッチすればうまくいきます。ちなみにgetElementByNameでうまくいかない場合もございましたのでお試しくださいませ♪

Permalink
by
at 05:07
Comments (0)
Trackbacks (0)

2006年10月24日

条件式？：

こんにちは。うさのJavaScript講座のReferenceの場所に、演算子、式、変数、オブジェクトの解説ページを復旧いたしましたのでお知らせいたします。
この中に登場する条件式、？：は、以前質問掲示板であがっていたTopicsでもあったので、2003年11月に内容を更新しています。今からちょうど3年も前になっちゃうんですね。（゜゜）遠い目
さて、この、条件式　？　TRUEの場合の処理　：　FALSEの場合の処理
かなりお勧めなのでぜひご利用ください。なにがおすすめって、書かなくちゃいけないコード量が減る！それだけですけどすごいことです。ハイ。
ページに記載されているサンプルコードとは別に、こちらにはさらに短縮版、そしてMovableTypeで動いているコードをもういっこ書いておきますネ。おためしくださいませ。

ソースはこちら↓

Permalink
by
at 18:56
Comments (0)
Trackbacks (0)

2006年10月22日

ひとやすみページなどを復旧いたしました

予約語・コメント・制御構文のページと、ひとやすみページを更新いたしました。
ここで紹介してる「ドラゴンクエストⅦ エデンの戦士たち」の石版検索フォーム、ブログ上でも設置しておきます。
最近RPGしてない＠うさでした。

Permalink
by
at 22:37
Comments (0)
Trackbacks (0)

2006年10月17日

CGIやJAVAアプレットとの連動サンプルを復旧しました

サイト移行作業でご迷惑をおかけしております。
サンプル集１１では、JAVAアプレットとの連動をご紹介しておりましたのを復旧いたしました。さらに今回はPerlとの連動やPerl内でJavaScriptを記述するサンプルを3つほど追加いたしました。

JAVAアプレットは、クライアント側（参照する側）の環境に依存します。またPerlはサーバー側（参照される側）の環境に依存します。JAVAアプレットは作成していた当時（1996年～1999年ごろ）はよく利用されておりましたがFlash登場により、影が薄くなってしまったように思われます。まぁでもAjaxのように、何の技術・言語が復活するかわからない世の中(?)なので公開しておきますゆえ、Appletタグをご利用なさる方は御覧くださいませ。

うさのJavaScript講座