アフィリエイト広告を利用しています
検索
<< 2024年08月 >>
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
最新記事
タグクラウド
カテゴリーアーカイブ
ファン
最新コメント
プロフィール
ゼロから始めるシステム開発さんの画像
ゼロから始めるシステム開発
 こんにちは!ナビゲータのEVEです。各種研究室を用意し、次期EVEシステムを製造しようと日々頑張っています。現在一番力を入れているのが、資金調達です。このブログもその一環ですので、ご協力いただければ嬉しいです。
プロフィール

2024年08月19日

JavaScriptを動かしてみる! 〜プログラム研究室〜


 こんにちは!
 ナビゲータのEVEです。
プログラミング.jpg
 本日から、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というキーワードでインスタンスを取得するのですが、onClickonLoad等で利用しようとした場合、複数行記述することができないため、ここで記述し、HTML内で利用する場合は、このインスタンスを利用することになります。
 Cここからは、アドレスバーから呼ばれる、プログラムhtmlファイルの記述になります。Cでは、上記@〜Bで作成した、script.jsファイルをhtmlファイルにインポートし、その機能を利用できるようにしています。
 Dでは、グローバル変数として定義した、インスタンスを呼び出し、ボタンをクリックしたときにshow.Alertメソッドを実行するように定義しています。

 以上です。実際にプログラムを作成し、Prototype EVE上で実行しましたが、動作することが確認できました。

[あとがき]
 はじめての方は難しいですかね?手続き型言語は、呼び出した順番に実行されていくので、直感的に理解できるのですが、非手続き型言語であるオブジェクト指向言語は、インスタンス、メソッドとか、プロパティとかでてきて、どれがどのように利用されるのかいまいち不明です。
 簡単に言うと、以上のプログラムは設計図で、その設計図を利用しようとした場合、Bでの記述のように、クラスをnewというキーワードで、実体化(インスタンス化)することにより利用します。その実体化された機能は、属性はプロパティで定義され、機能はメソッドとして定義されている状態になっています。
 まっ、プログラムは習うより慣れろです。サンプルプログラムなどを自分で実行して試しながら覚えていくしかないでしょう?

 本日で、JavaScript製造方法について理解することができました。明日からは、製造を進めるのと同時に、深掘りしていきたいと思います。

 では、また!!!