javascript 関数とオブジェクトの使い方

2014-08-06

javascriptはWebアプリの開発でなくてはならない言語の一つ。変数と配列についてはこちらでまとめたので、次は関数とオブジェクトについて。

javascriptの関数の書き方・使い方

関数はイベント発生時や任意のタイミングで呼び出すことができる処理をまとめたもの。特定の処理をする関数を作っておくことで、いつでも呼び出し使うことができます。

例えばこんな感じ。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Basic Jacvascript</title>
</head>
<body>
  <h1>Hello</h1>
  <p id="message"></p>
  <script src="js/basic-object.js"></script>
</body>
</html>

javascript

//basic functions
function addMessage(msg){
  var element = document.getElementById('message');
  element.textContent = msg;
}

addMessage('Hello! Message!');

functionの後ろに関数名を入れて、()内に関数で使うパラメータ名をセット。{}の中に処理を書き込み、関数を呼び出せば完了。

サンプルでは、idがmessageの要素にパラメータとして送られてきたmsgを書き込んでいます。ブラウザで表示すると以下のようになります。

また、別の書き方として以下のような記述方法もあります。

// other
var changeMessage = function(msg){
  var element = document.getElementById('message');
  element.textContent = msg;
};

changeMessage('CHANGE!');

function 関数名()と書くか、var 関数名 = function()と書くかの違いで結果は先ほどと同じ。

javascriptのオブジェクトの使い方

オブジェクトは変数や関数の集まりで、自身の中にプロパティとメソッドを持っています。プロパティはセットされた値を呼び出すためのキーとなるもの。メソッドは関数のこと。

書き方はこんな感じ。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Basic Jacvascript</title>
</head>
<body>
  <p id="car_name"></p>
  <p id="state"></p>
  <script src="js/basic-object.js"></script>
</body>
</html>

javascript

// basic object
var car = {

  // プロパティ
  name: 'MyCar',
  color: 'red',
  door: '4',

  // メソッド
  accelerator: function(state){
    if(state == 'on'){
      var element = document.getElementById('state');
      element.textContent = 'Speed UP!';
    }
  }
};

var element = document.getElementById('car_name');
element.textContent = car.name;

car.accelerator('on');

ブラウザで表示すると以下のようになります。

var = car{}でオブジェクトを作り、中身をセットしていきます。セットしたオブジェクトはプロパティの値やメソッドを呼び出して使用します。

プロパティの呼び出しは、オブジェクト名.プロパティ名。メソッドの呼び出しも同様にオブジェクト名.メソッド名()で呼び出して使うことができます。