SSブログ
Programming JavaScript ブログトップ

[JavaSctipt]オブジェクト指向の実装（クラスの継承）　[Programming JavaScript]

[はじめに]
JavaScriptの規格は、
ECMAScript（エクマスクリプト）で定められています。

JavaScriptは時代と共に進化しており、
最近のブラウザの大半は、
ECMAScriptのバージョンとして、ES6(ES2015)以降を取り入れています。

ES6(ES2015)は、
クラスなど、オブジェクト指向の概念を取り込んでおり、
最近のソースでもクラスの記載が散見されます。
もちろん、クラスの継承も可能です。

備忘録として、
クラスの継承についてのサンプルソースを掲載します。
以下は、
親クラスを「Mammalクラス（哺乳類）」、
子クラスを「Dogクラス（犬）」と「Catクラス（猫）」とした実装例です。
実行結果_オブジェクト指向の継承_クラス図.png

//【クラス定義(Mammal.js)】
class Mammal{

   //変数宣言（Private）
   //※変数名の先頭に「_」を付加することでPrivate指定になります。
   //名前
   #_name = "";

   //コンストラクタ
   constructor(name){
      this.#_name = name;
   }

   //名前
   get name(){
      return this.#_name;
   }

}
[JavaScript]親クラス（Mammal.js）



//【クラス定義(Dog.js)】
//  Mammalクラスを継承
class Dog extends Mammal{

   //コンストラクタ
   constructor(name){
      //注意：
      //親クラスを継承する際、コンストラクタを定義する場合は、
      //必ずsuper（親クラスのコンストラクタ）を呼び出してください。
      //但し、superを呼び出す前に'this' にアクセスすると、
      //エラーになりますのでご注意ください。
      super(name);
   }

   //挨拶をする。
   sayHello(name){
      window.alert(
         "こんにちは。私の名前は" + this.name + "です。");
   }

   //鳴く
   cry(){
      window.alert("ワンワン");
   }

}
[JavaScript]子クラス（Dog.js）


//【クラス定義(Cat.js)】
//  Mammalクラスを継承
class Cat extends Mammal{

   //コンストラクタ
   constructor(name){
      //注意：
      //親クラスを継承する際、コンストラクタを定義する場合は、
      //必ずsuper（親クラスのコンストラクタ）を呼び出してください。
      //但し、superを呼び出す前に'this' にアクセスすると、
      //エラーになりますのでご注意ください。
      super(name);
   }

   //挨拶をする。
   sayHello(name){
      window.alert(
         "こんにちは。私の名前は" + this.name + "です。");
   }

   //鳴く
   cry(){
      window.alert("にゃーにゃー");
   }

}
[JavaScript]子クラス（Cat.js）


<html>
<head>

<script language="javascript" src="./Mammal.js"></script>
<script language="javascript" src="./Dog.js"></script>
<script language="javascript" src="./Cat.js"></script>
<script language="javascript" >

   function dog_access()
   {
      const mammal = new Dog("ポチ");
      mammal.cry();
      mammal.sayHello();
   }

   function cat_access()
   {
      const mammal = new Cat("タマ");
      mammal.cry();
      mammal.sayHello();
   }


</script>
</head>
<body bgcolor="azure">

<input type="button" value="Dogクラスにアクセス" onclick="dog_access();"><br/>
<input type="button" value="Catクラスにアクセス" onclick="cat_access();"><br/>

</body>
</html>
[JavaScript]利用例

[実行結果]
実行結果_オブジェクト指向の継承.png
タグ：オブジェクト指向 JavaScript 継承
2023-11-03 19:45  nice!(0)  コメント(0) 
共通テーマ：パソコン・インターネット

[JavaSctipt]オブジェクト指向の実装　[Programming JavaScript]

[はじめに]
JavaScriptの規格は、
ECMAScript（エクマスクリプト）で定められています。

JavaScriptは時代と共に進化しており、
最近のブラウザの大半は、
ECMAScriptのバージョンとして、ES6(ES2015)以降を取り入れています。

