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
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69

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

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);
        }
    },
    
    onCancel: function() {
        var self = this;
        window.setTimeout(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);
            }
        }, 1000);
    },
    
    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;
        }
    },
    
    removeEvent: function(element, type, event) {
        if(element.removeEventListener) {
            element.removeEventListener(type, event, false);
        } else if(element.detachEvent) {
            element.detachEvent('on'+type, event);
        } else {
            element['on'+type] = event;
        }
    }
}
 
DisableSubmit.init();

ただ、このままだと、submit後にページ遷移しないケース（問い合わせダイアログを開いてキャンセルした場合など）で ボタンが無効なままなので、onCancel() で元に戻すようにする。

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

-
-
|
!
-
|
!
|
!

function confirm_msg(msg) {
    if(window.confirm(msg)){ 
        return true;
    }
    if(DisableSubmit){
        DisableSubmit.onCancel();
    }
    return false;
}
↑

選択文字列をタグで括る †

選択文字列の取得の仕方がFirefoxとIEとでちょっと違うので、やむを得ず判定を使う。

taginsert.js

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 isIE = (navigator.appName.toLowerCase().indexOf('internet explorer')+1?1:0);
 
function getAreaRange(obj) {
    var pos = new Object();
    if (isIE) {
        obj.focus();
        var range = document.selection.createRange();
        var clone = range.duplicate();
        clone.moveToElementText(obj);
        clone.setEndPoint( 'EndToEnd', range );
        pos.start = clone.text.length - range.text.length;
        pos.end = clone.text.length - range.text.length + range.text.length;
    } else if(window.getSelection()) {
        pos.start = obj.selectionStart;
        pos.end = obj.selectionEnd;
    }
    return pos;
}
 
function insertTag(textAreaId,tag_st,tag_ed) {
    //var target = document.forms[].elements[];
    //var target = window.opener.document.getElementById(textAreaName);
    var target = document.getElementById(textAreaId);
    if (target == null) 
        return;
    var pos = getAreaRange(target);
    var val = target.value;
    var range = val.slice(pos.start, pos.end);
    var beforeNode = val.slice(0, pos.start);
    var afterNode = val.slice(pos.end);
    var insertNode;
    if (range || pos.start != pos.end) {
        insertNode = '<' + tag_st + '>' + range + '</' + tag_ed + '>';
        target.value = beforeNode + insertNode + afterNode;
    } else if (pos.start == pos.end) {
        insertNode = '<' + tag_st + '>' + '</' + tag_ed + '>';
        target.value = beforeNode + insertNode + afterNode;
    }
}
 
function insertAnchor(textAreaId,url,target) {
    var tag_st = "a href=\"" + url + "\"";
    if (target != null && target != "")
        tag_st = tag_st + " target=\"" + target + "\"";
    var tag_ed = "a";
    insertTag(textAreaId, tag_st, tag_ed);
}

以下は、idが"edit"というテキストエリアにタグを挿入する例。

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

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

<script type="text/javascript">
function insertTest() {
    var url = document.frm.url.value;
    var tar = document.frm.target.value;
    insertAnchor('edit', url, tar);
}
</script>
 
<body>
    <form name="frm">
        <textarea id="edit"></textarea><br>
        <input type="text" name="url" size="50">
        <input type="text" name="target" size="12"><br>
        <input type="button" value="挿入" onclick="insertTest()">
    </form>
</body>

MLEXP. Wiki

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