こんな場合はこの記事を見てね!
そのものずばり!の内容じゃなくてもヒントになるはずです♪
ファイルをアップロードしようと思ったら「アクセスが拒否されました」
ウインドウをリサイズ、移動しようとしたら「アクセスが拒否されました」
form部品の初期値を取得したい、初期値に戻したい
form部品すべてにアクセスしたい
配列の値を削除したい
配列の値を並び替えたい
javascriptでtry-catch!
IEでclass名を取得したい
IEでonclick属性をセットしたい

2006年10月25日

IEでのgetAttribute,setAttributeのバグ

DOMでオブジェクトを特定したり、変更するのに使用するgetAttribute、setAttributeメソッドですが、一部IEにバグがあります。
以前散々悩んだので書いておきます。

たとえば、class名を取得したいとき、
element.getAttribute("class");だと、IEでは取得できません。
IEの場合には
element.getAttribute("className");

getAttribute("String")のStringには属性名がくるので、実際にはclassが正しいのですがIEのバグです・・・

また、同様に
element.setAttribute("style", "color: #ffffff;");もIEではセットできないので、
element.style.cssText = "color: #ffffff;";

とする必要があります。

さらに、onclick属性に対しても
element.setAttribute("onclick", "newHandler();");ではセットされずに、newHandler()が呼ばれません。
element.setAttribute("onclick",new Function("newHandler();"));

とする必要があります。

もう、これに気づくまでなかなか大変でした。
と思ったら、
http://nanto.asablo.jp/blog/2005/10/29/123294がとても参考になります。

ちょっと使えるぞ♪と思ったらクリックして頂くと励みになります。ビジネスブログ100選
posted by junko at 15:06 | Comment(1) | TrackBack(0) | getAttribute,setAttribute

2006年10月19日

Javascriptでtry-catchを使う

Javascriptでtry-catch構文が使えるって知らない人が多かったので書いてみました。
(最近じゃAjaxでほぼ必須だから認知度高いかもしれないけど。)

try{エラーをキャッチしたい処理内容}catch(e){エラーをキャッチしたら行う処理内容}


プログラミング言語に慣れている方はすんなり受け入れられると思いますが、どんなプログラムでもこの例外処理が大変重要です。
Javascriptではそんなに厳しく例外処理をする必要ないかもしれないけど、使ったら便利ってことがよくあります。
それは、ブラウザが返却するエラーをキャッチすることです。

IEではよくあるのですが、windowのリサイズや移動、またはファイルのアップロード時など、セキュリティ上の都合で、ブラウザからエラーが返されてしまいます。
そうするとその後の一切の処理ができなくなり大変都合が悪いです。
なので、このブラウザから返されるエラーをキャッチし、つぶすなり、他の処理に置き換えるなりする必要があります。

例:windowのリサイズや移動を行う。
リサイズ時にユーザーがウインドウを触ったりすると
「アクセスが拒否されました」のアラートが上がることがあります。
エラーの詳細はMicrosoftサポート情報
これは特に重要なエラーではないので、潰したいという場合。

try{
  window.top.resizeTo(w,h);
  window.top.moveTo(x,y);
}catch(e){
  //アクセスが拒否されましたのエラーが出たら何もしない。
  if(e.number == 2147024891){
    throw e;
  }
}
再度リサイズや移動を行うにはそれなりの処理が必要です。
アクセスが拒否されましたのエラーナンバーは上記の通りなので、
これ以外のエラーだった場合はエラーが返されますので安心です。
(全てを潰すのはセキュリティ上よくない。)

このほか、ファイルのアップロードしたいときに、
相対パスや存在しないようなファイル名を入力してsubmitすると、無反応だったり「アクセスが拒否されました」となりその後の処理が不可能になることがあります。
詳細はMicrosoftサポート情報

エラー自体はセキュリティ上しょうがないとしても、リカバリできないのは困ります。
なのでこれもエラーをキャッチし、自分でエラーを返すことで処理の続行が可能となります。

try{
  document.myform.submit();
} catch (e) {
  alert('存在しないファイルが指定されました。');
}

他にもデバッグ代わりにつかったり、知っておくと便利なtry-catchでした。

ちょっと使えるぞ♪と思ったらクリックして頂くと励みになります。ビジネスブログ100選
posted by junko at 10:37 | Comment(10) | TrackBack(0) | 例外処理

2006年10月17日

form部品の初期値を取得する

たとえばテキストボックスの値を変更した場合のみ入力チェックを行うとか、初期値と比較して処理を行うことって多いと思います。

初期値を取得するには、default○○を使います。
Form部品の種類によって使えるプロパティが違います。
input type="text",textareaの場合 defaultValue
optionの場合 defaultSelected
input type="checkbox"の場合 defaultChecked


例:もしテキストボックスの初期値から変更があった場合はアラートを表示する。

var obj = document.myform.mytext;
if(obj.value != obj.defaultValue){
 alert("変更されました。");
}

これ、一個や二個ならいいのですが、たとえばformのelements全てに対して初期値から変更があったかどうかをチェックするには、下のような方法が便利だと思います。

