HTML,CSS,Javascript14(オブジェクトの作成と使用)

・目次

HTML,CSS,Javascript14(オブジェクトの作成と使用)

1.目的

　・javascriptのオブジェクトについて、作成方法と使用方法について記載する。

2.オブジェクトとは

　・オブジェクトはプロパティ(特性)の集まりであり、プロパティは名前(又はキー)と値との関連付けから成り立つ。

　・プロパティの値を関数にすることも可能

　例：

　スプーンというオブジェクトがある場合、そのプロパティ(特性)としては、

　・色、重さ、形状、材質、名前、役割などがある。

　それぞれ数値や、名前(文字列)や、動作などを持っている。

　これをjavascriptでは、オブジェクトとして作成し使用する。

プロパティとは(参考)：プロパティとは｜「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典

3.オブジェクトの作成

(1) オブジェクトの生成

データ型 オブジェクト名　= {
　プロパティ名(キー):値,
　プロパティ名(キー):値,
 };

例

const obj = {
  propatyname :"Name",
  propatynum : 120,
};

参考：オブジェクトでの作業 - JavaScript | MDN

newを使ったオブジェクトのインスタンス生成

データ型　オブジェクト名 = new Object();

例2：

  //newを使ったオブジェクトの作成
  let obj2 = new Object();

(2) 使用方法

オブジェクト名.プロパティ

例

obj.prpatyname

参考：

・new 演算子 - JavaScript | MDN

・[JavaScript] オブジェクトの基礎 #JavaScript - Qiita

3.プログラム作成(オブジェクト作成確認)

オブジェクトの作成及び、作成したオブジェクトの中身をconsole.logで確認

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>タイトル</title>
    <!-- JQuaryの追加 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	<style></style>
  </head>
 
  <body>
       <script>
     	window.onload = function () {
     	
     		const obj={
     			name	: "Name",
     			num		: 127,
     		}
     		console.log("--作成したオブジェクトの確認--");//出力の区切り
     		console.log(obj);
     		console.log(obj.name);
     		console.log(obj.num);
     		
     		//オブジェクトにプロパティを追加
     		obj.set = "objset";
     		//追加した内容の確認
     		console.log(obj.set);
     		
     		console.log("--newを使ったオブジェクト--");//出力の区切り
     		//newを使ったオブジェクトの作成
     		let obj2 = new Object();
     		console.log(obj2.set2);
     		obj2.set2 = "obj2set2";
     		console.log(obj2.set2);
       	}
     </script>
  </body>
</html>

実行結果

　※上記の通り、設定されていないプロパティを指定するとundefinedとなる。

4.オブジェクト内で関数の作成

オブジェクトには、中身に関数を作成できる。

また、オブジェクト内の値を、thisを使用することで、入力することが出来る。

作成方法

データ型 オブジェクト名　= {
    プロパティ名(キー):値,     
    関数名: function(){
       console.log (this.プロパティ名);
     },
};

例：

let obj = {
   	jap : "日本語",
     	eng : "English",		
     	DispJap:function(){
     		console.log(this.jap);
     	},
     	DispEng:function(){
     		console.log(this.eng);
     	},
}

5.プログラム作成(オブジェクト内で関数の作成)

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>タイトル</title>
    <!-- JQuaryの追加 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	<style></style>
  </head>
 
  <body>
       <script>
     	window.onload = function () {
     	
     		let obj = {
     			jap : "日本語",
     			eng : "English",
     			
     			DispJap:function(){
     				console.log(this.jap);
     			},
     			DispEng:function(){
     				console.log(this.eng);
     			},
     		}
     		obj.DispJap();
     		
     		//[]を使っても使用できる。
     		console.log(obj["eng"]);
       	}
     </script>
  </body>
</html>