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

ハロトレWebデザインの勉強03月14日開講クラス授業補足ブログ

組み込みオブジェクト

組み込みオブジェクトとは

  • 関数と同じくオブジェクトの場合も、JavaScriptがあらかじめ用意しているオブジェクトがあります
  • これを「組み込みオブジェクト」と呼びます


《主な組み込みオブジェクト一覧》

オブジェクト名 説明
Object すべてのオブジェクトの元となるオブジェクト
Date 日時操作機能を持つオブジェクト
Math 計算機能を持つオブジェクト
Array 配列操作機能を持つオブジェクト
String 文字列操作機能を持つオブジェクト

Objectオブジェクト
  • 波括弧で初期化したオブジェクトは、Objectオブジェクトになります
  • よって、連想配列は「Objectオブジェクト」です
  • すべてのオブジェクトは、この「Objectオブジェクト」を元にして作られています
  • 「Objectオブジェクト」が持つプロパティとメソッドはすべてのオブジェクトで利用することが可能です

Dateオブジェクト

  • newキーワード(演算子)を使い、新しいオブジェクトを作成する
  • 生成されて利用可能になったオブジェクトのことを「インスタンス」と呼びます
  • オブジェクトは、データと機能をまとめたもの
  • つまり、Dateオブジェクトは、日時データとそのデータを調べたり設定したりする機能をまとめたもの
d = new Date();
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>現在の時刻を表示</title>
<style>
body{
   background-color: #000000;
   color: #FFFFFF;
   font-size: 2em;
   font-family: Arial Black;
}
</style>
</head>
<body>
<script>
  var d = new Date();
  document.write( d );
  console.log( d );
</script>
</body>
</html>


《実行結果》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Dateオブジェクトのメソッドの記述</title>
</head>
<body>
<script>
  var today = new Date();
  var d = '今日は、' + today.getFullYear() + '年' + (today.getMonth() + 1) + '月' + today.getDate() + '日です。';
  document.write( d );
  console.log( d );
</script>
</body>
</html>


《実行結果》

オブジェクトを活用する

  • オブジェクトにまとめられているデータは、プロパティと呼ばれています
  • オブジェクトにまとめられた機能は、メソッドと呼ばれています
  • プロパティとメソッドは、まとめて「メンバ」と呼ばれることもあります


Dateオブジェクトの主なメンバ
メンバ 説明
getFullYear() 年を取得する
getMonth() 月を取得する
getDate() 日を取得する
getDay() 曜日を取得する
getHours() 時を取得する
getMinutes() 分を取得する
getSeconds() 秒を取得する
getMilliseconds() ミリ秒を取得する
setFullYear() 年を設定する
setMonth() 月を設定する
setDate() 日を設定する
setDay() 曜日を設定する
setHours() 時を設定する
setMinutes() 分を設定する
setSeconds() 秒を設定する
setMilliseconds() ミリ秒を設定する
toDateString() 日付文字列を取得する
toTimeString() 時刻文字列を取得する
toLocaleDateString() ローカル日付文字列を取得する
toLocaleTimeString() ローカル時刻文字列を取得する
toString() 文字列を取得する


・データ(プロパティ)の場合
    オブジェクト.プロパティ

・機能(メソッド)の場合
    オブジェクト.メソッド()

年を表示する

  • getFullYear()メソッドを使う
<script>
var d = new Date();
var y = d.getFullYear();
document.write( '今年は、' + y + '年' );
</script>


月・日を表示する

  • 月を調べるには、getMonth()メソッドを使う
  • 日を調べるには、getDate()メソッドを使う
<script>
var d = new Date();
var mt = d.getMonth() + 1;
var dt = d.getDate();
document.write( '今日は' + mt + '月' + dt + '日' );
</script>


時刻を表示する

  • 時を調べるには、getHours()メソッドを使う
  • 分を調べるには、getMinutes()メソッドを使う
<script>
  var d = new Date();
  var h = d.getHours();
  var m = d.getMinutes();
  document.write( '今' + h + '時' + m + '分' );
</script>


値を記憶する
  • 変数に代入し記憶させる
<script>
  var m = d.getMinutes();
</script>

  • 連想配列と呼んでいたものは、実はオブジェクトというデータ型である
  • 配列や文字列もオブジェクトの一種で、あらかじめ便利なメソッドが用意されている