TopJavaScript > 2005年11月
2005年11月23日

商品リンクをランダムに切り替える

November 23,2005 11:57 PM
Tag:[]
Permalink

Amazon 等の商品リンクをランダムに切り替えて表示する方法です。具体的な動作は、JavaScript の乱数を利用して、ページを表示する毎に乱数に対応する id 属性で括られたHTML(=商品リンク)を表示するという方法です。当サイトのエントリー・アーカイブで試しに使っています。
以下、設定方法です。

まず表示したい商品のリンクを、テンプレートの任意の位置に並べて記述します。その際、リストのように id 属性を付与してください。ここでは amazon0、amazon1、amazon2 という名称にしています。属性名につけられた数字は必須で、0 から開始させてください。ここではリンクを3つにしていますが、いくつ作って構いません。

<div id="amazon0">
商品Aのリンク
</div>
<div id="amazon1">
商品Bのリンク
</div>
<div id="amazon2">
商品Cのリンク
</div>

次に、商品リンクの下に下記の JavaScript を追加してください。赤色部分に商品リンクの合計数を設定します。サンプルでは3つの商品を記述していますので、「3」を設定します。

<script type="text/javascript">
n = Math.floor(Math.random() * 3);
for(i = 0; i < 3; i++){
    document.getElementById('amazon'+i).style.display = 'none';
}
document.getElementById('amazon'+n).style.display = 'block';
</script>

保存・再構築すれば完成です。設定したページをリロードして、商品リンクが切り替わることを確認してください。
なお id 属性名を hogehoge0、hogehoge1… という風に設定したい場合は、リスト内の amazon という文字を

    document.getElementById('amazonhogehoge'+i).style.display = 'none';
}
document.getElementById('amazonhogehoge'+n).style.display = 'block';

と変更してください。

Comments [4] | Trackbacks [1]
2005年11月10日

JavaScript エラーを解消する

November 10,2005 11:50 PM
Tag:[]
Permalink

JavaScriptエラーWindows IE6.0 でページを表示した時、ステータスバー左下に画像のような黄色いアイコンと「ページでエラーが発生しました」という情報が表示されることがあります。これがいわゆる「JavaScript エラー」で JavaScript の実装に問題があることを示しています。
エラーが発生するのは体裁の良いものではなく、場合によってはページが正常に表示されない場合もありますので、できれば解消したいところです。

ということで、JavaScript エラーの解消方法をご紹介します。ただしエラーを解消するには JavaScript の修正を伴うケースが少なくないため、プログラミングが苦手な方については原因発見までとなります(後はスクリプト配布元に問い合わせましょう)。

2013/7/31追記:最新ブラウザを使った「JavaScriptエラーを表示・確認する方法のまとめ」をエントリーしました。

1.エラー詳細の表示

IEのJavaScriptエラー詳細IEの場合、JavaScript エラーが発生している状態でステータスバーに表示されている部分をダブルクリックすると左のようなダイアログが開き、そこにJavaScript エラーの詳細が表示されます(表示されていない場合は[詳細の表示]をクリックします)。
Firefox であれば [ツール]-[JavaScript コンソール] を選択します。Netscape7.1 は[ツール]-[Web開発]-[JacaScriptコンソール]です。Opera8 は[ツール]-[詳細ツール]-[JavaScriptコンソール]です。
以下、利用者が多く、エラーの確認が一番分かりやすい(と思われる) Firefox によるエラー原因の確認方法を説明します。

2.エラー原因の確認

FirefoxのJavaScriptエラー詳細Firefox で[ツール]-[エラーコンソール]を選択すると画像のようなダイアログが開き、現在のページで発生している JavaScript エラーが表示されます。何も表示されなければそのページに問題はありません(ただし4項に例外を記しています)。
この時、エラーコンソール左上のメニューが[すべて] または [エラー]が選択されている状態にしてください。[警告]や[メッセージ]ではエラーが表示されません。また エラーコンソールを開くと、それまでのページ表示で発生したエラーがすべて表示される可能性があります。この場合はコンソール右側にある[クリア] をクリックして情報を一旦クリアし、ページをリロードすれば現在のページのエラーだけが表示されます。

サンプルでは「func is not defined」というエラーが表示されています。これは 「func というスクリプトを起動しようとしているが、func 自体がみつからない」ということを示すエラーです。このようなエラーが発生した場合は、func というスクリプトが記述されている外部ファイルが正常に読み込まれていないか、あるいは起動元のスクリプト(関数)名が誤っていないか等を確認しましょう。

FirefoxのJavaScriptエラー詳細 また左の「element has no properties」というエラーは、「スクリプトは存在するが処理が誤っている」というエラーです。エラー画面のURL部分をクリックするとエラーとなっているファイルを表示し、エラー発生箇所を反転表示してくれます(下はその抜粋です)。

FirefoxのJavaScriptエラー詳細

具体的には、hogehoge という ID属性のスタイルを非表示にしようとしているのですが、hogehoge という ID属性自体が存在しないため、element という変数には何も設定されません。で、次の行で何も設定されていない変数(=スタイル)のプロパティを制御しようとしているためエラーになります。
この場合はスクリプトに hogehoge という ID属性がページに存在しないケースを考慮する if 文を追加して

function func() {
    element = document.getElementById("hogehoge");
    if (element) {
        element.style.display = 'none';
    }
}

とします。スクリプト修正後、コンソール右側にある[クリア] をクリックして情報を一旦クリアしてからブラウザを更新すればエラーは解消します。

3.外部ファイルが存在しない場合のエラーを発見する

下記リストのように JavaScript を外部ファイルとして読み込む場合があります。

<script type="text/javascript" src="http://www.koikikukan.com/menufolder.js"></script>

この menufolder.js 自体が存在しない場合、外部ファイルに書かれたスクリプトを起動する箇所で JavaScript エラーが発生し、結果的に外部ファイルが正常に読み込まれていないことが分かります。が、外部ファイルを単に読み込むだけで、ファイルに書かれたスクリプトをページで一切使用していない場合、Firefox のコンソールでは正常に読み込まれているかどうかまではチェックできません。

NetscapeのJavaScriptエラー詳細そもそも script タグ自体が冗長なのですが、Netscape7.1 の[ツール]-[Web開発]-[JavaScriptコンソール]を利用すれば、外部ファイルを引き込めない部分でエラーを発見することが可能です。Netscape では左図のように「syntax error」として表示され、リンクをクリックするとファイルが存在しない旨のHTMLソースが表示されます(IE/Firefox/Opera ではエラーは表示されませんでした)。

Netscape であれば2項のエラー解析も Firefox と同様の操作が可能なので、JavaScript エラー解消には Netscape7.1 をお勧めします。

2007.02.02 追記
Firefox の記述を Firefox 2 用に修正しました。

Comments [14] | Trackbacks [1]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3