ヤマカサのプログラミング勉強日記

プログラミングに関する日記とどうでもよい雑記からなるブログです。

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで その15

JavaScript

Chapter 7 クライアントサイド JavaScript 開発 を極める

確認のダイアログ

confirm メソッドを使って確認のダイアログを表示します。また、preventDefault メソッドを呼び出して、submit をキャンセルします。

html
<html>
<head>
  
</head>
<body>
  <form id="fm">
    <input type="submit" value="送信" />
  </form>
  <script type="text/javascript" src="../js/sample1.js"></script>
</body>
</html>
sample1.js
document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('fm').addEventListener('submit', function(e) {
    if (window.confirm('確認しましたか？')) {
      // イベントの伝搬をキャンセルする
      e.preventDefault();
    }
  }, false);
}, false);

タイマー

html
sample2.js
document.addEventListener('DOMContentLoaded', function() {
  var timer = window.setInterval(
    // 時刻を更新
    function() {
      var date = new Date();
      document.getElementById('result').textContent = date.toLocaleTimeString();
    }
  , 1000);

  document.getElementById('btn').addEventListener('click', function() {
    window.clearInterval(timer);
  }, false);
}, false);

console メソッド

フォーマット

フォーマットを指定して出力することができます。

var str = "aaaaa";
console.log("str: %s", str);
実行時間
console.time("test");
for (var i = 0; i < 1000; i++) {
}
console.timeEnd("test");

本

改訂新版JavaScript本格入門 ?モダンスタイルによる基礎から現場での応用まで

改訂新版JavaScript本格入門 ?モダンスタイルによる基礎から現場での応用まで