【Dev】JavaScript使えない覚書の書

開発ざれごと

ninja2_sm

HDDを掃除していたら出てきやがったメモです。使えないと思うけど公開。

Javascript覚え書き
*firefox主に利用しているためIEでは怪しい

オブジェクト毎に書いてあるので便利
http://www.htmq.com/js/index.shtml#js_window
http://flv86.net/js/js/index.htm

●substr関数の恐怖
firefox/IEでは動作が違う。
substr(-1,1) 最後から1文字取得。IEは、負数が利用できない。
sliceなどを利用すればいい。

●AJAX主なフレームワーク
・prototype.js →良く利用されている
・Yahoo UI library →Yahoo開発、UI等が充実
・Google Web Toolkit →Google開発、Java絡みらしい
・Dojo →でかい、IBM利用
・Spry framework for Ajax →Adobe開発、簡単
・Microsoft AJAX Library →Microsoft開発
※AJAX="Asynchronous JavaScript + XML" 非同期通信の略
※部分的なSSL通信の適用はできない
※「戻る」などでユーザーの期待に外れた遷移となる

●Javascriptライブラリー
・JQuery →UI拡張、ドラック&ドロップ

●ユニットテスト
JsTrester、JsUnit

●PHPのprint_rのようなもの(デバッグ向け)
<script type="text/javascript"><!–
function print_r(obj) {
var count_obj = 0;
    function _output(str) {
      document.writeln(str + "<br/>");
    }
    function _print_r(obj, name, level) {
     var s = "";
        if (obj == undefined || level > 4) return;
        for (var i = 0; i < level; i++) { s += " | "; }
        s += " – " + name + ":" + typeof(obj) + "=" + obj;
        _output(s);
        if (name == "document" || typeof(obj) != "object") return;
        for ( key in obj ) {
        if (count_obj++ > 150) return;
         _print_r(obj[key], key, level + 1);
        }
    }
   _print_r(obj, "*", 0);
}
//–>
</script>

●動的なコード解釈
(未解決)コードが動的に解釈実行されているようなので注意

●thisは使える
●配列は、PHPと同じくarrayだが、newが必要←オブジェクト扱い
●ブロックの終わり行内では";"は案の定、要らない。PHPだけが必要←気に入らない
●連想配列はオブジェクト
var keyar = {};
keyar.prop = 123;

●form/inputオブジェクトの位置
省略も可能だが、出来るだけ指定する事。
window.document.[form名].(value等)
FORMタグには、NAME設定しておく事。

●メッセージウィンドウ
MsgBoxと書いてしまいそう??になるが、以下。
[window.]alert("message");

●スクリプトコードをHTMLから分離
イベントを見えないようにHTMLから分離
↓onloadを定義
window.onload = function() {
  var box = document.getElementById('item1’);
  box.onchange = function() {←onchangeを定義
    chgfrm();
  }
};

●外部Javascriptの文字コードの指定
<script language="JavaScript" charset="utf-8" src="http://…" > </script>

●VBScriptもある(IE)
<SCRIPT language="JavaScript">
<SCRIPT language="VBScript">

●Javascript呼び出し方法(参考)
<SCRIPT for=window event=onload language="JavaScript"></SCRIPT>
onClick="Javascript:func()"
=function(){} ←無名関数

●文字挿入
document.all.item("Main").innerText = "Hello World!!";
document.all.item("Main").innerHTML = HtmlString;
*all.itemはW3C非標準(IEのみ)

●onChangeイベント
オートコンプリート入力ではイベントが発生しない。
onpropertychangeが別途用意されているが、IE用っぽい。

●HTMLフォームオブジェクトの指定方法
idから取る getElementById() ←便利
JavaScriptのBasicなオブジェクト構造・配列から取る
id、name から取るMicrosoftが先行したドキュメントオブジェクト
nameから取る getElementsByName()
tag名から取る getElementsByTagName()
class名から取る getElementsByClassName()
IEの場合getElementsByName(name)を使ったにも関わらず、idで検索してしまう。
IDとNameは同じ値で登録しておいた方がいいらしい。
直接見に行きたい場合は、FORMが必要。
document.(form_name).elements["test"+i].value="fjkdl"+i;

●変数の型をなんとかする
typeof() 型を調べる。文字でもNumberと認識されるので、
isNaN() 数字だけで構成されているか?
parseInt()等parse系 完全に内部数値型とする

●非同期通信サンプル(IEでは動かない)
※Ajax基本、同一ドメイン内のdata.txtを見に行って、非同期で取得する
※セキュリティ上、同一ドメイン内に限られる
http://allabout.co.jp/internet/javascript/closeup/CU20050515A/
<html><head>
<script type="text/javascript">
function loadTextFile(){
httpObj = new XMLHttpRequest();
httpObj.onload = displayData;
httpObj.open("GET","data.txt",true);
httpObj.send(null);
}
function displayData(){document.ajaxForm.result.value = httpObj.responseText;}
</script>
</head><body>
<form name="ajaxForm">
<input type="button" value="読み込み" onClick="loadTextFile()"><br>
<textarea name="result" cols="40" rows="5"></textarea>
</form>
</body></html>

●非同期通信オブジェクトの取得(IE/FireFox両対応)
//XMLHttpRequestオブジェクト生成
function createHttpRequest(){
    //ie
    if(window.ActiveXObject){
        try {
            return new ActiveXObject("Msxml2.XMLHTTP")
     &#
160;  } catch (e) {
            try {
                return new ActiveXObject("Microsoft.XMLHTTP")
            } catch (e2) {return null}
         }
    } else if(window.XMLHttpRequest){
        return new XMLHttpRequest()
    } else {return null}
}

●イベントが発生したエレメントを取得する
ブラウザによって相違
if (evt.target) {  /* Firefox */
elem = evt.target;
}else if (window.event.srcElement) { /* IE */
elem = window.event.srcElement;
}

開発ざれごと

Posted by nabe