Node.js インストール

Node.js の公式サイトにアクセスします。

Node.js
http://nodejs.org/


Node.js のダウンロード


INSTALL ボタンをクリックするとインストーラーをダウンロード することができます。


インストーラーのダウンロードが完了したら、インストーラーを実行します。


設定はデフォルトのままどんどん進めていきます。





インストールの完了

C# DataTable の作成

DataTable は列と行を持つテーブルデータを扱う時に使われるオブジェクトです。

// 主キーとなる列を生成
DataColumn[] PrimaryColumn = new DataColumn[1];
 
// DataTable を生成
DataTable table = new DataTable();
 
// ID 列を主キーとして生成
PrimaryColumn[0] = table.Columns.Add("ID", typeof(int));
 
// その他列の生成
table.Columns.Add("FirstName", typeof(string));
table.Columns.Add("Age", typeof(int));
table.Columns.Add("City", typeof(string));
table.Rows.Add(1, "John", 35, "New York");
table.Rows.Add(2, "Murray", 47, "Los Angels");
table.Rows.Add(3, "Cindy", 26, "Minnesota");
table.PrimaryKey = PrimaryColumn;
 
// データの出力
for (int i = 0; i < table.Rows.Count; i++)
{
    Debug.WriteLine(string.Join(",", table.Rows[i].ItemArray));
}

上記実装例にある主キーは、DataTable に対してデータ更新を行う場合に必要になります。
更新処理を行わない DataTable では省略することができますが、将来的に更新処理が発生する可能性も考慮して予め用意しておくのがいいのではないかと思います。

関連記事：
DataTable 行のセル値をキー指定で取得

JavaScript プロパティの追加と削除

JavaScript オブジェクトでのプロパティの追加と削除方法です。

            // 配列の初期化
            var arry = {};

            // 配列にプロパティを追加
            arry["prop1"] = { "name": "val1", "age": 30 };
            arry["prop2"] = { "name": "val3", "age": 25 };

            // プロパティの削除
            delete arry.prop1;
            // もしくは
            delete arry['prop1'];

MDN - delete
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/delete

for 属性によるラベルとコントロールの関連付け

html5 ではラベルの for 属性を利用してコントロールとの関連付けを行うことができます。関連付けを行ったラベルをクリックすると、コントロールにフォーカスしたり、選択することができるようになります。

    ラベルの"Text1"をクリックするとテキストボックスにフォーカス
    <label for="Text1">Text1</label>
    <input id="Text1" type="text" />

    テキストのRadio～をクリックするとラジオボタンにチェック
    <input id="Radio1" type="radio" name="group1" /><label for="Radio1">Radio1</label>
    <input id="Radio2" type="radio" name="group1" /><label for="Radio2">Radio2</label>
    <input id="Radio3" type="radio" name="group1" /><label for="Radio3">Radio3</label>

ラベルの"Text1"をクリックするとテキストボックスにフォーカス

Text1



テキスト部分（Radio～）をクリックするとラジオボタンにチェック

Radio1
Radio2
Radio3

jQuery table に含まれている要素を取得する

今回は jQuery で table に含まれている要素を取得してみます。

table の構造はセルであれば、table > tr > td と階層化しています。このため jQuery でこの階層を辿るには、$("table tr td 要素") のように記述します。
例えばセルの中に配置されているボタンを取得する場合、以下のようにセレクタを記述します。

$(function () {
    var buttons = $("table tr td input:button");
});

<table>
    <tr>
        <td>
            <input id="Button1" type="button" value="button" />
        </td>
        <td>
            <input id="Button2" type="button" value="button" />
        </td>
        <td>
            <input id="Button3" type="button" value="button" />
        </td>
    </tr>
    <tr>
        <td>
            <input id="Button4" type="button" value="button" />
        </td>
        <td>
            <input id="Button5" type="button" value="button" />
        </td>
        <td>
            <input id="Button6" type="button" value="button" />
        </td>
    </tr>
</table>

jQuery で複数の要素を取得する方法

jQury では DOM 要素を取得する際、複数の id を指定して配列として取得することができます。
カンマ区切りで要素の id を明示的に指定する、ワイルドカードによる検索などがあります。

// 複数の要素を指定して取得
var $inputs = $("#Radio1, #Radio2");
// $inputs.length は 2

// id に "radio" を含む要素
var $element = $('input[id*=Radio]');
// $element.length は 7

// id に "radio" を含むラジオボタン
var $radios = $('input[id*=Radio]:radio');
// $radios.length は 6

<input id="Radio1" name="group1" type="radio" />
<input id="Radio2" name="group1" type="radio" checked="checked" />
<input id="Radio3" name="group1" type="radio" />
<input id="Radio4" name="group2" type="radio" />
<input id="Radio5" name="group2" type="radio" checked="checked" />
<input id="Radio6" name="group2" type="radio" />
<input id="FakeRadio1" name="group2" type="button" />

jQuery - how can I find if an id has a specific string?
http://stackoverflow.com/questions/640903/jquery-how-can-i-find-if-an-id-has-a-specific-string

id contains specific string name in Jquery
http://stackoverflow.com/questions/14829553/id-contains-specific-string-name-in-jquery

jQuery on と off によるイベント登録と登録解除

jQuery でイベントを登録する方法です。バージョンに応じて様々な方法がありますが、
ここでは on と off を使ってイベントを登録する実装例を紹介します。

