JavaScriptの基本２（変数と関数と入力）
1. はじめに
この回では、JavaScriptの「変数」、「関数」、「入力」について学習します。例題は三角形の面積を求めるプログラム。
2. JavaScriptの変数の取扱い
- (1) 変数として英数字の他、日本語も使える。予約語は変数として使用できない。
- (2) 変数の宣言は、letまたはconstで行う。letは変数の内容がいろいろ変わる時、constは変数の中身が変化しない場合に使用。
- (3) 変数の宣言時に「整数型」や「文字型」等の型の宣言は不要
- (4) 関数の中で宣言した変数は、関数の中だけで使用できる（ローカル）
- (5) 関数の外で宣言した変数は、関数内、関数外で使用できる（グローバル）
3. JavaScriptのプログラム例１（consoleへの出力）
- (1) 変数として、「底辺」、「高さ」、「面積」を使う（日本語の変数）
- (2) 宣言はlet文で宣言し、同時に入力する
- (3) 結果を「コンソール」に「１行出力」と「各行出力」の二つを行う
- (4) コメントは「//」を先頭につけ、記述する
リスト2-1
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>print console</title>
- </head>
- <body>
- <p>三角形の面積を求める:consoleウインドに出力</p>
- <script>
- let 底辺 = 4; //変数_底辺
- let 高さ = 3; //変数_高さ
- let 面積 = (底辺 * 高さ)/2; //変数_面積
- console.log ("三角形の面積" + " 底辺 " + 底辺 + " 高さ " + 高さ + " 面積 " + 面積);
- console.log ("三角形の面積" + "\n" + " 底辺 " + 底辺 + "\n" + " 高さ " + 高さ + "\n" + " 面積 " + 面積);
- </script>
- </body>
- </html>
4. JavaScriptのプログラム例２（HTMLに出力）
HTMLへの出力は前回説明したとおりの変更になります。
リスト2-2
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>print HTML</title>
- </head>
- <body>
- <p>結果はHTMLに表示</p>
- 三角形の面積
- <p id="p1">表示１ </p>
- <script>
- let 底辺 = 4;
- let 高さ = 3;
- let 面積 = (底辺 * 高さ)/2;
- document.getElementById("p1").innerHTML = "三角形の面積 " + "底辺" + 底辺 + " 高さ" + 高さ + " 面積" + 面積;
- </script>
- </body>
- </html>
5. 入力１（プロンプトウインドからの入力）
(1) プログラム内から入力を行う場合、「prompt」を使う。プロンプトウインドが開くので、そこに入力
(2) Promptの入力は文字型になるので、数値への変換が必要
(3) 数値への変換は、Number（変数）、または、「+」を付加する（binary plus）。下の例では、底辺はNumberで数値化し、高さは「+」で数値化した
リスト2-3
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>input from prompt_wind</title>
- </head>
- <body>
- <p>promptからの入力、結果はHTMLに表示</p>
- 三角形の面積
- <p id="p1">表示１</p>
- <script>
- let 底辺 = Number(prompt("底辺を入力してください"));
- let 高さ = +prompt("高さを入力してください");
- let 面積 = (底辺 * 高さ)/2;
- document.getElementById("p1").innerHTML = "底辺" + 底辺 + " 高さ" + 高さ + " 面積" + 面積;
- </script>
- </body>
- </html>
6. 入力２（HTMLからの入力と関数化）
▶ HTML内から入力するには、<input>を使用する。
- (1) 終了タグが不要の単独タグ
- (2) 数値を入力するには、type="number"を使用
- (3) <label>を使ってインプットの内容を明示。属性を付けることが可能になる
- (4) 「ボタン」型のインプットもある。（様々なタイプがある）
リストに<input>を使ったプログラムをリスト2-4に示しました。このプログラムをブラウザで走らせると、<input＞の作用による入力部分がHTMLに現れます。しかしながら、HTMLの最後の行には、「底辺 高さ 面積０」と出力されます。これは、<input>の表示はしたもの、ユーザーの入力をまたず、そのままプログラムが走り、JavaScriptも実行して、HTMLの「表示１」を、今の値で「底辺」、「高さ」、「面積」に替えて表示して終了したということです。前述のpromptを用いた場合、入力が終わるまで、プログラムの進行を止めてくれたという点とは大きく異なります。
リスト2-4（入力を待つことなく、プログラムが最後ま走るという問題を抱えたプログラムのリスト）
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>input from prompt_wind</title>
- </head>
- <body>
- <p>promptからの入力、結果はHTMLに表示</p>
- 三角形の面積
- <p><label>底辺を入力：<input type="number" id="input1"></label></p>
- <p><label>高さを入力：<input type="number" id="input2"></label></p>
- <p id="p1">表示１</p>
- <script>
- let 底辺 = document.getElementById("input1").value;
- let 高さ = document.getElementById("input2").value;
- let 面積 = (底辺 * 高さ)/2;
- document.getElementById("p1").innerHTML = "底辺" + 底辺 + " 高さ" + 高さ + " 面積" + 面積;
- </script>
- </body>
- </html>
ユーザーからの入力が終わったという合図で、計算と出力を行うプログラムが動くように作り変える必要があります。プログラムは終わっているのに、この時点で、ユーザーが入力したという合図を出せば、プログラムを動くというのは、通常のプログラムから見れば、不思議な動作ですが、それがJavaScriptの特徴なのでしょうね。リストを以下のように書き換えます
入力が終わったという合図のボタンをHTML内に作る。<p><input type="button" value="入力終了・計算開始" id="計算開始"></p>
<input>は数値を入れたり、ボタンになったり、多機能ですね
合図のボタンを押した時に、プログラム（関数）を動かす命令をする部分の設置document.getElementById('計算開始').addEventListener('click', 面積計算);
id「計算開始」の要素をを取り出し、「クリック」なら、関数「面積計算」を行う
関数の本体の記述function 面積計算(){・・・} ;
一連の動きをまとめるという意味での関数（ブロック）は、このような形で書くと飲み込んで覚えるのが良いと思います。
リスト2-5
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>input_HTML</title>
- </head>
- <body>
- <p>HTMLからのinputによる入力、結果はHTMLに表示</p>
- 三角形の面積
- <p><label>底辺を入力：<input type="number" id="input1"></label></p>
- <p><label>高さを入力：<input type="number" id="input2"></label></p>
- <p><input type="button" value="入力終了・計算開始" id="計算開始"></p>
- <p id="p1">表示１</p>
- <script>
- document.getElementById('計算開始').addEventListener('click', 面積計算);
- function 面積計算(){
- let 底辺 = document.getElementById("input1").value;
- let 高さ = document.getElementById("input2").value;
- let 面積 = (底辺 * 高さ)/2;
- document.getElementById("p1").innerHTML = "底辺" + 底辺 + " 高さ" + 高さ + " 面積" + 面積;
- };
- </script>
- </body>
- </html>
7. まとめ
変数の使い方とインプットの作り方が分かりました。出力、入力、変数を理解したので、これでプログラムが作れるようになりました。結果をもう少し活用できる形にしたいので、次に、計算結果をCSV形式で保存するプログラムを加えてみましょう。そうすれば、エクセルに接続ができるようになります。