Download - JavaScript 勉強会 ― 型と値
![Page 1: JavaScript 勉強会 ― 型と値](https://reader034.vdocuments.site/reader034/viewer/2022052507/5585d621d8b42a7c428b47fb/html5/thumbnails/1.jpg)
型と値
開発部てるー
![Page 2: JavaScript 勉強会 ― 型と値](https://reader034.vdocuments.site/reader034/viewer/2022052507/5585d621d8b42a7c428b47fb/html5/thumbnails/2.jpg)
アジェンダ
1. 基本型の値
2. グローバルオブジェクト
3. 型変換
![Page 3: JavaScript 勉強会 ― 型と値](https://reader034.vdocuments.site/reader034/viewer/2022052507/5585d621d8b42a7c428b47fb/html5/thumbnails/3.jpg)
アジェンダ
1. 基本型の値
2. グローバルオブジェクト
3. 型変換
![Page 4: JavaScript 勉強会 ― 型と値](https://reader034.vdocuments.site/reader034/viewer/2022052507/5585d621d8b42a7c428b47fb/html5/thumbnails/4.jpg)
型
● 基本型○ 数値○ 文字列○ 論理値○ null○ undefined
● オブジェクト型○ 上記以外
![Page 5: JavaScript 勉強会 ― 型と値](https://reader034.vdocuments.site/reader034/viewer/2022052507/5585d621d8b42a7c428b47fb/html5/thumbnails/5.jpg)
数値
● 整数と浮動小数点数を区別しない
● 64ビット浮動小数点形式
![Page 6: JavaScript 勉強会 ― 型と値](https://reader034.vdocuments.site/reader034/viewer/2022052507/5585d621d8b42a7c428b47fb/html5/thumbnails/6.jpg)
数値リテラル
30xff03773.146.02e23
![Page 7: JavaScript 勉強会 ― 型と値](https://reader034.vdocuments.site/reader034/viewer/2022052507/5585d621d8b42a7c428b47fb/html5/thumbnails/7.jpg)
文字列
● リテラルは「’」もしくは「”」を使う○ GitHubでは 「’」: 56.626% 「”」: 43.374%
■ 「’」● Backbone● AngularJS
■ 「”」● jQuery
![Page 8: JavaScript 勉強会 ― 型と値](https://reader034.vdocuments.site/reader034/viewer/2022052507/5585d621d8b42a7c428b47fb/html5/thumbnails/8.jpg)
文字列リテラル
’testing’‘ほげほげ’ + ‘ぴよぴよ’‘This string¥nhas two lines’
‘<p><a href=”#jquery”>jQuery</p>’“<p><a href=¥”#jquery¥”>jQuery</p>”
![Page 9: JavaScript 勉強会 ― 型と値](https://reader034.vdocuments.site/reader034/viewer/2022052507/5585d621d8b42a7c428b47fb/html5/thumbnails/9.jpg)
論理値
● 予約語 true と false で表現
![Page 10: JavaScript 勉強会 ― 型と値](https://reader034.vdocuments.site/reader034/viewer/2022052507/5585d621d8b42a7c428b47fb/html5/thumbnails/10.jpg)
null と undefined
● null○ 「値がない」ことを示す○ プログラムレベルで予定どおりの場合を表すもの
● undefined○ 「値がない」ことを示す
○ システムレベルで予期せぬ、エラーのような場合に表す
もの
![Page 11: JavaScript 勉強会 ― 型と値](https://reader034.vdocuments.site/reader034/viewer/2022052507/5585d621d8b42a7c428b47fb/html5/thumbnails/11.jpg)
undefined
var hoge = ‘test’;console.log(hoge); // test
var piyo;console.log(piyo); // undefined
![Page 12: JavaScript 勉強会 ― 型と値](https://reader034.vdocuments.site/reader034/viewer/2022052507/5585d621d8b42a7c428b47fb/html5/thumbnails/12.jpg)
オブジェクト (1 / 2)
● プロパティの集合体
● プロパティとは○ 名前と値を持ち、値に以下のものを保持できる
■ 基本型の値■ オブジェクト (関数や配列も含む)
![Page 13: JavaScript 勉強会 ― 型と値](https://reader034.vdocuments.site/reader034/viewer/2022052507/5585d621d8b42a7c428b47fb/html5/thumbnails/13.jpg)
オブジェクト (2 / 2)
var point = { x: 128, y: 64};
console.log(point.x); // 128
![Page 14: JavaScript 勉強会 ― 型と値](https://reader034.vdocuments.site/reader034/viewer/2022052507/5585d621d8b42a7c428b47fb/html5/thumbnails/14.jpg)
アジェンダ
1. 基本型の値
2. グローバルオブジェクト
3. 型変換
![Page 15: JavaScript 勉強会 ― 型と値](https://reader034.vdocuments.site/reader034/viewer/2022052507/5585d621d8b42a7c428b47fb/html5/thumbnails/15.jpg)
グローバルオブジェクト (1 / 3)
● このオブジェクトで定義されたプロパティは JavaScript プログラム中のどこからでも利用できる
![Page 16: JavaScript 勉強会 ― 型と値](https://reader034.vdocuments.site/reader034/viewer/2022052507/5585d621d8b42a7c428b47fb/html5/thumbnails/16.jpg)
グローバルオブジェクト (2 / 3)
● プロパティ○ undefined○ Infinity
● 関数○ isNaN()○ parseInt()
● コンストラクタ関数○ Date()○ String()
● オブジェクト○ Math○ JSON
![Page 17: JavaScript 勉強会 ― 型と値](https://reader034.vdocuments.site/reader034/viewer/2022052507/5585d621d8b42a7c428b47fb/html5/thumbnails/17.jpg)
グローバルオブジェクト (3 / 3)
● ブラウザの JavaScript 環境では Window オブジェクトがグローバルオブジェクト
● Window オブジェクトのプロパティ○ document○ frames○ location○ window
![Page 18: JavaScript 勉強会 ― 型と値](https://reader034.vdocuments.site/reader034/viewer/2022052507/5585d621d8b42a7c428b47fb/html5/thumbnails/18.jpg)
アジェンダ
1. 基本型の値
2. グローバルオブジェクト
3. 型変換
![Page 19: JavaScript 勉強会 ― 型と値](https://reader034.vdocuments.site/reader034/viewer/2022052507/5585d621d8b42a7c428b47fb/html5/thumbnails/19.jpg)
hoge は文字列なはずなのに・・・?
var hoge = ‘256’;
console.log(hoge / 16); // 16if (hoge) { console.log(‘Hello!’); } // Hello!console.log(hoge.indexOf(‘56’)); // 1
![Page 20: JavaScript 勉強会 ― 型と値](https://reader034.vdocuments.site/reader034/viewer/2022052507/5585d621d8b42a7c428b47fb/html5/thumbnails/20.jpg)
ラッパーオブジェクト (1 / 2)
var s = new String(‘ABC’);console.log(s.toLocaleLowerCase()); // abc
var n = new Number(12300000);console.log(n.toExponential()); // 1.23e+7
![Page 21: JavaScript 勉強会 ― 型と値](https://reader034.vdocuments.site/reader034/viewer/2022052507/5585d621d8b42a7c428b47fb/html5/thumbnails/21.jpg)
ラッパーオブジェクト (2 / 2)
console.log( ‘ABC’.toLocaleLowerCase()); // abc
console.log( 12300000.toExponential()); // 1.23e+7
![Page 22: JavaScript 勉強会 ― 型と値](https://reader034.vdocuments.site/reader034/viewer/2022052507/5585d621d8b42a7c428b47fb/html5/thumbnails/22.jpg)
明示的な型変換
Number(‘3’) // 3String(false); // ‘false’Boolean([]) // trueObject(3) // new Number(3)
![Page 23: JavaScript 勉強会 ― 型と値](https://reader034.vdocuments.site/reader034/viewer/2022052507/5585d621d8b42a7c428b47fb/html5/thumbnails/23.jpg)
オブジェクトから基本型への変換
すべてのオブジェクトは変換メソッドを 2 つもっている
● toString()● valueOf()
![Page 24: JavaScript 勉強会 ― 型と値](https://reader034.vdocuments.site/reader034/viewer/2022052507/5585d621d8b42a7c428b47fb/html5/thumbnails/24.jpg)
toString()
オブジェクトを表す文字列を返す
new Number(3).toString() // ‘3’({x: 1, y: 2}).toString() // ‘[object Object]’[1, 2, 3].toString // ‘1,2,3’
![Page 25: JavaScript 勉強会 ― 型と値](https://reader034.vdocuments.site/reader034/viewer/2022052507/5585d621d8b42a7c428b47fb/html5/thumbnails/25.jpg)
valueOf()
はっきり定義されていない
基本的は、オブジェクトを基本型値に変換するのが仕事
new Number(3).valueOf(); // 基本値型の 3new String(‘abc’).valueOf(); // 基本値型の ‘abc’({x: 1}).valueOf() // そのままオブジェクトを返す
![Page 26: JavaScript 勉強会 ― 型と値](https://reader034.vdocuments.site/reader034/viewer/2022052507/5585d621d8b42a7c428b47fb/html5/thumbnails/26.jpg)
オブジェクトから文字列に変換 (1 / 2)
1. toString() の実行を試みる
2. valueOf() の実行を試みる
3. TypeError を投げる
![Page 27: JavaScript 勉強会 ― 型と値](https://reader034.vdocuments.site/reader034/viewer/2022052507/5585d621d8b42a7c428b47fb/html5/thumbnails/27.jpg)
オブジェクトから文字列に変換 (2 / 2)var hoge = { toString: function() { return ‘toString’; }, valueOf: function() { return ‘valueOf’; }};
console.log(hoge); // toString
![Page 28: JavaScript 勉強会 ― 型と値](https://reader034.vdocuments.site/reader034/viewer/2022052507/5585d621d8b42a7c428b47fb/html5/thumbnails/28.jpg)
オブジェクトから数値に変換 (1 / 3)
1. valueOf() の実行を試みる
2. toString() の実行を試みる
3. TypeError を投げる
![Page 29: JavaScript 勉強会 ― 型と値](https://reader034.vdocuments.site/reader034/viewer/2022052507/5585d621d8b42a7c428b47fb/html5/thumbnails/29.jpg)
オブジェクトから数値に変換 (2 / 3)var hoge = { toString: function() { return 1; }, valueOf: function() { return 2; }};
console.log(hoge - 2); // 0
![Page 30: JavaScript 勉強会 ― 型と値](https://reader034.vdocuments.site/reader034/viewer/2022052507/5585d621d8b42a7c428b47fb/html5/thumbnails/30.jpg)
オブジェクトから数値に変換 (3 / 3)var hoge = { toString: function() { return 1; }, valueOf: function() { return { a: 2 }; }};
console.log(hoge - 2); // -1
![Page 31: JavaScript 勉強会 ― 型と値](https://reader034.vdocuments.site/reader034/viewer/2022052507/5585d621d8b42a7c428b47fb/html5/thumbnails/31.jpg)
お わ り
![Page 32: JavaScript 勉強会 ― 型と値](https://reader034.vdocuments.site/reader034/viewer/2022052507/5585d621d8b42a7c428b47fb/html5/thumbnails/32.jpg)
宿題 (FizzBuzz 問題) + α (1 / 3)1から x までの数をプリントするプログラムを書け。
ただし3の倍数のときは数の代わりに「Fizz」と、
5の倍数のときは「Buzz」とプリントし、
3と5両方の倍数の場合には「FizzBuzz」とプリントすること。
![Page 33: JavaScript 勉強会 ― 型と値](https://reader034.vdocuments.site/reader034/viewer/2022052507/5585d621d8b42a7c428b47fb/html5/thumbnails/33.jpg)
宿題 (FizzBuzz 問題) + α (2 / 3)● x は HTML 上のフォームから入力する
● 特定のボタンを押下すると、以下の動作をする
○ 正の整数が入力された場合、HTML 上に FizzBuzz の結果を出力する
![Page 34: JavaScript 勉強会 ― 型と値](https://reader034.vdocuments.site/reader034/viewer/2022052507/5585d621d8b42a7c428b47fb/html5/thumbnails/34.jpg)
例
![Page 35: JavaScript 勉強会 ― 型と値](https://reader034.vdocuments.site/reader034/viewer/2022052507/5585d621d8b42a7c428b47fb/html5/thumbnails/35.jpg)
宿題 (FizzBuzz 問題) + α (3 / 3)● jQuery などの外部ライブラリの使用は禁止
● IE, Firefox, Chrome の最新バージョンで動作すればOKです
![Page 36: JavaScript 勉強会 ― 型と値](https://reader034.vdocuments.site/reader034/viewer/2022052507/5585d621d8b42a7c428b47fb/html5/thumbnails/36.jpg)
サンプル (1 / 4)<button type=”button” id=”btn”>abc</button>
var btn = document.getElementById(‘btn’);btn.addEventListener(‘click’, function() { // 「abc」ボタンが押された際の処理
});
![Page 37: JavaScript 勉強会 ― 型と値](https://reader034.vdocuments.site/reader034/viewer/2022052507/5585d621d8b42a7c428b47fb/html5/thumbnails/37.jpg)
サンプル (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();});
![Page 38: JavaScript 勉強会 ― 型と値](https://reader034.vdocuments.site/reader034/viewer/2022052507/5585d621d8b42a7c428b47fb/html5/thumbnails/38.jpg)
サンプル (3 / 4)<input type=”number” id=”num”></input>
var num = document.getElementById(‘num);
// 入力された値を取得
console.log(num.value);
![Page 39: JavaScript 勉強会 ― 型と値](https://reader034.vdocuments.site/reader034/viewer/2022052507/5585d621d8b42a7c428b47fb/html5/thumbnails/39.jpg)
サンプル (4 / 4)<div id=”output-view”></div>
// 左の div 要素の中に「abc」という
// HTMLを埋め込む
var outputView = document.getElementById(‘output-view’);outputView.innerHTML = ‘abc’;