ねっとぱんだ-プログラミング勉強ブログ-

Webデザイン、プログラミングの勉強ブログ。

【javascript】オブジェクトについてとビルトインオブジェクト【随時更新】

オブジェクトとは

プログラムで扱う情報を部品化して管理

オブジェクトの種類

  • ビルトインオブジェクト
  • webブラウザのオブジェクト
  • DOM(Document Of Model)
  • ユーザー定義オブジェクト

ビルトインオブジェクト

  • javascriptに組み込まれているオブジェクト。
  • ECMAscriptで標準仕様として規定されている。

webブラウザのオブジェクト

  • 各種webブラウザが提供するオブジェクト

DOM

  • webブラウザが提供するオブジェクト。HTMLを操作する際に使う。

ユーザー定義オブジェクト

グローバルオブジェクト

Javascript内のどこからでも参照できるオブジェクト。
ECMAscriptでは「Global」という名称で規定されている。
ビルトインプロパティやビルトイン関数はGlobalオブジェクトに定義されている。

ビルトインプロパティ
Javascriptにあらかじめ組み込まれているプロパティ
ビルトイン関数
javascriptにあらかじめ組み込まれている関数

ビルトインプロパティとビルトイン関数の主な使い方

encodeURI , encodeURIComponent

URI
URR(Uniform Resource Identifier) URL(Uniform Resource Locator) と URN(Uniform Resource Name))の総称。

http://○○○は正確にはURIと呼ぶ。
http://部分はURLではなくURI側のパーツ
参考:https://ferret-plus.com/4637

URIではASKII文字コードで定義されている文字列以外は"%"と16進数2桁で表現しなければならないという決まりがある。

ASKII
American Standard Code for Information Interchange

文書データの統一基準

文字列をURIで利用できる形に変換することは一般的に「URIエンコード」と呼ばれる。

encodeURI()
URIで特殊な意味を持つ文字はエンコードしない。
encodeURIComponent()
URIで特殊な意味を持つ文字もエンコードする。

両方ともutf-8で変換される。
これらはjavascriptでデータをサーバに送る際等に利用される。
エンコードした文字はdecodeURI()とdecodeURIComponent()を使うことで元の文字列にデコード(逆変換)できる。

特殊文字エンコード

//特殊文字はエンコードされない
document.write(encodeURI(';:/@?&$#=+')+'<br>');
//特殊文字もエンコードされる
document.write(encodeURIComponent(';:/@?&$#=+')+'<br>');

日本語のエンコード

//どちらも同じ結果になる
document.write(encodeURI('日本') + '<br>');
document.write(encodeURI('日本');

エンコードしたものをデコードする

document.write(decodeURI('%E6%97%A5%E6%9C%AC')+'<br>');
document.write(decodeURIComponent('%E6%97%A5%E6%9C%AC') + '<br>');

特殊文字のデコード

//decodeURIではできない
document.write(decodeURI('%3B%3A%2F%40%3F%26%24%23%3D%2B')+'<br>');
//decordeURIComponentではできる
document.write(decodeURIComponent('%3B%3A%2F%40%3F%26%24%23%3D%2B'));

eval();

文字列をjavascriptとして実行する。

数式

var a = eval('1+1');
document.write(a);

文字列

var a = eval('var b = {c : 10,d : 20}');
document.write(b.c + b.d);
perseInt parseFloat

文字列を数値に変換する。

parseInt()
文字列を整数値に変換する。第2引き数で進数の基数を指定できる。16進数は第1引き数の前に0xをつける。8進数は0をつける。
perseFloat
文字列を浮動小数値に変換する。

parseIntで文字列を数字にして計算

var res = parseInt('10') + parseInt('7');
document.write(res + '<br>');
//計算結果の型を調べる。
document.write(typeof res);

数値に変換できないものはNaNが返される

var res = parseInt('a');
document.write(res + '<br>');
document.write(typeof res);

整数に変化できるところまで返される。

var res = parseInt('17abc');
var res2 = parseInt('6.887');
document.write(res + '<br>');
document.write(res2 + '<br>');
document.write(typeof res);

以下はresがNaN、res2が0として返される

var res = parseInt('abc17');
var res2 = parseInt('0.887');
document.write(res + '<br>');
document.write(res2 + '<br>');
document.write(typeof res);

perseFloatは小数点も含めて返される

var res = parseFloat('8.7649');
document.write(res);
document.write(typeof res);

isNaN isFintie

isNaN
引き数が数値かどうかを返す。
isFinite
引き数が有限値かどうかを返す。

isNaNを使って非数かどうか調べる

document.write(isNaN(3),'<br>');
document.write(isNaN(parseInt('a')),'<br>');
document.write(isNaN('3'),'<br>');

isFiniteを使って、数値に変換した時に有限数になるかどうかを調べる

document.write(isFinite(3),'<br>');
document.write(isFinite(parseInt('a')),'<br>');
document.write(isFinite('3'),'<br>');
document.write(isFinite(Infinity),'<br>');
document.write(isFinite('Infinity'),'<br>');
document.write(isFinite(-Infinity),'<br>');

ラッパーオブジェクト

プリミティブ型を参照型(オブジェクト)のように扱うために、プリミティブ型を包み込むように記述
するものをラッパーオブジェクトという。

プリミティブ型
他の型を含まない型
参照型
値が置いてある場所を保持する
Boolean
論理値を扱うオブジェクト
Number
数値を扱うオブジェクト
String
テキスト文字列を表すオブジェクト

Numberオブジェクトのプロパティ等
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Number

javascriptでラッパーオブジェクトを使うことはあまりない。
javascriptではデータ型の変換は自動で行われる。