Kinopyo's Blog

I love this game.

アーカイブ

Archive for the ‘JavaScript’ Category

jQuery1.3.2のバグ?IEで を$.trimするとき変な結果に

2010年03月10日

jQuery 1.4.2ではこれは治ったようです。

jQuery最新版をお使いの方は下記のようなバグはもう発生しません。

サンプル

※jQuery 1.3.2で発生する問題※

HTML
<select>
	<option id="foo">&nbsp;</option>
	<option>11</option>
	<option>22</option>
</select>

<tr id="bar">&nbsp;</tr>
Javascript
var optionText = $("#foo").text();

// firefoxは0、IEは1
alert("select optionタグの をtrimした後のlength: " + $.trim(optionText).length);

var trText = $("#bar").text();

// firefoxは0、IEも0!
alert("trタグの をtrimした後のlength: " + $.trim(trText).length);

結果

selectのoptionタグのテキストにある“&nbsp;”

$.trimをかけて見ると

Firefoxはちゃんとtrimしてlengthが0になったが、

IEはtrimできずlengthが1のままです。

しかしtrタグのテキストにある”&nbsp;”をtrimすると

IEも正しくtrimしてlengthが0になるんです。。。

DEMO

jQuery最新版(1.4.2)を使うDEMO

Javascript index指定で配列の要素を削除するには

2010年03月08日

今まで全然気付かなかったんです、

JavascriptのArrayにはdeleteみたいなAPIがないことに。

配列の要素をindex指定で削除したい場合は代わりにsplice関数を使います。

splice関数

とほほからのレファレンスでは

array.splice(start, n, e1, e2, …) (N4)

0 から数えて、start 番目から n 個の要素を削除し、その代わりに e1, e2, …を値とする要素を埋め込みます。戻り値は JavaScript のバージョンによって異なります。

var xx = new Array("A", "B", "C", "D", "E", "F", "G");
xx.splice(2, 3, "c", "d", "e");   // "C", "D", "E" が小文字になります

indexで配列の要素を削除するには

myArray.splice(index, 1);

indexは削除する要素のindex、1はこの一つだけを削除する意味で

他のパラメータはいらないです。

またsplice後は配列そのものが変更されます。

スクロールを最下部に移動するJavascript

2010年03月02日

スクロールバーを最下部に移動するJavascriptです。

普通のJavascriptで書くと

function go_bottom(targetId){

    var obj = document.getElementById(targetId);

    if(!obj) return;

    obj.scrollTop = obj.scrollHeight;
}

完全にjQueryで書くとこんな感じ

function go_bottom(targetId){

   var $obj = $("#" + targetId);

    if($obj.length == 0) return;

    $obj.scrollTop($obj[0].scrollHeight);
}

これ以外はhiddenのinput項目を最下部に置いといて、

それをfocusするような技もありけど、、

Javascriptのforループのパフォーマンスのいい書き方

2010年02月22日

面白いかと思ったのでメモしときます。

普通の書き方

var rows = document.getElementsByTagName('tr');

for( var i = 0; i < rows.length; i++ ) {

   rows[i].className = 'newclass';

   rows[i].style.color = 'red';
  ...
}

効率のいい書き方

var rows = document.getElementsByTagName('tr');

for( var i = 0, row; row = rows[i]; i++ ) {

    row.className = 'newclass';

    row.style.color = 'red';
    ...
}

参考サイト:大家来讨论Javascript的效率/优化问题 – JavaScript – web – JavaEye论坛

Javascript変数にブロックスコープはない

2010年02月12日

JavaをやってからJavascriptを触ったので、

Javascript変数にブロックレベルのスコープがないことにビックリしました。

if文ブロックか、forループブロックか関係なく、

function内に定義された変数は全て同じスコープ:functionのスコープになります。


例えば

function test(o) {

    var i = 0;                      // i is defined throughout function

    if (typeof o == "object") {

        var j = 0;                  // j is defined everywhere, not just block

        for(var k=0; k < 10; k++) { // k is defined everywhere, not just loop

            document.write(k);

        }

        document.write(k);          // k is still defined: prints 10

    }

    document.write(j);              // j is defined, but may not be initialized

}


変数kとjはそれぞれif文のブロック、forループのブロック内に定義されたが、

実はfunctionのスコープとなりfunction内ならどこでも参照できます。


これをしっかり理解しないと以下のようなミスが起こしやすいです。

var scope = "global";

function test( ) {

    alert(scope);         // Displays "undefined", not "global"

    var scope = "local";  // Variable initialized here, but defined everywhere

    alert(scope);         // Displays "local"
}

test( );


一番目のalertは”global”だと思ったらこの記事を読む価値はあるでしょう。

一番目のalertは”undefined”を表示します。

なぜならさっき言ったように変数のスコープはfunction内に跨るのです。

varで宣言する位置、順番と関係ありません。


ここではfunction内で同じ名前でscopeという変数が宣言され、

“global”の値を持つグローバル変数は上書きされました。

そして一番目のalert時のscopeは初期化されていないため、undefinedとなってしまいます。


上記のコードを書き換えると以下と同じです。

function test( ) {

    var scope;       // Local variable is declared at the start of the function

    alert(scope);    // It exists here, but still has "undefined" value

    scope = "local"; // Now we initialize it and give it a value

    alert(scope);    // And here it has a value

}

