PCゲーマーのWebデザイン備忘録

PCゲーマーのWebデザイン備忘録。東京都内でWEBデザイナーとして働いています。Webデザインやゲームに関することをブログに書いていきます

【JavaScript】JavaScriptで出力する

JavaScriptでHTML内に実際に出力してみます。

普通にテキストを出力してみる

普通にテキストを出力するときは「document.write('n');」を使います。

実行例(ソース)

「test」を出力します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>初めてのJS</title>
</head>
<body>

<script>
document.write('test');
</script>

</body>
</html>

出力結果

f:id:game-web-design:20140917102312p:plain
このようにブラウザには「test」と出力されます。

出力結果にテキストが現れないとき。

f:id:game-web-design:20140917105910p:plain
ブラウザの「要素を検証」で、HTML内のJavaScriptのエラーを確認できます。
書いてあるエラーを読んで、エラーを修正します。


変数

変数を使用することで、出力結果を変えることができます。

実行例(ソース)

aの変数に1を代入します。「var」が変数宣言、「n = n´」で変数を代入します。

<script>
//変数宣言
var a;
//代入 右辺から左辺に値を入れる。
a = 1;
//出力
document.write(a);
document.write('a');
</script>

結果

f:id:game-web-design:20140917103543p:plain
aに代入された1が出力されます。シングルクォーテーション(')で囲んだaはそのまま出力されます。


同じ変数に別の値を代入する

上記のソースの下に新しく値を代入すると、変数が上書きされて出力結果が変わります。

実行例(ソース)

<script>
var a;
a = 1;
document.write(a);
document.write('a');

a = 2;
document.write(a);
</script>

結果

f:id:game-web-design:20140917104700p:plain
2番目に出てきたaには後で代入した2があてられます。


console.logで変数をチェックする

console.logを使うと、使用した変数で何が使われていたのかをチェックする事ができます。

実行例(ソース)

console.logを使うには「console.log(n);」を使います。

<script>
//変数宣言
var a;
//代入 右辺から左辺に値を入れる。
a = 1;
//出力
document.write(a);
document.write('a');

a = 2;
document.write(a);

console.log(a);

</script>

結果

f:id:game-web-design:20140917105740p:plain
aの一番最後の変数が2なので、結果は2になります。
コンソール結果はブラウザの「要素を検証」で確認できます。


演算子

演算子を利用する事で足し算や文字列を結合できます。

実行例(ソース)

数字を計算する場合は何も囲わない、文字列を結合する場合は変数をクォーテーションで囲んで代入します。

<script>
//変数宣言をしつつ足し算
  var x = 123 + 456;
//変数を宣言しつつ文字列結合
  var y = "123" + "456";
//以下コンソールで出力
  console.log(x);
  console.log(y);
</script>

結果

f:id:game-web-design:20140917111653p:plain
コンソールで見ると、xの変数は足し算され、yの変数は文字列の結合が行われていることがわかります。

四則演算

四則演算で答えを出力します。

実行例(ソース)

「+(加法)」「-(減法)」「*(乗法)」「/(除法)」「%(余剰)」で計算をする事ができます。

<script>
//足し算
ans = 1 + 2;
console.log(ans);
//引き算
ans = 3 - 2;
console.log(ans);
//掛け算
ans = 5 * 3;
console.log(ans);
//割り算
ans = 6 / 3;
console.log(ans);
//余剰
ans = 7 % 3;
console.log(ans);
</script>
結果

f:id:game-web-design:20140917112422p:plain


変数同士の計算

変数同士の計算も四則演算のようにやります。

実行例(ソース)

<script>
var a = 6;
a = a + 3;
console.log(a);

var b = 7;
var c = 9;
b = b + c;
console.log(b);
</script>

結果

f:id:game-web-design:20140917114503p:plain


複合代入演算子

複合代入演算子は、代入と演算を一緒に行うものです。

実行例(ソース)

書き方としては「n += n´」のような形です。数学記号同士をスペースなしで隣接させます。
意味としては「n= n + n´」と一緒です。

<script>
var a = 23;
a +=23;
console.log(a);

a = a + 23;
console.log(a);


var b = 'こんばんは';
b +='ムカミ';
console.log(b);

b = b + 'ムカミ';
console.log(b);
</script>

結果

f:id:game-web-design:20140917120231p:plain
上記のソースで説明したとおり、変数を代入してからの演算と複合代入演算子の結果は同じになります。