gorogoronyan FC2

JavaScript 次の一歩 (1)

JavaScript はじめの一歩 (3) からの続き。

プログラムを適当なグループでまとめる

プログラムの規模が大きくなると 適当な単位でグループ化する話が出てきます。

繰り返し使う処理を外部 js ファイルにする

よく使う処理を外部の js ファイルにまとめ、 毎回書かなくて済むようにします。 HTML のスタイルを CSS ファイルに分離する話と同じ考え方です。
外部 js ファイルに分離する

クラス (class) でプログラムを記述する

ES2015 のクラス

ES2015 では class や constructor などの予約語を使ってクラスを記述します。 Java や C# に近い書き方をします。 クラスの中にある関数は メソッド と呼びます。

● ES2015 のクラスの書き方

class MyClass {

    //コンストラクタ
    constructor(){
        this.name = "ES2015のクラス";
    }

    //メソッド
    method1(){
        console.log("name=" + this.name);
    }
}

参考で function や prototype を使ったクラスの書き方は IE 時代までの昔話です。現在では使用しません。

グラフの座標変換のサンプル

TestJS_timer_div_sin01.html
div で sin 関数のグラフを描く。
JavaScript タイマー処理, 座標変換の処理を入れる

ボールが跳ねるサンプル

下に 3つのサンプルを用意しました。 どれも動作はほぼ同じプログラムですが、書き方が異なっています。

タイマー処理で canvasに描いたボールを動かします。
canvas タグ
JavaScript タイマー処理
  1. TestJS_canvas_ball2.html
    初歩的な書き方で書いたサンプル。 グローバル変数とグローバル関数が多く並ぶプログラム。 クラス (class) やオブジェクトは使用していません。
    規模の大きなプログラムになると、 グローバルの変数や関数を大量に並べるとプログラムを管理しにくくなるので、 適当な部品の単位でまとめます。下のサンプルに続く。
  2. TestJS_canvas_ball2_ES2015.html
    ボールのクラスとアプリケーションのクラスにまとめてあります。 ボールは class で記述し、ボールのオブジェクトを作って操作します。 こちらは IE11 では動作しません。現代風の書き方です
    JavaScript: クラス (class) (1)
  3. (参考:昔風) TestJS_canvas_ball2_class.html
    昔のサンプル。クラスを function や prototype で記述。 こちらは 2010年代の IE 時代までの話で、現在では使いません。
    JavaScript: クラスの書き方 (IE時代の昔話)

いろいろ

async/await, Promise の処理 (2023/07)

はじめの一歩というよりも大分濃い目の話になります。 不慣れな間は混乱することも多い話です。

async/await や Promise の処理は、 処理を実行開始してから処理結果を受け取るまでの間に遅延があり、 待機状態のある処理で使います。 例えばファイルのダウンロード、ファイルの読み込み、 モーダルダイアログなどがあります。

メソッドを連想配列や 2重配列に並べる (2023/11)

if ... else if の分岐が大量に現れる処理では if ... else if を使用せず 配列や 2重配列にメソッドや関数を並べて処理します。 コマンドインターフェイスの処理やステートマシンの処理で使います。

連想配列に登録する

map = {
	コマンド名 : コマンドに対応するメソッドやコマンドオブジェクト,
	...
}

GUI アプリケーションでも同じ処理を 1) マウス操作、 2) キーボードショートカットで操作、 3) コマンド入力で操作、 4) コマンドを記録したマクロテキストで自動処理などさまざまな方法で呼び出します。 ということで複数の経路からの処理の呼び出しをコマンドインターフェイスで集約し、 アプリケーション内部ではコマンド処理に置き換えます。 コマンド型の処理は編集履歴・操作履歴の保存・再生などでも使用します。

シリアライズの話とも関係します。 現在だと JSON でデータや履歴を記録するような話になると思います。

2重配列に登録する

制御系の処理などで使用します。ステート・イベントの 2重配列のテーブルにメソッドやコマンドオブジェクトを並べて処理します (ステートマシン)。

table = [
	//状態1の配列
	[ state1_event1, state1_event2, .... ],
	//状態2の配列
	[ state2_event1, state2_event2, .... ],
	...
]

関連

セキュリティ関連

これ重要です・・・。

自分のサイトとは異なるサイトに script src= などでむやみにリンクを張らないこと。 

・外部ホストの js ファイルにむやみにリンクしないこと。
  必ず js ファイルをコピーして、自分のホストに置くこと。
  ライセンスが絡んでコピー使用できない場合は、むやみに使わない。

1)素性の知れない怪しげな js ファイルにリンクしない。
  セキュリティ上の問題が起こる可能性があります。

2)管理元やIPアドレスも知らないようなサイトの js ファイルにリンク
　しない。

3)よく知られている js ファイルでも、クッキーなどプライバシーの
　問題が出る可能性もあります。

コロナ対策じゃないけど、変な三密にならないように気をつけましょう・・・

使うときに注意の必要な関数やプロパティ

セットする文字列の内容によっては不正な JavaScript 実行の原因になります。 掲示板などでユーザーが入力したテキストや 出典不明のデータファイルの処理にはそのままでは使えません。

node.js

関連

inserted by FC2 system