人生ずっと勉強。
ITを軸としたT型人間になりたい人のブログ。
09 | 2017/10 | 11
S M T W T F S
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 - - - -

スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

【JavaScript 】 URIパラメータをオブジェクトにする
www.example.com?name=hoge&type=huga
みたいなURIパラメータの部分をJavaScriptで取得するには、
グローバルオブジェクトのプロパティ「location」のプロパティ「search」を参照すりゃよい。
var uri_param = location.search

上の例だと、 uri_param には「?name=hoge&type=huga」が入る。
まだ扱いにくいので、パラメータ名をキーにしたオブジェクトに変換してみる。
function uri_parameter_string_to_object ( uri_param_string_with_question_mark ) {
var uri_param_string_without_question_mark
, uri_param_name_equal_value_array
, uri_param_container
, param_name_equal_value_string
, param_name_and_value_set
, uri_param_name
, uri_param_value
, length
, i = 0
;

// delete '?'
uri_param_string_without_question_mark
= uri_param_string_with_question_mark.replace('?', '');

// split by '&', make array of 'param_name=value's.
uri_param_name_equal_value_array
= uri_param_string_without_question_mark.split('&');

// create uri_param object, like { param_name : value }
uri_param_container = {};
length = uri_param_name_equal_value_array.length;
for ( ; i < length; ++i ) {
param_name_equal_value_string = uri_param_name_equal_value_array[i];
param_name_and_value_set = param_name_equal_value_string.split('=');

uri_param_name = param_name_and_value_set[0];
uri_param_value = param_name_and_value_set[1];

uri_param_container[uri_param_name] = uri_param_value;
}

return uri_param_container;
}

使うときは、引数に location.search を与えてやればおk
var uri_param_container = uri_parameter_string_to_object(location.search);
console.log(uri_param_container['name']); // 'hoge'

長ったらしいw
スポンサーサイト
JavaScriptでプライベートプロパティとかメソッドを作る
JavaScriptではプライベートメンバ用の構文はないけど、
クロージャを使えば実現できる。

(1) コンストラクタ関数を使う
function Closure () {
var name = 'closure';
this.getName = function () {
return name;
};
}
var closure = new Closure();
console.log(closure.name); // undefined
console.log(closure.getName); // 'closure'


(2) 無名即時関数を使う
 var obj = (function () {
// プライベートメンバ
var name = 'private';

return {
getName: function () {
return name;
}
};
}());

console.log(obj.name); // undefined
console.log(obj.getName()); // 'private'


【 JavaScript 】オブジェクトをJSONにしたり、JSONをオブジェクトにしたりする
JavaScript内でJSONをオブジェクトにデコードしたり、
オブジェクトをJSONにエンコードするには、
JSON.parse メソッドや JSON.stringify メソッドを使うとラクチン。
モダンなブラウザならネイティブでだいたい対応してるみたい。
Chrome 12、FF 3.6 でとりあえず動作確認。
IE8では動かなかった。

こんな感じで使う。。
 // いじくるオブジェクト
var obj = {
aiueo : 58,
kakikukeko : 777
};

// オブジェクト→JSON
var encodedObj = JSON.stringify(obj);

// JSON→オブジェクト
var decodedObj = JSON.parse(encodedObj);


いままでずっとevalってたのは秘密^^
デコードについてはあきらめてたのも秘密^^^^

実際の動作はjsdo.itの方で確認できます。


【 JavaScript 】関数の呼び出しパターンで this の中身がかわる。
JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティスを読み読み中。
関数の呼び出しパターンによって this の内容が変化することについてメモ。

【共通の話題】
すべての関数は呼び出されるときに2つのパラメータを自動で受け取る。
- this
- arguments

このうち this が、呼び出しパターンによって値が異なる。

・メソッド呼び出しパターン
関数がオブジェクトのプロパティとして格納されている場合:メソッドとして呼び出される。
メソッドが呼び出される→thisにはそのオブジェクトが格納される。
var myObject = {
value: 0,
increment: function (inc) {
this.value += typeof inc === 'number' ? inc : 1;
}
};

myObject.increment();
document.writeln( myObject.value ); // 1

myObject.increment();
document.writeln( myObject.value ); // 3

