【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>
出力結果
このようにブラウザには「test」と出力されます。
出力結果にテキストが現れないとき。
ブラウザの「要素を検証」で、HTML内のJavaScriptのエラーを確認できます。
書いてあるエラーを読んで、エラーを修正します。
変数
変数を使用することで、出力結果を変えることができます。
実行例（ソース）
aの変数に1を代入します。「var」が変数宣言、「n = n´」で変数を代入します。
<script> //変数宣言 var a; //代入 右辺から左辺に値を入れる。 a = 1; //出力 document.write(a); document.write('a'); </script>
結果
aに代入された1が出力されます。シングルクォーテーション（'）で囲んだaはそのまま出力されます。
同じ変数に別の値を代入する
上記のソースの下に新しく値を代入すると、変数が上書きされて出力結果が変わります。
実行例（ソース）
<script> var a; a = 1; document.write(a); document.write('a'); a = 2; document.write(a); </script>
結果
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>
結果
aの一番最後の変数が2なので、結果は2になります。
コンソール結果はブラウザの「要素を検証」で確認できます。
演算子
演算子を利用する事で足し算や文字列を結合できます。
実行例（ソース）
数字を計算する場合は何も囲わない、文字列を結合する場合は変数をクォーテーションで囲んで代入します。
<script> //変数宣言をしつつ足し算 var x = 123 + 456; //変数を宣言しつつ文字列結合 var y = "123" + "456"; //以下コンソールで出力 console.log(x); console.log(y); </script>
結果
コンソールで見ると、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>
結果
変数同士の計算
変数同士の計算も四則演算のようにやります。
実行例（ソース）
<script> var a = 6; a = a + 3; console.log(a); var b = 7; var c = 9; b = b + c; console.log(b); </script>
結果
