これは、オンラインプログラミング学習サービス「ウェブカツ!!」にて、
javascript・jQuery部中級のオンライン学習で使用しているコードになります。
1.7.データ型について
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
// jsはデータ型がとてもゆるゆる。js側が勝手に入ってきた値を元に型を推測してつけているので、 // きちんと意識していないと変な型になっている場合あり。 // jsのデータ型には基本型と参照型がある // 1.7.1.基本型（プリミティブ型） // 真偽値を扱うboolean var isBool = true; // 数値を扱うnumber var num = 123; num = 123.456; // number型の中には浮動小数点型もある num = 0600; // 8進数もある num = 0xCC55BB; // 16進数もある // 文字を扱うstring var str = '123'; // null値を扱うnull var str = null; // 未定義値を扱うundefined var str = undefined; // 1.7.2.参照型 // 配列を扱うarray var arr = []; // オブジェクトを扱うobject var obj = {}; // 関数を扱うfunction（他の言語と違って特殊で、データ型の一種） function func(){ } // 基本型は値そのものを扱う。 // 参照型は値の格納されているアドレスを扱う。どの言語も同じ。 |
1.8.リテラルについて
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
// リテラルとは値の表現方法のこと。値には色々な表現の仕方がある // 1.8.1.数値リテラル var num = 123; // 一般的な10進数のもの num = 123.456; // 浮動小数点もある num = 0600; // 8進数もある num = 0xCC55BB; // 16進数もある // 1.8.2.文字列リテラル var str = 'He is okama'; // 基本は、シングルクウォートを使った方がいい。htmlを生成する時もあるので //str = 'He's okama'; //シングルクウォートで囲んでる場合、その中でシングルクウォートは使えない str = "He's okama"; // そういう場合は、ダブルクォーテーションを使えばいい //str = 'He¥'s okama'; // もしくは、¥マークでエスケープしてやる // 1.8.3.配列リテラル var arr = ['HTML', 'css', 'js', 'php']; // 普通の配列の書き方 console.log(arr[3]); // php arr = [ ['HTML','css'], ['js', 'php'] ]; // 多次元配列の書き方 console.log(arr[1][0]); // js // 1.8.4.オブジェクトリテラル // ハッシュとか連想配列と呼ばれるもの。番号じゃなく、名前でアクセスできる配列。 var obj = { HTML: 5, CSS: '3', js: 'ES2015', php: '7' }; console.log(obj.HTML); // 5 console.log(obj.js); // ES2015 // キーに変数も使えるし、配列と同じように[]で指定もできる var key = 'CSS'; console.log(obj[key]); // 3 console.log(obj['0']); // 7 // 1.8.4.配列リテラル // ややこしいため別レッスンで説明 |
1.9.演算子について
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
// 1.9.1.算術演算子 var num = 1 + 2; // 3 num = 2 - 1; // 1 num = 1 * 2; // 2 num = 2 / 1; // 2 num = 10 % 4; // 2 num = ++num; // 3 num = --num; // 2 // 注意点！！ num = 10 + '3'; // 数値の13 num = '10' + 3; // 文字列の103 num += 10; // 10310になっちゃう // 1.9.2.代入演算子 var num = 3; num += 3; // 6 num -= 3; // 3 num *= 3; // 9 num /= 3; // 3 num %= 3; // ? // 論理演算とシフト演算というのもあるが、使わないので省略 // 1.9.3.比較演算子 var isBool = 1 == 1; // true isBool = 1 != 1; // false isBool = 1 < 2; // true isBool = 1 > 2; // false isBool = 1 >= 1; // true isBool = 1 <= 1; // true isBool = 1 == '1'; // true isBool = 1 === '1'; // false isBool = 1 !== '1'; // true isBool = (1 === '1') ? 'A' : 'B'; // B var arr1 = ['html', 'css']; var arr2 = ['html', 'css']; isBool = arr1 === arr2; // false arr2 = arr1; isBool = arr1 === arr2; // true // 問題 var str1 = 1; var str2 = '1'; isBool = str1 == str2; // ? // バグの原因となるため、必ず厳密比較をすること！！厳密比較していないコードを書いている人は低レベルだとすぐにわかる。 // consoleに貼って試してみよう // 1.9.4.論理演算子 var isBool = 1 === 1 && 2 === 2; // true isBool = 1 === 1 || 2 === 3; // true isBool = !( 1 === 1 && 2 === 2 ); // false // &&と||は左辺が評価されたら右辺が評価されない場合がある |
