第10章 オブジェクトの基礎
この章では JAVASCRIPT のオブジェクトの基礎について説明します。
homepage
# **オブジェクトの基礎** *** ## **1.オブジェクトとは** JavaScriptのオブジェクトとは、キーと値の集合体のことです。 数値や文字列などを値として持つ要素はプロパティ、関数を値として持つ要素はメソッドと呼ばれます。  #### **例** [sample10-1.html] ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JavaScriptの練習</title> <script> var obj = { name: "ITJOB", greet: function() { document.write("こんにちは"); } }; obj.greet(); </script> </head> <body> </body> </html> ``` #### **実行結果** こんにちは<br> <br> ### **オブジェクト定義** ``` var オブジェクト = {キー1：値1,キー2：値2,・・・}; ``` + **メソッドの作成** 要素の値として関数を指定することでメソッドを作成できます。そのとき、関数名が必要なことはほんとんどないので 匿名関数にして良いでしょう。メソッドを呼び出すには、関数名の代わりにキーを指定します。 ``` var オブジェクト = {キー：関数,・・・}; ``` <br> ### **オブジェクトの呼び出し** ``` オブジェクト.キー ``` <br> ### **thisキーワード** オブジェクトの中では、thisというキーワードは自分自身のオブジェクトのことを指します。 あるメソッドの中で、自身が所属するオブジェクトが持つ別のメソッドやプロパティを利用したい場合、 先頭に「this.」を付けて使います。 #### **例** [sample10-2.html] ``` <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>JavaScriptの練習</title> <script> var obj = { name: "ITJOB", greet: function() { document.write(this.name + "です、こんにちは"); } }; obj.greet(); </script> </head> <body> </body> </html> ``` #### **実行結果** ITJOBです、こんにちは <br> ### **別のオブジェクトのメソッドを利用する** あるオブジェクトから別のオブジェクトのメソッドを呼出すcallメソッドという特殊なメソッドが用意されています。  <br> ### **callメソッド** ``` メソッドを所有者するオブジェクト.メソッド名.call(メソッドを借りるオブジェクト); ``` #### **例** [sample10-3.html] ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JavaScriptの練習</title> <script> var obj1 = { name: "ITJOB", greet: function() { document.write(this.name + "です、こんにちは"); } }; var obj2 = { name: "ソフトユージング" }; obj1.greet.call(obj2); </script> </head> <body> </body> </html> ``` #### **実行結果** ソフトユージングです、こんにちは <br> + greetメソッド内のthisキーワードが表すのはソフトユージング(obj2)になります。 <br><br> ## **2.組み込みオブジェクト** JavaScriptには、さまざまな組み込みオブジェクトがあります。 組み込みオブジェクト一覧 <table border="1"> <tr style="width:100px ;background-color:#C6E0B4 ;text-align:center;"> <td>オブジェクト名</td> <td>説明</td> </tr> <tr> <td>Object</td> <td>すべてのオブジェクトの元となるオブジェクト</td> </tr> <tr> <td>Date</td> <td>日時操作機能を持つオブジェクト</td> </tr> <tr> <td>Math</td> <td>計算機能を持つオブジェクト</td> </tr> <tr> <td>Array</td> <td>配列操作機能を持つオブジェクト</td> </tr> <tr> <td>String</td> <td>文字列操作機能を持つオブジェクト</td> </tr> </table> <br> ### **2-1.Dateオブジェクト** Dateオブジェクトは、日時をミリ秒形式のデータとして持つオブジェクトです。日付同士の比較を行う場合などに利用します。 #### **Dateオブジェクトのメソッド** <table border="1"> <tr style="width:100px ;background-color:#C6E0B4 ;text-align:center;"> <td>メソッド名</td> <td>説明</td> </tr> <tr> <td>getFullYear</td> <td>オブジェクトが持つ日時データの「年」を返す</td> </tr> <tr> <td>getMonth</td> <td>オブジェクトが持つ日時データの「月」を返す</td> </tr> <tr> <td>getDate</td> <td>オブジェクトが持つ日時データの「日」を返す</td> </tr> <tr> <td>getHours</td> <td>オブジェクトが持つ日時データの「時間」を返す</td> </tr> <tr> <td>getMintues</td> <td>オブジェクトが持つ日時データの「分」を返す</td> </tr> <tr> <td>getSeconds</td> <td>オブジェクトが持つ日時データの「秒」を返す</td> </tr> </table> <br> #### **Dateオブジェクトの生成** ``` var オブジェクト = new Date(年, 月, 日); ``` 引数で指定された年月日を持つオブジェクトが生成されます。月には実際の月から-1した値を指定してください。 引数を省略した場合は、現在の日時（クライアントPC）をデータとして持ちます。 <br> #### **Dateオブジェクトのメソッドの記述** ``` Dateオブジェクト.メソッド名() ``` #### **例** [sample10-4.html] ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JavaScriptの練習</title> <script> var today = new Date(); document.write("今日は" + today.getFullYear() + "年" + (today.getMonth() + 1) + "月" + today.getDate() + "日です。"); </script> </head> <body> </body> </html> ``` #### **実行結果** 今日は2019年8月28日です。 <br> ### **2-2.Mathオブジェクト** Mathオブジェクトは、さまざまな計算機能を提供するオブジェクトです。 #### **Mathオブジェクトのメソッド** <table border="1"> <tr style="width:100px ;background-color:#C6E0B4 ;text-align:center;"> <td>メソッド名</td> <td>説明</td> </tr> <tr> <td>ceil</td> <td>小数点以下の値を切り上げた結果を返す</td> </tr> <tr> <td>floor</td> <td>小数点以下の値を切り捨てた結果を返す</td> </tr> <tr> <td>round</td> <td>小数点以下の値を四捨五入した結果を返す</td> </tr> </table> Mathオブジェクトのメソッドは、オブジェクトを生成しなくても利用できます。 <br> #### **Mathオブジェクトのメソッド** ``` Math.メソッド名(数値); ``` #### **例** [sample10-5.html] ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JavaScriptの練習</title> <script> document.write("Math.ceil(2.5) ：" + Math.ceil(2.5) + "<br>"); // 切り上げ document.write("Math.floor(2.5)：" + Math.floor(2.5) + "<br>"); // 切り捨て document.write("Math.round(2.5):" + Math.round(2.5) + "<br>"); // 四捨五入 </script> </head> <body> </body> </html> ``` #### **実行結果** Math.ceil(2.5) ：3 Math.floor(2.5)：2 Math.round(2.5):3 <br> ### **2-3.Arrayオブジェクト** Arrayオブジェクトは、通常の配列のことで、配列操作に関する機能を持っています。角かっこ```[]```で初期化したオブジェクトは、 Arrayオブジェクトとなります。 lengthプロパティ 配列の要素数を表します。 #### **pushメソッド** 配列に要素を追加します。pushメソッドを利用すると配列の末尾に要素が追加され、自動的にインデックスが割り振られます。 ``` 配列名.push(要素１,要素２,...); ``` #### **例** [sample10-6.html] ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JavaScriptの練習</title> <script> var numbers = [1, 2, 3]; numbers.push(4, 5); document.write("numbers:" + numbers); </script> </head> <body> </body> </html> ``` #### **実行結果** numbers:1,2,3,4,5 <br> #### **joinメソッド** 配列の各要素を連結して１つの文字列を生成します。要素間の区切文字を引数で指定します。 ``` 配列名.join(区切文字); 戻り値：連結した文字列 ``` #### **例** [sample10-7.html] ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JavaScriptの練習</title> <script> var numbers = [1, 2, 3, 4, 5]; var str = numbers.join(" "); // 半角スペースを区切り文字として要素を連結 document.write("numbers:" + numbers + "<br>"); document.write("str:" +str); </script> </head> <body> </body> </html> ``` #### **実行結果** numbers:1,2,3,4,5<br> str:1 2 3 4 5 <br> #### **reverseメソッド** 配列の要素を逆順に入れ替えます。 ``` 配列名.reverse(); ``` #### **例** [sample10-8.html] ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JavaScriptの練習</title> <script> var numbers = [1, 2, 3, 4, 5]; numbers.reverse(); document.write("numbers:" + numbers + "<br>"); </script> </head> <body> </body> </html> ``` #### **実行結果** numbers:5,4,3,2,1 <br> #### **sortメソッド** 配列の要素をアルファベット順に並べ替えます。 ``` 配列名.sort(); ``` #### **例** [sample10-9.html] ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JavaScriptの練習</title> <script> var words = ["one", "two", "three", "four", "five"]; words.sort(); document.write("words:" + words); </script> </head> <body> </body> </html> ``` #### **実行結果** words:five,four,one,three,two <br><br> *** >**練習** >>**問題1**[ex10-1.html] 空欄AとBを埋め、stru2が持つcountValメソッドを、stru1のメソッドであるかのように呼び出すスクリプトを完成させてください。 ``` var stru1 ={ tanka:100 }; var stru2 ={ tanka:200, countVal:function(){ console.log(this.tanka*0.08); } }; ``` <input value="A" size="1">```.countVal.call(```<input value="B" size="1">```);``` <br> >>**問題2**[ex10-2.html] 以下の配列を逆順を表示しましょう。 var num=[10,20,30,40,50]
content
戻る
