kainobi2: 8月 2017

2017年8月23日水曜日

Visual Studio Code と node.js で JavaScript をデバッグ実行する方法

１．node.js をインストールします。

２．Visual Studio Code をインストールします。

３．任意のフォルダにデバッグ対象となる js ファイルを生成します。
（ここでは仮に app.js とします。）

４．Visual Studio Code の「デバッグ」ボタンを押して、「launch.json を開く」ボタンを押します。

５．launch.json の configurations - program に "${workspaceRoot}/app.js" と記述します。

{
    // Use IntelliSense to learn about possible Node.js debug attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceRoot}/app.js"
        }
    ]
}

６．Visual Studio Code で app.js を開き、ブレークポイントを設定、もしくは app.js 内に debugger キーワードを記述します。

７．「Launch Program」ボタンをクリックするとデバッグが開始します。

実行結果：

2017年8月13日日曜日

JavaScript で input 要素の focus イベントを登録する

JavaScript で input 要素の focus イベントを登録するスニペットです。ポイントは addEventListener の第三引数の bool 値です。これは、イベントをキャプチャするタイミングを決定する値で、デフォルトで false（＝バブリングフェーズ）になっています。focus イベントはキャプチャフェーズで発生するようですので、true を指定します。

document.addEventListener("focus", function (args) {
    debugger;
}, true);

2017年8月12日土曜日

TypeScript input 要素の入力値を div 要素に反映する

タイトルの通り、input 要素に入力された値を div 要素にも表示する例です。

入力要素：input (id: titleInput, contentInput)
反映対象：div(id: titleArea, contentArea)

TypeScript では、input 要素を HTMLInputElement にキャストすることで value 属性にアクセスすることができます。下の keyup イベントで引数 args から target（input 要素）にアクセスし、この target を HTMLInputElement にキャストしています。

index.ts

var dataModel: DataModel;

class DataModel{

    private _title: string;
    get Title(): string {
        return this._title;
    }

    set Title(newTitle: string) {
        this._title = newTitle;

        //notification to UI element
        var elem: HTMLElement = document.getElementById(this._titleSelector);
        if (elem !== undefined && elem.tagName == "DIV") {
            elem.textContent = this._title;
        }
    }

    private _titleSelector: string;
    get TitleSelector(): string {
        return this._titleSelector;
    }

    set TitleSelector(titleSelector: string) {
        this._titleSelector = titleSelector;
    }

    constructor() {
    }
}

document.addEventListener("DOMContentLoaded", function () {
    dataModel = new DataModel();
});

document.addEventListener("focus", function (args) {
    var target: HTMLInputElement = <HTMLInputElement>args.target;
    if (target !== undefined && target.id !== "") {
        var placement: any = target.getAttribute("data-placement");
        dataModel.TitleSelector = target.getAttribute("data-placement");
    }
}, true);

document.addEventListener("keyup", function (args) {
    var target: HTMLInputElement = <HTMLInputElement>args.target;
    if (target !== undefined && target.id !== "") {
        dataModel.Title = target.value; // TypeScript では、オブジェクトを HTMLInputElement にキャスト後、value 属性にアクセスすることができる。
    }
});

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="index.js"></script>
</head>
<body>
    <input type="text" id="titleInput" data-placement="titleArea" />
    <div id="titleArea"></div>

    <input type="text" id="contentInput" data-placement="contentArea" />
    <div id="contentArea"></div>
</body>
</html>