月: 2017年1月

アナログ時計2

前回のアナログ時計は文字盤が無く、時刻も分かりにくかったのでcanvasに目盛りと文字を追加してみました。

目盛りは、hand関数を利用して円の中心から放射状に60本、幅3px と1px の針を引いて、一回り(10px)小さい半径の円を白で塗りつぶして、らしく見えてきました。時刻を表す文字は、ギリシア数字で適当に配置しています。

https://stuffy.mydns.jp/~gusachan/javascript/clock4.html

参考URL: http://honttoni.blog74.fc2.com/blog-entry-195.html

document.write とinnerHTMLの違い

サンプルは、サイトのリファラをdocument.referrer から取得するスクリプトです。

if (document.referrer.indexOf("http://www.google.co.jp/search?") == 0 {
  var args = document.referrer.substring(ref.indexOf("?")+1).split("&");
  for (var i = 0; i < args.length; i++) {
    if (args[i].substring(0,2) == "q=" ) {
      document.write("<p>Google検索からようこそ!");
      document.write("検索キーワードは：" + 
                 unescape(args[i].substring(2)).replace('+', ' ');
    break;
    }
  }
}

15.10.2

JavaScript の document.write メソッドを使って現在のドキュメントに HTML を出力できるのは、ドキュメントの解析中の間なので注意してください。<scirpt>要素の中のトップレベルのコードから document.write() が呼び出せるのは、このスクリプトがドキュメントの解析の一部として実行されるからです。関数中で document.write() を呼び出すように定義し、イベントハンドラからこの関数を呼び出した場合、予想外の動作をします。このようなメソッドの呼び出しでは、現在のドキュメントが消去され、このドキュメントに含まれていたスクリプト自体も消去されます。~(中略)~ document.write() メソッドは、最近のコードではあまり使われていません。innerHTMLプロパティなどの DOM 機能のほうが、ドキュメントにコンテンツを追加するには便利だからです。

15.5.1

Element の  innerHTML プロパティを読みだせば、マークアップを含んだ文字列形式で、要素のコンテンツが返されます。要素の innerHTML プロパティ に値を設定すると、 Web ブラウザのパーサーが呼び出され、要素の現在のコンテンツは、新たに設定した文字列に対応する表現で上書きされます。名前は、 innerHTML ですが、 innerHTML は HTML 要素だけでなく XML 要素も使えます。
Web ブラウザは、HTML の解釈が得意です。このため、 innerHTML に対して解釈が必要となる値を指定したとしても、かなり効率的に処理されれるのが普通です。ただし、+= 演算子を使って、テキストを少しずつ何度も innerHTML に追加していくことはあまり効率的ではありません。シリアライズ処理と解釈処理を何度も行うことになるからです。

document.write()メソッドも.innerHTMLプロパティも一長一短がありますが、innerHTML の方が融通が利いて危険性も少ないということでしょうか。最新のブラウザではすべて実装されていているそうです。

デジタル時計２

テキストにデジタル時計の簡潔な書き方が載っていたのでご紹介します。toLocaleTimeString(“ja-JP”, options)  locale “ja-JP” は省略可

options には、12時制(true)か24時制(デフォルトまたは未定義ではfalse)の選択をする、hour12 やhour,minute,second(デフォルト、未定義ではnumeric) などがあります。

function displayTime() {
  var elt = document.getElementById('clock');
  var now = new Date();
  elt.innerHTML = now.toLocaleTimeString();
  setTimeout(displayTime, 1000);
}
window.onload = displayTime;

参考URL: https://msdn.microsoft.com/ja-jp/library/474de325(v=vs.94).aspx