example.js

(function() {
  window.onload = function() {
    /* 15.9 HTMLフォーム */
    (function() {
      document.forms['submitForm'].onsubmit = function() {
        var text = document.forms['textForm']['mytext'].value;
        if (text.match(/^\d+$/)) {
          alert('送信しました');
          return true;
        }
        alert('入力欄は数字のみ受け付けます．送信中止.');
        return false;
      };

      document.forms['textForm'].onchange = function() {
        var text = document.forms['textForm']['mytext'].value;
        document.getElementById('changeText').innerHTML = text;
      };
      document.forms['textForm'].onchange(); /* 初期値を表示する */

      var forms = document.forms;
      var setEventHandler = function(id, string) {
        var textArea = document.getElementById(id);
        var value = string;
        return function(e) {
          textArea.innerHTML = value;
        };
      };
      for (var i = 0; i < forms.length; i++) {
        var string = forms[i].firstChild.nodeValue.replace(/：$/, '');

        forms[i].onmouseover = setEventHandler('onmouseover', string);

        forms[i].children[0].onfocus = setEventHandler('onfocus', string);

        forms[i].children[0].onblur = setEventHandler('onblur', string);

        forms[i].onclick = setEventHandler('onclick', string);

      }
    })();

    /* 15.9.4 〜 */
    (function() {
      var toggles = document.forms['toggle'];
      var selected = document.getElementById('selected');
      var checked = document.getElementById('checked');
      toggles[0].checked = true;
      toggles[3].checked = true;
      toggles.onchange = function(e) {
        var i = 0;
        var sep = '';
        checked.innerHTML = '';
        for (; i < 2; i++) {
          if (toggles[i].checked) {
            checked.innerHTML += sep;
            checked.innerHTML += toggles[i].value;
            sep = ',';
          }
        }
        for (; i < toggles.length; i++) {
          if (toggles[i].checked) {
            selected.innerHTML = toggles[i].value;
            break;
          }
        }
      };
      toggles.onchange(); //初期状態
    })();


    /* 17.2 〜 */
    (function() {
      var b = document.getElementById('button17_2');
      var x = document.getElementById('clientx');
      var y = document.getElementById('clienty');
      b.onclick = function() { alert('クリックまで座標を表示'); };
      b.addEventListener('click', function() {
        document.addEventListener('mousemove', handleMouseMove, true);
        document.addEventListener('mouseup', handleMouseUp, true);
      });
      function handleMouseUp() {
        document.removeEventListener('mousemove', handleMouseMove, true);
        document.removeEventListener('mouseup', handleMouseUp, true);
      }
      function handleMouseMove(event) {
        x.innerHTML = event === undefined ? '---' : event.clientX;
        y.innerHTML = event === undefined ? '---' : event.clientY;
      }
      handleMouseMove();//初期状態
    })();

    /* 18 〜 */
    (function() {
      function get(url, callback) {
        var request = new XMLHttpRequest();
        request.open('GET', url);
        request.onreadystatechange = function() {
          if (request.readyState === XMLHttpRequest.DONE && request.status === 200) {
            var type = request.getResponseHeader('Content-Type');
            if (type.indexOf('xml') === -1 && request.responseXML)
              callback(request.responseXML);             //Documentレスポンス
            else if (type === 'application/json')
              callback(JSON.parse(request.responseText));//JSONレスポンス
            else
              callback(request.responseText);            //文字列レスポンス
          }
        };
        request.send(null);
      }

      var getfile = document.getElementById('button18_1');
      var fileArea = document.getElementById('filecontent');
      getfile.onclick = function() {
        get('last', function(text) {
          fileArea.innerHTML = text;
        });
      };

      var post = document.getElementById('button18_2');
      post.onclick = function() {
        var request = new XMLHttpRequest();
        request.open('POST', 'data');
        request.onreadystatechange = function() {
          if (request.readyState === XMLHttpRequest.DONE) {
            postresult.innerHTML = request.status;
          }
        };
        request.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
        request.send(JSON.stringify({'user-input': postText.value}));
      };
      var postText = document.getElementById('post_text');
      postText.onfocus = function() {
        postresult.innerHTML = '';
      };
      var postResult = document.getElementById('postresult');

      var getdata = document.getElementById('button18_3');
      var dataArea = document.getElementById('postcontent');
      getdata.onclick = function() {
        get('data', function(data) {
          dataArea.innerHTML = data;
        });
      };

      var fileSelect = document.getElementById('button18_4');
      var fileResult = document.getElementById('fileresult');
      fileSelect.addEventListener("change", function() {
        var file = this.files[0];
        if (!file) return;
        var request = new XMLHttpRequest();
        request.open('POST', 'file');
        request.onreadystatechange = function() {
          if (request.readyState === XMLHttpRequest.DONE) {
            fileresult.innerHTML = request.status;
          }
        };
        request.send(file);

      }, false);
    })();

  }; /* end of onload */
})();