1. Home
›
2. JavaScript

JavaScript

メニュー

フレームワーク、ライブラリ

document

document.head;

document.body;

document.forms;

document.getElementsByTagName('img');

document.activeElement();

npm

ファイルを取得してテキストを出力

ファイルを取得してバイナリを出力

ADDRESS  00 01 02 03 04 05 06 07 08 09 0A 0B 0C 0D 0E 0F

00000000 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00

File API

https://www.w3.org/TR/FileAPI/

https://developer.mozilla.org/ja/docs/Web/API/Blob

https://developer.mozilla.org/ja/docs/Web/API/File

canvas

https://developer.mozilla.org/ja/docs/Web/API/Canvas_API

HTML5の<canvas>タグ内に図形等の描画が行えます。

canvas 2d

<canvas id="myCanvas"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgb(200,0,0)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
</script>

https://developer.mozilla.org/ja/docs/Web/API/CanvasRenderingContext2D

canvas webgl

var gl;

function start() {
  var gl_canvas = document.getElementById("glcanvas");
  gl = initWebGL(gl_canvas);
  if (gl) {
  gl.clearColor(1.0, 0.0, 0.0, 1.0);
  gl.enable(gl.DEPTH_TEST);
  gl.depthFunc(gl.LEQUAL);
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  }
}

function initWebGL(canvas) {
  gl = null;
  try { gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl"); } catch(e) {}
  if (!gl) { alert("WebGL を初期化できません。ブラウザはサポートしていないようです。"); gl = null; }
  return gl;
}

https://developer.mozilla.org/ja/docs/Web/API/WebGL_API

https://developer.mozilla.org/ja/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL

Polyfill

https://en.wikipedia.org/wiki/Polyfill_(programming)

https://developer.mozilla.org/ja/docs/Glossary/Polyfill

Ponyfill

ponyfill.com

Predefined Core Objects

https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Obsolete_Pages/Predefined_Core_Objects

Array

オブジェクトの作成は以下の3通りで行えます。

要素は任意の数設定可能です。

var arrA = new Array('elmA', 'elmB', 'elmC');
var arrB = Array('elmA', 'elmB', 'elmC');
var arrC = ['elmA', 'elmB', 'elmC'];

console.log(arrA[0]);  // elmA
console.log(arrB[1]);  // elmB
console.log(arrC[2]);  // elmC

要素が数値の場合

var arrD = new Array(1, 2, 3);
var arrE = Array(1, 2, 3);
var arrF = [1, 2, 3];

console.log(arrD[0]);  // 1
console.log(arrE[1]);  // 2
console.log(arrF[2]);  // 3

「new Array()」または「Array()」の引数に単一の数値を指定した場合は配列の長さを指定したとみなされ、指定した長さの配列が作成されます。

var arrG = new Array(3);
var arrH = Array(5);

console.log(JSON.stringify(arrG));  // [null,null,null]
console.log(JSON.stringify(arrH));  // [null,null,null,null,null]
console.log(arrG.length);  // 3
console.log(arrH.length);  // 5

Object

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object

オブジェクトの作成は以下のように行えます。

var objA = new Object();

引数に渡した値の型によって作成されるオブジェクト型が決定します。

var objB = new Object(['elmA', 'elmB', 'elmC']);
console.log(JSON.stringify(objB));          // ["elmA","elmB","elmC"]
console.log(Object.prototype.toString.call(objB));  // [object Array]

var objC = new Object(5);
console.log(JSON.stringify(objC));          // 5
console.log(Object.prototype.toString.call(objC));  // [object Number]

Boolean

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Boolean

オブジェクトの作成は以下のように行えます。

var boolA = new Boolean(false);
console.log(boolA);

var boolB = new Boolean(true);
console.log(boolB);

Date

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date

オブジェクトの作成は以下のように行えます。

var dateA = new Date();
console.log(dateA);

console

console.log - https://developer.mozilla.org/ja/docs/Web/API/Console/log

console.dir - https://developer.mozilla.org/ja/docs/Web/API/Console/dir