JavaScriptの基本１（HTMLと出力）
1. はじめに
Web時代なのでJavaScriptの習得を試み、その際、学習したことを元に備忘録を作りました。「JavaScriptを普通のプログラム言語として使う」ことに主眼をおいています。JavaScript学習の第一歩目として有用と思います。ブラウザ（chrome）とメモ帳さえあれば、だれでも簡単にプログラミングに取り組むことができます。特別な準備は不要です。素晴らしい！
VBAの勉強の時に使った「三角形の面積を求めるプログラムの作成」を題材にしました。最終的には、三角形の底辺と高さをHTMLから入力して、計算結果をHTMLに表示して、結果をCVSファイルとして保存するプログラム作ります。CVSファイルに出力すれば、そこから先はエクセルで処理できますからね。
2. HTMLとJavaScript言語について
JavaScriptはHTML内で動くプルグラム言語なのでHTMLを知る必要はあります。HTLMはブラウザに表示を指令する言語で、プログラム言語ではありません。表示命令である「タグ」の使い方を理解すれば良く理解するのは簡単です。一方、JavaScriptでは計算したり、HTMLの内容を書き換えたりすることができます。今回、JavaScriptの習得に関し、以下の内容を学習しました。
- (1) HTMLファイルの基本形
- (2) HTMLファイル内でのJavaScriptの書き方
- (3) JavaScriptの出力法
- (4) プログラム記述（変数等）
- (5) JavaScriptとHTMLとの情報の受け渡し法
- (6) JavaScriptによるCSVファイルの出力法
HTMLとの情報の受け渡しはJavaScript特有です。それと、「非同期（プログラムの進行が、各部分での処理の終了を待たない）」には注意が必要と感じました。それ以外は、他の言語と大きな違いはありません。
3. HTMLファイルの基本形
HTMLは「表示命令語を含んだ文章ファイル」です。「基本形」はリスト１-1のようになります。リストを、「メモ帳」を使って入力し、拡張子を「.html」として保存し、ブラウザで読みだせば、「こんにちは１」と表示します。ちなみに、ファイル名を「index.html」にすると、これがフォルダーの中で、一番目に実行されるファイルとして指定されます。
▶ リスト1-1（コピペして利用してください）
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- </head>
- <body>
- <p>こんにちは1</p>
- </body>
- </html>
▶ 解説；
- (1) １行目はこのファイルがHTMLであることを示す部分（通信のプロトコル指定）
- (2) <html>～</html>がHTMLの本体
- (3) <head>～</head>にヘッダー的な情報を書く。この場合、文字コードとして「UTF-8」を用いることが書かれている
- (4) <body>～</body>に本文を書く
- (5) 本文は「<p>こんにちは1</p>」で、「段落として「こんにちは1」を表示」という意味
4. HTMLの「要素」の解説
ブラウザは「要素」を読み取って表示を進めます。前の例では、「<p>こんにちは1</p>」が要素。この場合、属性は付与されていません。
- (1) HTMLの要素の書き方：「＜開始タグ 属性名＝“属性値”＞内容＜終了タグ＞」
- (2) 属性名、属性値をもとに、JavaScriptから各種の制御を行う
- (3) 属性名は、例えば「id＝“”」、「class＝“”」、「href=””」等で、他にもいろいろな属性がある。
5. JavaScriptの書き方と出力法１（コンソールへの出力）
リスト１-1に、「プリントアウトを行うJavaScript」を挿入します。場所は「</body>（終了タグ）」の直前で、<script>～</script>の形で挿入します。例をリスト1-２に示します。
「<script>console.log("こんにちは2");</script>」がJavaScriptの部分で、「consoleウインド」に「こんにちは２」を出力するプログラムです。このリストを「メモ帳」で書いて、拡張子を「.html」として保存して、ブラウザで読みだせば、ブラウザには「こんにちは１」と表示され、ブラウザ内の「consoleウインド」には、「こんにちは２」が出力されます。ただし、「consoleウインド」は通常は見えません。consoleウインドの見方は次の通りです。
ブラウザの右上の「⋮」をクリックしてメニューを表示し「その他のツール」を選び、「ディベロッパーツール」を選ぶと、「Consoleタブ」があって、そのウインドに（こんにちは２）が出力されています。JavaScriptの通常の出力（いわゆるプリント命令）はコンソールウインドになります。「Elementsタブ」にはＨＴＭＬファイルが表示されています。
▶ リスト1-2
- <!DOCTYPE html>
- <html lang="ja">
- <head>
- <meta charset="UTF-8">
- <title></title>
- </head>
- <body>
- <p>こんにちは1</p>
- <script>
- console.log("こんにちは2");
- </script>
- </body>
- </html>
6. JavaScriptの出力２（アラームウインドへの出力）
二番目の出力法として、「アラームウインドへ出力」する方法があります。アラームウインドへの出力は、「console.log("こんにちは2");」の部分を「window.alert("こんにちは3");」に書き換えれば達成できます。書き換えたファイルを、ブラウザで読み込むと「アラームウインドが立ち上がって、「こんにちは3」と表示されます。
7. JavaScriptの出力３（HTMLへの出力）
本題の「HTMLへの出力」は、すでに表示されたHTMLの一部を「書き換える」という方法で行います。リスト1-３では、HTML側で「こんにちは１」と表示する要素に、「id属性」として「p1」を付与し、JavaScript側では、「p1」部分のHTMLの内容（こんにちは１）を、document.getElementById("p1").innerHTMLで取得して、この内容を「こんにちは４」に書き換えて、目的の表示をさせます。リスト1-３を実行すると、目には見えないものの、はじめに、「こんにちは１」が表示されて、その後にJavaScriptが実行され、「こんにちは１」が「こんにちは４」に書き換えられて終了します。
JavaScriptからHTMLに出力することは、JavaScript言語の外に出力するという感じで行われます。ちなみに、JavaScriptの通常の出力先は「consoleウインド」です。
- <!DOCTYPE html>
- <html lang="ja">
- <head>
- <meta charset="UTF-8">
- <title></title>
- </head>
- <body>
- <p id="p1">こんにちは１</p>
- <script>
- document.getElementById("p1").innerHTML = "こんにちは４"
- </script>
- </body>
- </html>
8. HTMLとブラウザとDOM
リスト1-３のようにJavaScriptからHTMLを操作することを「DOM（Document Object Model）を操作する」と言います。ブラウザはHTMLをオブジェクトという概念で整理して表示しています。
- (1) ブラウザが表示している全体を「windowオブジェクト」
- (2) 文章の部分は「windowオブジェクトの中にあるdocumentオブジェクト」
- (3) 「documentオブジェクト」の中には、HTML内の記述全部（オブジェクト、メソッド（方法）、バリュー（値））が含まれています
- (4) オブジェクトの情報の入手には「window.document….」のように、全体から、「.」で区切って下の階層に進んで「次のオブジェクト」や「オブジェクトのメソッド（方法）」や「オブジェクトのバリュー（値）」を指定することで行います
- (5) 「.」で繋がった単語を見る場合、これは「メソッド」を指定しているのか、「バリュー」を指定しているのか考える必要があります
- (6) なお、「windowオブジェクト」は必ず先頭に来るので省略します
- 以上の観点で、リスト３の「document.getElementById("p1").innerHTML」を読めば、
- (1) 「オブジェクトdocumentから、“p1”のついた要素をgetして、その中のHTMLの内容を取り出す」という事が書いてあると理解できます
- (2) getElementById("p1")で取得するオブジェクトは、「<p id="p1">こんにちは１</p>」
- (3) innerHTMLで取得する値が「こんにちは１」
- (4) 「= "こんにちは４"」で「こんにちは1」を「こんにちは4」に書き換える
9. 最後に「エディターについて」
上記のリスト1-１～3の「htmlファイル」はwindowsの「メモ帳」があれば作成することが可能です。この他、無料のエディターとして「VSC（Visual Studio Code）」が有名です。しかし、使い方や拡張機能の使い方を知るためのハードルは少し高いです。私のおすすめは、無料の「alphaEDIT」です。古いソフトですが、windows11でも動きます。動かすには少し注意が必要で、それはネットで調べれば出てきます。作成したプログラム（HTML-JavaScript）の実行確認が簡単にできます。それと、「ホームページビルダー（クラッシック）」は高価なソフトですが使いやすいです。