ウェブ家の備忘録

ウェブデザイナーの備忘録

JavaScript:目次出力コード

 この前のvarとfunctionのスコープ汚染の違いについて調べた件DOMしてid消してもid残ってる謎仕様を見つけた件をフル活用して作りました。
 一般的なプログラマーが読んだらバグ扱いするレベル。

<script>/*220321*/
  var title='title';//入力:他の投稿と重複しないタイトル
  
  document.write('<div id="'+title+'_contents"></div>');
  var num=0;
  var out='<center>'
         +'<table><tr><td border="2px">'
         +'<center>目次</center>';
  function a(contents){
    num++;
    //目次出力
    out+='<li><a style="text-decoration:none;" href="#'+title+num+'">'+contents+'</a></li>';
    document.getElementById(title+'_contents').innerHTML=
      out
      +'</td></tr></table>'
      +'</center>'
    ;
    //h4出力
    document.write('<h4 id='+title+num+'>'+contents+'</h4>');
  }
</script>

<script>a('記事1');</script>
 記事1の内容
<script>a('記事2');</script>
 記事2の内容
<script>a('記事3');</script>
 記事3の内容

出力



 記事1の内容

 記事2の内容

 記事3の内容


 h4の文字列と一緒にリンク付き目次を作成する用途のコード。h4と目次を普通に書こうとするとコピペとリンク確認が地味に大変なのでこのコードは結構便利。このコードが同じhtml内に重複して存在しても問題なく出力されます。コードの行自体は短いですが、何気に凄い物を作った気がします。
 目次のアウトプットの仕方がしつこすぎて面白いです。このやり方なら投稿最後にストッパーを入れる手間がないのがユーザーライクで良いのです。その分処理速度はほんの少し犠牲にしてるけれど遅延分からないレベルかと。
 中々クレイジーなコードで楽しかったです。