JavaScript

| Node.js | TypeScript | Angular | AngularJS | React | Dojo | DOM | jQuery | prototype.js | 初めて |

link

モダンJavaScript

変数宣言

• const : 再代入不可
• let : 変数宣言、ブロックスコープ、同名変数監視
• var : 変数宣言

リテラル表現

テンプレート文字列

• 文字列をバッククォートでくくる
• 途中の改行も可

 const name = 'Yagi';
 const message = `Hello. ${name}`;

アロー関数=

• 関数リテラルをより簡単にあらわす

(arg,・・・) => {statement}

• 以下の2つは意味的にはほぼ等価

function fun(arg) {
    return "x";
}

const fun = (arg) => {
    return "x"; 
}

• 関数本体が１文ならブロックを省略できる
• 式の値がそのまま戻り値となるのでreturnも省略できる

const fun = (arg) => "x";

• 引数が1つの場合、カッコも省略できる

const fun = arg = > "x";

• 引数がない場合、カッコは省略できない

const fun = () => "x";

オブジェクトリテラルの簡易構文

変数と同名のプロパティ

• プロパティと変数名が等しい場合は、値の指定を省略できる

const name = 'yagi'
const age = 52;

const me = { name, age };

メソッドの簡易構文

• メソッドも簡易に表せる。
• greet : function() {} -> greet() {}

const person = {
    name : 'yagi',
    greet() {
        "Hello";
    }
}

プロパティ名の動的生成(算出プロパティ名)

• プロパティ名をブラケットで括ることで値から生成できる

let i = 0;
const hoge = {
    [`no${i++}`] : '#1',
    [`no${i++}`] : '#2',
    [`no${i++}`] : '#3'
}

分割代入

• 配列

const list = [1,2,3];
const [x,y,z] = list;

// 明示されない値を取得には...を使う
const [x, ...etc] = list;

• オブジェクト

const me = {
    name = 'yagi';
    addr = 'aichi';
    age = 52;
};

const { name, addr, note = 'default value' } = me; 
// 別名 name -> myname
const { name: myname } = me;
// 明示されない値を取得には...を使う
const { name, ...etc } = me;

• 入れ子オブジェクト

const me = {
    name : 'yagi';
    addr : {
        pref : 'aichi',
        city: 'asahi'
    }
};

const { addr : { city } } = me;
// city = 'asahi'

引数規定値、可変長引数

• 引数規定値

function fun(a = 1, b = 1, c = 1) {}

// 以下も可
function fun (a = 1, b = a, c = a ) {}

• 可変長引数:引数の前に...を付与することで配列として取得できる

function fun(...nums) {
     console.log(nums.length);   
}

fun(1,2,3); // print 3

• スプレッド構文による引数の展開

console.log(...[1,2.3]);  // 1,2,3

• 分割代入によるオブジェクト引数の分解

const me = { name: 'yagi', age: 52 };
const f = ({name, age}) => console.log(`${name}`);
f(me); // yagi

nullチェック

• Optional Chaining演算子(?.)

let str = null;
str?.substring(1); // undefined => 通常Error

• null合体演算子

let str = null;
str ?? 'default value';  // default value

モジュール

• JavaScriptのモジュールは一つのファイルとしてまとめるのが基本
• モジュール配下のメンバーは規定でモジュール外部には非公開
• モジュール外部からアクセスするには、exportキーワードを付与する必要がある

定義済みモジュールへのアクセス

<script type="module" src="mod.js"></script>

• import { member, ... } from module

import { func1, func2 } from './mod.js';

• nodeコマンドから実行の場合、package.jsonで明示的にモジュール機能を有効化

{
    "type": "module"
}

• その他

import { func1 as f1 } form './mod.js'; // 別名付与
import * as md from './mod.js'; // as でモジュール別名を定義し全体をimport
import f1 from './mod.js'; // export default (モジュール1つにつき一つだけ設定できる規定のexport)をimport
import f1 {f2, f3} from './mod.js'; // 規定とその他をまとめてimport

• 動的import

指定されたモジュールを非同期にimportし出来次第thenコールバックを実行

import('./mod.js').then)(md => {
    md.f1();
});

リンク

Promiseベースのhttpクライアント（axios)

• https://github.com/axios/axios

リファレンス

• JavaScript Primer
• Mozilla Developer Center JavaScript
• MSDN JScript

DHTML

• MSDN DHTML
• HTML and DHTML Reference

入門

初めてのJavaScript

• 初めてのJavaScript

JavaScript メモ

• JavaScript メモ

DOM

• DOM

jQuery

• jQuery

Tips

ウィンドウ操作

• ブラウザのタイトルを変更する
• showModalDialog で開いたダイアログの画面遷移
• 画面が閉じられる時にメッセージを表示する
• 自動的にリダイレクトする
• Windowのクライアント領域のサイズを取得
• Windowが未だ開いているか
• 確認ダイアログなしでWindowを閉じる
• デスクトップ領域のサイズを取得

画面要素

• 行列を固定したテーブル
• 動的にコントロールを扱うとき
• オブジェクトのメンバーを列挙
• F5 キー押下を無効にする
• イベントハンドラのアタッチ
• TABLEに行を追加
• テキストエリアの内容をクリップボードにコピー
• SELECT BOX の OnChange をキャンセルする

画像

• 画像の切替

スタイル

• 動的にスタイルクラスを変更する
• 動的にスタイルシートの情報を取得する
• インラインスタイルを無効にする

文字列操作

• シングルクォートのエスケープ
• 画面に入力された文字コードを調べる
• ゼロサプレス 正規表現
• 16進数文字コードを取得
• 文字化けの対処(URLエンコード)
• [JavaScript UTF-8文字列のバイト数を得る [UTF-8文字列のバイト数を得る]
• 全角半角変換

正規表現

• JavaScriptでの正規表現

配列

• 配列
• 連想配列(Map)のキーを取り出す
• 配列の要素を削除
• 配列でなければ配列に、配列ならそのまま（もしくは追加)

オブジェクト

• オブジェクトが関数かどうか調べる
• オブジェクトのプロパティ確認

トラブル

• 開放されたスクリプトからコードを実行できません
• IE6 のdocument.body.clientHeightの挙動がおかしい
• IE Input type=file でsubmitできない
• ブラウザ用デバッグツール

Ajax

• HTMLとスクリプトを分離
• prototype.js
• Dojo

その他

• Script実行順を制御
• クロージャ
• Bookmarklet
• JSEclipse
• ECMA Script
• Javascript 再入門