北海道工業大学電子計算機研究部ネットワークチーム　前期講座資料08

1. JavaScript 基礎Ⅰ

2.  プログラミングの目的
 開発の手順
 JavaScript とは
 変数と変数型
 制御構文 (if, else)
 課題

3.  膨大な数の計算を高速で行う
 手間の掛かる処理を自動で行う
 リッチな UI を実装する

4. テスト
プログラムにバグがないか確認する
実装
プログラミング言語を用いてプログラムを開発する
仕様作成
要件を満たす機能の仕様を定める
要件定義
したいこと、すること(機能)を定義する

5.  Web ブラウザで動くプログラミング言語
 HTML を動的に操作できる
 HTML5 の API を利用するとブラウザを介して次の
ようなことができる。(一部紹介)
 非同期通信 (XMLHttpRequest)
 2D, 3D 画像の描画 (Canvas, WebGL)
 リアルタイム通信 (WebSocket API)
 P2P 通信 (WebRTC)
 位置情報の取得 (Geolocation API)
 ファイルの操作 (File API)

6.  JavaScript の内容を細かく説明する時間は無いため、
ライブラリを用いてゲームを作れるところまで、少
し早足で進む。
1. JavaScript の書き方、変数と型、制御構文
2. 関数の宣言と変数スコープ、無名関数
3. ライブラリを用いてゲーム作成Ⅰ
4. ライブラリを用いてゲーム作成Ⅱ

7. 値を格納する

8.  変数とは、値を格納する箱
 変数には型があり、 JavaScript には次の 7 種類があ
る
 Number (数値)
 String (文字列)
 Boolean (真偽値)
 Function (関数) ※次の回で説明する
 RegExp (正規表現) ※前期講座では扱わない
 Array (配列)
 Object (連想配列、ハッシュ)

9.  var を使って宣言する
 C 言語と異なり、型を宣言しない
 値によって型が決まる
var num = 8;
var str = "ネットワーク講座"
var is8 = true;
var arr = [1, 2, 3, 4, 5, 6, 7, 8];
var obj = {
title: "ネットワーク講座",
index: 8
};

10.  数値 (整数、小数の両方を扱う)
var n = 8;
var m = 9;
// 四則演算 (ブラウザで実行してみよう)
console.log(n + m);
console.log(n - m);
console.log(n * m);
console.log(n / m);
console.log(n % m);

11.  文字列 (char 型は存在しない)
var str = "ネットワーク講座";
// String のプロパティ、メソッドの呼び出し
console.log(str.length);
console.log(str.slice(6, 8));
console.log(str[0]);
// 文字列の連結
var s = "08";
console.log(str + s);

12.  真偽値
 true か false の どちらかの値を持つ
 if や for, while などの制御構文で使われる
// 変数 bool を true で初期化
var bool = true;
console.log(bool);
// 代入
bool = false;
console.log(bool);
// 比較した結果の代入
bool = 124 % 2 === 0;
console.log(bool);

13.  値を一列に格納して扱う
var fruits = ["りんご", "みかん", "バナナ
", "キウイ"];
// Array のプロパティ、メソッドの呼び出し
console.log(fruits.length);
console.log(fruits[0]);
console.log(fruits.join("と"));

14.  値と key と value のペアにして扱う
 index を自由に指定できる配列 (連想配列)
var obj = {
title: "ネットワーク講座",
sub_title: "JavaScript 基礎Ⅰ",
index: 8
};
// title, sub_title, index は obj のプロパティになっている
console.log(obj);
console.log(obj.title);
console.log(obj.sub_title);
console.log(obj.index);

15. プログラムの流れを制御する

16.  比較演算子
 == 等しい
 != 等しくない
 === 厳密に等しい (型も比較対象)
 !== 厳密に等しくない (型も比較対象)
 > より大きい
 >= 以上
 < より小さい
 <= 以下
 論理演算子
 && AND
 || OR
 ! NOT

17.  条件式を満たす場合 (true の場合) に実行される
if (条件式) {
/* 実行されるコード */
}
 例
var n = 55;
if (n % 2 !== 0) {
console.log(n + " は奇数");
}

18.  if の後に使い、条件式を満たさない場合 (false の場合) に実行される
if (条件式) {
/* 条件式が true の場合に実行されるコード */
} else {
/* 条件式が false の場合に実行されるコード */
}
 例
var n = 55 + 1;
if (n % 2 !== 0) {
console.log(n + " は奇数");
} else {
console.log(n + " は偶数");
}

19.  複数の条件で処理を分岐したい場合、次のように書け
る。
if (条件 A) {
// A
} else if (条件 B) {
// B
} else {
// C
}

20.  if, else は条件によって実行するコードが 1 行の場合は中括弧 {} を省略できる
if (条件式) /* 条件式を満たす場合に実行される */
else /* 条件式を満たさない場合に実行される */
 つまり、 else if は次を省略して記述したもの
if (条件 A) {
// A
} else {
if (条件 B) {
// B
} else {
// C
}
}

21.  HTML に書き込む
<script>
/* JavaScript のコード */
</script>
 HTML に読み込む
<script src="file.js"></script>

22.  アンケート
 課題は別途指定