2006年12月26日

カウントダウンスクリプト♪

早いもので気が付いたらもう師走。
仕事が忙しすぎて全然サイトのリニューアル間に合ってないです・・・。ウェブ関係のお仕事なら楽しめただろうけど、なんせウェブぢゃない分野のエンジニアなもんで~。とまぁ言い訳はこの辺にして、うさのように年末までビッチリ仕事詰まってる人にもそうでない人にも新年は来るものです♪
新年を楽しみにしている人にもそうでない人にもお送りするカウントダウンスクリプト。
2007年だけだとあっという間にくるのでついでに22世紀カウントダウンもつけちゃいます。
なお、このサンプルはうさのJavaScript講座のサンプル集1のサンプル67でもダウンロードしていただけます。
2007年まであと
22世紀まであと


ソースはこちら↓

HTMLはこちら↓
BODYで開始するパターンです。このブログはボタンクリックで表示するようにしています。

2006年11月28日

Windowsカラーダイアログで選択した色を反映

HTMLで記述するOBJECTタグ。これはActiveXやJAVAやFlashなど拡張オブジェクトを貼り付けるタグです。この中には様々な種類のものがありますが、今回はWindows環境で呼び出すことのできるカラーダイアログを呼び出してみることにします。
Windows環境でカラーダイアログはダイアログヘルパーという位置づけで提供されているので、オブジェクトをHTMLに貼り付け、公開されている関数を呼び出すとダイアログが表示される、という仕組みになっています。
それでは、カラーダイアログで選択された色をDIVタグ内の文字列の色に反映するサンプルです。Windows+IEをお使いの方は是非お試しくださいませ。
なお、このサンプルはうさのJavaScript講座サンプル集7のサンプル22でもご覧いただけます。テスト済環境は、Windows XP + IE6.0, Windows XP + IE7.0, Windows 2003 + IE7.0, Windows Vista + IE7.0です。

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


ソースはこちら↓

HTMLはこちら↓

2006年11月20日

画像をウィンドウサイズにあわせてスライド

3回ほどXML/XLST関連でご案内してきましたが、そんな堅苦しいのはヤダ!JavaScriptってむずいの?なんて思われてしまったかもしれませんね。
ということで、こんどはウェブサイトにもブログにも、動くものがほしいときのアクセントを作ってみるなんていかがでしょうか。
DIVタグで表示している画像を、ブラウザの高さに従ってスライドさせてみるサンプルをご紹介いたします。ただスライドしていくのには、現在のX軸Y軸のポジションをインクリメント/ディクリメント(+-)すればいいのですが、せっかくJavaScriptでは、現在のWindow枠のサイズが取得できますのでその値を利用しながら動かしてみることにします。
↓のボタンをクリックすると、ブラウザの左上から左下まで画像が下向きに動いていきます。
うさのJavaSript講座では、サンプル集8-24でDLすることができます。サンプル集8にはそのほか右へスライドしたり斜めへスライド、そしてウィンドウを1周グルリとするものもございます。お楽しみ下さいませ♪


ソースはこちら↓

HTMLはこちら↓

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できます。




ソースはこちら↓

XSLTはこちら↓

2006年11月01日

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

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




ソースはこちら↓

2006年10月24日

条件式?:

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

お元気?

ソースはこちら↓

2006年10月23日

マウスオーバーで指定した場所の色が変化する

マウスオーバーイベントで画像が切り替わるっていうのはよく見ますが、単純に色が変化するのもありですよね。ということで、今回はサンプル集3の30をご紹介します。
マウスが上にくると、Spanタグ内の色を変えます。一色ぢゃつまらないので、いろんな色を配列に入れて、タイマーでクルクル回してみてます。
ぜひお試しくださいませ♪

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

ソースはこちら↓

2006年10月13日

ラジオボタンでテキストボックスを表示・非表示

先週のダウンロードランキング上位にあったものから一つご紹介したいと思います。
このブログのサンプルにも出てくる表示・非表示系ですが、DIVタグを利用したものがほとんどです。でも!今回ご紹介するのは、DIVタグではなくとも、スタイルのVisibility値を変更することには変わらない、ということもふまえたForm内でのテキストボックスをラジオボタンで表示・非表示切り替えするサンプルです。
うさのJavaScript講座内サンプルでは、サンプル集4-21にてダウンロード可能となっております。
このサンプルでは表示関数と非表示関数を分離して記述していますが、以前の記事のイメージをDIVで表示・非表示と同様、現在の状態をフラグで保持し切り替えるタイプにするとひとつの関数で処理を行うことも可能です。

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

