JavaScriptはオブジェクト指向言語の側面も持っている。オブジェクトを見ていこう。
[オブジェクトの定義]
jsでは波括弧でオブジェクトを定義する。以下は空のオブジェクト

var obj={};

以下はpenオブジェクト。プロパティ名:値でプロパティを定義していく。

var pen={
  color:"red",
  length:3
}

メソッドも定義できる。関数を値として直接渡すことができる(関数もオブジェクト)
thisは自分自身を指す予約語、この場合writeすると自分のlengthが0.5短くなる。

var pen={
  color:"red",
  length:3,
  write:function(){
    this.length-=0.5;
  }
}

オブジェクトの基本的な表し方がわかったところで、実際にソースを記述してみよう。
jsLesson6.htmlとして以下を記述する。

●jsLesson6.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>jsレッスン</title>
</head>
<body>
  <button onclick="btWrite()">書く</button>
  <button onclick="btCheck()">長さ見る</button>
  <div id="result"></div>
<script>
var ele=document.getElementById("result");
var pen={
  length:3,
  write:function(){
    this.length-=0.5;
    return '書きました';
  }
}
function btWrite(){
  var msg=pen.write();
  ele.textContent=msg;
}
function btCheck(){
  ele.textContent='長さは'+pen.length+'です。';
}
</script>
</body>
</html>

ブラウザで実行してみよう。書くボタンで「書きました」長さ見るボタンで「長さは◯です。」と表示されれば成功だ。

[ソースコード解説]
17行目:functionは値を返すことが可能。

[コンストラクタ]
インスタンスを作成できるコンストラクタを作ることができる。以下はコンストラクタを作成し、インスタンスを3つ生成している。

function Pen(color,length){
  this.color=color;
  this.length=length;
  this.write=function(){
    this.length-=0.5;
  }
}
var penRed=new Pen("赤",10);
var penGreen=new Pen("緑",8);
var penBlue=new Pen("青",15);

Q1.コンストラクタを作成し、3つのインスタンスを作ることによって以下のアプリを作成せよ。
1.スタート画面 4つのボタンが表示されている。

2.書くを押して見る。ペンをまだ持っていないので叱られる。

3.赤を持つをクリック

4.書くをクリック(押すたびに長さが減っていく)

[解答例]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>jsレッスン</title>
</head>
<body>
<button id="btRed" onclick="btSelect('red')">赤を持つ</button>
<button id="btGreen" onclick="btSelect('green')">緑を持つ</button>
<button id="btBlue" onclick="btSelect('blue')">青を持つ</button>
<button id="btWrite" onclick="btWrite()">書く</button>
<div id="result"></div>
<script>
function Pen(color,length){
  this.color=color;
  this.length=length;
  this.write=function(){
    this.length-=0.5;
    return this.color+"で書きました。残りの長さ"+this.length;
  }
  this.selected=function(){
    return this.color+"を持った。";
  }
}
var penRed=new Pen("赤",10);
var penGreen=new Pen("緑",8);
var penBlue=new Pen("青",15);
var pen=null;
var result=document.getElementById("result");
function btSelect(color){
  switch(color){
    case 'red':
     pen=penRed;
    break;
    case 'green':
     pen=penGreen;
    break;
    case 'blue':
     pen=penBlue;
    break;
  }
  result.textContent=pen.selected();
}
function btWrite(){
  if(pen==null){
    result.textContent="ペンを持ってください!";
    return;
  }
  if(pen.length<=0){
    result.textContent="もうかけません!";
    return;
  }
  var msg=pen.write();
  result.textContent=msg;
}
</script>
</body>
</html>

[CSSの操作]
jsから動的にcssを操作できる。以下のソースを入力
●jsLesson7.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>jsレッスン</title>
</head>
<body>
<div id="box"></div>
<script>
var ele=document.getElementById("box");
ele.style.width="300px";
ele.style.height="200px";
ele.style.backgroundColor="blue";
ele.style.padding="10px";
ele.style.color="white";
ele.textContent="sample";
</script>
</body>
</html>

実行してみて以下のようになれば成功だ。

[ソースコード解説]
11~15行目:element(要素)が持つstyleオブジェクトのプロパティに値をセットしている。基本的にはcssの書き方に準じるが、background-colorなどのハイフン混じりのプロパティはbackgroundColorとキャメルケースで記述しなければならない。

Q2.先ほど作ったペンアプリを改良し、鉛筆の長さを長方形で表せるようにせよ。詳しくは実行例参照のこと
1.ペンを持つとペンの色を背景色とした長方形がペンの長さで描画される。

2.書くと長方形も短くなる。

[解答例]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>jsレッスン</title>
</head>
<body>
<button id="btRed" onclick="btSelect('red')">赤を持つ</button>
<button id="btGreen" onclick="btSelect('green')">緑を持つ</button>
<button id="btBlue" onclick="btSelect('blue')">青を持つ</button>
<button id="btWrite" onclick="btWrite()">書く</button>
<div id="result"></div>
<div id="penLength"></div>
<script>
function Pen(color,length){
  this.color=color;
  this.length=length;
  this.write=function(){
    this.length-=0.5;
    return this.color+"で書きました。残りの長さ"+this.length;
  }
  this.selected=function(){
    return this.color+"を持った。";
  }
}
var penRed=new Pen("赤",10);
var penGreen=new Pen("緑",8);
var penBlue=new Pen("青",15);
var pen=null;
var result=document.getElementById("result");
var penLength=document.getElementById("penLength");
penLength.style.color="yellow";
function btSelect(color){
  switch(color){
    case 'red':
     pen=penRed;
    break;
    case 'green':
     pen=penGreen;
    break;
    case 'blue':
     pen=penBlue;     
    break;
  }
  penLength.style.backgroundColor=color;
  penLength.style.width=pen.length+"cm";
  penLength.textContent=pen.length+"cm";
  result.textContent=pen.selected();
}
function btWrite(){
  if(pen==null){
    result.textContent="ペンを持ってください!";
    return;
  }
  if(pen.length<=0){
    result.textContent="もうかけません!";
    return;
  }
  var msg=pen.write();
  penLength.style.width=pen.length+"cm";
  penLength.textContent=pen.length+"cm";
  result.textContent=msg;
}
</script>
</body>
</html>