ES6(ES2015)は、
クラスなど、オブジェクト指向の概念を取り込んでおり、
最近のソースでもクラスの記載が散見されます。

たまに使うこともあるので、備忘録として、
クラスを用いたサンプルソースを掲載します。
//【クラス定義(Person.js)】
class Person{

   //【プロパティの初期化】 ※Start
   // ※ES6(ES2015)までは、
   //   プロパティを設定する場合は、
   //   必ずコンストラクタ内で実施する必要がありました。
   //   ES2022から、
   //   クラスのトップレベルで
   //   プロパティを宣言できるようになりました。
   //   また、プロパティ名の先頭に「#」を付加することで、
   //   Private指定となります。（ES2022から）
   //   [注意]
   //     但し、ES2022以降のバージョンは、
   //     古いブラウザでは
   //     機能が実装されていない可能性がある為、注意が必要です。

   //名前
   #_name = {first:"権兵衛", last:"名無し"};
   //生年月日
   #_birthday = this.#getSystemDate();

   //【プロパティの初期化】 ※End

   //【コンストラクタ定義】 ※Start
   // ※インスタンス化の際に実行されるメソッド。

   constructor(name, birthday){
      this.#_name = name;
      this.#_birthday = birthday;
   }

   //【コンストラクタ定義】 ※End

   //【ゲッター/セッター定義】 ※Start
   // ※ES6(ES2015)までは、
   //   ゲッター／セッターを実装するには、
   //   Javaのようにメソッド（getXXX() / setXXX()）で
   //   定義する必要がありましたが、
   //   ES2022から、
   //   ゲッター／セッター向けの構文を利用できるようになりました。
   //   [注意]
   //     但し、ES2022以降のバージョンは、
   //     古いブラウザでは
   //     機能が実装されていない可能性がある為、注意が必要です。

   //名前
   get fullName(){
      return this.#_name.first + " " + this.#_name.last;
   }

   //生年月日
   get birthday(){
      return this.#_birthday;
   }

   //生年月日
   set birthday(value){
      this.#_birthday = value;
   }

   //【ゲッター/セッター定義】 ※End


   //【メソッド定義（Public）】 ※Start
   // ※他の関数と同様に定義することで、
   //   Publicなメソッドを定義できます。

   //あいさつをする。
   sayHello(){
      window.alert(
         "こんにちは。" + 
         this.#_name.first + " " + 
         this.#_name.last + "です。");
   }

   //生年月日を出力する。
   sayBirthDay(){
      window.alert(this.#_birthday);
   }

   //年齢を出力する。
   sayAge(){
      let age = this.#calculateAge();
      window.alert("私は" + age + "歳です。");
   }

   //【メソッド定義（Public）】 ※End

   //【メソッド定義（Private）】 ※Start
   //※メソッド名の先頭に「#」を付加することで、
   //  アクセス元を自クラス内に限定(Private)することができます。
   //   [注意]
   //     但し、ES2022以降のバージョンは、
   //     古いブラウザでは
   //     機能が実装されていない可能性がある為、注意が必要です。

   //システム日付を取得する。
   #getSystemDate(){
      const rtn = new Date();
      return rtn;
   }

   //年齢を算出する。
   #calculateAge(){
      let sysDate = this.#getSystemDate();
      let age = sysDate.getFullYear() - this.#_birthday.getFullYear();

      if(sysDate.getMonth() * 100 + sysDate.getDate() < 
         this.#_birthday.getMonth() * 100 + this.#_birthday.getDate())
      {
         //システム日付が誕生日前の場合は、
         //年齢を [システム日付の年] - [生年月日の年] - 1 とする。
         return age - 1;
      }

      //システム日付が誕生日以降の場合は、
      //年齢を [システム日付の年] - [生年月日の年] とする。
      return age;
   }

   //【メソッド定義（Private）】 ※End
}
[JavaScript]オブジェクト指向を意識したコード


<html>
<head>

<script language="javascript" src="./Person.js"></script>
<script language="javascript" >
   //クラスへのアクセス
   function sayHello()
   {
      const person = new Person(
         {first:"太郎", last:"山田"},
         new Date(1953,8-1,15));
      person.sayHello();
   }

