求職者支援訓練Webサイト制作科 4月18日開講クラス 漂泊

初心者がプロになるための勉強 フェリカテクニカルアカデミーWebサイト制作科 4月18日開講クラス授業補足ブログ

★ オブジェクトと配列

オブジェクト

  • JavaScriptは、オブジェクト指向の概念を取り入れた言語です
  • JavaScriptのオブジェクトには、プロパティと呼ばれる属性と処理を行うメソッドがあります
  • JavaScriptの値は、「プリミティブ型」と「オブジェクト型」の2種類に大別されます
プロパティとメソッド
  • JavaScriptにおけるオブジェクトには、その属性である「プロパティ」があります
  • オブジェクトの属性の中でも、何らかの処理を行うものを特に「メソッド」と呼びます
  • 生成されて利用可能な状態になったオブジェクトである「インスタンス」のプロパティにアクセスするには、インスタンスとプロパティを「. ドット」で接続します

インスタンス . プロパティ

  • メソッドの場合は、さらに続けて「 ( ) 」内に引数(ひきすう)を指定します

インスタンス . メソッド( 引数1, 引数2, ....)


例えば、WebブラウザのウィンドウにHTMLを表示する「document.write()」は、HTMLドキュメントを管理する「document」というインスタンスの「write()」メソッドです。

  • 「document」は、Documentオブジェクトから生成されたインスタンスです
  • ただし、ユーザーが生成するものではなく、Webブラウザーが起動すると「自動的に生成」されます

Documentオブジェクトのプロパティ

  • タイトルプロパティの場合
  • 値を代入をすれば、別のタイトルに書き換えることが可能

f:id:pbhfq:20171224223856p:plain

プロパティを階層構造でアクセスする
  • 背景色を書き換えてみる

f:id:pbhfq:20171224224605p:plain

プリミティブ型とオブジェクト型の違い

  • プリミティブ型:数値型なら数値、文字列型なら文字列といった値そのものを管理するデータ型
  • オブジェクト型:プロパティとメソッドを持つことができます
文字列や数値にプロパティやメソッドを利用する
  • lengthプロパティ:文字の長さ(文字数)を取得する
  • toUpperCase()メソッド:オールキャップ(すべて大文字にする)
<script>
var str = 'JavaScript入門';
console.log( '長さ:' + str.length );
console.log( str.toUpperCase() );
</script>

f:id:pbhfq:20171227222221p:plain

ラッパーオブジェクト
  • 文字列などのプリミティブ型の値にプロパティ・メソッドを実行すると、自動的に対応するオブジェクト型のインスタンスに変換されプロパティ・メソッドが実行されます
  • ラッパーオブジェクトに変換されます

プリミティブ型 ラッパーオブジェクト型
文字列型 Stringオブジェクト
数値型 Numberオブジェクト
真偽値型 Booleanオブジェクト

new演算子でオブジェクトのインスタンスを生成する

  • 文字列などのプリミティブ型の値にメソッドを実行すると、自動的にラッパーオブジェクトに変換されます
  • 自らラッパーオブジェクトのインスタンスを生成することもできます
new演算子とコンストラクタについて

変数名 = new コンストラクタ( 引数 )

f:id:pbhfq:20180102220144p:plain

ブラウザーのオブジェクト
  • Webブラウザーのウィンドウを管理する「windowオブジェクト」
  • HTMLドキュメントを管理する「documentオブジェクト」

f:id:pbhfq:20180101224546p:plain

配列

  • 1つの変数名で、複数のデータをまとめて管理できるようにしたもの
  • 配列は、「Arrayオブジェクト」というオブジェクトとして扱います
配列の中身(値)
  • 配列に格納された個々の値のことを「要素」と呼びます
  • 配列 = [ ]
  • オブジェクト = { }
配列の生成

f:id:pbhfq:20180101031755p:plain

配列に要素を入れる
  • 宣言するときに入れる

f:id:pbhfq:20180101033553p:plain

要素の番号
  • 要素には自動的に番号が振られます
  • インデックス(または添字):「0」から始まる番号
要素の追加・上書き
  • 要素をインデックス番号で指定します

f:id:pbhfq:20180101221852p:plain

型の異なるデータの挿入
f:id:pbhfq:20180101222451p:plain

配列の長さ
  • 要素の数
  • 配列名 . length

f:id:pbhfq:20180101223033p:plain

間隔を空けたデータの挿入

f:id:pbhfq:20180101223345p:plain

配列はオブジェクト
  • 配列 = インデックス: 要素
  • オブジェクト = プロパティ: バリュー

求職者支援訓練 フェリカテクニカルアカデミー