===============
Quick Reference
===============
i. 文法要素
------------
i.1 命令
^^^^^^^^^
命令は ; (セミコロン)で終わる。1行に複数命令を書くこともできる。
::
var x;
var y,z;
x = 3;
x = x + 1; y = 2;
i.2 コメント
^^^^^^^^^^^^^
コメントは // または \/\* ... \*\/ であらわす。
::
x = 1; // 行末までのコメント
y = 1; /* この場合は
複数行にわたり、コメント
として解釈される。
*/ z = 1;
i.3 文字と文字列
^^^^^^^^^^^^^^^^^
i.3.1 引用符
~~~~~~~~~~~~~
文字列は 'aaa' (シングルクオート)または "aaa" (ダブルクオート) であらわす。
文字列中にシングルクオート、ダブルクオートを使う場合以下のいずれかの方法を用いる。
::
"文字列" // " で囲う
'string' // ' で囲う
'引用符号"' // 'で"を
"引用符号'" // "で'を
'引用符号"と\'' // \' は文字列の'となる
ii.3.2 文字列中の改行
文字列中の改行は \\n (バックスラッシュ+n)で表す。
文字列に改行を含めずプログラムを改行したい場合は文字列を区切り, + で結合する。
::
'line\\nline2' // \\n 改行記号
"次の行と" + // プログラムが改行しても
"結合される"
i.3.3 文字コード
~~~~~~~~~~~~~~~~~
改行などのコードは、以下のようにコードを指定するか、エスケープ記号であらわす。
+----------+--------------------+------+
| 記号 | コード名 |コード|
+==========+====================+======+
| \\' | 引用符 | 39 |
+----------+--------------------+------+
| \\" | 二重引用符 | 34 |
+----------+--------------------+------+
| \\ \\ | バックスラッシュ | 60 |
+----------+--------------------+------+
| \\n | 改行 | 10 |
+----------+--------------------+------+
| \\r | キャリッジリターン | 13 |
+----------+--------------------+------+
| \\v | 垂直タブ | 11 |
+----------+--------------------+------+
| \\t | 水平タブ | 9 |
+----------+--------------------+------+
| \\b | バックスペース | 8 |
+----------+--------------------+------+
| \\f | フォームフィード | 12 |
+----------+--------------------+------+
i.3.4 文字コード
~~~~~~~~~~~~~~~~~
以下は文字コードを指定する場合。
+----------+--------------------+
| \\uXXXX | unicode |
+----------+--------------------+
| \\u{X} | unicode |
+----------+--------------------+
| \\XXX | 8進文字コード |
+----------+--------------------+
.. _sx_backslash:
i.3.5 バックスラッシュ
~~~~~~~~~~~~~~~~~~~~~~~
VS Code では\\(バックスラッシュ)を使うことが多い。
日本語キーボードを使っている場合、￥(円マーク)キーと\\(バックスラッシュ)キーは、
いずれも同じ\\(バックスラッシュ)を入力するために使うことができる。
入力したプログラムをファイルに保存して Word やメモ帳で開いたり、
一部をWord やメモ帳にコピペすると、
\\(バックスラッシュ)は￥(円マーク)にかわる。
これらは歴史的な経緯で、まったく同じ文字であり、
表示する状況によって表示が\\(バックスラッシュ)や￥(円マーク)にかわる。
日本語表示の環境では￥を表示するようにすることが多い。
VS Code ではプログラムを見やすくするため、
\\(バックスラッシュ)の表示を採用している。
i.4 if
^^^^^^
::
// もし x が 4 以下なら x++
if (x <= 4) {
x++;
}
::
// もし x が 0 なら x=8, そうでなければ x--
if (x==0) {
x=8;
}
else {
x--;
}
::
// もし x が 0 なら x=8, 4以上なら x--
if (x==0) {
x=8;
}
else if (x >= 4) {
x--;
}
i.5 for
^^^^^^^
::
for(n=0; n++; n<5) {
console.log('print this 5 tines');
}
i.6 function (関数)
^^^^^^^^^^^^^^^^^^^
::
function make_it_double(x) {
return(x * 2);
}
.. _sx_anonymousfunction:
i.7 無名関数(Anonymous Function)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
関数定義で関数名が省かれた形をしていて、その形のとおり無名関数と呼ばれる。
そのまま変数に代入すると、その変数を関数のように使うことができる。
::
z = function(x,y){return x % y};
q = z(9,5); // 結果は 4 になる
この例では function 以下が無名関数で、この部分には関数名がない。
変数 z に代入することにより変数 z をあたかも z という名前の関数のように使うことができ、
z(9,5) が実行されて 4 が得られる。
i.8 オブジェクト
^^^^^^^^^^^^^^^^
プロパティを持つオブジェクトを定義し、作成して、
それぞれ独立したオブジェクトとして利用できる。
以下のように this.プロパティ名 によってプロパティを表す。
::
this.c1
オブジェクトを複数作成すると、それぞれのプロパティは独立した値になる。
以下の構文でメソッドを定義できる。prototypeは予約語。
::
関数名.prototype.メソッド名 = function(...) {
...
}
例を示す。以下では up_counter というオブジェクトと、
up というメソッドを定義している。
::
// up_counter を定義する
function up_counter(){
this.c = 0; // new で生成時は c を 0 リセット
}
// up メソッドを定義する
up_counter.prototype.up = function() {
this.c ++; // c を +1 する
console.log("count=",this.c);
}
そして以下では up_counter を使って x1 , x2 を定義し、
それぞれ独立にカウントすることができる。
::
// x1, x2 を counter1 として定義する
x1 = new up_counter();
x2 = new up_counter();
// それぞれ独立にカウントできる
x2.up(); // 1
x2.up(); // 2
x1.up(); // 1
x2.up(); // 3
i.9 require
^^^^^^^^^^^
Node.js で以下構文で http モジュールをロードする。
::
http1 = require('http');
http はモジュール名、http1 はモジュールを使うための変数名。
自分でモジュールを作ることも可能。
ii. データ型
------------
ii.1 単純データ型
^^^^^^^^^^^^^^^^^
数値, 文字列, 論理値
+-----------+---------------------+--------------------+
| 型 | 例 | 説明 |
+===========+=====================+====================+
| 数値 | 123 | 数 123 |
+-----------+---------------------+--------------------+
| | 123e23 | 123 × 10^23 |
+-----------+---------------------+--------------------+
| | 0x1234 | 1234(16進) |
+-----------+---------------------+--------------------+
| | 0b1101 | 1101(2進) |
+-----------+---------------------+--------------------+
| 文字列 | 'abc' | 文字列 abc |
+-----------+---------------------+--------------------+
| | "abc" | 文字列 abc |
+-----------+---------------------+--------------------+
| | 'ab"c' | 文字列 ab"c |
+-----------+---------------------+--------------------+
| | "ab'c" | 文字列 ab'c |
+-----------+---------------------+--------------------+
| | "a\"\'bc" | 文字列 a"b'c |
+-----------+---------------------+--------------------+
| 論理値 | true | 真 |
+-----------+---------------------+--------------------+
| | false | 偽 |
+-----------+---------------------+--------------------+
ii.2 複合データ型
^^^^^^^^^^^^^^^^^
ii.2.1 配列
~~~~~~~~~~~
配列の要素は数字で指定することができる。
::
var x = new Array();
x[1] = 111;
x[3] = 222;
Array(3) とすれば、x[0]～x[2]が確保される。
::
var x = new Array(3);
x[1] = 111;
x[2] = 222;
ii.2.2 オブジェクト
~~~~~~~~~~~~~~~~~~~
オブジェクトにプロパティを設定できる。
::
var x= new Object();
x.name = 'apple';
x.color = 'red';
x.shape = 'round';
ii.2.3 連想配列
^^^^^^^^^^^^^^^
配列の添え字に文字列を使うことができる。
::
var x = new Array();
x["name"] = "apple";
x["color"] = "red";
x["shape"] = "round";
連想配列はプロパティと同じである。
以下はすべて同じ結果になる。
::
x.name
x["name"]
x["na"+"me"]
ただし、配列の添え字は式であるが、
プロパティは式ではないから、
以下は Syntax Error (文法エラー) となる。
::
x.("na" + "me")
ii.3 特別なデータ型
^^^^^^^^^^^^^^^^^^^
Null, Undefined
.. _sx_operator:
iii.演算子
----------
iii.1 代入、副作用のある演算
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
(結果は実行前 x=5 に対する実行後の x の値)
+----------------+---------+----------+-----+
| 演算 | 記号 | 例 |結果 |
+================+=========+==========+=====+
| 代入 | = | x=3 |3 |
+----------------+---------+----------+-----+
| インクリメント | \+\+ | ++x | 6 |
+----------------+---------+----------+-----+
| デクリメント | \-\- | --x | 4 |
+----------------+---------+----------+-----+
iii.2 加減乗除とマイナス
^^^^^^^^^^^^^^^^^^^^^^^^^^
数値に対する演算(結果はx=8, y=3 の場合)
+----------------+---------+--------------+-----+
| 演算 | 記号 | 例 |結果 |
+================+=========+==============+=====+
| 加算 | \+ | x + y | 11 |
+----------------+---------+--------------+-----+
| 減算 | \- | x - y | 5 |
+----------------+---------+--------------+-----+
| 乗算 | \* | x * y | 24 |
+----------------+---------+--------------+-----+
| 除算 | \/ | x / y | 2 |
+----------------+---------+--------------+-----+
| 剰余 | \% | x % y | 2 |
+----------------+---------+--------------+-----+
| マイナス | \- | -x | -8 |
+----------------+---------+--------------+-----+
.. _sx_cond:
iii.3 比較演算
^^^^^^^^^^^^^^
比較理演算子(結果はx=8, y=3 の場合)
+----------------+---------+--------------+------+
| 演算 | 記号 | 例 | 結果 |
+================+=========+==============+======+
| 小さい | < | x < y | false|
+----------------+---------+--------------+------+
| 大きい | > | x > y | true |
+----------------+---------+--------------+------+
| 以下 | <= | x <= y | false|
+----------------+---------+--------------+------+
| 以上 | >= | x >= y | true |
+----------------+---------+--------------+------+
| 等しい | == | x == y | false|
+----------------+---------+--------------+------+
| 等しくない | != | x != y | true |
+----------------+---------+--------------+------+
| 厳密等価 | === | x === y | false|
+----------------+---------+--------------+------+
| 厳密非等価 | !== | x !== y | true |
+----------------+---------+--------------+------+
iii.4 論理演算
^^^^^^^^^^^^^^
論理演算子(結果は x = True, y = False の場合)
+----------------+---------+--------------+-------+
| 演算 | 記号 | 例 | 結果 |
+================+=========+==============+=======+
| Not | ! | !x | False |
+----------------+---------+--------------+-------+
| 論理And | && | x && y | False |
+----------------+---------+--------------+-------+
| 論理Or | || | x || y | True |
+----------------+---------+--------------+-------+
| 条件 | ? | x ? 2 : 3 | 2 |
+----------------+---------+--------------+-------+
iv. 標準ビルトインオブジェクト
------------------------------
標準ビルトインオブジェクトの主なものをあげる。
その他の標準ビルトインオブジェクトは以下を参照してほしい。
:ref:`sx_vi_mzbuildin`
.. _xx_tostring:
iv.1. 数値
^^^^^^^^^^
toString(10) は数を文字列に変換する。
::
var x = 12;
console.log(x.toString(10));
console.log(x.toString(2));
console.log(x.toString(8));
console.log(x.toString(16));
結果
::
12
1100
14
c
10は基数を指定している。
例では10進、10進、8進、16進で出力している。
その他膨大なメソッドがあるが、必要に応じて確認すれば十分である。
以下キーワードで検索すると詳細な仕様を調べることができる。
::
javascript standard built-in number string
iv.2. Math
^^^^^^^^^^
Math はビルトインオブジェクトで以下のメソッドがある。
+--------------------+--------------------+
| 関数 | 説明 |
+--------------------+--------------------+
| Math.floor(x) | xを切り捨てる |
+--------------------+--------------------+
| Math.abs(x) | \|x\| 絶対値 |
+--------------------+--------------------+
| Math.PI | 円周率 |
+--------------------+--------------------+
| Math.E | e |
+--------------------+--------------------+
| x=Math.random() | 0<=x<1の乱数 |
+--------------------+--------------------+
| Math.sin(x) | sin(x) |
+--------------------+--------------------+
| Math.cos(x) | cos(x) |
+--------------------+--------------------+
| Math.tan(x) | tan(x) |
+--------------------+--------------------+
| Math.exp(x) | e^x |
+--------------------+--------------------+
| Math.log(x) | log(x) 自然対数 |
+--------------------+--------------------+
| Math.pow(x,y) | x^y (xのy乗) |
+--------------------+--------------------+
その他膨大なメソッドがあるが、必要に応じて確認すれば十分である。
以下キーワードで検索すると詳細な仕様を調べることができる。
::
JavaScript standard built-in object math
iv.3. 文字列
^^^^^^^^^^^^
文字列に対しては長さ(length)が property として得られる。
また toUpperCase、toLowerCase など多くのメソッドがある。
::
s1='abcDEF';
console.log(s1);
console.log(s1.length);
console.log(s1.toUpperCase());
console.log(s1.toLowerCase());
結果
::
abcDEF
6
ABCDEF
abcdef
その他膨大なメソッドがあるが、必要に応じて確認すれば十分である。
以下キーワードで検索すると詳細な仕様を調べることができる。
::
javascript standard built-in object string
iv.4. 配列
^^^^^^^^^^
concat (結合), length(長さ)などの多数のメソッドがある。
::
var a1 = [11,12,13], a2=[21,22,23];
var a3=a1.concat(a2);
console.log(a3);
console.log(a3.length);
結果
::
[11,12,13,21,22,23]
6
になる。
その他膨大なメソッドがあるが、必要に応じて確認すれば十分である。
以下キーワードで検索すると詳細な仕様を調べることができる。
::
javascript standard built-in object array
v.canvas
---------
v.1 描画の手順
^^^^^^^^^^^^^^
v.3.1 塗りつぶし
~~~~~~~~~~~~~~~~
::
c1.beginPath();
c1.rect(100,100,100,20);
c1.fillStyle = 'rgb(255,0,0)';
c1.fill();
v.3.2 枠線
~~~~~~~~~~
::
c1.beginPath();
c1.rect(100,100,100,20);
c1.strokeStyle = 'rgb(255,0,0)';
c1.lineWidth(5);
c1.stroke();
v.2 図形
^^^^^^^^
図形は以下メソッドで指定する。
::
x: x座標
y: y座標、ただしcanvas最上部が0, 下に向けて増える。
w: 幅
h: 高さ
a1,a2: 角度を指定する場合、開始、修了の角度。単位はラジアン。
+---------------------------+--------------------------------+
| 表記 | 意味 |
+===========================+================================+
| c1.rect(x,y,h,w) | 長方形を描画する |
+---------------------------+--------------------------------+
| c1.arc(x,y,r,a1,a2) | 円弧を描画する |
+---------------------------+--------------------------------+
| c1.moveTo(x,y) | 描画せずに次の始点を指定 |
+---------------------------+--------------------------------+
| c1.lineTo(x,y) | 描画しつつ次の始点を指定 |
+---------------------------+--------------------------------+
| c1.font("20px Gothic") | フォントを指定 |
+---------------------------+--------------------------------+
| c1.fillText("Hello",x,y) | Hello の文字内を塗りつぶする |
+---------------------------+--------------------------------+
| c1.strokeText("Hello",x,y)| Hello の文字内を塗りつぶする |
+---------------------------+--------------------------------+
v.3 描画属性
^^^^^^^^^^^^^
v.3.1 fillStyle
~~~~~~~~~~~~~~~
塗りつぶし色はfillStyleに色名または、rgb を使って指定できる。
::
c1.fillStyle= "red";
c1.fillStyle= "rgb(255,0,0)";
v.3.2 strokeStyle
~~~~~~~~~~~~~~~~~
枠線色はstrokeStyleに色名または、rgb を使って指定できる。
::
c1.strokeStyle= "red";
c1.strokeStyle= "rgb(255,0,0)";
.. _v_3_3_rgb:
v.3.3 rgb,rgba指定
~~~~~~~~~~~~~~~~~~
rgb は赤、緑、青の輝度を指定する。
輝度は0～255で255が最大輝度である。
fillStyle, strokeStyle の指定は「文字列」なので注意。
::
rr = 255; // 赤色の輝度を 0～255 で指定。 255が100%
gg = 255; // 緑色の輝度を 0～255 で指定。 255が100%
bb = 255; // 青色の輝度を 0～255 で指定。 255が100%
c1.fillStyle= "rgb(rr,gg,bb)";
透明度(alpha plane)は rgba で指定する。
::
c1.fillStyle= "rgba(255,0,0,0.5)"; // 半透明
c1.fillStyle= "rgba(255,0,0,0.1)"; // 10%透過
c1.fillStyle= "rgba(255,0,0,0.9)"; // 90%透過
.. _v_3_4_gradient:
v.3.4 グラデーション
~~~~~~~~~~~~~~~~~~~~
グラデーションは createLineraGradient で指定し、
色は addColorStop で指定する。
createLineraGradientではグラデーションの開始座標、
修了座標を図形の幅、高さに対する割合(パーセント)で指定する。
0,0,100,100 であれば左上から右下に変化することを意味する。
0,0,0,100 なら左上から左した、つまり上から下に色が変化する。
addColorStop はグラデーションの開始位置から終了位置までの
分割位置とその位置の色を指定する。
分割位置は 0が始点、1が終点, 0.5 は中間点である。
色はfillStyle同様、rgb か色名で指定する。
::
var g1 = c1.createLinearGradient(0, 0, 0, 100);
g1.addColorStop(0, "rgb(255,0,0)");
g1.addColorStop(1, "rgb(255,255,255)");
.. _v_3_5_shadow:
v.3.5 影
~~~~~~~~
以下の指定で、
右に+2ピクセル、
下に+2ピクセル、
の位置に4ピクセルの半径でぼかした影を投影して描画する。
::
c1.shadowColor = 'rgba(0, 0, 0)'; // 影の色
c1.shadowBlur = 4; // 影のサイズ
c1.shadowOffsetX = 2; // 右方向ずらし幅
c1.shadowOffsetY = 2; // 下方向ずらし幅
v.4 画像
^^^^^^^^^
::
