javasript, jquery （クラス定義）

#初めに
ジャバスクリプトにはクラス定義を行う（プロパティ、メソッド）
#html、 javasriptのツールの開発
　→オンラインツールを使えるため、ツールのダウンロードが不要です。
　　　https://jsfiddle.net/

![スクリーンショット 2020-12-21 10.23.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/965456/f1eea67f-b1b5-cb0e-569d-d28db2bae1f8.png)

#テーブルに対して（例１）
「追加」ボタンをクリックすると、「サンプルテキスト」行が追加されている
①「行」クラスを定義する
②「追加」ボタンをクリックすると、「行」のインスタンスクラスを生成し、行の追加のメソッドをよぶ
### ①HTML分に以下のHTMLソースを追加する
```html

<html>

  <head>
    <title>Hoge</title>
  </head>

  <body id="main-id">
  </body>

</html>
```

### ②JQUERYを選択してから、JAVASRIPT分に以下のソースを追加する
```javascript

// マインオブジェクト
var $main  = $("#main-id");

// テーブルオブジェクト
var $table = $("<table>"); 

// クラス定義
var Row = function(table) { // table：変数

   // プロパティ
   var $tr    = $("<tr>");                        // 行オブジェクト
   var $td    = $("<td>").html("サンプルテキスト");  // カラムオブジェクト
   
   // メソッド
  this.addRow = function() {
    table.append($tr.append($td));
  };
};

// ボタンオブジェクト
var $button = $("<button>").html("追加");

// ボタンクリックイベント
$button.click(function() {

    // インスタンス作成
    var row = new Row($table);
    
    // クラスのメソッドを呼ぶ
    row.addRow();
});

//親オブジェクトに子オブジェクトを追加
$main.append($button).append($table);

```
実行
![スクリーンショット 2020-12-23 10.56.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/965456/303f754e-44aa-fb3e-88aa-0150ec7fd8ce.png)

#テーブルに対して（例２）
### ①HTML分に以下のHTMLソースを追加する
```html

<html>

  <head>
    <title>Hoge</title>
  </head>

  <body id="main-id">
  </body>

</html>
```

### ②JQUERYを選択してから、JAVASRIPT分に以下のソースを追加する
```javascript

// マインオブジェクト
var $main  = $("#main-id");

// テーブルオブジェクト
var $table = $("<table>"); 

// クラス定義
var Row = function(table) { // table：変数

   // プロパティ
   var $tr     = $("<tr>");                    // 行オブジェクト
   var $td    = $("<td>").html("インプット：");  // カラムオブジェクト
   var $input = $("<input>");                  // インプットオブジェクト
  
  // 追加メソッド
  this.addRow = function() {
    // 行を追加
    table.append($tr.append($td.append($input)))
  };
  
  // 削除メソッド
  this.removeRow = function() {
    // 行を削除
    table.find("tr:last").remove()
  };
};

// ボタンオブジェクト
var $buttonAdd = $("<button>").html("追加");

// ボタンクリックイベント
// ボタンをクリックすると、行が追加される
$buttonAdd.click(function() {

    // インスタンス作成
    var row = new Row($table);
    
    // クラスのメソッドを呼ぶ
    row.addRow();
});

// ボタンオブジェクト
var $buttonRemove = $("<button>").html("削除");

// ボタンクリックイベント
// ボタンをクリックすると、行が削除される
$buttonRemove.click(function() {

    // インスタンス作成
    var row = new Row($table);
    
    // クラスのメソッドを呼ぶ
    row.removeRow();
});

//親オブジェクトに子オブジェクトを追加
$main.append($buttonAdd).append($buttonRemove).append($table);
```
実行
![スクリーンショット 2020-12-23 11.52.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/965456/97271650-3b8b-e9e8-bde9-6c554fbe2c94.png)

#ディブに対して
### ①HTML分に以下のHTMLソースを追加する
```html

<html>

  <head>
    <title>Hoge</title>
  </head>

  <body id="main-id">
  </body>

</html>
```

### ②JQUERYを選択してから、JAVASRIPT分に以下のソースを追加する
```javascript

// マインオブジェクト
var $main  = $("#main-id");

// divオブジェクト
var $div = $("<div>"); 

// クラス定義
var Row = function(div) { // div：変数

   // divプロパティ
   var $span   = $("<span>").html("タイトル");  // liブジェクト
   
   // divプロパティ
   var $div    = $("<div>").html("サンプルテキスト");  // divブジェクト

   // メソッド
  this.addRow = function() {
    div.append($span).append($div);
  };
};

// ボタンオブジェクト
var $button = $("<button>").html("追加");

// ボタンクリックイベント
$button.click(function() {

    // インスタンス作成
    var row = new Row($div);

    // クラスのメソッドを呼ぶ
    row.addRow();
});

//親オブジェクトに子オブジェクトを追加
$main.append($button).append($div);

```
実行
![スクリーンショット 2020-12-24 9.32.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/965456/80976423-9779-d53f-f874-a923d2a72fcc.png)


#ul,liに対して
### ①HTML分に以下のHTMLソースを追加する
```html

<html>

  <head>
    <title>Hoge</title>
  </head>

  <body id="main-id">
  </body>

</html>
```

### ②JQUERYを選択してから、JAVASRIPT分に以下のソースを追加する
```javascript

// マインオブジェクト
var $main  = $("#main-id");

// ulオブジェクト
var $ul = $("<ul>"); 

// クラス定義
var Row = function(ul) { // ul：変数

   // プロパティ
   var $li    = $("<li>").html("サンプルテキスト");  // liブジェクト
   
   // メソッド
  this.addRow = function() {
    ul.append($li);
  };
};

// ボタンオブジェクト
var $button = $("<button>").html("追加");

// ボタンクリックイベント
$button.click(function() {

    // インスタンス作成
    var row = new Row($ul);
    
    // クラスのメソッドを呼ぶ
    row.addRow();
});

//親オブジェクトに子オブジェクトを追加
$main.append($button).append($ul);

```
実行
![スクリーンショット 2020-12-23 10.54.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/965456/9baca4b8-0732-9786-cf9b-b2f49e34709b.png)



以上