thisへのオブジェクトのセットは、呼び出しが発生したタイミングで行われる(遅延束縛と呼ばれる)。
パブリックメソッド:thisを使って自分自身のオブジェクトコンテキストにアクセスしているメソッド。

・関数呼び出しパターン
関数がオブジェクトのプロパティでない場合、「関数」として呼び出される。
var sum = add(3, 4); // 7

thisにはグローバルオブジェクトがセットされる:言語の設計としては失敗らしいこれ。
あるオブジェクトのメソッドにおいて、処理の一部を内部関数に担当させることがこのままではできないけど
回避方法が以下↓
// 上記の続きで、myObjectにdoubleメソッド追加
myObject.double = function (){
var that = this; // 値の退避

var helper = function (){
that.value = add(that.value, that.value);
// ここが「this」だと、thisにはグローバルオブジェクトが入るのが無理。
};

helper(); // helperを関数として呼び出す
};

myObject.double(); // doubleをメソッドとして呼び出す
document.writeln(myObject.value); // 6


・コンストラクタ呼び出しパターン
Javascriptはプロトタイプ継承をする言語。
つまり、オブジェクトがほかのオブジェクトから直接継承する。
クラスの概念は存在しない。

もし関数を呼び出す際、new演算子が前についていた場合、
新しいオブジェクトが生成され、thisにはその新しいオブジェクトがセットされるようになる。
そのオブジェクトは、呼び出された関数のprototypeプロパティへの隠されたリンクを持っている。
// Quoという名のコンストラクタ関数を生成。
// これはstatusプロパティを持つオブジェクトを生成する
var Quo = function (string) {
this.status = string;
};

// get_statusというパブリックメソッドをQuoのすべてのインスタンスで利用可能にする
Quo.prototype.get_status = function () {
return this.status;
};

// Quoのインスタンス生成
var myQuo = new Quo("confused");
document.writeln( myQuo.get_status() ); // confused

new演算子をつけて呼び出すことを前提とした関数:コンストラクタと呼ばれる。
が、コンストラクタをnew演算子を使わずに呼び出したら、たいていよくない事態が発生するが、
コンパイル時にも実行時にも警告でない⇒先頭を大文字にしてコンストラクタであるとアピることが重要。
あんまnew演算子でコンストラクタ関数呼び出す方法はお勧めできない。

・apply呼び出しパターン
Javascriptは関数型オブジェクト指向言語であり、関数はメソッドを持てる。
applyメソッドで、引数を格納した配列を使って関数を呼び出せる。
さらに、applyメソッドにより、thisにセットされる値を自由に設定可能になる。
applyメソッドのパラメータは
-第1引数
thisにセットしたい値
-第2引数
パラメータの配列
// 2つの数値からなる配列を作り、それらを足す
var array = [3, 4];
var sum = add.apply(null, array); // sumは7

// statusというメンバを持つオブジェクトを生成する
var statusObject = {
status: 'A-OK'
};

// statusObjectはQuo.prototypeを継承してない。
// が、statusObjectがget_statusメソッドを持ってないにもかかわらず、
// statusOjectのget_statusメソッドを呼び出すことが可能になる
var status = Quo.prototype.get_status.apply( statusObject ); // 'A-OK'


JavaScript:バイナリデータをバイト単位で読む。

HTML5のFileAPIのreadAsBinaryStringで読み込んだバイナリデータを
JavaScriptでバイト単位で扱うには、いったんStringオブジェクトをかますとやりやすい。


var reader = new FileReader;
reader.onload = function(){
var hoge = new String( reader.result );
var substr = hoge.substr( 0, 100 ); // 先頭から100バイト取れる
var firstbyte = hoge.charCodeAt( 0 ); // 先頭バイト取れる
};
reader.readAsBinaryString( file );


charCodeAtについてはもしかしたらStringオブジェクトかまさんでもいけたかも。

Stringオブジェクトのコンストラクタ内でどんなことが行われてるのかは不明・・・。



わたくし

いろいろリンク

カテゴリ

月別アーカイブ

最新記事

最新コメント

最新トラックバック

検索フォーム

RSSリンクの表示

リンク

このブログをリンクに追加する

ブロとも申請フォーム

この人とブロともになる

QRコード

QR

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。