function initValue(target){
 var childs = target.childNodes;
 var flg = false;
 if(childs.length != 0){
  for(var i=0;i<childs.length;i++){
   if(childs(i).tagName == "INPUT" && childs(i).getAttribute("type") == "text"){
    if(childs(i).value != childs(i).defaultValue){
    flg = true;
    }
   }
   if(childs(i).tagName == "TEXTAREA"){
    if(childs(i).value != childs(i).defaultValue){
    flg = true;
    }
   }
   if(childs(i).tagName == "OPTION"){
    if(childs(i).selected != childs(i).defaultSelected){
    flg = true;
    }
   }
   if(childs(i).tagName == "INPUT" && childs(i).getAttribute("type") == "checkbox"){
    if(childs(i).checked != childs(i).defaultChecked){
    flg = true;
    }
   }
   var nextChilds = childs(i).childNodes;
   if(nextChilds.length != 0){
    initValue(childs(i));
   }
  }
 }
return flg;
}
引数のtargetには対象となるformを指定します。
webアプリだとやたらと大量のform部品を生成することが良くあります。
この方法、初期値との比較以外にも全てのform部品にアクセスしたいときによく使っています。

もっと良い方法があれば教えてくださいね。

ちょっと使えるぞ♪と思ったらクリックして頂くと励みになります。ビジネスブログ100選
posted by junko at 19:34 | Comment(0) | TrackBack(0) | Form Elements

2006年10月06日

Javascriptでオーバーロードを実現する

JavaをやっていてJavascriptを触ったりすると非常にごちゃごちゃになります。
よくやるのが
for(int i = 0;・・・ という風に、intなんて思わず使っちゃったり。

これは置いておいて、JavascriptではJavaでいうオーバーロード(引数の数や型が異なるメソッドを宣言すること)ができません。

fooというメソッドがあった場合、Javaなら
foo(String str,int i)と
foo(String str)
foo(int i,int j)が宣言することができ、引数の型や数でメソッドが自動的に選択されます。
ところが、Javascriptにはそもそも変数の型がないし、メソッドはプロパティに関数オブジェクトが代入されているだけなので、同名のメソッドを作ることができないのです。

でも、プログラムを組んでいて、引数を増やしたくなることってありますよね?
フラグをつけたいなあと思ったりすることってあります。
その場合にいままで書いた分全部に新たな引数を加えるなんてすごくイヤです。

というわけで、Javascriptでオーバーロードの真似事を実現するには、
argumentsオブジェクトのlengthによって場合分けをします。

arguments.length


argumentsオブジェクトは引数を表すオブジェクトです。
配列と同じようにlengthが取得できます。

例:
function test(arg1,arg2){
 switch (arguments.length) {
 case 1: test1(arg1);
 case 2: test2(arg1,arg2);
 default:
 }
}
function test1(arg1){
 引数が1個の場合の処理を書く
}
function test2(arg1,arg2){
 引数が2個の場合の処理を書く
}
みたいな感じです。
引数の足りない分は固定の値を代入する、というようにすれば、
関数も同じものを呼べるようになって、更に楽になります。

ちょっと使えるぞ♪と思ったらクリックして頂くと励みになります。ビジネスブログ100選

2006年10月03日

配列を数字順にソートする。

Array.sort()って、文字コード順に並び替えをします。
だから例えば
myArray = new Array("1","2","11");
とすると、
myArray.sort();
結果:
1,11,2になってしまいます。
これを数字順にするにはソートの引数に比較関数をセットします。

Array.sort(比較関数);


でも比較関数って何?って思いますよね。
比較関数とは2つの引数を持ち、
引数1が引数2より小さい場合は負の整数、
同じ場合は0、
引数1が引数2より大きい場合は正の整数を返します。

なので、この場合比較関数は
function func(a,b){
 return (b - a):
}
とし、sortの引数にfuncをセットします。

例:
function func(a,b){
 return (b - a):
}

myArray("1","3","11","2");
myArray.sort(func);
結果:
1,2,3,11
となります。

ちょっと使えるぞ♪と思ったらクリックして頂くと励みになります。ビジネスブログ100選
posted by junko at 18:42 | Comment(1) | TrackBack(0) | 配列(Array)

配列からある要素を削除する

JavascriptでArray.deleteって探してもないので、ちょっと途方にくれちゃうけど、
spliceを使えば簡単に配列から要素を削除できます。
(置換するメソッドを削除に使うなんて最初はなかなか気づきにくいですよね。)

Array.splice(開始番号,削除する要素数);

例:
myArray = new Array("red", "green", "blue", "yellow");
myArray.splice(1,2);
結果:
red,yellow
注意:
インデックス番号は0からです。

応用:
この中でgreenだけを削除したい場合

myArray = new Array("red", "green", "blue", "yellow");
for(i = 0; i < myArray.length; i++){
if(myArray[i] == "green"){
myArray.splice(i,1);
}
}

で、結果はred,lue,yellowの配列になります。

2008/02/19追記:
ただし上記の方法ですとgreenが二個あった場合に削除されずに残ってしまいます。
コメントでkenさんの記載してくださった方法を参照してくださいね。
http://javascript-memo.seesaa.net/article/24832361.html#comment
タグ:javascript

ちょっと使えるぞ♪と思ったらクリックして頂くと励みになります。ビジネスブログ100選
posted by junko at 18:15 | Comment(9) | TrackBack(0) | 配列(Array)
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。