5分で分かる JavaScript を知らない人が JavaScript の便利さを学べる記事を書いたよ

JavaScript を知らない人に JavaScript の話して欲しいと言われる夢を見たのでブログ書きました。*1

難しい話は抜きにして JavaScript は <script> と </script> で囲えば動きます。*2 HTML をコードレベルで編集できるサービスなら、設定は一切不要です。

<script>
JavaScriptのコード
</script>

拡張子にも制限はありません。最終的にHTML文書として出力されるのであれば、htmlでもphpでもcgiでも構いません。なおフレームの代わりにPHPを使うという為になる記事があるのですが、ここでは関係ないので読むのは後ででよいです。

ついでに JavaScript を少しでも使えるようになれば、こんなことができるという一例を紹介します。

コピーライトの西暦を自動更新

JavaScript を使えばページフッタの西暦も自動更新します。

<script>
document.write('<p>Copyright (c) 20010-' + (new Date().getFullYear()) + ' Takanashi Ginpei. All Rights Reserved.</p>');
</script>

自分の年齢を自動更新

JavaScript を使えば自分の年齢を自動更新して表示できます。

<script>
document.write('<p>' + ((new Date().getFullYear()) - 1983) + '歳</p>');
</script>

ページの部品を読み込む

JavaScript を使えばページ内に部品を読み込むことができます。

<script src="footer.js"></script>

閉じタグ </script> を忘れないようにしてくださいね。

これを応用すれば以下のようにしてフッタとヘッダを同期できますよ。

<script src="header.js"></script>
<div id="contents">
テキストテキストテキスト
</div>
<script src="footer.js"></script>

header.jsなどのファイルの中には、普通に書き出したいHTMLをdocument.write('と');で括って書きます。

// header.js
document.write('<h1>ようこそ</h1>');
document.write('<p>ようこそginpei\'sホムーページへ！　ゆっくりしていってくださいね。</p>');
document.write('<p><a href="link.html">リンク集</a></p>');

なお一重引用符「'」を使う場合、その前に「\」を置いて「\'」と書く必要があります。

他人のサイトの内容を読み込む

人のサイトのデータをチェックして何かしたいときは、どうしたら良いでしょうか？

実は JavaScript は手軽に使える分、悪用される危険性が高いのです。そこでセキュリティ上の制限として、他のサイトの情報を取得する事はできないようになっています。*3

代わりにHTMLのiframe要素などを使ってはいかがでしょうか？

複数のメッセージをランダムに表示

<script>
var message = ['メッセージA', 'メッセージB', 'メッセージC', 'メッセージD', 'メッセージE'];
document.write(message[parseInt(Math.random()*message.length)]);
</script>

指定した月のカレンダーを出力

少し長いですが、2010年12月のカレンダーを出力します。

→動作サンプル

<script>
document.write(calendar(2010, 12));

function calendar(year, month) {
  var jpweek = ['日', '月', '火', '水', '木', '金', '土'];
  var date = new Date(year + '/' + month + '/' + 1);
  var week = date.getDay();
  date.setMonth(date.getMonth()+1);
  date.setTime(date.getTime() - 1000 * 60 * 60 * 24);
  var days = date.getDate();
  var day = [];
  
  for (var i = 0; i < days; i++) {
    day[week+i] = i + 1;
  }
  
  var calendar = '<table>';
  
  calendar += '<tr>';
  for (var i = 0; i < jpweek.length; i++) {
    calendar += '<th>' + jpweek[i] + '</th>';
  }
  calendar += '</tr>';
  
  for (var i = 0; i < day.length || i % 7 != 0; i++) {
    if (i % 7 == 0) {
      calendar += '<tr>';
    }
    
    calendar += '<td>';
    calendar += day[i] || '&nbsp;';
    calendar += '</td>';

    if (i % 7 == 6) {
      calendar += '</tr>';
    }
  }
       
  calendar += '</table>';
  
  return calendar;
}
</script>

以上のように結構便利なものがあります。コピーして貼りつければサーバーにアップロードしなくても動きますのでどうぞ。

---

というわけで、WEBLEの5分で分かる PHP を知らない人が PHP の便利さを学べる記事を書いたよのJavaScript版でした。

追記 : 改めてJavaScriptの紹介をしてみました。 → 新年だしJavaScript始めてみませんか？

*1:というのは嘘で、ネタ元の書き出しを踏襲しているだけです。

*2:HTML4までではtypeを指定する必要がありましたが、HTML5からは初期値としてtext/javascriptが与えられるようになったので、省略できます。 http://www.html5.jp/tag/elements/script.html#attr-script-type

*3:その制限をかいくぐる方法もありますが、今知る必要はないでしょう。