誤解を招かないように変数の宣言はfunctionの先頭に置くのが大事ですね。

Javascript window.openで開いたページで親ウィンドウのdocumentを取得には

2010年01月29日

window.open()で新規開いた小窓ウィンドウで親ウィンドウのdocumentを取得するには

下記のプロパティを使います。

window.opener.document

これで親ウィンドウの値を取得するだけではなく、

値を編集することもできます。


例えば下記のコードは親ウィンドwのフォーム内のテキストをAAAに変更します。

新規開いたページに記述します。

window.opener.document.FORM1.TEXT1.value = "AAA";

参考サイト

とほほのJavascriptレファレンス:ウィンドウオブジェクト

テキストボックスの文字列を選択(色逆転)、取り消すには

2009年12月10日

テキストボックスの文字を選択された状態にする方法とその解除方法です。

IEの場合selectボックスにselect()関数を使うとJavaScriptエラーになります。

Firefoxは大丈夫です。


function selectFocusText(element){

	// for IE

	if (element.nodeName == "SELECT") return;

	element.select();

};

function unselectFocusText(){

	// for IE

	if (document.selection) {

		document.selection.empty();

	// for Firefox

	} else if (window.getSelection) {

		window.getSelection().removeAllRanges();

	}

};

拡張子が変更されたJavaScriptは実行されるか?IE,Firefoxでのセキュリティ

2009年12月02日

ここが危ない!Web2.0のセキュリティ:第1回 Ajaxとクロスサイトスクリプティング|gihyo.jp … 技術評論社の勉強メモ&実験です。

実験

あるJavaScriptの拡張子をcsvに変更してSCRIPTタグでそれをインポートするHTMLを用意します。

そのJavaScriptを実行しようとするとIEのデフォルトセキュリティオプションでは、

ファイルのダウンロードダイアログが出ます。

Firefoxは拡張子がcsvにもかかわらずちゃんとJavaScriptと認識してそれを実行します。

原理

CSVファイルは単にカンマで区切られたデータですので,スクリプトは実行されないはずです。

Internet Explorerの仕様にセキュリティ設定に「内容によってファイルを開く」という設定ががあります(図2)。

これは,Internet Explorerがファイルの中身を見て,その中にHTMLっぽい文字列が含まれていればHTMLだと判断するということを意味しています。このため拡張子やレスポンスに含まれるContent-Typeヘッダとは関係なく,外部から参照可能なファイルにはクロスサイトスクリプティング対策が必要であるということになります。

一方,Firefoxの場合はレスポンスのContent-Typeヘッダを見て判断しますので,ファイルの中身が何っぽいのかを気にする必要はありません。

http://gihyo.jp/dev/serial/01/web20sec/0001?page=2

この観点からはIEのほうがセキュリティの面で高いと見られます。

iPhoneでページ最下部へ移動するブックマークレット

2009年11月27日

ブックマークレット(Bookmarklet)とは

簡単に言うとJavaScriptをブックマークしたものです。

普通はURLをブックマークするに対し、JavaScriptをブックマークします。

そしてこのブックマークを選ぶときは保存されたJavaScriptが実行されます。

iPhoneのブラウザ関連のアプリでは結構使われています。

最下部へ移動するJavaScriptをiPhoneに登録する方法

javascript:window.scrollTo(0,document.documentElement.scrollHeight);
  • まずSafariで任意のサイトをブックマークする
  • そのブックマークを編集する
  • 一行名に好きな名前(ここではPage Bottom)を記入し、二行目を上記のJavaScriptを貼付けで保存する

f:id:kinopyo:20091128002653p:image

  • ページの最下部へ移動したい時はブックマークからさっき登録したブックマークレットをタップすればOK。

f:id:kinopyo:20091128002655p:image


参考サイト:

http://css-eblog.com/javascript/scrolltoend-for-iphone.html

ブックマークレットとは – はてなキーワード

Same-Originポリシー勉強メモ

2009年11月23日

gihyoサイトの「ここが危ない!Web2.0のセキュリティ」連載の第2回:「Same-Originポリシーと迂回技術」の勉強メモです。

定義

他のドメインのサイトへはリクエストを送信できない制限のことをSame-Originポリシーと呼びます。同じドメインであってもポート番号やプロトコル(HTTPとHTTPSなど)が異なれば,異なるサイト(クロスドメイン)とみなされアクセスできません。クロスドメインアクセスは機能として実装されていないのではなく,セキュリティ上の理由から禁止されているそうです。

必要性

俺があの黒の攻撃者とし、攻撃目標がユーザのメールアカウント情報だとします。もしクロスドメインにアクセスする制限がなければ、事前に用意したスクリプトで(urlをメールサーバに設定)メールアカウントの情報が取得できるようになってしまいます。(この辺りはCookieの話が出てきます)

ウェブの基本ルール

Ajaxだけではなく、フレームやサブウインドウの情報にアクセスする場合などにも存在する

クロスドメインでデータを取得する方法

* リバースPorxy

* SCRIPTタグ(JSONP)

* Flash

* 画像

* スタイルシート

リバースProxy

データ提供サーバにとってユーザの身元は隠れているため、攻撃者に利用しやすい

ユーザの身元を確認しようとすると、ユーザ情報を扱わなければならない

ユーザ情報–>サーバ–>データ提供サーバ

 

Get Adobe Flash playerPlugin by wpburn.com wordpress themes