第九回ネットワーク講座

Transcript

1. 第九回ネットワーク チーム講座資料 JavaScript
2. 概要 • 前回の復習 • 算術演算子について • 値渡しと参照渡し • JavaScriptにおける型変換 • DOMについて • consoleオブジェクトについて
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. 関数の呼び出し 呼び出す際は、以下の通り記述する。 ※引数や返り値（結果）が無い関数もある。 引数が無い場合、引数は何も入力せず、括弧内はカラでよい。 関数名(引数);
12. メソッド 呼び出し方が違い、オブジェクトに対して作用する関数である。 呼び出す際は、以下のように記述する。 オブジェクト.メソッド名（引数）;
13. getElementsBy-メソッド document（HTMLファイル上）から、引数に指定した検索条件を満 たす要素を（主に配列として）取得するメソッド。 • .getElementsByClassName(クラス名); • .getElementsByName(name属性値); • .getElementsByTagName(要素名) ; • .getElementById(ID名); ･･･このメソッドのみ、配列ではなく一意の オブジェクトとして要素を取得する。
14. getElementsBy-メソッド getElementsByClassNameメソッドで要素を取得したvideos変数は配 列となっているが、getElementByIdメソッドで要素を取得したcanvas 変数は単なるオブジェクトである。
15. .addEventListenerメソッド ターゲットに対して特定のイベント（操作）があったとき、指定し た関数を実行するというメソッド。 以下のように記述する。 ターゲット.メソッド名（“イベントタイプ”, 関数名）;
16. 復習ここまで
17. 算術演算子 加算：+ (プラス） 減算：- （マイナス） 乗算：* （アスタリスク） 除算：/（スラッシュ） 剰余：%（パーセント） ※x % 2 ⇒ xを2で割った余り 通常の計算式と同様に、（）内＞乗除＞加減 の順に計算する。 この他の複雑な計算を行う場合、Mathオブジェクト内のプロパティ・ メソッドを使用する。
18. データ型と算術演算子 算術演算子は、前後の値のデータ型に応じて処理が変わる。 • 全て数値型（論理型）の場合、通常の計算処理を行う • 文字列化した数値が含まれる場合、 • +演算子は加算ではなく結合処理 • その他は文字列から数値型に戻して計算処理を行う • 上記以外の場合、（通常の文字列・配列などの場合） • +演算子は結合処理 • その他はNaN（Not a Number)という特殊な値を返す
19. データ型と算術演算子
20. プリミティブ型 データ型は2種類に大別することが出来る。 1. プリミティブ型（数値型、文字列型、論理型など） 一つの値のみを持ち、他の値やデータを持たない。 2. オブジェクト型（配列型、オブジェクト型、関数型など） プリミティブ型以外。
21. 値渡しと参照渡し 変数 a を他の変数に代入すると、a に入っているデータの型に応じて 異なる処理を行う。 1. 値渡し a のデータ型がプリミティブ型（または正規表現型）である時 2. 参照渡し a のデータ型がオブジェクト型（正規表現型以外）である時
22. 実践 JavaScriptコンソールを使って、以下の通り入力してみよう。
23. 値渡し このように、変数に入った値そのものを他の変数に代入すること を値渡しという。 何らかの処理を経てa,bの内一方の値が変わった後も、もう一方は 元々の値を保持することが出来る。
24. 実践
25. 解説 以下のように変数を宣言したとき、 変数 a にオブジェクトそのものが入るのではなく、メモリ上にオ ブジェクトを作成して、a にはそのオブジェクトのメモリ上の場所を 示す値（＝参照）を入れているだけ。 var a = {num: 100}
26. 解説 「var a = {num: 100};」と宣言したとき、メモリ内にオブジェクトA が作成された後、aにはメモリ内のオブジェクトAの参照が入る。 メモリ オブジェクトA {num: 100}; var a = メモリ.オブジェクトA オブジェクトA {num: 100};
27. 解説 この状態で「var b = a;」を宣言すると、aに入っているのは「オブ ジェクトAの参照」であってオブジェクト本体ではないため、bにも 同様に参照が入る。 メモリ オブジェクトA {num: 100}; var a = メモリ.オブジェクトA var b = メモリ.オブジェクトA var b = a; オブジェクトA {num: 100};
28. 解説 ここで、「a.str = “network”;」を実行した場合、aの参照先であるオ ブジェクトAに対して「キー”str”、値”network”」の要素が追加される。 メモリ オブジェクトA {num: 100, str:”network”}; var a = メモリ.オブジェクトA var b = メモリ.オブジェクトA 追加
29. 参照渡し 変数bは何ら変更していないが、変数bが参照しているオブジェクトA が変更されたため、bの値も変更されたように見える。 メモリ オブジェクトA {num: 100, str:”network”}; var a = メモリ.オブジェクトA var b = メモリ.オブジェクトA 参照
30. 参照渡し オブジェクト型の変数 a を他の変数 b に代入したとき、「一方の オブジェクトを変更したとき、もう一方も同じ変更を行う」かのよ うに見えるが、実際には「オブジェクト型変数 a に入っている参照 をbに代入しており、a も b も同じオブジェクトを参照している」。 この仕組みを「参照渡し」という。
31. 型変換 • 文字列への変換 • 文字列への変換その2 • 数値への変換 • 数値への変換その2 • 文字列→配列 • 配列→文字列 var num = Number(値); parseInt(値); var str = String(値); num.toString(); var arr = “string”.split(“i”); arr.join(“i”);
32. .toStringメソッド 何らかの値（主に数値）を文字列化する。nullとundefined以外の データ型の変数に使用できる。 引数として指定した数値を基数とした数に変換した後、文字列化す る。引数を指定しない場合、10進数として解釈する。 num.toString(基数);
33. .toStringメソッド
34. parseInt関数 文字列化された数値を数値化する。（float数の時はparseFloat関数） 第一引数に変換したい文字列と、第二引数に文字列を数値に変換す る際の基数を指定する。 第二引数を省略した場合、基本的には10進数として、第一引数が0か ら始まる場合は8進数、0xから始まる場合は16進数と解釈する。 parseInt(文字列, 基数);
35. parseInt関数
36. 比較
37. parseFloat関数 返す値がfloat数の時は、parseInt関数の代わりにparseFloat関数を使 用する。 使い方はほぼ一緒だが、第二引数は存在しない。 parseFloat(文字列);
38. .splitメソッド 指定した区切り文字で文字列を分割し、配列化する。 引数として区切り文字を指定して使用する。カンマ区切りのデータ 群などを分割する際などに使用する var arr = 文字列.split(区切り文字);
39. .joinメソッド 配列に入っているすべての要素を繋いで文字列化する。 各要素を区切る文字列を引数として指定する。引数を省略した場合、 区切り文字は自動的にカンマ（ , ）となる。 arr.join(区切り文字);
40. split & join
41. DOM （Document Object Model) プログラムにおいてHTMLを扱うためのインタフェース。 読み込んだHTML文書をDOMツリーと呼ばれる階層構造を持つデー タに変換して取得・編集を行っており、DOMツリーを構成する要素 をDOMノードと呼ぶ。 （getElementsBy-メソッドで取得できるのはこのDOMノードの一種 であるHTMLElementである）
42. consoleオブジェクト コンソールに何らかの出力を行う機能をまとめたオブジェクト。 主として変数の値の変化を見るためなど、デバッグに使用する。 • console.log( ) … ()内の内容を表示 • console.error( ) … 〃 エラーとして表示 • console.info( ) … 〃 強調して表示 • console.table( ) … ()内の配列・オブジェクトをテーブル形式で表示
43. 変数のスコープ 変数には、その宣言の仕方によって有効範囲が異なる。 それを変数のスコープといい、以下の2種類が存在する。 1. グローバル変数…varをつけずに宣言した場合 プログラム全体から参照することが出来る。 2. ローカル変数…varをつけて宣言した場合 宣言した関数の中でだけ参照することが出来る。 ※グローバル変数は基本的に使用しないので変数の宣言時は必ず「var」をつける
44. おしまい 次回はJavaScriptその3です