kainobi2

2017年9月6日水曜日

jQuery promise と deferred の利用例

jQuery promise と deferred の簡単な利用例です。このままコピー & ペーストで動作します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
    <input id="btn1" type="button" value="click me"/>

    <script>
        var task1 = function() {
            var dfd = $.Deferred();
            setTimeout(function() {
                console.log("１つ目の処理");
                dfd.resolve();
            }, 2000);
            return dfd.promise();
        };

        var task2 = function(){
            console.log("２つ目の処理");
        }

        $(function() {
            $('#btn1').on('click', function() {

                // promise を返す関数の後に、then や done で次に実行したい関数をつなげる
                task1().then(task2);
                
                //こういう書き方が多いかも
                // var promise = task1();
                // promise.then(task2);
            });
        });
    </script>
</body>
</html>

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>

2017年7月29日土曜日

行列の乗算

行列の乗算（掛け算）の備忘録です。

行列が２つ、下記のようにあったとします。

行列１：
a11 a12
a21 a22
a31 a32

行列２：
x11 x12 x13
x21 x22 x23

これらをかけると、結果は３行 x ３列の行列になります。
結果として得られる階の３行は、行列１からきています。３列は同様に、行列２からきています。

解：
a11x11+a12x21 a11x12+a12x22 a11x13+a12x23
a21x11+a22x21 a21x12+a22x22 a21x13+a22x23
a31x11+a32x21 a31x12+a32x22 a31x13+a32x23

2017年7月17日月曜日

クラウドコンピューティングにおける仮想マシンの構成

クラウドコンピューティングにおいて、仮想マシンの構成は次の３つの階層に分類される。

・仮想マシン
・OS / ミドルウェア
・アプリケーション

仮想マシンはハードウェアに相当する。ミドルウェアは、OS とアプリケーションの仲介役として、OS の機能を拡張するプログラム群である。

コンピュータの５大装置

コンピュータの５大装置は次の５つの分類がある。

制御装置
演算装置
記憶装置
入力装置
出力装置

１の制御装置と２の演算装置は、主にプロセッサーと呼ばれる装置で構成されている。
プロセッサーは CPU、GPU、DSP がある。

３の記憶装置には、主記憶装置（＝RAM、揮発性）と補助記憶装置（＝不揮発性）がある。

４の入力装置には、キーボード、マウス、センサーなどがある。

５の出力装置には、ディスプレイ、スピーカー、プリンターなどがある。

OSI 参照モデルと TCP/IP の対応表

OSI 参照モデルと TCP/IP の対応表です。

TCP/IP の第４層、アプリケーション層は、OSI 参照モデルの第４層～第７層までに対応している。
TCP/IP の第１層、ネットワークインターフェース層は、OSI 参照モデルの第１層～第２層に対応している。

2017年7月16日日曜日

線形探索（リニアサーチ）

線形探索（リニアサーチ）は、配列の要素に対して順次比較して対象のデータを検索する。１つずつ順次比較するために、配列の添字を１つずつ増やしていく。

配列のデータに重複がなければ、対象のデータを見つけ出した時点で探索を終えることができる。

配列のデータに重複がある場合、配列の全データに対して探索を行う。

線形探索に要する実行時間は O(n) となる。