JavaScript メモ †

JavaScript? に関するメモを追記していく。

↑

IEとFirefoxの違い †

Firefoxの方がW3C勧告に忠実なようだけど、IEのシェアもいまだに大きい以上は無視できない（事実上標準）。

↑

DOM扱いの相違 †

相違点を追記していく。

↑

Script実装の相違 †

相違点を追記していく。

↑

参考 †

↑

IEでJavaScript?をデバッグ †

↑

ブラウザの設定を有効にする †

IEの「インターネットオプション」->「詳細設定」タブを開いてその中の「ブラウズ」カテゴリから「スクリプトのデバッグを使用しない（Internet Explorer）」というチェックがあるので、このチェックを外す（デフォルトでチェックがONになっている）。

ただ、これは Microsoft Office がインストールされている必要があるかも？

↑

Windows Script Debugger を使う †

Windows Script Debugger を使う。

↑

FirefoxでJavaScript?をデバッグ †

↑

Firebug を使う（お勧め） †

これはかなり使いやすい。まずは下記ページからアドオンをインスコ。

「署名がありません」とかいわれるけど気にしない。

インストールされたらFirefoxを再起動。メニューの「ツール」に「Firebug」という項目が増えているのでここから「Open Firebug」を選択、「Enable Firebug」をクリックするとデバッグが開始される。ブラウザで動作を見ながらステップ実行できるので、非常にやりやすい。

↑

JavaScript? Debugger を使う †

これはRADのような画面でScriptを追うツール。画面で確認する必要がなく、シンタックスや処理内容だけデバッグすれば良いときはこちらが良いのかも。

↑

サンプル †

↑

フォーカスが当たると文字が消える †

focusinput.js

Everything is expanded.Everything is shortened.
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15

-
|
-
|
|
!
!
 
-
|
-
|
|
!
!

    function removeText(formName,elementName){
        var target = document.forms[formName].elements[elementName];
        if(target.value == target.defaultValue){
            target.value = "";
            target.style.color='#000000';
        }
    }
 
    function insertText(formName,elementName){
        var target = document.forms[formName].elements[elementName];
        if(target.value == target.defaultValue || target.value == ""){
            target.value = target.defaultValue;
            target.style.color='#999999';
        }
    }

sample.html

Everything is expanded.Everything is shortened.
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11

 
 
 
 
 
 
 
 
 
 
 

<html>
    <head>
        <title>sample</title>
        <script type="text/javascript" src="focusinput.js"></script>
    </head>
    <body>
        <form name="form1">
            <input type="text" size="50" onfocus="removeText(this.form.name,this.name);" onblur="insertText(this.form.name,this.name);" maxlength="256" value="入力してください" style="color: #999999;">
        </form>
    </body>
</html>
↑

submit でボタンを無効にする †

こちらのを参考に、再表示で元に戻す処理も追加してみた。

Everything is expanded.Everything is shortened.
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47

-
-
|
!
|
-
|
-
-
|
-
|
!
|
|
!
!
!
|
-
-
-
|
!
!
!
|
-
|
-
|
!
!
|
-
-
|
-
|
-
|
!
!
|
!
 
 

var DisableSubmit = {
    init: function() {
        this.addEvent(window, 'load', this.onLoad());
    },
    
    onLoad: function() {
        var self = this;
        return function () {
            for (var i = 0; i < document.forms.length; ++i) {
                var elements = document.forms[i].getElementsByTagName('input');
                if (!elements || elements.length == 0) {
                    continue;
                }
                self.setDisable(elements, false);
                self.addEvent( document.forms[i], 'submit', self.onSetDisable(elements, true) );
            }
        }
    },
 
    setDisable: function(elements, flag) {
        for (var i = 0, element; element = elements[i]; i++) {
            if (element.type == 'submit') {
                element.disabled = flag;
            }
        }
    },
    
    onSetDisable: function(elements, flag) {
        var self = this;
        return function () {
            self.setDisable(elements, flag);
        }
    },
 
    addEvent: function(element, type, event) {
        if(element.addEventListener) {
            element.addEventListener(type, event, false);
        } else if(element.attachEvent) {
            element.attachEvent('on'+type, event);
        } else {
            element['on'+type] = event;
        }
    }
 
}
 
DisableSubmit.init();

MLEXP. Wiki

トップ   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS