第09回Web講座

Javascript　演習

Transcript

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