【Dev】JavaScript使えない覚書の書
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) 最後から１文字取得。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;
}