Microsoft PowerPoint - JavaScript.pptx

Size: px

Start display at page:

Download "Microsoft PowerPoint - JavaScript.pptx"

よしじろうやまがた
7 years ago
Views:

1 Ajax や来るべき HTML5 時代に向けて大規模な JavaScript 開発にも耐えられる基礎をおさえる JavaScript をなんらか入門したことのある方を対象山田祥寛汎用的なコア JavaScript の理解を深めることが目的ブラウザオブジェクト Ajax などは扱いませんなるべく考え方を中心に説明するので端折るところもありますが気軽に質問してください習得が容易なスクリプト言語初心者が馴染みやすいオブジェクト指向構文も持ち本格的な開発にも使えるトライ & エラーが簡単なインタプリタ言語動作の遅さも JavaScript エンジンの高速化で改善さまざまな環境で動作する JavaSE 6 Flash(ActionScript) WSH Node.js コア JavaScript すべてのJavaScript 環境で利用可能制御構文関数オブジェクトなどの基本機能組み込みオブジェクト基本機能を備えたオブジェクト Array String Date RegExp 特定の環境 ( たとえばブラウザ上 ) でのみ利用可能な機能ブラウザオブジェクトブラウザ環境で利用可能なオブジェクト Window Navigator Location Screen etc... DOM オブジェクト HTML/XML 操作のためのオブジェクト群 Number Error etc... Ajax オブジェクト Ajax 動作のためのXMLHttpRequest 機能

*/; */ 変数変数の宣言は任意だが必須最低限の規則読みやすいコードのための規則ただし例外もあり ( カウンタ変数など ) 変数名は camelcase 記法クラス名は Pascal

2 <script> タグで囲む src 属性で外部化も可能 <script> タグの記述位置文 (Statement) のルールセミコロンは任意だが必須特に次の文が () の場合などは危険! コメント複数行コメントには要注意 /* var reg = /.*/; */ 変数変数の宣言は任意だが必須最低限の規則読みやすいコードのための規則ただし例外もあり ( カウンタ変数など ) 変数名は camelcase 記法クラス名は Pascal 記法 JavaScript はデータ型に寛容な言語でも本格的な開発にはデータ型の理解は重要参照型 (array object function) 基本型 ( その他 ) リテラル表現データ型に格納できる値そのものまたはその表現方法 JavaScript はリテラルでなんでも表現する言語配列や関数正規表現オブジェクトまで

数値リテラル n 進数指数表現などでも見かけ上の違いだけ文字列リテラルシングルクォートでの囲みが基本配列リテラル連想配列リテラルオブジェクトと連想配列は同じものドット構文とブラケット構文 ( 厳密には等価でない ) 算術演算子文字列 / 数値混在の演算に注意前置演算後置演算で結果が違う

var win = sub_win window; 三項演算子 var chkbox = <input type= checkbox name= chk + (ischecked?

3 数値リテラル n 進数指数表現などでも見かけ上の違いだけ文字列リテラルシングルクォートでの囲みが基本配列リテラル連想配列リテラルオブジェクトと連想配列は同じものドット構文とブラケット構文 ( 厳密には等価でない ) 算術演算子文字列 / 数値混在の演算に注意前置演算後置演算で結果が違う小数点演算の誤差代入演算子参照型の代入はアドレスのコピー比較演算子参照型の比較はアドレスの比較等価演算子と同値演算子 ( 親切はできるだけ排除 ) 論理演算子空文字列 0 NaN null undefined は false 0 や [] {} は true なので注意ショートカット演算 var win = sub_win window; 三項演算子 var chkbox = <input type= checkbox name= chk + (ischecked? ' checked' : '') + ' />'; 優先順位 & 結合則優先順位は明確に複雑な式ではできるだけ丸カッコを使う結合則は直感的に当たり前のことばかりオブジェクトと連想配列は同じものだけどオブジェクトはモノそのもの連想配列はモノの集合体オブジェクトはプロパティとメソッドの集合正確には JavaScript にはメソッドは存在しない組み込みオブジェクトあらかじめ JavaScript で用意されたオブジェクト

ラッパーオブジェクト基本データ型にオブジェクトとしての体裁を与える Object Array String Boolean Number Function JavaScript ではリテラルがそのままオブジェクトになるラッパーオブジェクトは使わない (not 使う必要がない ) var ary = new Array(10); var x = new

join(''); Global オブジェクトグローバル変数関数を管理する便宜的なオブジェクトたとえば parsefloat(x) のようにそのままメソッドを呼び出せる関数の定義方法は 3 つ function 命令 Function コンストラクタ関数リテラル関数定義 / 利用の注意点 return 命令は改行しない関数はデータ型の一種である

4 ラッパーオブジェクト基本データ型にオブジェクトとしての体裁を与える Object Array String Boolean Number Function JavaScript ではリテラルがそのままオブジェクトになるラッパーオブジェクトは使わない (not 使う必要がない ) var ary = new Array(10); var x = new Boolean(false); if (x) { window.alert( true ); } 文字列連結のテクニック + 演算子は使わない var data = []; for (var i = 0; i < items.length; ++i) { data[i] = hogehoge(items[i]); } var str = data.join(''); Global オブジェクトグローバル変数関数を管理する便宜的なオブジェクトたとえば parsefloat(x) のようにそのままメソッドを呼び出せる関数の定義方法は 3 つ function 命令 Function コンストラクタ関数リテラル関数定義 / 利用の注意点 return 命令は改行しない関数はデータ型の一種である function は静的な構造 Function/ 関数リテラルは実行時に評価スコープは 2 種類 ( グローバル & ローカル ) スコープの異なる変数は同名でも別もの変数宣言に var が必須なわけローカル変数の有効範囲は解りにくいできるだけ関数の先頭での宣言が望ましい参照渡しには要注意ブロックスコープは存在しない関数リテラル Function オブジェクトではスコープが異なる

5 JavaScript は引数の省略は自由引数はすべて arguments オブジェクトに格納される arguments オブジェクトの役割引数の個数チェック可変長引数の関数を定義 ( 引数 opt_~ など ) 再帰呼び出し名前付き引数オブジェクトリテラルで引数を渡す高階関数 = 関数を引数戻り値とする関数処理の大まかな枠組みだけを提供たとえば $.eachという命令の例 var data = [1, 2, 4, 8, 16]; function showelement(key, value) { document.writeln(key + ':' + value); } 引数としてインデックス値を受け取る関数 $.each(data, showelement); 匿名関数使い捨ての関数に名前を付けるのは無駄高階関数には匿名関数を使うスコープチェーン Global オブジェクト = グローバル変数関数を管理 Call オブジェクト = ローカル変数を管理クロージャーローカル変数を参照している関数内関数シンプルなオブジェクトのようなもの参考 ) プロトタイプベースのオブジェクト指向プロトタイプ = オブジェクトの元となるオブジェクト縛りの弱いクラス関数オブジェクトがコンストラクタを表す Pascal 記法で命名 (member ではなく Member) this. プロパティ名 = 値でプロパティを初期化 this. プロパティ名 = 関数でいわゆるメソッドを表現メソッドはインスタンスに追加することもできる ( 緩い )