   function sayBirthDay()
   {
      const person = new Person(
         {first:"太郎", last:"山田"},
         new Date(1953,8-1,15));
      person.sayBirthDay();
   }

   function sayAge()
   {
      const person = new Person(
         {first:"太郎", last:"山田"},
         new Date(1953,8-1,15));
      person.sayAge();
   }
</script>
</head>
<body bgcolor="azure">

<input type="button" value="あいさつをする。" onclick="sayHello();"><br/>
<input type="button" value="生年月日を言う。" onclick="sayBirthDay();"><br/>
<input type="button" value="年齢を言う。" onclick="sayAge();"><br/>

</body>
</html>
[JavaScript]使用例

[実行結果]
JavaScript実行結果.PNG

タグ：オブジェクト指向 クラス JavaScript
2023-10-29 17:50  nice!(0)  コメント(0) 
共通テーマ：パソコン・インターネット

[JavaSctipt]文字列をクリップボードにコピーする　[Programming JavaScript]

[はじめに]
ブログで記事の内容をクリップボードにコピーする機能を導入する機会があったので、
JavaScriptでクリップボードにコピーするコードを作りました。
動作確認は、『Microsoft Internet Explorer11』、『Microsoft Edge』で実施済です。

備忘録として、以下、２つのサンプルソースを掲載します。
２つのサンプルソースは、各々独立して動作します。
<html>
<head>
</head>
<body>

<table border='1'>
<tr><td>
<button
 type="button"
 onClick="
var ta=document.createElement('textarea');
ta.value=this.parentNode.parentNode.parentNode.getElementsByTagName('tr')[1].innerText;
this.appendChild(ta);ta.select();
document.execCommand('Copy');
alert('コピーしました。');
this.removeChild(ta);
">
コードのコピー
</button>
</td></tr>
<tr><td><font size="2" color="red">Hello,World!!</font></td></tr>
</table>

</body>
</html>
[JavaScript]文字列をクリップボードにコピーする（その１）


<html>
<head>
<script language="JavaScript">

/// <summary>
/// クリップボードに文字列をコピーする
/// </summary>
/// <param name="targetText">コピー対象の文字列</param>
/// <param name="docWork">ワーク用TextAreaの作成場所。省略時はdocument.body</param>
/// <remarks></remarks>
function copyText(targetText, docWork){

  //[説明]
  // クリップボードにコピーできる文字列は、
  // 入力可能なテキストコントロール（TextArea等）上で
  // 選択状態になっていることが前提となります。
  // この前提により、
  // テキストコントロール以外に記載された文字列を
  // クリップボードにコピーする為には、
  // 一時的にテキストコントロールを経由する必要があります。
  // 本関数では、
  // テキストコントロールを使用しない、かつ、
  // 改行コードを含む文字列の場合を考慮して、
  // 一時的にTextAreaを追加し
  // クリップボードにコピーした後、
  // TextAreaを削除しています。

  if(docWork==null || docWork==undefined){
    //引数docWorkを省略した場合は、
    //document.bodyとする。
    docWork=document.body;
  }

  //ワーク用のTextAreaを作成する。
  var ta=document.createElement("textarea");
  //コピー対象の文字列をTextAreaに書き込む。。
  ta.value=targetText;
  //ワーク用のTextAreaを追加する。
  docWork.appendChild(ta);
  //TextAreaの文字列を全選択する。
  ta.select();
  //選択状態の文字列をクリップボードにコピーする。
  document.execCommand("Copy");
  //コピー完了後のメッセージを表示する。
  alert("コピーしました。");
  //ワーク用のTextAreaを削除する。
  docWork.removeChild(ta);
}

</script>
</head>
<body>

<table border='1'>
<tr><td>
<button 
  type="button"
  onClick="copyText(this.parentNode.parentNode.parentNode.getElementsByTagName('tr')[1].innerText, this);">
  テキストをコピー
</button>
</td></tr>
<tr><td><font size="2" color="red">Hello,World!!</font></td></tr>
</table>

</body>
</html>   
[JavaScript]文字列をクリップボードにコピーする（その２）

タグ：クリップボードにコピー コピー クリップボード JavaScript
2019-03-10 14:54  nice!(1)  コメント(0) 
共通テーマ：パソコン・インターネット
Programming JavaScript ブログトップ

Digital Watch


So-netブログ

So-net無料ブログ作成

ブログ紹介

koalatch_icon.jpg
こあらっちの日記

LicenseLogo

【MCP上位資格】
MCTS(Microsoft Certified Technology Specialist)
MCTS：(Technology Specialist)
・For DynamicsAX2012(2013.2取得）
・For SharePoint2010(2012.10取得）
・For SQLServer2008(2012.8取得）
・For DynamicsAX2009(2011.6取得）
・For .NET2.0 WebApp(2011.5取得）
・For .NET2.0 WinApp(2009.2取得）

MCSD(Microsoft Certified Solution Developer)
MCSD：(Solution Developer)
・For Microsoft.NET(2006.6取得）
・For VisualStudio6.0(2001.9取得）

MCAD(Microsoft Application Developer)
MCAD：(Application Developer)
・For Microsoft VB.NET(2003.4取得）
・For Microsoft C#.NET(2003.4取得）

MCDBA(Microsoft Certified DataBase Administrator)
MCDBA：(DB Administrator)
・For SQLServer7.0 (2001.12取得）

【MCP】（24科目取得）
MCP(Microsoft Certified Professional)
【開発系】
・70-483
　C#でのプログラミング
・70-528
　Webアプリ開発(.NET2.0)
・70-526
　Windowsアプリ開発(.NET2.0)
・70-536
　アプリケーション開発基礎(.NET2.0)
・70-300
　ソリューションアーキテクチャ(VS.NET)
・70-310
　XMLWebService開発(VB.NET)
・70-320
　XMLWebService開発(C#.NET)
・70-305
　Webアプリ開発(VB.NET)
・70-315
　Webアプリ開発(C#.NET)
・70-306
　Windowsアプリ開発(VB.NET)
・70-316
　Windowsアプリ開発(C#.NET)
・70-100
　ソリューションアーキテクチャ（VS6）
・70-176
　デスクトップアプリ開発(VB6)
・70-175
　分散アプリ開発(VB6)
【データベース系】
・70-433
　データベース開発(SQLServer2008)
・70-432
　実装とメンテナンス(SQLServer2008)
・70-229
　DBデザインと実装(SQLServer2000)
・70-028
　DBデ管理(SQLServer7.0)
・70-029
　DBデザインと実装(SQLServer7.0)
【インフラ系】
・70-210
　Windows2000Professional
・70-215
　Windows2000Server
【その他】
・70-573
　SharePoint2010アプリ開発
・MB6-872
　DynamicsAX2012のｲﾝｽﾄｰﾙ
・MB6-822
　DynamicsAX2009の生産

【Oracle認定資格(Java)】
（3科目取得）
JavaSE8_Gold.jpg
・1Z0-809
　Java Gold SE 8 (2019.7取得)

JavaSE8_Silver.jpg
・1Z0-808
　Java Silver SE 8 (2018.7取得)

JavaSE7_8_Bronze.jpg
・1Z0-814
　Java Bronze SE 7/8 (2017.8取得)

【LPIC認定上位資格】
・LPICレベル１(2021.2取得)
【LPIC認定資格】
・LPIC-1 101：LPICレベル１ 101(2021.2取得)
・LPIC-1 102：LPICレベル１ 102(2021.1取得)

【情報処理】
・第1種情報処理技術者(2000.4取得)
・第2種情報処理技術者(1998.4取得)

【その他IT】
・AWS認定Solutions Architect Associate Level(2014.8取得)

【その他】
・アマチュア無線 電話級(1987.8取得)

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。