JavaScriptでHTMLを出力するときの小技(ヘッダメニューの続き)
以前の記事で、ココログのヘッダ部分にメニューを設置した話を書きました。メニュー作成のHTMLを全部JavaScriptで記述し、外部ファイルに追い出してしまうことで、内容が変わっても「ブログへの反映」が必要なくなるというアイディアです。
ただ、このやりかただとJavaScriptが「document.write()」の嵐になってしまいますので、多少エレガントな方法を考えてみました。
# タイトル画像は特に記事に関係あるわけじゃないです(^-^;)。
基礎知識
JavaScriptファイルの中で行末に「\」を書くと、そのあとの改行が抑制され、「次の行もつながってるんだよ」という意味になります。
前回の例ではHTMLを1行書くたびに「document.write()」を使ってましたが、「\」を使うともう少し簡単に書けるみたいです。
具体例
今までの例と改善後の例を見てみます。
(1)今までの例
document.write('<a href="xxxx.html"><br>');
document.write('<img alt="test" src="xxxx.jpg">');
document.write('<hr>');
(2)改善例
<hr> \
<a href="xxxx.html"><br> \
<img alt="test" src="xxxx.jpg"> \
<hr> \
');
必ず行末に「\」をつけなきゃならないですが、それでもこっちのほうが幾分スマートですよね。
ご参考になれば。
まとめ
本当はJavaScriptにもPerlなどのような「ヒアドキュメント」があればよいのですが、現状は実装されていませんので、上記のようなやりかたになるのかな~という感じ。
中にはJavaScriptの関数で擬似的にヒアドキュメントを実装しちゃったような方もいますが、今回の話はそこまでやるほどのことじゃないですしね。
もっと大量のHTMLをJavaScript上から吐き出す必要がでてきたら、擬似ヒアドキュメントライブラリも使ってみたいと思います。
関連サイト
JavaScript用ヒアドキュメントライブラリを試作 (風柳亭 - 別館:書庫のある庵様)
出力するHTMLが増えたらこれですね。
ブログパーツなど、結構な量のHTMLを吐き出す必要があるときに使えそう。
| 固定リンク
「プログラム(Perl・HTML・JavaScript)」カテゴリの記事
- ココログ記事下にFacebookの「いいね!」ボタンとTwitterの「ツイートする」ボタンを設置する(2011.03.24)
- ココログの記事下にGoogle Adsenseを設置する(「ユニット3回まで」に対応)(2010.12.28)
- PerlのNKFモジュール(NKF.pm)のつたない解説(2007.10.20)
- JavaScriptでHTMLを出力するときの小技(ヘッダメニューの続き)(2007.05.18)
- ココログにヘッダメニューを設置する方法(2007.04.24)
コメント