// DOM 上のすべてのラジオボタンの変更イベントを登録
$('input:radio').on('change',function () {
        alert('どこかのチェックが変更されました。');
    }
);
// name 属性が group1 のラジオボタンの変更イベントを登録
$('input[name="group1"]:radio').on('change', function ()
{
    alert('group1 でチェックが変更されました。');
});

<input id="Radio1" name="group1" type="radio" />
<input id="Radio2" name="group1" type="radio" checked="checked" />
<input id="Radio3" name="group1" type="radio" />

<input id="Radio4" name="group2" type="radio" />
<input id="Radio5" name="group2" type="radio" checked="checked" />
<input id="Radio6" name="group2" type="radio" />

また、イベントの登録解除は off を使います。

// イベントの登録解除
$('input[name="group1"]:radio').off('change');

jQuery の on と off はそれぞれバージョン 1.7 から導入されました。これより古いバージョンであれば、delegate など他のイベント登録方法を利用します。

jQuery HTML 要素名や属性名を指定して取得する

jQuery オブジェクトとして HTML 要素の名前を指定することで DOM 上の HTML 要素を簡単に取得することができます。なお、この方法では DOM 上の該当する要素すべてを取得します。

構文：
$('要素名')



特定の属性を持つ要素のみを取得する場合、要素名の後に属性を指定します。

構文：
$('要素名:属性')

例：HTML の select タグの選択アイテムを取得する場合

<script type="text/javascript">
    function selectionChanged()
    {
        // すべての option 要素を取得
        var all = $('option');
        // 選択されている option 要素を取得
        var selected = $('option:selected');

        // 各要素の値を表示
        $(all ).each(
            function (e) {
                alert($(this).val());
            }
        );
        $(selected).each(
            function (e) {
                alert($(this).val());
            }
        );
    }
</script>
    
<body>
    <select multiple="multiple" onchange="selectionChanged()">
        <option>Item 1</option>
        <option selected="selected">Item 2</option>
        <option>Item 3</option>
        <option>Item 4</option>
        <option>Item 5</option>
    </select>
</body>

jQuery val() メソッドによる値の取得と変更

val() メソッドはエレメントの value 属性を取得、変更します。

<head>
    <script type="text/javascript">
        $(function () {
            // ページ初期化時に値を設定
            $("#text1").val("default text");
        });

        function getVal()
        {
            // 値の取得
            var currentVal = $("#text1").val();
            alert(currentVal);
        }

        function changeVal()
        {
            // 値の変更
            $("#text1").val("new value");
        }
    </script>
</head>
<body>
    <input type="text" id="text1" />
    <br />
    <button onclick="getVal()">get value</button>
    <br />
    <button onclick="changeVal()">change value</button>
</body>

jQuery ページ初期表示時に処理を実行

jQuery を使ってページが読み込まれるタイミングで処理を行う場合、以下の方法で処理を呼び出すことができます。

１．document オブジェクトの ready イベントをハンドルする。

$(document).ready(function(){
    // 初期処理を実装
});

２．匿名関数を初期化する。

$(function () {
    // 初期処理を実装
});

関連記事：
JavaScript でページ表示時に処理を実行（DOMContentLoaded）

HTML5 Geolocation API で現在地取得

HTML5 の Geolocation API を利用して現在地を取得するサンプルです。

    <head>
        <script type="text/javascript">
            function getLocation() {

                var location = document.getElementById("currentLocation");

                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(function (position) {
                        location.innerHTML = 
                            "緯度: " + position.coords.latitude + " - " +
                            "緯度: " + position.coords.longitude;
                    });
                }
            }
        </script>
    </head>
    <body>
        <input type="button" onclick="getLocation()" value="Click"></input>
        <br/>
        <label id="currentLocation"></label>
    </body>

関連リンク：
HTML5 Geolocation
http://www.w3schools.com/html/html5_geolocation.asp

jQuery div 要素の横スクロールを同期させる

jQuery を利用して div 要素の横スクロールを同期することができます。

<style type="text/css">
    .container {
        width: 120px;
        background-color: #CCC;
        overflow: auto;
        height: 100px;
        white-space: nowrap;
    }
    .contents {
        width: 50px;
        height: 60px;
        display: inline-block;
    }
    #one, #five {
        background-color:ActiveCaption;
    }
    #two, #six {
        background-color:Teal;
    }
    #three, #seven {
        background-color:Silver;
    }
    #four, #eight {
        background-color:Orange;
    }
</style>

<div id="container1" class="container">
        <div class="contents" id="one"></div>
        <div class="contents" id="two"></div>
        <div class="contents" id="three"></div>
        <div class="contents" id="four"></div>
    </div>
    <div id="container2" class="container">
        <div class="contents" id="five"></div>
        <div class="contents" id="six"></div>
        <div class="contents" id="seven"></div>
        <div class="contents" id="eight"></div>
    </div>

var $containers = $('#container1, #container2');
    var horizontalSync = function (e) {
        var $pair = $containers.not(this).off('scroll'), pair = $pair.get(0);
        pair.scrollLeft = this.scrollLeft;
        // Firefox の場合、少しタイミングをずらします。
        setTimeout(function () { $pair.on('scroll', horizontalSync); }, 10);
    }
    $containers.on('scroll', horizontalSync);

Synchronized scrolling using jQuery?
http://stackoverflow.com/questions/18952623/synchronized-scrolling-using-jquery