後期第二回ネットワーク講座

Transcript

1. ネットワークチーム 後期第二回講座資料 JavaScript復習
2. 目次 • JavaScriptの復習 • koa.jsの導入とテスト
3. 関数の宣言 「関数」とは、予め指定された一定の処理 を行い、結果を返す命令群。 引数とは、関数が処理を行うために参照する値であり、必要ない場 合省略できる。逆に、カンマで区切って複数指定することも出来る。 function 関数名(引数) { 処理; return 返り値; ｝ var 関数名 = function(引数) { 処理; return 返り値; ｝;
4. 変数の宣言 「変数」とは、プログラム内で処理に使う何ら かの値（数値、文字列など）を保持するものである。 変数の宣言は、以下の通り記述して行う。 var 変数名; var 変数１, 変数２; var 変数名 = 値;
5. データ型 数値や文字列など、プログラム内で扱うデータの種類のこと。 データ型は、以下のもの等が存在する。 データ型名 対応する値 数値型 数値（実数、8進数、16 進数、浮動小数点数） 文字列型 文字列（「”」、「’」で 囲んだ値） 論理型 true/false データ型名 対応する値 配列型 複数の値を入れた変数 オブジェクト型 キーと値を対応付けた連 想配列 null 何もないことを表す値 undefined 未定義の値
6. 配列（Array） 格納した順番に応じて、値に「添え字」と呼ばれる数値を対応させ て保持する変数。一つの変数に対して複数の値を格納できる。 値を呼び出す場合は “変数名[添え字]” のように記述する。N個の値を 格納した場合、添え字は「0」から始まり「N-１」までである。 以下のように宣言する。 この場合は値を呼び出す際「変数[0]」と指定すると値1、「変数[3]」 と指定すると値4である。 var 変数 = [値1, 値2, 値3, 値4];
7. 連想配列（オブジェクト/Object） 配列における添え字の代わりに「キー（key）」と呼ばれるものと対 応付けて値を保持する変数。添え字は数値のみであるが、キーは文 字列も指定することが出来る。 以下のように宣言する。値1を呼び出す場合、「変数.キー1」と記述 する。 var 変数 = ｛ キー1 : 値1, キー2 : 値2 };
8. 変数の型 JavaScriptの変数には、「型」は存在しない。 よって、宣言した変数には数値でも文字列でも配列でも、なんでも 入れることが出来る。 しかし、データそのものには「型」が存在するため、その変数の中 に入っている値のデータ型について、注意が必要である。 （後述する四則演算や条件式を書く際に重要となる）
9. 条件式 それぞれ以下の場合に論理値のtrueを返す。 1. 「a == b」 ･･･ aとbの値が等しい場合 2. 「a != b」 ･･･ aとbの値が異なる場合 3. 「a === b」 ･･･ aとbの値とデータ型が共に等しい場合 4. 「a !== b」 ･･･ aとbの値とデータ型が共に異なる場合 基本的に条件式は「a === b」「a !== b」を使う。
10. 条件式 以下の場合に論理値のtrueを返す。 • 「a <= b」 ･･･ aがb以下 • 「a >= b」 ･･･ aがb以上 • 「A && B」 ･･･ 論理値A,Bが共にtrue • 「A || B」 ･･･ 論理値A,Bのどちらかがtrue • 「!A」 ･･･ 論理値Aがfalse（Aの値の反対を返す）
11. 関数の呼び出し 呼び出す際は、以下の通り記述する。 ※引数や返り値（結果）が無い関数もある。 引数が無い場合、引数は何も入力せず、括弧内はカラでよい。 関数名(引数); var a = 関数名(引数);
12. メソッド 呼び出し方が違い、オブジェクトに対して作用する関数である。 呼び出す際は、以下のように記述する。 オブジェクト.メソッド名（引数）;
13. getElementsBy-メソッド document（HTMLファイル上）から、引数に指定した検索条件を満 たす要素を（主に配列として）取得するメソッド。 • .getElementsByClassName(クラス名); • .getElementsByName(name属性値); • .getElementsByTagName(要素名) ; • .getElementById(ID名); ･･･このメソッドのみ、配列ではなく一意の オブジェクトとして要素を取得する。
14. getElementsBy-メソッド getElementsByClassNameメソッドで要素を取得したvideos変数は配 列となっているが、getElementByIdメソッドで要素を取得したcanvas 変数は単なるオブジェクトである。
15. .addEventListenerメソッド ターゲットに対して特定のイベント（操作）があったとき、指定し た関数を実行するというメソッド。 以下のように記述する。 ターゲット.メソッド名（“イベントタイプ”, 関数名）;
16. 算術演算子 加算：+ (プラス） 減算：- （マイナス） 乗算：* （アスタリスク） 除算：/（スラッシュ） 剰余：%（パーセント） ※x % 2 ⇒ xを2で割った余り 通常の計算式と同様に、（）内＞乗除＞加減 の順に計算する。 この他の複雑な計算を行う場合、Mathオブジェクト内のプロパティ・ メソッドを使用する。
17. データ型と算術演算子 算術演算子は、前後の値のデータ型に応じて処理が変わる。 • 全て数値型（論理型）の場合、通常の計算処理を行う • 文字列化した数値が含まれる場合、 • +演算子は加算ではなく結合処理 • その他は文字列から数値型に戻して計算処理を行う • 上記以外の場合、（通常の文字列・配列などの場合） • +演算子は結合処理 • その他はNaN（Not a Number)という特殊な値を返す
18. データ型と算術演算子
19. プリミティブ型 データ型は2種類に大別することが出来る。 1. プリミティブ型（数値型、文字列型、論理型など） 一つの値のみを持ち、他の値やデータを持たない。 2. オブジェクト型（配列型、オブジェクト型、関数型など） プリミティブ型以外。
20. 型変換 • 文字列への変換 • 文字列への変換その2 • 数値への変換 • 数値への変換その2 • 文字列→配列 • 配列→文字列 var num = Number(値); parseInt(値); var str = String(値); num.toString(); var arr = “string”.split(“i”); arr.join(“i”);
21. consoleオブジェクト コンソールに何らかの出力を行う機能をまとめたオブジェクト。 主として変数の値の変化を見るためなど、デバッグに使用する。 • console.log( ) … ()内の内容を表示 • console.error( ) … 〃 エラーとして表示 • console.info( ) … 〃 強調して表示 • console.table( ) … ()内の配列・オブジェクトをテーブル形式で表示
22. 復習ここまで
23. koa.jsの導入 • 作業用フォルダでコマンドプロンプトを開き、 以下のコマンドを実行する npm install koa
24. ①
25. ②
26. ③ npm install koa
27. koa.js • express.js の後継アプリケーションフレームワーク • 大きな特徴として、「ジェネレーター」という機能を使える • 作業用フォルダ内に新たに ”koa_test.js” というファイルを作成 次ページの通り記述する
28. koa_test.js
29. 実行 • コマンドプロンプト上で ”node koa_test.js” と入力し実行 • ブラウザで http://localhost:3000 を開くと「Hello koa.js」を表示