Chapter07 組み込みオブジェクト

概要と目標 JavaScriptに最初からある、
オブジェクトを使おう。

JavaScriptに最初からある組み込みオブジェクトの基本を学習し、
キャラクター診断プログラムを作成しよう。

今回のゴール

RERUN

新しいウインドウで表示する

Stringオブジェクト 文字列に関する様々な
プロパティやメソッドが使える。

組み込みオブジェクトを利用するには、「new」というキーワードを使って、
インスタンス化する必要がある。
インスタンス化したオブジェクトは、そのオブジェクトが持つ様々な便利な命令が使える。

Stringオブジェクトのインスタンス化
var 変数名 = new String(オブジェクトとして扱いたい文字列);
   オブジェクト
主なStringオブジェクトのプロパティやメソッド
プロパティ/メソッド 説明
length 文字数を返すプロパティ
replace(検索, 置換) 文字列を置き換えるメソッド
substr(取得開始位置, 取得文字数) 文字列の取得を行うメソッド

Stringオブジェクトを使ってみよう。

  1. 「chapter07」 › 「string」フォルダ内の「app.js」をテキストエディタで開く
  2. 「こんにちは」という文字をインスタンス化し、プロパティやメソッドを使ってみる
chapter07/string/app.js
// インスタンス化
var s = new String('こんにちは');

// 文字数の取得
document.write(s.length + '<br>');

// 文字の置き換え
document.write(s.replace('にち', 'ばん') + '<br>');

// 文字の取得
document.write(s.substr(1, 3));
  1. 上書き保存
  2. ブラウザで「chapter07」 › 「string」フォルダ内の「index.html」をブラウザで開く
ブラウザでの表示例

RERUN

新しいウインドウで表示する

Arrayオブジェクト 配列に関する様々な
プロパティやメソッドが使える。

Arrayオブジェクトも、「new」キーワードでインスタンス化する必要がある。
インスタンス化したオブジェクトは、そのオブジェクトが持つ様々な便利な命令が使える。

Arrayオブジェクトのインスタンス化
var 変数名 = new Array(値1, 値2, 値3);
   オブジェクト
主なArrayオブジェクトのプロパティやメソッド
プロパティ/メソッド 説明
length 配列の要素数を返すプロパティ
push(末尾に追加する値) 配列の末尾に要素を追加するメソッド
reverse() 配列の要素を逆順にするメソッド

Arrayオブジェクトを使ってみよう。

  1. 「chapter07」 › 「array」フォルダ内の「app.js」をテキストエディタで開く
  2. 配列をインスタンス化し、プロパティやメソッドを使ってみる
chapter07/array/app.js
// インスタンス化
var a = new Array('前田', '大島', '高橋');

// 要素数を取得
document.write(a.length + '<br>');

// 要素を末尾に追加
a.push('指原');
document.write(a + '<br>');

// 要素を末逆順にする
a.reverse();
document.write(a + '<br>');
  1. 上書き保存
  2. ブラウザで「chapter07」 › 「array」フォルダ内の「index.html」をブラウザで開く
ブラウザでの表示例

RERUN

新しいウインドウで表示する

Mathオブジェクト 計算に関する様々な
プロパティやメソッドが使える。

Mathオブジェクトは、「new」キーワードを使わずに利用できる。
算術に関する様々なプロパティやメソッドが使える。

Mathオブジェクトの使い方
Math.プロパティやメソッド;
主なMathオブジェクトのプロパティやメソッド
プロパティ/メソッド 説明
ceil(不動小数) 繰り上げするメソッド
floor(不動小数)) 切り捨てするメソッド
round(不動小数) 四捨五入するメソッド
random() 「0」〜「1」のランダム数値を生成するメソッド

Mathオブジェクトを使ってみよう。

  1. 「chapter07」 › 「math」フォルダ内の「app.js」をテキストエディタで開く
  2. 配列をインスタンス化し、プロパティやメソッドを使ってみる
chapter07/math/app.js
// 繰り上げ
document.write(Math.ceil(3.14) + '<br>');

// 切り捨て
document.write(Math.floor(3.14) + '<br>');

// 四捨五入
document.write(Math.round(3.14) + '<br>');

// 「0」〜「1」のランダムな数
document.write(Math.random() + '<br>');

// おまけ 「0」 〜 「10」の乱数
var random = Math.floor(Math.random() * 11);
document.write(random);
  1. 上書き保存
  2. ブラウザで「chapter07」 › 「math」フォルダ内の「index.html」をブラウザで開く
ブラウザでの表示例

RERUN

新しいウインドウで表示する

練習問題 今回の理解度をチェック。

「chapter07」 › 「training」フォルダ内の「index.html」を開き、
下記の問題を解いて下さい。

ブラウザでの完成例

RERUN

新しいウインドウで表示する

    • ファイル名： app.js
    • 結果の決め方：ランダム
    • タイプ：「勇者」、「魔法使い」、「戦士」、「モンク」
解答例
chapter07/training/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>練習問題7</title>
</head>
<body>
  <script src="app.js"></script>
</body>
</html>
chapter07/training/app.js
// タイプを配列で管理
var types = [
  '勇者', '魔法使い', '戦士', 'モンク'
];

// 名前の取得
var name = prompt('お名前を入力して下さい');

// ランダムな数値を生成
var random = Math.floor(Math.random() * types.length);

// 結果を出力
document.write('<p>' + name + 'さんは「' + types[random] + '」タイプです。</p>');

解答例は全問題のチェックボックスが on になるとご覧いただけます。

まとめ 組み込みオブジェクトには、
便利な命令がある。

JavaScriptに最初からある組み込みオブジェクトには、
便利なプロパティやメソッドがある。

  • オブジェクトをインスタンス化するには、newを使う
  • オブジェクトで使う変数を、プロパティという
  • オブジェクトで使う関数を、メソッドという