型と値
開発部てるー
アジェンダ
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’;