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

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

お元気？ 元気です いまいちかしら

ソースはこちら↓

<form>お元気？<select id="optFeel"> <option value="元気です" selected>元気です</option> <option value="いまいちかしら">いまいちかしら</option> </select><input type="button" id="btnGo" value="判定♪" onClick="javascript:document.getElementById('optFeel').value == '元気です' ? alert('そりゃヨカタ') : alert('お大事にね');"></form>

マウスオーバーイベントで画像が切り替わるっていうのはよく見ますが、単純に色が変化するのもありですよね。ということで、今回はサンプル集3の30をご紹介します。
マウスが上にくると、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>

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

石版の色 赤色 青色 黄色 緑色 石版をはめる場所 左上 右上 左下 右下 真ん中 　

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

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

うさのJavaScript講座

先週のダウンロードランキング上位にあったものから一つご紹介したいと思います。
このブログのサンプルにも出てくる表示・非表示系ですが、ＤＩＶタグを利用したものがほとんどです。でも！今回ご紹介するのは、ＤＩＶタグではなくとも、スタイルの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>

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


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

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

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

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

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

←クリックしてみてネ♪
ソースはこちら↓

<script language="javascript"> <!-- //------------------------------------------------------------ //javascript by ＠うさ http://usagi-js.com/ //------------------------------------------------------------ var currentViewOnBody = true; function ViewPartsOnBody(layerName) { if (currentViewOnBody ) { //非表示 document.getElementById(layerName).style.visibility="hidden"; document.getElementById('imageArrowOnBody').src="http://usagi-js.com/images/arrowdown.gif"; currentViewOnBody = false; } else { //表示 document.getElementById(layerName).style.visibility="visible"; document.getElementById('imageArrowOnBody').src="http://usagi-js.com/images/arrowup.gif"; currentViewOnBody = true; } } //--> </script> <!--以下HTML部です--> <img id="imageArrowOnBody" src="http://usagi-js.com/images/arrowup.gif" border="0" onClick="javascript:ViewPartsOnBody('samplePartsOnBody')" style="cursor:hand">←クリックしてみてネ♪ <div id="samplePartsOnBody"> <font color="blue">この部分がDIV内です。</font></div>

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

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

■ ■　 ■ ■

■ ■ ■　 ■ ■ ■


ソースはこちら↓

<script language="javascript"> <!-- //------------------------------------------------------------ //javascript by ＠うさ http://www.usagi-js.com/ //------------------------------------------------------------ //テキストボックスの値をセットしています。マウスがはずれたときに呼び出されています。 function ShowDescription(content) { document.getElementById('sampleDescription').value = content.id; } //テキストボックスの値をなしにしています。マウスがはずれたときに呼び出されています。 function EraseDescription() { document.getElementById('sampleDescription').value = ""; } //--> </script> <!--以下HTML部です--> <a href="#" id="Seat Coach A" onmouseover="ShowDescription(this)" onmouseout="EraseDescription()"><font color="red">■</font></a> <input id="sampleDescription" type="text" name="sampleDescription" size="20" readonly>