先日は、
にてJavaScriptについて書きました。ES（ECMA Script）は、HTMLファイルの制御用の言語なので、オフィースソフトのマクロのような感じで使えるのですが、通常のプログラミング言語のように内部の数的な処理や条件分岐やループも実装できますが、HTML自体がリッチテキストなので、その制御を行っているので、作りとしてはフォームアプリと同じ考え方になります。その為、JavaScriptの処理だけを見ると、構文が全く解らないはずですが、その理由は、 【 オブジェクトの制御をする場合には関数を用いる 】 ためです。
また、BASICインタプリタで使用する物とは全く異なる構文ですから、BASICを体験していたとしても、PythonやJavaScriptやC#のソースを見ても構文や処理の流れが違うので全く分からないはずです。これは、プログラムの構造が異なるので当然のように発生する内容ですが、現在のプログラミング言語では、いろいろな物がサポートされているので、基本機能だけでも多くの事ができるようになっています。
フ ォームアプリとコンソールアプリ
PythonやC++などを学習する場合、一番最初に出てくるのは、コンソール上で動作する処理になります。その為、コンソール上でひょじされるものを作りますが、これが表示部分が存在しない自動処理などで使用する部分で使う 【 コンソールアプリ 】 になります。PCを使った作業を行う場合、アプリケーションがGUI（Graphical User Interface）環境
で動作している訳ですが、これは、前述のコンソール上で動くものとは異なります。その為、これは、コンソールアプリとは異なる物になります。こうしたアプリケーションを作る場合、Visual Studio Comminutyを用いて作業をする場合だと、 【 フォームアプリ 】 を選択して作業を始めます。
JavaScriptは、HTMLと言うGUIを用いたものを制御する仕様になっているので、初歩的な処理を行う場合でも、フォームアプリを作るような流れになるので、コンソールアプリのようにオブジェクトを用いる処理がない物とは異なるので、構文も少し難しい記述になります。
J avaScriptと入力待ち
Pythonはコンソールで動作するような状態で使う場合、入力待ちを用意する場合、 【 input()関数 】 だけで対応できるので、変数を宣言して、その値としてinput()関数を代入して、その引数を代入できるのですが、この構文が用意されている部分で入力待ちが発生し、入力を行い、Enterキーで入力が確定した段階で、変数が確定し次の処理が実行される流れになっています。
その為、
【 変数名 ＝ input関数（） 】
で済むのですが、Pythonもtkinterを使ってTK環境でフォームを呼び出し、テキストボックス内の変数を用いてラベルに計算結果を出すような処理を行うとコンソールアプリの記述の様には行きません。
JavaScriptでは、前述のコンソールアプリのようにコンソール上で表示がされるという仕様はなく、あくまでもブラウザ上でHTMLを表示することを前提にしていますから、HTMLファイル内にで使用しているオブジェクトをコントロールする仕様になっています。その為、タグに対して何かを行う流れになるので、 【 対象に対しての処理 】 が必要になります。
■ HTML側での準備
変数を入力してそれを表示する場合、constで定数として宣言されたものを表示するだけだと、先日書いたように
【 document.write() 】
を用いて記述すれば、指定した値がそのまま表示できます。
ただし、入力した値と言う条件になると、少なくとも入力した状態が見える必要が出てきます。
HTMLはあくまでも 【 リッチテキスト 】 なので、表示と言う処理しか実装されていません。その為、コンソールアプリのような処理はできませんから、この場合、フォームなどを使って、入力が可能な環境を作る必要があります。
■ <imput>タグ
HTMLでは、フォームを配置するタグが用意されているので、HTML内でウィジェットの配置を行えます。
フォームについてはオフィースソフトの入力フォームの製作と同じですが、こうしたフォームはHTMLの標準機能として、前の世紀のバージョンでも使用できる仕様になっています。
ウィジェットの配置ですが、 <imput>タグで行いますが、この時に各項目のレイアウトを行う場合、<form>タグを用います。HTMLファイルには、
のような形で記述する事になりますが、formタグの中にimputタグを配置する事になります。
コーディングを行う場合、任意のコーディング環境があった方がいいのですが、入力支援などが用意されたものを使った方が作業がしやすいので、メモ帳で作業するよりもコードエディタや研ぐ王環境を用意したほうが作業が行いやすくなります。VisualStudio Codeの場合、
のような画面になりますが、 【 📁作業用フォルダ 】 を最初に指定して、
のような形でツリー構成を作って作業をすることができます。フォームの指定すると、<p>タグなどでレイアウトが出来るので、<form>タグを使うと、レイアウトが行いやすくなります。ちなみに、
のコードを実行すると、
のようにフォームが表示されます。
■ <label>タグ
データベースソフトを使うと、テキストボックスを追加すると、もれなく、ラベルも一緒についてきますが、フォーム内で項目を表示する時にはラベルを使います。HTMLでフォームを使う場合にもラベルを使用できますが、この機に使用するのが、 【 <label> 】タグになります。
<label>タグは、タグの間に表示をする内容を記述するので、装飾文字と同じような記述で、
【 <タグ名> 内容 </タグ名> 】
のような記述になりますが、
のようにすると、改行タグがないので、
のような表示になります。左側がラベルで、右側がフォームです。
■ ウィジェットの選択
ウィジェットの選択は、<imput>タグの属性で指定するのですが、この属性の指定で、ボタンやチェックボックスなどを指定する事ができます。 これは、typeで指定できるのですが、
のような感じでウィジェットを指定できます。表示してみると、
のようにウィジェットが表示されます。HTML5からウィジェットも追加されており、
のような物も追加されており、
のように日付や時間の入力も行いやすくなっています。見た段階で範囲のUIはHTML4では存在しなかったものになりますが、こう言ったUIを現在はタグの指定で使用できるようになっています。その為、マウスやタッチ操作で入力できる物も増えている訳ですが、
■ 範囲 （type="range"）
■ 色 （type="color"）
■ 番号 （type="nunber"）
■ 時間 （type="time"）
■ 週 （type="week"）
のような物を使用する事ができます。プルダウンの場合だと、別のタグになりますが、<imput>タグの選択肢も現在はこんな感じで増えています。
J avaScriptでのフォームの扱い
フォームを制御する場合、フォームの名前で管理する事ができます。今回は、<imput>タグを使っていますが、テキストの表示の指定をした場合に、定数を代入するような処理をする場合、
【 オブジェクトの確定 】
が必要になります。この時に 【 取得 】 と 【 代入 】 で手法が異なります。
テ キストエリアに値を代入する
この場合、フォームとテキストを入力する対象を確定して、そのオブジェクトに対して値を代入する事になりますが、この認識を 【 属性】 を用いて行います。
前述のように<imput>タグは属性の指定で、何を使うのかの選択が出来ましたが、属性には、名前を指定する 【 name 】 と言う属性があります。指定した値が存在し、フォーム内にその値を代入するような処理をする場合、このname属性を元に場所を指定する事になります。
例えば、
のように
■ フォーム 【 <form>タグ 】 ： F1
■ テキスト 【 <imput>タグ 】 ： T2
と言う名称を付けています。これが呼び出すときの名称になります。
そして、onclickで文字列が指定されていますが、
【 文字列（） 】
の形になっています。つまり、これは関数なので、コード側で関数を記述してそれを実行していることになります。
■ 関数の記述
関数については、
の中でPythonで関数を使用する方法について紹介していますが、Pythonと同様にJavaScriptもオブジェクト指向なので、クラスの概念が存在します。クラスについては、何も書いていませんが、クラスの構成要素として使用する 【 関数 】 は存在します。
関数と言うと、 【 f(x) = 変数xを用いた数式 】 という形で高校の数学で登場しますが、基本的に、この時のf(x)の概念と同じです。これが2変数関数になると、3DCGと同じ空間になります。これについては、
の中でも触れていますが、二変数関数になると、
【 z(x,y) = 変数ｘと変数yを用いた関数 】
になっています。関数というのは、中学校で登場する連立方程式などで登場する
【 解である y を求める為に x を用いた数式を解くための式 】
の考え方が変わっただけなんですが、xの推移で変化するyと言う存在は、変数xを用いた関数なので、その表記として変数yを用いるのではなく、数式内で使用している変数で表記した物を解として数式の記述を行うようになったものが関数です。その為、（）の中には変数が入ります。プログラミング言語でも、関数を使う場合、 【 関数名（変数） 】 になりますが、この構造はf(x)のfとxが任意の名称に代わっただけなので、高校で関数を学ぶと、オブジェクト指向のプログラミング言語の関数が数学で登場した関数と同じ記述なので、それほど迷わずに理解できるのではないかな？と思います。中学校だと、関数は出てきていないので、
【 y = x 】 ＝ 【 f(x) = x 】
という法則を理解して、その上で、
■ 数式の記述
f(x) = 変数ｘを用いた式
■ プログラムの記述
関数名(変数名) = 変数を用いた処理
と言う状態になっています。プログラミング言語の場合、
関数内で変数の出力が必要な場合、returnで戻り値を
返す
と言う処理の決まりがありますから、変数がない場合には、returnがなくても動く（C++のように文字を表示するだけでも 【 return 0; 】 が必要な物もありますが...。）が、これはどの言語も共通した仕様になります。
今回のコードは、ボタンを押すと文字が変わるコードになりますが、JavaScript部分は、
のようになります。ここで、documentの後に、フォームとテキストエリアの名称を指定して、その中のvalueに対して文字列を指定する処理を関数で記述しています。その為、元々valueには文字列が入力されていますが、ボタンにそれぞれの関数が割り当てられているので、ボタンをクリックするイベント（onclickイベント）によって関数を呼び出しています。
これを実行すると、
のようになり、 【 ボタン１ 】 を押すと
のように指定した文字列に変化し、 【 クリア 】 を押すと
のように文字列がなくなります。JavaScriptですから、この表示する文字列を変数で指定することもできるので、
のようにすると、
のようにボタンを押したときの結果が変わります。その為、
のように数値の変動を入れて実行すると、ボタンを押すと、
のように数値が増え、クリックするごとに数値が増加します。
このように、テキストエリアの内容を書き換える場合には、関数の宣言とその記述が必要になるので、フォームアプリを作る時と同じで、コンソールアプリを作る時よりも少し複雑な処理になります。
その為、関数を使うという点では、コンソールアプリを作れるPythonと同じですが、組み込み関数だけでコンソール上に何かを表示するのと、フロントエンドとしてWEBブラウザを使う場合だと少し条件が異なります。
■ 値の取得
値の取得をする場合ですが、変数に代入をする事でそれが可能になりますが、表示に反映させる場合だと少し処理が変わってきます。
例えば、先ほどのコードに似ていますが、HTML部分を
のようにして<b>タグ内に表示をするとします。ここでNAMEではなく、
【 id 】 に値を指定します。そして、これを用いて、取得した値を指定していきます。スクリプト部分は、
のよになりますが、変数a1を宣言して、テキストエリア内の値を取得します。
そして、その後の、getElementByIdで<b>タグのIDを読み込みます。そして、これにtextContentのプロパティを追加します。そして、その中に変数を代入します。
プログラミング言語の 【 = 】 は代入演算子なので、
【 左辺の物に右辺の物を代入する 】
という意味になります。その為、数学の等式などの一致や等号については、違う表記になり、
■ 等号 ： 【 == 】
■ 一致 ： 【 === 】
を用います。この一致と言う条件だと、型を変えて試してみると色々面白い特性があるのですが、プログラミング言語の変数の宣言は等式に見えますが、 【 右辺の内容を左辺に代入する 】 という意味になります。
このプログラムを、
のようにラベルを追加し、レイアウトを変更して、スクリプトも
のようにテキストエリアもクリアできるようにしてみました。これを実行すると、
のようになり、 【 クリア 】 のボタンをクリックすると、
のように表示がクリアされ、
のようにテキストボックスに文字を入れて、 【 ボタン1 】 をクリックすると、getElementByID()で取得した対象オブジェクトのTextContentプロパティーに対してフォームの内容を代入しているので、
のように<b>タグ内に変数が代入されて表示が行われています。
このコードを、
のようにして、コードの表示部分を変更して、
のように表示に算術演算子を追加して、変数と文字列を結合するように指定した場合、
のような表示になり、
のように文字列を入力して、ボタン１をクリックすると、
のように文字列が結合された状態で表示されます。Pythonでコンソールで実行する場合だと、input()関数とprint()関数だけで数行で作れる仕様になっていますが、やっていることがフォームアプリと同じなので、JavaScriptでこれを行おうと思うと少し難しい処理が発生します。
表示をするだけだと、先日書いたように、document.write()で記述して、処理の後に 【 ; 】 を入れて改行をすればいいのですが、文字列の入力処理になると、いきなりこれが出てくるので、JavaScriptの知識もなくコードだけ見ても何のことだか解らず、そこからスタートすると理解しにくいはずです。
BASICみたいにサブルーチンを組まなくてもコードが書けるような仕様と言うのは、どちらかと言うとコンソールアプリでオブジェクト指向ではない記述（今回のコードもクラスを使ってオブジェクト指向な記述をしていないので非オブジェクト指向なコードになります。）をしたような物になりますから、そこからJavaScriptやVisualBASICなどを学ぼうと思うとかなり仕様が異なっているので困惑すると思います。
この仕様を見てもらうとgetElementByID（）を使うとオブジェクトの値の取得が出来ることが確認できると思いますが、これは、オブジェクト名での処理と同じことがIDの指定でできるので、テキストボックスの値を得る場合だと、valueで値を指定しているので、
■ 値の取得
■ document,.getElementByID(対象のID).value
で対象のオブジェクトのvalueの値を得ることができます。これがフォーム内のテキストボックス（<input type"text" value="">）の中のvalueの値を取得するための記述になります。この条件を見ると、
■ document,.getElementByID(対象のID)
までが、オブジェクトの特定で、その後がオブジェクト内の対象の指定という事になります。処理においてテキストの書き換えを行っていますが、これも全く同じで、前述の記述の後が異なるだけです。記述の書き換えは、
■ 記述の書き換え
■ document,.getElementByID(対象のID).textContent
を用いています。
つまり、IDの確定後にその対象に対して、textContentによって表示内容を書き換える事ができます。
このように 【 ID 】 で管理して、 【 プロパティ 】 で処理を実行することで、今回のような処理が行えます。
値の代入と取得ですが、取得の場合、変数として読み込むので、
【 変数名 】 = document.getElementById(ID名).Value
のようになります。valueは、Imputタグの属性になりますが、この属性を変数に代入する事で変数としてその値を使用します。これが値の取得をする時の記述です。これに対して、値の代入をする場合には、
document.getElementById(ID名).Value = 【 値 】
となります。
プログラミング言語では、左辺に右辺の値を代入するという仕様なので、指定したIDのお武家クト内のvalueの属性の値に指定した値を代入することで、指定した値を代入する事ができます。
とりあえず、先日は、HellomWorld!をJavaScriptで行う方法を書きましたが、通常だとその後にやってくる
【 文字を入力して表示してみよう 】
をやってみました。と言うか、Document.Write()から比較すると、恐ろしく難しい処理になっていますが、フォームアプリで動的なことを行おうとすると少し難しい処理が発生します。
関 数の宣言
Pythonでは、 【 def 関数名（） 】 で関数を宣言していましたが、関数の宣言はプログラミング言語で記述が異なります。
今回は、JavaScriptで関数の宣言をしていますが、JavaScriptで関数を宣言する場合には、 【 Function 関数名() 】 で宣言します。今回の関数を見てもらうと、 関数名（） になっていますから、引数が存在しない関数という事になります。その為、関数の中にretuenがありません。
関数の宣言をする場合、内部で変数を用意してそれを実行して演算処理をする場合だと 【 retuen 変数名； 】 で戻り値を用意して関数の実行時に関数に代入された値を使用する事になります。ただし、引数がない場合には、今回のようにretuenが存在しない場合もあります。
戻り値が返らない場合、関数の実行時に変数（引数）の代入が行われた場合でも関数から数値が戻ってこないので処理がされません。その為、returnでその値を関数外で使用する事になります。
その為、処理自体が関数の内部処理で、呼び出しが関数の外だと、値が出力されない（と言うのも関数の内部処理という事は、引数で宣言されている値がローカル変数なので、外部アクセスが不能な変数で処理が行われているので、それを外に出さない限り変化した変数の値が出力されることはありません。その為、処理の結果である戻り値を出力する為にreturnで値を外部で使えるようにします。）ので、そう言った処理を行う事になります。
J avaScriptの注意点
PCなどを使って、通常のJavaScriptを使用する場合だと、今回のようにES（ECMS Script）準拠の記述でコーディングをすればいいので、それを算用して学習すると問題がないのですが、jQueryを使った場合だと全くコードの作りが違うので注意が必要です。
jQueryはJavaScriptの記述を簡素にできる外部ライブラリですが、かなり記述が異なります。その為、何をするのかで選択肢が変わりますが、JavaScript(ECMA Script)を使う場合だと、外部ライブラリの有無でできる事が変わるので注意が必要です。
基本部分は実装機能でできるので、HTML5で使ったウィジェットの値を変数として使用して動かす事もできますが、JSONやThree.jsなどを用いたWEB-GLを使用する場合だと、JavaSctiptの基本部分と外部ライブラリの知識の双方が必要になります。これは他のプログラミング言語でも同じですが、外部ライブラリは未実装の関数まみれなので、別途追加しないと使用できない拡張機能になります。
JavaScriptと言うよりもプログラミング言語全般に言える事ですが、プログラミング言語で実装されているのは、組み込み関数と標準ライブラリに実装されている関数群だけなので、未実装の機能だと追加する必要が出てきます。その為、TensorFlowなどを使う場合も同様で別途ついなければ、その機能を使うことはできません。
JavaScriptも拡張ライブラリが多く存在するので、基本的な騎乗を覚えた後だと、必要なライブラリを探してみるとより効率的な作業ができますが、PCを購入した直後でできる処理というのは、実装機能のみなのでその範囲でコーディングを行う事になります。
あと、 【 OOで始めるJavaScript入門 】 のような書籍の場合、標準機能だけの本なのか 【 拡張ライブラリを必要とするもの 】 なのかを確認しておく必要がありますが、拡張ライブラリを使用する場合には、ネットからダウンロードしてくる必要がありますから、必要な物を揃えて、環境の構築をした後に初めて使えるようになるものになります。
今回のコードですが、<SCRIPT>タグを用意しているので、単体のHTMLファイルで構成されていますが、通常の記述の後にJavaScriptを記述しています。
また、書籍で学習する場合、バージョンが古すぎると問題があるので、何に対応したものなのか？も含めて書籍を選ばないと記述が違っている場合があります。