JavaScript

JavaScript の利用

日・独・仏・英語で「今日の日付」を表示する

ここでは，JavaScript の標準機能だけを用いて，クライアント（閲覧者）がアクセスした時点での「今日の日付」を「日・独・仏・英」語でそれぞれ表示させています。

HTMLソースで JavaScript の 変数，演算子，（プロパティとメソッドから構成される）オブジェクト，組み込みオブジェクト 等の処理の仕方を御確認ください。

日・独・仏・英の現地時間（Moment Timezone ライブラリ利用）

次は「福岡，Berlin, Paris, London」の現在日時をリアルタイムで一覧表示する例です。

一見すると単純で簡単そうに思われますが，こうした「世界時計」を実現するには

  1. クライアント（閲覧者）のデバイスの日時を取得する
  2. 取得した日時をリアルタイムで書き換え続ける
  3. 日本とドイツとフランスとイギリスの「時差」を考慮する
  4. 「夏時間」に対応させる
  5. 「夏時間がいつからいつまでなのか」をプログラムに教える．たとえば中央ヨーロッパ夏時間は「3月の最終日曜日午前2時（＝夏時間午前3時）から10月の最終日曜日夏時間午前3時（＝標準時午前2時）まで」というように「可変」である
  6. 言語ごとに異なる「表記」形式（月名，曜日名など）に対応させる
  7. 「協定世界時（UTC）」との時間差も記す．これは標準時と夏時間で異なってくる
  8. JST: Japanese Standard Time（日本標準時），CET: Central European Time（中央ヨーロッパ時間），CEST: Central European Summer Time（中央ヨーロッパ夏時間），GMT: Greenwich Mean Time（グリニッジ平均時＝協定世界時），BST: British Summer Time（イギリス夏時間）の付加情報も添える

といった全ての事柄をプログラミングしなくてはなりません。JavaScript の標準機能だけを使ってゼロから全て組み上げることは，それほど簡単ではありません。

幸い，多くのプログラミング言語には「ライブラリ」と呼ばれる「汎用性の高い複数のプログラムを誰でも再利用できる形でまとめられた」ものが存在していますので，これらを有効活用しましょう。

上の「世界時計」では moment-with-locales.js, moment-timezone-with-data.js という2つのライブラリを利用しています。

HTMLソースで各種 関数（locale, moment, tz, format），タイマー機能を実装するメソッド（setInterval）等の処理の仕方を御確認ください。

DOM (Document Object Model) を使ったイベント処理

「白雪姫」テキストの多言語変換

DOM (Document Object Model) とは JavaScript でWebページを動的に操作するための仕組みで，これを使えばHTML文書内の目的とする要素に直接アクセスし，これを操作することができるようになります。

以下では，まず「白雪姫」の日本語テキストを用意しておき，クライアント（閲覧者）が目的言語の「ラジオボタン」を「クリック」するごとに「独・仏・英・日」語へとテキストが切り替わる例を挙げておきました。

               

むかし昔，冬のさなかのことでした。雪が，ふわりふわりと，空からまいおりていました。そのとき，どこやらの国の王さまのおきさきが，黒檀の枠の窓際に腰をおろして，針しごとをしていました。ところが，こうやって縫いものをしながら，雪を見あげたとたんに，おきさきは，ちくりっと，針で指をつっ突いて，血が三滴，ぽたりぽたりと雪のなかへ垂れました。すると，白い雪のなかにおちたその赤い色が，みたところ，いかにも美しかったので，おきさきは，雪のように白く，血のように赤く，窓わくの木のように黒い子どもがあったら，さぞうれしいでしょうにねえと，ひとりでかんがえてみました。

言語ごとに 制御命令（case）を用いて多岐分岐処理している様をHTMLソースで御確認ください。

画像の切り替え

画像の上でクリックすると，別画像に切り替わります（全3画像）。

コンストラクタ 経由でまず空の 配列 を作り，この中に3つの画像を格納し，制御命令（if）の中で インクリメント演算子（++）を使って画像を回しています。

easter egg