チェ・ゲバムラの日記

脱犬の道を目指す男のブログ

【JS】基本データを操作する〜組み込みオブジェクト〜JavaScript本格入門 Chapter3〜

3-1 オブジェクトとは

「モノ」である。


Memberオブジェクト
[name]山田
[sex]男
[birth]2007/6/25
[address]千葉県

JSの構文的には連想配列とオブジェクトは同じであり、名前付きの配列であるが、
言葉の意味としては別のもの。

オブジェクト= プロパティ+メソッド

プロパティ=オブジェクトの状態や特性を表す情報
例:フォームでいうと、フォームの名前、テキストボックス、フォームの送信先など

メソッド=オブジェクトを操作する道具
例:フォームでいうと、フォームの情報をサーバに送信する、フォーム内容をクリアするなどの機能


オブジェクトを利用するための準備 new演算子

オブジェクトはそのものを直接変更したりすることは不整合に繋がるため、不可。
オリジナルをコピーして利用する。(インスタンス化)

var 変数名 = new obujekutomei([引数,......])
インスタンスを生成して変数に格納する。


オブジェクトの初期化のために、オブジェクトと同名のメソッドが用意されている。
これをコンストラクタと呼ぶ。
つまりオブジェクト名=コンストラクタ名

組み込みオブジェクト

最も基本的なオブジェクトが組み込みオブジェクト(ビルトインオブジェクト)
→全てのJavaScript環境で利用可能
例 Object, Array , String, Boolean, Math, Date
※特定の環境、ブラウザ上でのみ利用可能なWindow,Locationなどのオブジェクトは含まない

3-2 基本データを扱うためのオブジェクト

Stringオブジェクト

主なメンバ
indexOf,slice,substringなど多数あるため割愛。

indexOfの利用例

Numberオブジェクト

主なメンバ
MAX_VALUE, MIN_VALUE, Nan, toString(rad)など


var num1 = 255;
document.writeln(num1.toString(16)); //ff 16進数
document.writeln(num1.toString(8)); // 377 8進数


Mathオブジェクト

演算機能を提供。
主なメンバ
abs,max,min,random,floor,roundなど


document.writeln(Math,abs(-15)); //15 絶対値
document.writeln(Math,max(10,15)); //15
document.writeln(Math,min(-10, 0 )); // -10

Arrayオブジェクト

主なメンバ
concat,join,slice,splice,push,sort,length,toStringなど


var ary = ['Sato' , 'Takae' , 'Osada' , 'Hio' ,'Saitoh' ];
document.writeln(ary1.slice(1,2)); //Takae

3-3 日付、時刻を操作するDateオブジェクト

注意喚起の記事があった。。。
JavaScript の Date は罠が多すぎる - Qiita

Dateオブジェクト生成

var d = new Date(); //生成時点でのシステム日付をセット
var d = new Date('2010/12/04'); //形式指定

主なメンバ
getFullYear,getTime,getUTCFullYear,parseなど


var dat = new Date(2010,5,25,11,37,15,999);
document.writeln(dat); //Fri Jun 25 11:37:15 UTC+0900 2010
document.writeln(dat.getMonth() ); // 5

日付・時刻データを加算減算する

var dat = new Date(2010, 4 , 15, 11, 40); //月は0から始まるため、マイナス1しておくらしい
document.writeln(dat.toLocaleString()); //2010/5/15 11:40:00
document.writeln(dat.getMonth + 3 ); //3ヶ月加算
document.writeln(dat.toLocaleString()); //2010/8/15 11:40:00
document.writeln(dat.getDate - 20 ); //20日マイナス
document.writeln(dat.toLocaleString()); //2010/7/26 11:40:00

マイナスの場合もいい感じにやってくれる。

日付・時刻の差分を求める

例 定型的な日付の差分を求める
var dat1 = new Date(2010, 4, 15); //2010/05/15
var dat2 = new Date(2010, 5, 20); //2010/06/20
var diff = ( dat2.getTime() - dat1.getTime() ) / (1000 * 60 * 60 * 24);
document.writeln(diff + '日の差があります。'); //36

getTimeでミリ秒を求めたらそれを1000で割って、、と
ややまどろっこしいがこれが定型的な日付の差分計算となるので決まり切ったコードとして覚える。



3-4 正規表現で文字を自在に指定するRegExpオブジェクト

正規表現とは

郵便番号は111-0500の場合、数字の次が数字かどうか、、、と延々と繰り返すことなく、
曖昧な文字列パターンを表現できる記法。
郵便番号でいえば、0〜9の数値3桁+「-」+0〜9の数値4桁というパターンが決まっている。
この場合は下記のようになる。
[0-9]{3}-[0-9]{4}

JavaScriptで利用可能な正規表現


ABC   ABCという文字列
[ABC]   A,B,Cのいずれか1文字
[^ABC] A、B、C以外のいずれか1文字
[A-Z]  A〜Zの間の1文字
A|B|C  A,B,Cのいずれか
など。。。


RegExpオブジェクトを生成

JavaScript正規表現を解析し、文字列検索するための機能を提供するのがRegExpオブジェクト。
生成方法
1.RegExpオブジェクトのコンストラクタを使用
2.正規表現リテラル利用

あまり実用的な気がしないので割愛
要するに、http(s)?:¥/......となっている正規表現を、普通のURLに戻してあげるみたいな時。基本なさそう。

3-5.全てのオブジェクトの雛形Objectオブジェクト

Objectオブジェクトとは

全てのオブジェクトの基本オブジェクトである。
上述したString,Dateオブジェクトに加え、自作するオブジェクトでも、Objectオブジェクトで定義されたプロパティやメソッドを共通利用できる。

匿名オブジェクト作成

その場限りで再利用することのないちょっとした構造データを受け渡しする場合にもシンプルに記述できる方法。
後述するクラス定義せずに利用できる。

var obj = new Object();

//空のオブジェクトにデータを追加
obj.name = 'トクジロウ';
obj.birth = new Date(2005, 7, 15);
obj.old = 5;

//アクセスする
document.writeln(obj.name);



3-6 基本機能を提供するGlobalオブジェクト
JavaScriptはデータ型に寛容で、言語が自動的に適切なデータ型に変換してくれるが、
これが思わぬバグの温床になる場合もある。
そこでデータ型を明示的に変換する方法がある。

数値へ明示的に変換する

parseFloat
parseInt
Number関数


「123xxxという文字列混在の数値」
parseFloat,parseIntの場合解析可能数字だけを返す。
→123
(ただし先頭から連続した数字だけ。xxx123は×)

Numberは使えない。NaNになる。


var d = new Date();
document.writeln( Number(d) ); //1283608394929

parseは使えない。NaNになる。

クエリ情報をエスケープする

URL末尾の?以降にあるキー名&値&。。。の部分では区切り文字である%などが使えない。
それがクエリ情報に含まれる場合はあらかじめURIエンコード、つまりエスケープしておく必要がある。

利用関数はencodeURI / encodeURIComponent
エンコード対象文字が若干違う
encodeURIComponentは #,$,+,/,@,;,:,が変換されるが
encodeURIではされない。