山傘のプログラミング勉強日記

プログラミングに関する日記とどうでもよい雑記からなるブログです。

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで その1

Chapter 1 イントロダクション

JavaScript について勉強したいと思います。

JavaScriptJava と名前が似ていますが、全くの別言語です。以前は、あまり使われていませんでしたが、HTML5 によってブラウザでできることが増え、JavaScript の人気が出るようになりました。

Chapter 2 基本的な書き方を身に着ける

JavaScript の基本的な記述

HTML に直接 JavaScript を埋め込みます。type 属性は一般的に "text/javascript" を指定します。また、この値はデフォルトなので省略もできます。

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>JavaScript本格入門</title>
</head>
<body>
    <script type="text/javascript">
       window.alert('こんにちは、世界!')
   </script>
    <noscript>JavaScriptが利用できません</noscript>
</body>
</html>

"noscript" はスクリプトが動作しないブラウザのために、 代わりに表示させる内容を指定します。

テンプレート文字列

let name = 'ヤマカサ';
let str = `こんにちは、${name}さん`;
console.log(str);

オブジェクトリテラル

辞書や連想配列のような使い方ができます。

var obj = { x:1, y:2, z:3 }
console.log(obj.x);
console.log(obj['x']);

また、連想配列そのものもあります。

var map = new Map();
var key = ("a", "b");
map.set(key[0], "A");
map.set(key[1], "B");
console.log(map.get(key[0]) + " " + map.get(key[1]));

Map - JavaScript | MDN

分割代入

分割代入を使って変数の入れ替えを行うことができます。

分割代入 - JavaScript | MDN

var a = 5;
var b = 3;
[a, b] = [b, a];
console.log(a + " " + b)

ショートカット演算

デフォルト値を設定するときに使えるようです。

var x = 5;
var y;
y = y || x
console.log(y); // 5

for 文

for-in と for-of 文です。in の方はあまり使わない方が良いみたいです。

var nums = [1, 'abc', 3, 4, 5, 6, 7];
for (var i in nums) {
  console.log(i + ": " + nums[i]);
}
console.log('------------------')
for (var i of nums) {
  console.log(i);
}

ラベル構文

C#C++ などでは goto 文に対応するかと思います。

loop :
for (var i = 0; i < 10; i++) {
  for (var j = 0; j < 10; j++) {
    if (i * j < 20) {
      var k = i * j + 1;
      process.stdout.write(String(k) + ' ');
    } else {
      break loop;
    }
  }
  process.stdout.write('\n');
}

感想

大体知っている内容だったので復習になりました。