PCを購入するとOS上で動作するアプリケーションを使用できますが、現在は色々なアプリケーションの利用が出来るので、標準アプリだけでも出来ることは増えています。
ただし、Linuxのディストリビューションのように何でもそろう訳で貼りませんから、フリーウェアやOSSを使ったり、商用利用をする場合で複雑な処理をする場合だと、商用パッケージやサブスクリプションのツールを使う事になりますが、OS上で出来ることも増えています。
PCを使ったプログラミングを行う場合にもコードエディタなどを使う事になりますが、標準の機能だとそう言った物はないので、テキストエディタや別のツールで代用する事になります。
基本的にオンラインの環境であれば、ストアや公式サイトからソフトウェアをダウンロードして使用できるのですが、PCの購入直後の状態だとコーディング環境だとメモ帳などを使う事になります。2バイト文字まで使えるテキストエディタを使うとコード自体は書けるのですが、インタプリタではなくコンパイルが必要な物だとPowershellかコマンドプロンプトを使ってコンパイルを粉う必要があります。
WINDOWS環境の場合だと、.NET Frameworkが標準実装されているので、csc.exeを使うと、C#のコンパイルを行う事が出来ます。OSに関係なく使えるものだと、WEBブラウザで動作する物になりますが、この場合、
■ HTML
■ CSS
■ ECMA Script(JavaScript)
を組み合わせて動く物を作る事ができます。
CSSとECMA ScriptはHTMLのタグに対して指定を行って装飾や動的な挙動を実装する為の物になりますが、コンパイルなしで動作するものになっています。
H TML
HTMLは、マークアップランゲージなのでプログラミング言語ではなく、WEBブラウザ上で表示を行う際に装飾などのレイアウトを行う物になります。
構造としては 【 タグ 】 で管理した状態でテキストに対して機能を付加していく仕様になっていますが、文章の装飾だけでなく、
■ TABLEによるレイアウト
■ FORMによるウィジェットの追加
■ ハイパーリンクによるHTMLファイルの呼び出し
に対応しています。また、サーバへのPOSTとしてmail:toでメールが送れるなどの機能もありますが、1995年位のWIDOWS 95が登場した辺りでもこうした事が可能になっていました。1990年代後期でもアプレットなどを使った処理もできていたので、プラグインによって処理を増やす事が出来ていましたが、使用できるのが 【 リッチテキストコンテンツ 】 なので、ワープロソフトで作る文章の構造をHTMLで作る事が出来るようになっています。
表示の部分だけで考えると、そうなりますが、このファイルは外部から素材を参照できるので、
■ 画像
■ 音声
■ 映像
を参照して配置できるようになっています。これが20世紀から存在しているごく一般的な機能になります。その為、前の世紀のように 【 マイコンよりも遅いPCが一般向けPCとして十万円以上で売られていた時代 】 ですらそれが可能だったので、現在だと出来て当たり前な状態になっています。
HTMLはサーバ上で情報をアップロードして表示する際に使用する物になりますが、Linuxでサーバを立てて、LANを組めば1990年代後半でも個人でサーバクライアントシステムをテストする事は出来ました。その為、サーバアプリケーションのローカルテスト（つまり、物凄く弱いサーバでアクセスが１台の状態でテストをする方法やコマンドでアクセス数を増やしてみた時の挙動のか確認辺りまでだとこの構成にするだけで可能でした。）が可能だったわけですが、現在はPC自体も低価格な物がありますが、ローカルテストをする際に仮想化環境を使って作業が出来るので、単一の端末でもサーバアプリケーションのデバッグが出来るようになっています。
HTMLについては単なる表示なので、サーバの負荷が発生する場合にはアクセス過多が考えられるのですが、行っている事は、クライアントサイドでサーバ内のファイルにアクセスしてそれをクライアントサイドでブラウザ上でHTMLの記述をレンダリングしているだけなので、サーバサイドアプリケーションのようにサーバ側での演算処理が発生している訳ではありません。
その為、HTMLで用意したタグで指定した表示だけだとクライアントサイドの処理で完結するので、ワープロソフトで作ったリッチテキスト同じなので、使用しているファイルの呼び出しが出来ればタグで指定した内容の表示を行う言ことができます。
■ HTMLの構造
HTMLを使った場合、タグで表示を制御する事になりますが、
基本的な記述の仕様が決まっているので最初にその構造を作る事になります。htmlファイルの場合、
のように<html>タグの間に<head>タグと<body＞タグが格納されるような形になっています。基本的に、
■ <head>タグ ： 設定
■ <body>タグ ： 内容の記述
になっているので、表示する内容は<body>タグに記述する事になります。
■ <head>タグ
<head>タグは記述が多いので、
の様なかになりますが、最初に
<meta charset ="">
の部分でキャラクターコードを指定します。この時にutf-8を指定する事になりますが、その後に、タイトルバーに表示される文字列を指定します。この時の記述が、
<title>タグ
で挟まれた文字列になります。検索エンジンで検索した時の表身もメタタグで指定できるのですが、
■ キャプション ： 内容の記述
■ キーワード ： 検索時のキーワード
の設定ができます。これについては、
<meta name="description" content="～">
<meta name="keywords" content="～">
CSSやECMA ScriptについてはBODYタグに書いてファイルのみで実行する事もできますが、CSSのように同じ設定を別のページでも使用する場合には1つのファイルを作っておいて呼び出すようにした方がいいので、構造的にそう言った仕様になっています。この時に使用するのが、<link>タグになりますが、
<link rel="~" href="~">
の形で呼び出します。スクリプトの場合は、
<script>タグを
を使う事になりますが、これも外部参照をする際にはヘダーに書いてファイルを指定します。この時の記述が、
<script href="～">
になります。<body>タグ内に書くとタグの間にコードを書いて実行する事になりますが、外部参照をする際にはこう言った記述になります。
の部分になります。IEは廃止になっているので、使っているユーザー用になりますが、IE8以前でHTML5のJavaScriptやCSSを使う場合には、外部参照をして実行できるようになっています。これが、外部のスクリプトを絶対パス指定で参照する形で指定している部分になります。
■ <body>タグ
HTML4までだと、範囲を指定するのは<DIV>タグでしたが、HTML5から、表示の範囲指定として
■ <article>タグ
■ <serection>タグ
が追加されました。この二者ですが、
■ <article>タグ
独立性の高い構成で使用する
■ <serection>タグ
articleよりも独立sしていない場合に使用する。
テーマなどの似たコンテンツの塊で使用する
ような用途になっています。この要素を<boyy>タグ内に使用するので、
のような形になりますが、<selection>タグを<artile>タグで包含して、構造を作るような仕様になっています。
現在の記述だとこんな感じになっていますが、この構造を見ると、
■ コンテンツの構造を決める
■ <article>タグで一つの塊を作る
■ テーマ単位で<selection＞タグでまとめる
と言うコンテンツの構成を考えて実装する事になります。
■ コンテンツの構造
ページの表示をする際に情報を分けて表示する事があrますが、ページの上下に情報を入れて間にコンテンツを入れるような作りにする事もできます。この場合、先程の構造の上下に新規にヘッダーとフッターを追加する事になりますが、こうした構造もタグで指定できるようになっています。この場合、
■ <header>タグ
■ <fotter>タグ
を使用する事になりあm巣が、これを<body>タグ内に記述する事で、コンテンツの上下に指定した表示を追加できます。コンテンツの作り方にもよりますが、ヘッダーとフッターにコンテンツが挟まれて三分割されたような構造だと
■ <header>タグ
■ <article>タグ
<serection>タグ
■ <fotter>タグ
のような構造になります。ヘッダーとフッターを使わない場合だと、
■ <article>タグ
■ <serection>タグ
で作れるますが、コンテンツの上下のいずれかにメニューとタイトルを入れて表示するような作りだとこう言った方法もあります。
■ タグ
タグは装飾文字やテーブル組など色々な事が出来るようになっていますが、基本的にhtmlはタグによって構造を作って、その間に挟まれた物に効果を与える仕組みになっています。
また、HTMLの場合、外部参照で、マルチメディアファイルを読み込めるようになっているのですが、ブログの記事やWEBサーバ上にアップロードされているコンテンツについては、画像などの素材が殆どの場合で使用されていますが、この呼び出しについてはタグを使用する事で対応できるようになっています。
HTML5で画像などを呼び出す場合には、専用のタグがありますが、これについては
の中で触れています。
■ タグの仕様
タグの記述ですが、<P></P>のようになっていて、一部例外はありますが、基本的にこの間に記述した内容に対してタグの機能を実装する事が出来ます。先程登場したタグの構成もこの状態になってますが、コンテンツの構造で考えると、<body>タグの中に情報を記述していくので、
のような構造になります。この時にタグが配置されていますが、
のような形で、内容を開始と終了をするタグで閉じることになりますが、最初の部分を開始タグと言い、後の部分を終了タグと言います。
そして、画像のようにタグで囲まれた部分の事を 要素 と言います。
そして、タグには属性を追加する事が出来るのですが、タグの<>の中に属性を追加する事によって用意された機能を追加して使う事が出来ます。リングで使う 【 href="" 】 も属性になりますが、
のよに属性名と値を使う事で、指定する事が出来ます。
ファイルの外部参照をする際には、CSSやJavaScrptの読み込みと同じように.cssや.jsの世なファイルを読み込む場合でもherfの属性を用意して、値として対象のファイルの絶対パスや相対パスを指定すること射なりますが、これはハイパーリンクを使う際の<a>タグや画像を呼び出す際に使用する<img>タグでも使用します。マルチメディアファイルの参照をする際にはそう言った物を使いますが、機能を拡張をしてブラウザ上で特殊な物を表示する際にもライブラリを読み込むことになるので、ファイ🄬の外部参照をする事になりますから、herfの属性で指定をする事になります。
■ ブロック要素とインライン要素
タグには<DIV>や<SPAN>のように余計な機能が実装されていないタグが用意されていますが、こうしたタグはCSSを属性として実装しても元々実装されている機能がないのでカスタマイズしやすい物になっています。これはタグを格納できるのでブロック要素になりますから、ブロック要素とインライン要素の双方を格納できます。これに対し、<p>タグのように属性を生成する際に内部にDIVなどのブロック要素を格納できない物がありますが、これがインライン要素になります。インライン要素の場合だと内部にインライン要素を包含できる（入れ子状態にできます。プログラミング言語だとこの状態の事をネストと言います。）のですが、Serectionやarticleのようなブロック要素の物を入れ子にする事は出来ません。あと、ハイパーリンクの中にハイパーリンクを入れる事は出来ないので、<a>タグのネスト構造は存在しません。<a>タグもインライン要素なんですが、DIVなどのブロック要素を入れて空間を選択対象にする事もできます。
あと、リストとかのようにリストの塊の中に項目を追加する事になりますが、この時の<li>タグはインライン要素ですが、
ただし、HTML5ではコンテンツモデルが採用されているので、先程の考え方はおかしな構造にしない為の判断基準になります。
フ ァイルを使う
HTMLはテキストで記述した物になるので、基本的にはテキストファイルになりますが、拡張子が
■ .htm
■ .html
になったファイルであれば、ブラウザ上でhtmlファイルとして認識されるので、記述した内容をレンダリングして表示する事が出来ます。先程の物をこの形式で保存すると記述した内容を反映してブラウザで表示する事が出来ます。
htmlの<body>タグの内容はテーブル組やフレームの構造にしない限りは上から表示内容を指定していく事になるので逐次処理のような構造になります。
HTMLファイルは文字だけですから、装飾文字やフォームのようなウィジェットを使う事はできますが、マルチメディアファイルを使う場合には外部から読み込む必要上がります。その為、コンテンツを作る場合には、
■ HTMLファイル
■ ページ内で使用している素材のファイル
■ 挙動や設定などで使用sるうファイル
を個別に用意する事になります。
■ 練習用のファイル
HTMLはフロントエンドを扱う物になりますが、HTMLだと骨組みなので、構造を考えて配置するのはHTMLでその状態に対して層色を作る場合だとCSSを使います。練習をする場合、簡素なコードを書くので、文字数も増えないので、
■ タグ
■ CSS
などを扱う場合、タグの構造を作って、最初に対象のタグの属性を書くことで、装飾の変化などを試していく事で学習する事が出来ます。
その後に、テンプレートでも紹介したように外部参照をする仕様にして動かす事になるので、ディテクトリ管理が発生してくるわけですが、呼び出す為の相対パスや絶対パスを使った指定をする事になります。
1つのHTMLファイルで複数の素材を呼び出す場合、📁フォルダの階層が同じ場合、ファイル名だけで呼び出せるので、そう言った形で学習する事になりますが、ディレクトリの階層を考える場合には、相対パス指定で呼び出す事になります。これは、PC内での開発を行う際にはローカルファイルとしてHTMLファイルが存在している為ですが、1つのPC内の特定のストレージ内のファイルなので、PCのストレージを先頭とした階層の指定だけでも対応できます。これが、コマンドプロンプトたターミナルを使った際に使用するcdコマンドと同じ考え方になりますが、端末が決まっている場合だとこのディレクトリの変更はどこかのサーバの指定をする事はないので、基本的に端末の内部である事を前提にディテクトリの指定をします。これが、ローカルファイルでのパス（ファイルのあるアドレス）の指定になります。
その他、自分のアカウント内のコンテンツを開発する際には使用しているサーバ内の特定のディテクトリ内のファイル管理になりますから、この場合のパスの指定はPC内のディレクトリ管理と同じなので相対パス指定になります。
これに対し外部リンクの場合だと、そもそもサーバが異なるので、別のPC上の特定のファイルへのアクセスをする事になります。そうなると、外部のPCヘノアクセスになりますからPCに指定されているドメイン自体が異なるのでドメインも含めた階層の指定を行ってファイルのアドレスの記述を行う事になります。
このようにサーバや端末街での参照をする際に使用するのが絶対パスになります。これについては、
の中で触れていますが、階層によって相対パスの使い方も変わってきます。
サーバを自前で用意したり、レンタルサーバを借りてアカウントを取得して使用する場合、アカウントはPCの📁フォルダと同じなので、その区画に対して使用できる容量が決まっています。その中でツリー構成を作る事になりますが、サーバのアカウントを用意してアドレスを指定してアクセスした時のトップページはindex.htmlになるのでこれを用意してからハイパーリンクで相互リンクをして切り替えることが出来るような仕組みを作る事になります。その為、
の様な感じでコンテンツ単位で素材とファイルを分けることもできますし、こう言ったがてごりーをHTMLと素材単位で分けておいて、HTMLファイルはHTMLの単独でまとめておいてそこに追加してディレクトリで管理するという方法もあります。この辺りは管理しやすい状態でツリー構成を作る事になりますが、この構造で考えると、新たにWEB-GLのコンテンツを追加する場合だとライブラリの保存先も決めておく必要がありますが、他のコンテンツと同じようにコンテンツ用のフォルダを作り、その中にHTMLと素材で分けて追加しておくとアップロードもその場所に行えばいいので管理がしやすくなります。このようなコンテンツの構成を考えて全体のページを作る場合も基本となるのは単一のページを作る作業になりますから、どう言った方法を使えばそれが出来るのかを知る必要があります。その時に止まった状態の物だけを配置するという条件だと、HTMLとCSSだけで対応する事が出来ます。
C SS
HTMLには文字の装飾がおこなえるタグもありますが、細かな設定が行える訳ではありません。ただし、HTMLに対してCSSを使うとワープロソフトやグラフィックツールのような細かな設定をする事が出来ます。その為、ピクセルやパイカやミリと言う単にで指定が出来るので、より細かな設定が行えるようになっています。CSSについては、
の中で触れていますが、画像に対してフィルターをかける事もできるので、用意した1枚のカラ＾画像でも異なる質感にする事が出来ます。
また、アメブロでもCSSが使用できるので、
のようにブログのテーマを決めた状態でも記事内のHTMLの記述でレイアウトや枠の形状を指定する事もできます。
CSSには、アニメーション機能があるので、フレーム数を指定して状態の変化をしえ値する事で動きを追加できます。その為、HTMLとCSSだけでもアニメーションを追加する事が出来ます。
また、CSSでは課増の拡大縮小や回転もできるので、CSSの盛業をすると、実質的にレイヤーの階層の実装やラスターグラフィックの
■ 移動
■ 回転
■ 拡大・縮小
が出来るので、グラフィックツールで行えることの大半の機能を使う事が出来ます。
■ CSSの記述
CSSはタグの属性に記述する方法と、タグ自体に指定する方法がありますが、<body>タグ内に<style>タグを用意してその中に描いて行く事もできますが、同じタグを使用している状態で属性を変えようと思うと少し煩雑だったりしますし、同じタグで場所で違う色にしたい場合、タグ自体に指定をすると管理しにくくなります。
そこで使用するのが属性による管理になります。
タグには属性を付けることができますが、
■ id
■ class
の2つがあります。
■ id
■ タグ側 ： idで属性を指定
■ CSS側 ： #で指定
idはページ内に1つしか存在できない
■ class
■ タグ側 ： classで属性を指定
■ CSS側 ： .で指定
dlassはページ内に複数設定できる
ようになっています。CSSだと複数使用するのでclassを使う事になります。
ア ニメーション
HTMLでアニメーションを行う場合、20世紀だとアニメーションGIFを使ったり、プラグインで動かすような仕様になっていましたが、アニメーションGIFは現在でも使用できるので、
の様な感じに素材を描いて動かして使用する事もできますが、
の中で触れているようにソフトでフレームの変化をレイヤーで追加してそれをアニメーションGIFで書き出す方法もあります。
動的な処理については、
の中でも触れていますが、現在はベクターグラフィックのSVGもアニメーション機能が使用できるので、簡素な物だとコードだけで動的な物が作れるようになっています。その為、アニメーションとして動作する物を実装する際には、
■ CSS
■ SVG
を使うという選択肢が存在しています。WEB上のSVGについては、
の中で触れていますが、コードだけでもSVGの実装が可能でアメブロでも文字数を結構消費してしまいますが、SVGを使用する事が出来ます。
J avaScript
HTMLとCSSは定数化した物なので、レイアウトを決める際に使用しますが、タイムライン上での動作を指定することでCSSの機能を使ってアニメーションを作る事もできます。
HTML 5.1もcanvas機能があるので グラフィックも扱えるようになっていますが、イベントハンドラを使ったシアルタイムな処理についてはマークアップランゲージとカスケードスタイルシートのような表示のレイアウトを決めるような物では対応できません。その為、何かしらのプログラミング言語を使用して動作を実装する必要があります。
HTMLではブラウザ上で実行できる言語としてJavaScriptが用意されているので、ブラウザ準拠の記述にする必要がありますが、動的な処理を実装する事が出来ます。
PythonやC#を使う場合、コンソールで動作するコードも書けるので、コードを書いてコンソールで動作させるという方法が使用できるので、そう言った物を先に使用してイベントハンドラが使用できるフォームアプリの学習をしますが、この時のコンソールアプリがローカル駆動する物のバックエンドの処理で、GUIを使ったプログラミングが人の見える部分の制御なのでフロントエンドになります。
通常のプログラミング言語だとコンソールが主体で、それにGUI環境を追加してフロントエンドを作って行く流れになりますが、JavaScriptはHTMLの制御用の言語なので、最初からHTMLを制御する方法を学習する事になります。つまり、通所の言語とは異なり、いきなりイベントハンドラなどが使用できるので、マウスやキーボードの状態変化を検知して動作するような物を作れます。
とは言っても、デバッグの結果をコンソールで確認する事もできるので、ウィジェットベースで記述せずに簡素な文字の処理を確認したい場合だと、console.log('~')を使います。
とりあえず、VIsualStudio Codeでコードを打ち込むことにしたのですが、コードエティタを使うと
のように候補が出るので入力する物を選択すると、
のようにタグの入力が行われるのですが、これは、要素も含めて追加できるので入力の負荷を抑えることができます。
この状態でファイルを保存すると
のようにHTMLファイルが生成されるので、この状態で実行すると、
のように何も実行されません。Chromeでは、F12キーで開発ツールの表示が出来るのですが、これを開くと、
のように現在のページのコードと結果と関連する要素がひょじされます。作ったファイルを開いているので、コードを見ると、
のように先ほど度欠いた部分が表示されています。そして、下側には、
のようにCSSなどの設定を見ることが出来るようになっていますが、上部を見ると、 【 console 】 という項目がありますが、これがJavaScriptでconsoleでの動作を指定した時の挙動になります。タブを選択してみると、
のようになっていますが、CSSとJavaScriptのロードを行っていないので、エラーが出ていますが、Colsole.logの結果は反映されています。
次に、読み込んでいるヘッダーの内容をコメントアウトして、
のようにalert()メソッドを使って引数として文字を入れて表示をする記述をconsole.log()の後に記述したコードを書いて実行してみることにしました。プログラミング言語では、逐次処理をするので、特殊な例がない限りは、上から順番に実行されます。ただし、処理には優先順位があるので、処理待ちを入れて先に実行される物もあります。例えば、alert（）のようにコードの実行よりも先に出す物の場合、優先順位が高いので、処理の実行の前にalert()メソッドが実行されます。実際に実行してみると、
のようにconsole.log()の実行前にalert(）メソッドが実行されています。そして、alert()メソッドを閉じるとコードが実行されるので、コードの順番とは逆になっています。
通所のコードの記述だと、手続き型の書き方をした場合、書いた順番に処理が実行されるのですが、これは、逐次処理なので、項を使った式のように 【 状態に変化を足していく 】 ような考え方になります。その為、コーディングの初期に学習する構造だとどう言った順番で処理を並べて行くとその挙動になるのか？を考えることになりますが、Scratchのペンツールでの図形を描く時のパターン解析と実装もそういった処理の流れを考える為のツールになりますが、この図形を描く際に存在するパターンを見つけてそれを行う為の工程を考える為のプログラミング言語として1980年代辺りのBASICインタプリタにもLOGOと言うカメを使って座標平面上のパターンを描くためのアルゴリズムを考える練習が出来るツールが実装されていましたが、現在のプログラミング言語だと、PythonのTurtleが同様に図形を描く際にその図形の傾向を解析して、どう言ったアルゴリズムを実装sれ場いいのかを考えながらコードで実装してラインで図形を描くことが出来るモジュールになっています。ちなみに、これは標準モジュールなので、そのまま呼び出す事で使用する事が出来ます。
基本的にChromeの場合、Colsole.logの値を見ることが出来るので、PCを購入直後でコードエティタがない状態だと、メモ帳でコードを書いて、それを実行するという流れになります。その場合、
■ メモ帳でコードを書く
■ ファイルに保存（HTMLファイル）
■ 実行してChrome Dev Toolsで確認
と言う流れで作業をすると処理の結果だけを取得する事が出来ます。Pythonでコードを書く際にフロントエンドとの連携の前に内部処理の部分を作る事になりますが、この際の確認はコンソール上で実行される状態で行いますが、この作業と同じ状態で動作を試す時に使用できるのがこの機能になります。
javaScriptについては、
の中で触れていますが、コンソールで動くことが基本となっているプログライング言語で使用するような実行結果をそのまま表示する場合だと、前述のようにconsoleの結果を見るか、もしくは、alert()メソッドを使用して表示を行う事でPythonのprint()関数のような表示用として使用する事で処理の結果を表示できるようになっていますが、コンソールアプリで存在しているinput()文のような物が存在しないので、JavaScriptの場合だと、ウィジェットを使ったコードの書き方をする必要があります。
■ ウィジェットを使ったアプリ
ウィジェットを使う場合には、HTMLやCSSのタグに対して処理を行う事になりますが、タグで指定した要素を構成している部分に対して、idで指定を行って処理を実装する流れになっています。
デスクトップアプリと呼ばれているウィジェットを使ったGUI環境で動作するような物については、ウィジェットに足して処理を実装するの事になりますが、JavaScriptの場合、
エレメントに対して処理を実装する
と言う仕様なので、ウィジェットとして配置しているオブジェクトが存在しているので、それに対して処理を実装していく流れになっています。
その為、対象となる要素に対して何をするのかを指定する事になりますが、タグの種類に対して行うと同じタグ全てに処理が適応されてしまうので、idで管理して処理をする事になります。この時に、getElementByIDで<input>タグで指定した値を取得する事が出います。これについては、
■ JavaScriptとオブジェクト 【 JavaScript 】
中でも触れていますが、テキストボックスの内容などを参照して結果を出力する事が出来ます。ただし、現在は非推奨の記述もあるので、古いバージョンの記述だと対応していない物もありますから、それに準じた処理を実装する事になります。これについては、
■ 非推奨の物と記述の方法 【 JavaScript＆html 】
の中で触れていますが、document.writeの記述が脾腫衣装がなので、 【 interHTML＝”文字列” 】 で文字の挿入をするような流れになります。テキストボックスの取り扱いだと、
タグにidの指定と、関数の指定を行います。これで、
■ エレメントに対するIDの指定
■ 実行する関数の指定
が出来ます。これで、関数の実行する場所と位置の指定ができますが、ここから、値の取得をする必要が出てきます。この時の値を、value="" という属性を指定する事で、値の指定が出来るので、この時の入力値の変化をvalueとしておくと、入力した文字列の取得ができます。例えば、<select>タグのように項目を選ぶ物の場合、
■ <select>タグの実装属性
■ id ： 関数の実装先の区別用
■ 関数 ： 実装する関数の内容
■ <option>タグの実装属性
■ value ： 関数実行時の選択した結果
を用意します。これで、項目の選択が可能なウィジェットとに対して機能を実行する為の仕組みを作る事が出来たので、この値を表示するような状態にする必要があります。この場合、何も機能がない＜ｐ＞タグに対して表示内容の変更を入れるような機能を作る事になるので、
■ <p>タグの実装属性
■ id ： 関数の実行先のID
のようにして、異なるIDを用意して処理を実装します。
この時の処理が、getElementByIdになりますが、この時の対象が、 【 document 】 で、対象が変わってくるのですが、実は、ウィジェットからの変数の取得と、文字列の書き出しの双方で、 【 document.getElementById 】 を使う事になります。ただし、
■ ウィジェットからの呼び出し
変数としてValueの値を使うので、変数に対して読み
込んだvalueの値を代入する
let 変数名 = document.getElementById('ID名')
.Value;
（注）コードで使う場合は改行はしないでください。
と言う記述になる。
■ 文字の表示
データの無いタグの間の文字を挿入するので、対象と
なる場所にinterHTMLで文字列を挿入する事になる。
document.getElementById('ID名').InterHTML
='文字列';
（注）コードで使う場合は改行はしないでください。
と言う記述になる。
ので、これを関数に実装する事になります。その為、HTML側での指定が終わった後だと、
のような指定をすると、文字列の読み書きが行えるようになります。
関数の場合、イベントハンドラもあるので、onclick（）のような処理もありますが、選択できるウィジェットだと、onchange()のメソッドをタグの属性として指定して、そこに実行する関数名を指定します。そうすると選択後に指定した関数名の処理が実行されます。