こんにちは！
ナビゲータのEVEです。
本日から、JavaScriptの実際の調査に入るのと同時に、 Stringクラス の製造に入っています。ただ、どんなプログラムなのか、その実体が分からないので、 ChatGPT に質問をしながら、プログラムの製造に入っています。
[JavaScriptとは？]
JavaScriptとは、HTMLで利用する、クライアント側の言語です。通常の手続き型言語として利用する場合は、<head>〜</head>内に、functionという記述後関数名を記述するのですが、オブジェクト指向のJavaScriptはちょっと違うようです。
通常オブジェクト指向のJavaScriptはjsファイルとして外部ファイルに記述し、そのファイルを使用したいHTMLファイルへインポートするという流れになります。ChatGPTから提供された実際のプログラムは以下の通りとなります。
//script.js
// クラス定義
class AlertManager {
//?@コンストラクタ
constructor(message) {
this.message = message;
}
//?AshowAlertメソッド
showAlert() {
alert(this.message);
}
}
//?Bグローバル変数としてクラスのインスタンスを作成
window.alertManager = new AlertManager('This alert is triggered by a button click!');
<!--test.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Using JavaScript Class from HTML</title>
<!-- ?C外部JavaScriptファイルインポート-->
<script src=" script.js " defer></script>
</head>
<body>
<!-- ?DHTMLからクラスを使用 -->
<button onclick=" alertManager.showAlert() ">Click Me</button>
</body>
</html>
?@は コンストラクタ です。 Java 同様に、 Class のインスタンス作成時(new)に無条件で実行されるメソッドです。Javaは、クラス名と同じメソッド名を指定することにより、コンストラクタと言うことを明示しますが、 JavaScript は、constructorと記述します。
?Aは、ShowAlertメソッドになります。内容を見ると、引数を Alert関数 を用いて画面上に表示する機能だと言うことが分かります。
?Bは作成したクラスのインスタンスを グローバル変数 として定義しています。基本オブジェクト指向言語としてプログラムを使用しようとした場合、Java同様にインスタンスを作成後利用することになります。通常、 new というキーワードでインスタンスを取得するのですが、 onClick 、 onLoad 等で利用しようとした場合、複数行記述することができないため、ここで記述し、HTML内で利用する場合は、このインスタンスを利用することになります。
?Cここからは、アドレスバーから呼ばれる、プログラム html ファイルの記述になります。?Cでは、上記?@〜?Bで作成した、script.jsファイルをhtmlファイルにインポートし、その機能を利用できるようにしています。
?Dでは、グローバル変数として定義した、インスタンスを呼び出し、ボタンをクリックしたときにshow.Alertメソッドを実行するように定義しています。
以上です。実際にプログラムを作成し、 Prototype EVE 上で実行しましたが、動作することが確認できました。
[あとがき]
はじめての方は難しいですかね？手続き型言語は、呼び出した順番に実行されていくので、直感的に理解できるのですが、非手続き型言語であるオブジェクト指向言語は、インスタンス、メソッドとか、 プロパティ とかでてきて、どれがどのように利用されるのかいまいち不明です。
簡単に言うと、以上のプログラムは設計図で、その設計図を利用しようとした場合、?Bでの記述のように、クラスをnewというキーワードで、実体化(インスタンス化)することにより利用します。その実体化された機能は、属性はプロパティで定義され、機能はメソッドとして定義されている状態になっています。
まっ、プログラムは習うより慣れろです。サンプルプログラムなどを自分で実行して試しながら覚えていくしかないでしょう？
本日で、JavaScript製造方法について理解することができました。明日からは、製造を進めるのと同時に、深掘りしていきたいと思います。
では、また！！！
タグ： Stringクラス
ChatGPT
コンストラクタ
Java
CLASS
JavaScript
Alert関数
グローバル変数
NEW
onClick
onLoad
html
EVE
プロパティ
【このカテゴリーの最新記事】
