読者です 読者をやめる 読者になる 読者になる

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

オブジェクトとプロパティとメソッド

オブジェクトとは

  • オブジェクトというモノ
  • 操作の対象となる部品のようなものを「オブジェクト」と呼びます。
  • 文字列や数値、関数などJavaScriptで扱うデータは、すべてオブジェクトです
  • オブジェクトは「プロパティ」と「メソッド」を持っている
  • JavaScriptのオブジェクトとは、キーと値の集合体のことです
  • 連想配列は、オブジェクトの別名です
  • オブジェクトでは、「数値や文字列などを値としてもつ要素 = プロパティ」
  • オブジェクトでは、「関数 = メソッド」


《オブジェクトの作成》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>オブジェクトの作成</title>
<script>
  var obj = {
    name: '四郎',
    greet: function() { console.log('はじめまして'); }
  };
  obj.greet();
</script>
</head>
<body>
</body>
</html>


《実行結果》

  • 要素の値として関数を指定することでメソッドで作成できます
  • このとき関数名が必要なことは殆ど無いので、匿名関数で記述します
  • メソッドを呼び出すには、関数名の代わりにキーを指定します
ブラウザのオブジェクト

ブラウザのオブジェクトは、ECMAScriptで標準化されていないためブラウザごとに独自のオブジェクトが実装されています。

プロパティとは

  • プロパティ」とは、オブジェクトの状態や属性のことです
  • プロパティは「参照」や「設定」が可能です
プロパティの参照・設定
  • Windowオブジェクト」のプロパティを参照するには、次のようにwindow--プロパティと参照するプロパティ名を「.ドット」でつなげます
  • このような記述のしかたを「ドットシンタックス」と呼びます



window.defaultStatus

windowプロパティ

Windowオブジェクトを参照します。

defaultStatusプロパティ

ステータスバーに標準で表示される文字列を参照・設定します。



window.document.fgColor

documentプロパティ

Documentオブジェクトを参照します。

fgColorプロパティ

文字の色を参照・設定します。


《color.html》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>プロパティ</title>
</head>
<body onload = ' window.defaultStatus = "色の設定" ' >
<script>
document.fgColor = '#FF0000';
document.bgColor = '#EEEEEE';
</script>
<p>文字色と背景色を変更しました。</p>
</body>
</html>
onLoad

ページが読み込まれたとき。



onLoad="window.defaultStatus='色の設定'"
ページが読み込まれたとき、ステータスバーに文字列を表示します。

bgColorプロパティ

背景の色を参照・設定します。



document.fgColor = ' #FF0000 ' ;
文字色を赤に設定します。



document.bgColor = ' #EEEEEE ' ;
背景色を明るいグレーに設定します。

メソッドとは

  • メソッド」とは、オブジェクトに対する処理をまとめたものです
  • メソッドを呼び出すと、そのオブジェクトに対して何らかの処理をさせることができます
  • メソッドには「()」がつく


《メソッドの作成》


var オブジェクト名 = { キー:関数, … };


《メソッドの呼び出し》


var オブジェクト名 . キー

メソッドの実行
  • メソッド」を実行するには、プロパティと参照したいメソッド名を「.(ピリオド)」でつなげます
alertメソッド
  • 警告ダイアログを表示します
  • windowオブジェクトのalertメソッド
  • windowオブジェクトの記述を省略可能(自動的にwindowオブジェクトが割り当てられる)



window.alert()


《method.html》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>メソッド</title>
</head>
<body>
<p>ボタンをダブルクリックしてください。
<input type="button" value="ボタン" onclick="alert( 'Perfect!' )">
</p>
</body>
</html>

writeメソッド

文字列を書き出します。



window.document.write()

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScriptの練習</title>
</head>
<body>
<script>
document.write( '<h1>Hello JavaScript!</h1>' );
</script>
</body>
</html>

thisキーワード

  • オブジェクトの中では、thisというキーワードは自分自身のオブジェクトのことを指します
  • あるメソッドの中で、自分が所属するオブジェクトがもつ別のメソッドやプロパティを利用したいばいい、先頭に「this」をつけて使います


《オブジェクトの中でthisキーワード》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>オブジェクトの中でthisキーワード</title>
<script>
  var obj = {
    name: '四郎',
    greet: function() {
      console.log( this.name + 'です、はじめまして' );
    }
  };
  obj.greet();
</script>
</head>
<body>
</body>
</html>


《実行結果》

  • thisキーワードが表すのは objオブジェクトなので、this.name は obj.name と記述したのと同じことになります

別のオブジェクトのメソッドを利用する

  • メソッドはオブジェクトの所有物なので、通常、他のオブジェクトが使う(呼び出す)ことはできません
  • そこで、あるオブジェクトから別のオブジェクトのメソッドを呼び出す「callメソッド」という特殊なメソッドが用意されています


《callメソッド》


メソッドを所有するオブジェクト . メソッド名 . call( メソッドを借りるオブジェクト );


《callメソッドの利用》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>callメソッドの利用</title>
<script>
  var obj1 = {
    name: '四郎',
    greet: function() {
      console.log( this.name + 'です、はじめまして' );
    }
  };
  var obj2 = {
    name: 'ユリ子'
  };
  obj1.greet.call(obj2);
</script>
</head>
<body>
</body>
</html>


《実行結果》

  • メソッドの所有者「obj1」、メソッドを借りる人「obj2」
obj1.greet.call(obj2);
  • メソッドを借りている間は、所有権も借りている人に映るというイメージ


《引数のあるメソッドをcallメソッドで呼び出す》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>引数のあるメソッドをcallメソッドで呼び出す</title>
<script>
  var obj1 = {
    name: '四郎',
    greet: function( age, from ) {
      console.log( this.name + 'です、はじめまして' );
      console.log( '年齢は' + age + '歳です' );
      console.log( '出身地は' + from + 'です' );
    }
  };
  var obj2 = {
    name: 'ユリ子'
  };
  obj1.greet.call( obj2, 6, 'アメリカ' );
</script>
</head>
<body>
</body>
</html>


《実行結果》


《applyメソッドの利用》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>applyメソッドの利用</title>
<script>
  var obj1 = {
    name: '四郎',
    greet: function( age, from ) {
      console.log( this.name + 'です、はじめまして' );
      console.log( '年齢は' + age + '歳です' );
      console.log( '出身地は' + from + 'です' );
    }
  };
  var obj2 = {
    name: 'ユリ子'
  };
  var param = [ 6, 'アメリカ' ];
  obj1.greet.apply( obj2, param );
</script>
</head>
<body>
</body>
</html>


《実行結果》


  • オブジェクトは内部にプロパティとメソッドを持つ
  • 関数を値として持つ要素をメソッドと呼ぶ
  • メソッドは call や apply メソッドによって貸し借りができる