型と値

開発部てるー

アジェンダ

1. 基本型の値

2. グローバルオブジェクト

3. 型変換

アジェンダ

1. 基本型の値

2. グローバルオブジェクト

3. 型変換

型

● 基本型○ 数値○ 文字列○ 論理値○ null○ undefined

● オブジェクト型○ 上記以外

数値

● 整数と浮動小数点数を区別しない

● 64ビット浮動小数点形式

数値リテラル

30xff03773.146.02e23

文字列

● リテラルは「’」もしくは「”」を使う○ GitHubでは 「’」: 56.626% 「”」: 43.374%

■ 「’」● Backbone● AngularJS

■ 「”」● jQuery

文字列リテラル

’testing’‘ほげほげ’ + ‘ぴよぴよ’‘This string¥nhas two lines’

‘<p><a href=”#jquery”>jQuery</p>’“<p><a href=¥”#jquery¥”>jQuery</p>”

論理値

● 予約語 true と false で表現

null と undefined

● null○ 「値がない」ことを示す○ プログラムレベルで予定どおりの場合を表すもの

● undefined○ 「値がない」ことを示す

○ システムレベルで予期せぬ、エラーのような場合に表す

もの

undefined

var hoge = ‘test’;console.log(hoge); // test

var piyo;console.log(piyo); // undefined

オブジェクト (1 / 2)

● プロパティの集合体

● プロパティとは○ 名前と値を持ち、値に以下のものを保持できる

■ 基本型の値■ オブジェクト (関数や配列も含む)

オブジェクト (2 / 2)

var point = { x: 128, y: 64};

console.log(point.x); // 128

アジェンダ

1. 基本型の値

2. グローバルオブジェクト

3. 型変換

グローバルオブジェクト (1 / 3)

● このオブジェクトで定義されたプロパティは JavaScript プログラム中のどこからでも利用できる

グローバルオブジェクト (2 / 3)

● プロパティ○ undefined○ Infinity

● 関数○ isNaN()○ parseInt()

● コンストラクタ関数○ Date()○ String()

● オブジェクト○ Math○ JSON

グローバルオブジェクト (3 / 3)

● ブラウザの JavaScript 環境では Window オブジェクトがグローバルオブジェクト

● Window オブジェクトのプロパティ○ document○ frames○ location○ window

アジェンダ

1. 基本型の値

2. グローバルオブジェクト

3. 型変換

hoge は文字列なはずなのに・・・？

var hoge = ‘256’;

console.log(hoge / 16); // 16if (hoge) { console.log(‘Hello!’); } // Hello!console.log(hoge.indexOf(‘56’)); // 1

ラッパーオブジェクト (1 / 2)

var s = new String(‘ABC’);console.log(s.toLocaleLowerCase()); // abc

var n = new Number(12300000);console.log(n.toExponential()); // 1.23e+7

ラッパーオブジェクト (2 / 2)

console.log( ‘ABC’.toLocaleLowerCase()); // abc

console.log( 12300000.toExponential()); // 1.23e+7

明示的な型変換

Number(‘3’) // 3String(false); // ‘false’Boolean([]) // trueObject(3) // new Number(3)

オブジェクトから基本型への変換

すべてのオブジェクトは変換メソッドを 2 つもっている

● toString()● valueOf()

toString()

オブジェクトを表す文字列を返す

new Number(3).toString() // ‘3’({x: 1, y: 2}).toString() // ‘[object Object]’[1, 2, 3].toString // ‘1,2,3’

valueOf()

はっきり定義されていない

基本的は、オブジェクトを基本型値に変換するのが仕事

new Number(3).valueOf(); // 基本値型の 3new String(‘abc’).valueOf(); // 基本値型の ‘abc’({x: 1}).valueOf() // そのままオブジェクトを返す

オブジェクトから文字列に変換 (1 / 2)

1. toString() の実行を試みる

2. valueOf() の実行を試みる

3. TypeError を投げる

オブジェクトから文字列に変換 (2 / 2)var hoge = { toString: function() { return ‘toString’; }, valueOf: function() { return ‘valueOf’; }};

console.log(hoge); // toString

オブジェクトから数値に変換 (1 / 3)

1. valueOf() の実行を試みる

2. toString() の実行を試みる

3. TypeError を投げる

オブジェクトから数値に変換 (2 / 3)var hoge = { toString: function() { return 1; }, valueOf: function() { return 2; }};

console.log(hoge - 2); // 0

オブジェクトから数値に変換 (3 / 3)var hoge = { toString: function() { return 1; }, valueOf: function() { return { a: 2 }; }};

console.log(hoge - 2); // -1

お　わ　り

宿題 (FizzBuzz 問題) + α (1 / 3)1から x までの数をプリントするプログラムを書け。

ただし3の倍数のときは数の代わりに「Fizz」と、

5の倍数のときは「Buzz」とプリントし、

3と5両方の倍数の場合には「FizzBuzz」とプリントすること。

宿題 (FizzBuzz 問題) + α (2 / 3)● x は HTML 上のフォームから入力する

● 特定のボタンを押下すると、以下の動作をする

○ 正の整数が入力された場合、HTML 上に FizzBuzz の結果を出力する

例

宿題 (FizzBuzz 問題) + α (3 / 3)● jQuery などの外部ライブラリの使用は禁止

● IE, Firefox, Chrome の最新バージョンで動作すればOKです

サンプル (1 / 4)<button type=”button” id=”btn”>abc</button>

var btn = document.getElementById(‘btn’);btn.addEventListener(‘click’, function() { // 「abc」ボタンが押された際の処理

});

サンプル (2 / 4)<form id="fizzbuzz-form"> <button type="submit"> FizzBuzz </button></form>

var form = document.getElementById(‘fizzbuzz-form’);form.addEventListener(‘submit’, function(e) { // 「abc」ボタンが押された際の処理

// ブラウザのデフォルトの動作をキャンセル

e.preventDefault();});

サンプル (3 / 4)<input type=”number” id=”num”></input>

var num = document.getElementById(‘num);

// 入力された値を取得

console.log(num.value);

サンプル (4 / 4)<div id=”output-view”></div>

// 左の div 要素の中に「abc」という

// HTMLを埋め込む

var outputView = document.getElementById(‘output-view’);outputView.innerHTML = ‘abc’;