6 コンストラクタによるメソッド追加は無駄が多いインスタンスの数だけメソッドをコピーメソッドは prototype プロパティの配下で宣言するプロトタイプを使うメリットメモリの利用量を節減できるメンバの追加や変更をリアルタイムに認識できるプロトタイプの注意点プロパティをプロトタイプに設定したら? プロパティを削除したらすべてのインスタンスに影響? インスタンス単位でプロパティを無効化するには undefined プロトタイプはオブジェクトリテラルで宣言組み込みオブジェクトのプロトタイプ拡張は NG( 特に Object) Class.method(args, ) の形式で呼び出せるクラスに対して直接メンバーを追加する静的メンバーの注意点静的プロパティは読み取り専用 this キーワードは使わない静的メンバーを定義するわけ名前の競合を防ぐ ( グローバル変数関数は少なく ) 例. jquery のグローバルメンバは $ jquery のみプロトタイプチェーン = 継承のしくみプロトタイプを順番に上位に向かって検索チェーンの終端は Object.prototype 継承関係は差し替えることもできるただしプロトタイプチェーンはインスタンス生成時に固定 JavaScript は名前空間の機能はない静的メンバーを定義する要領で名前空間を定義名前空間をインポートするしくみはないオブジェクト名は常に完全修飾名で表す必要がある

ベースのコマンドラインツールテストスイートでまとめも可余計なコメントや空白を除去しサイズを小さく Microsoft Ajax Minifier など難読化ツールほぼ圧縮と同じ意味

7 JavaScript の世界でもテストは必須 JsUnit = メソッドや関数の動作をチェックテストケースに必要なモノ setup teardown メソッド ( 初期化と後始末 ) testxxxxx メソッド ( テストメソッド ) クラスやメソッドの仕様を説明したコメントあらかじめ決められたルールに則ったコメントスタンドアロンタグインラインタグドキュメント生成ツール JsDoc Perl ベースのコマンドラインツールテストスイートでまとめも可余計なコメントや空白を除去しサイズを小さく Microsoft Ajax Minifier など難読化ツールほぼ圧縮と同じ意味変数名を短いものに文字列をエンコード処理ただし小さなスクリプトではサイズが大きくなることも読みやすいコードは自分のためでもあるコーディング規約 = 読みやすいコードのための指針安全なコードを記述するためのノウハウでもある

8 Q&A 掲示板教科書に関する質問はこちらへ

Java Scriptプログラミング入門 3.6～茨城大学工学部情報工学科 08T4018Y 小幡智裕

Java Scriptプログラミング入門 3.6～茨城大学工学部情報工学科 08T4018Y 小幡智裕 Java Script プログラミング入門 3-6~3-7 茨城大学工学部情報工学科 08T4018Y 小幡智裕 3-6 組み込み関数組み込み関数とは JavaScript の内部にあらかじめ用意されている関数のことユーザ定義の関数と同様に関数名のみで呼び出すことができる 3-6-1 文字列を式として評価する関数 eval() 関数引数 : string 式として評価する文字列戻り値 :