Javascript:HTMLとの連携

画面

サイズ

        // 画面サイズ
        screen.availWidth;
        screen.availHeight;

        // ブラウザのサイズ
        innerWidth;
        innerHeight;

        // nodeのサイズ(px等単位付属)
        $("#id").css("width");
        $("#id").css("height");
      

属性

表示属性

        // visibility に表示(visible)、非表示(hidden)を設定する
        $("#id").css("visibility", "hidden");
        $("#id").css({visibility: "visible"});
      

Canvas

設定

        canvas = document.getElementById("...");
        canvas.setAttribute("width", window.innerWidth * window.devicePixelRatio);
        canvas.setAttribute("height", window.innerHeight * window.devicePixelRatio);
        canvas.style.width = window.innerWidth + 'px';
        canvas.style.heigth = window.innerHeight + 'px';
        context = canvas.getContext("2d");
      

描画

他の描画に拡大等の変換の影響をなくすため、描画の前後に save, restore を入れる。

      context.save();
      context.scale(scale, scale);
      context.drawImage(image, 0, 0);
      context.restore();
      

オフスクリーンレンダリング

        // 画像データの作成
        var rgbData = this.context.createImageData(image.width, mage.height);

        // データ作成
        var j = 0;
        var n = image.width * image.height;
        for(var i=0; i<n; i++) {
            rgbData[i  ] = R;
            rgbData[i+1] = G;
            rgbData[i+2] = B;
            rgbData[i+3] = 255;
        }

        // オフスクリーンバッファの作成と埋め込み
        var backBuffer = document.createElement('canvas');
        backBuffer.width  = image.width;
        backBuffer.height = image.height;
        backBuffer.getContext("2d").putImage(rgbData, 0, 0);

        // 描画
        document.getElementById("canvas").getContext("2d").drawImage(backBuffer, 0, 0);
      

イベント

マウス

        canvas.addEventListener("mousedown", function(e) {
            var rect = e.target.getBoundingClientRect();
            mouseX = e.clientX - rect.left;
            mouseY = e.clientY - rect.top;
        }, false);
      

Form

Search

検索入力に候補を仮設定する。

        Keyword: <input type="search" autocomplete="on" list="keywords" placeholder="inputs a keyword.">
        <datalist id="keywords">
        <option value="候補1"></option>
        <option value="候補2"></option>
        <option value="候補3"></option>
        </datalist>
      

候補を差し替える。

        var dataList = $("#keywords");
        dataList.empty();
        dataList.append($("<option></option>").attr("value", "AA"));
        dataList.append($("<option></option>").attr("value", "AB"));
        dataList.append($("<option></option>").attr("value", "AC"));
      

Textarea

      // 値の取得／設定は value を使う。
      // jQueryではvalを使う
      $("#id").val(...);
      

Button

        // jQueryではボタン名を text で変更
        $("#id").text("Ok");
      

二重送信の抑制(submit)

        var f = document.createElement("form");
        f.action = "http://www.google.co.jp";
        f.method = "get";
        document.body.appendChild(f);

        var b = document.createElement("input");
        b.type = "submit";
        b.value = "Google";
        b.id = "submit1";
        f.appendChild(b);
        b.addEventListener('click', function(e) {
            var b = document.getElementById("submit1");
            if (b) {
                b.disabled = true;
            }
        });