表示 非表示


ソースはこちら↓

2006年10月11日

Movable TypeにJSファイルを置く方法

こんにちは。@うさです。
今回は視点を変えてこのブログでもお世話になっているMTことMovable Typeで外部JSファイルを置いて遊んでみようと思います。
↓クリックすると、MT内に置かれたJSファイルが呼び出されます。


では、はじめにJSファイルを作成する方法です。もちろんJSファイルをお手持ちのエディタで作成してFTPで送ってしまうのも手ですが、せっかくですのでMT画面で作成してみることにしてみます。

まずは、環境設定のテンプレートから新規作成を行います。(図1)
次に、テンプレート名と出力ファイル名を記述します。ここで、出力ファイル名は、sample.jsのように拡張子に気をつけてみてください。(図2)
テンプレートの内容には、JS内部コードを記述し、保存します。
これで呼び出される側のスタンバイはOKです。
では呼び出す側、すなわち各アーカイブテンプレートを含むテンプレートから、JSファイルはココだよ、と宣言してあげる必要がありますので、

というように場所を指定してあげてください。
(ここではシングルクオートにしてますが、ダブルクオートで結構です。)
それではscriptタグで宣言の入っているテンプレートファイルで呼び出してみてください。

図1 図2
今ではJSファイルを外部ファイルにするのが主流ですが、外部ファイル化の良いところは、共通関数などどのファイルからもアクセスできることによって使いまわせることが最大のメリット、と言って過言ではないでしょうか。
是非お試しくださいませ♪

Movable TypeにJSファイルを置く方法の続きを読む

2006年10月04日

イメージでdivの表示・非表示を切り替える

今回は、サンプルでもよくDLされている、イメージでdivの表示・非表示を切り替える方法をこちらにはってみます。
イメージをクリックすると指定しているDiv内(ここではid指定)の表示状態をDivタグスタイル属性を変更し、非表示にしたり表示に戻したりしています。
このブログTOPの左下の「サンプルブログパーツ」にも適応してみました。こんな感じで利用するのも一つの手かもしれませんネ。
なお、ネスケの古いヴァージョンなどでは、getElementByIdが利用できませんのでdocument.layers["div名"]で呼び出してくださいね。他のヴァージョンとの互換性など、レイヤー全般に関するサンプルはうさのJavaScript講座のサンプル集8でご紹介しております。

←クリックしてみてネ♪
この部分がDIV内です。

ソースはこちら↓

2006年10月02日

id値をテキストボックスに表示

週末ふらっと海外で潜ってまいりました。(実はダイブマスターだったりするうさです。)
普段よくボーイング747に乗るのですが、今回は757。行きはエコノミー(コーチ)で帰りはビジネスだったので、その座席配列をマウスイベントで表現してみることにします。

サンプルでは、テキストにAタグを貼り、そのid値をテキストボックスに表示させています。AタグでなくてDIVタグなどでも動作します。ただし、テキストボックスに表示する場合、特に古いヴァージョンのブラウザなどgetElementById関数を利用できないブラウザもありますので、その場合は、"document.フォーム名.テキストボックス名"にてご利用くださいませ。フォームに関するサンプルは、うさのJavaScript講座のサンプル集4に入っています。

 

 


ソースはこちら↓

2006年09月21日

本日日付を画像で表示☆サンプル集1-69を追加しました

本日日付を画像で表示☆サンプル集1-69を追加しました。
もともとサンプル集1-7に入っていたのですが、最近のブラウザではgetYearでなくgetFullYearで年度を取得するので、その1行を変更したものです。サンプルはそのままHTML/XHTML内部にも記述できますし、JSファイルにしていただいても結構です。ご自由にカスタマイズしてくださいませ。
ブログにももちろん使えますのでご利用くださいね♪

うさのJavaScript講座・サンプル集1-69をこのページに貼り付けています。

ソースはこちら↓

2006年09月05日

ブログにもJavaScriptを♪ おみくじ編

こんにちは。@うさ
ブログでももちろんJavaScriptが使えるということで、サンプル集の一部からブログに貼り付けてお送りします。
今回は本日サンプルを復旧させましたサンプルの中から、ここにおみくじをはってみました。サンプルでは投函本文にありますが、左や右のブログパーツ部分にいかがでしょうか?Script内部は配列になっていますのでいくつでも画像を準備していただけます。
おためしあれ♪





ソースはこちら↓

ブログにもJavaScriptを♪ おみくじ編の続きを読む