Webサイト制作-8日目(JavaScript) | ジョイタスネット

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

let obj={};

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

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

昨今のjsはクラス構文も使えるようになった。classを作成してみよう。
コンストラクタでプロパティを定義する。

class Pen{
    constructor(length){
        this.length=length;
    }
    write(){
        this.length-=0.5;
        return '書きました';
    }
}
let pen=new Pen(3);//長さ3でインスタンス作成

クラスの作成方法、インスタンスの生成方法がわかったところで、実際にソースを記述してみよう。
jsLesson6.htmlとして以下を記述する。

●jsLesson6.html

01<!DOCTYPE html>
02<html>
03<head>
04<meta charset="UTF-8"/>
05<title>jsレッスン</title>
06</head>
07<body>
08  <button onclick="btWrite()">書く</button>
09  <button onclick="btCheck()">長さ見る</button>
10  <div id="result"></div>
11<script>
12const result=document.getElementById("result");
13class Pen{
14    constructor(length){
15        this.length=length;
16    }
17    write(){
18        this.length-=0.5;
19        return '書きました';
20    }
21}
22let pen=new Pen(3);
23 
24const btWrite=()=>{
25    let msg=pen.write();
26    result.textContent=msg;
27};
28 
29const btCheck=()=>{
30    result.textContent=`長さは${pen.length}です。`;
31};
32</script>
33</body>
34</html>

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

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

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

3.赤を持つをクリック

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

[解答例]

01<!DOCTYPE html>
02<html lang="ja">
03<head>
04    <meta charset="UTF-8">
05     
06    <title>Document</title>
07</head>
08<body>
09   <button class="select">赤を持つ</button> 
10   <button class="select">緑を持つ</button> 
11   <button class="select">青を持つ</button> 
12   <button onclick="writePen()">書く</button> 
13   <p id="info"></p>
14   <script>
15       class ColorPen{
16           constructor(color,length){
17               this.color=color;
18               this.length=length;
19           }
20           write(){
21               let msg='';
22               if(this.length<=0){
23                    msg='もうかけません!';
24                     
25               }else{
26                    this.length-=0.5;
27                    msg=this.color+'で書いた。残りの長さ'+this.length;
28               }
29               return msg;
30           }
31       }
32       const bts=document.querySelectorAll('.select');
33       let pens=[new ColorPen('赤',10),new ColorPen('緑',10),new ColorPen('青',10)];
34       let pen=null;
35       const info=document.getElementById('info');
36       for(let i=0;i<bts.length;i++){
37           bts[i].addEventListener('click',()=>{
38                pen=pens[i];
39                info.textContent=pen.color+'を持った。';
40           });
41       }
42       const writePen=()=>{
43           let msg='';
44           if(pen==null){
45            msg='ペンを持ってください!';
46           }else{
47            msg=pen.write();
48           }
49           info.textContent=msg;
50       }; 
51   </script>
52</body>
53</html>

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

01<!DOCTYPE html>
02<html>
03<head>
04<meta charset="UTF-8"/>
05<title>jsレッスン</title>
06</head>
07<body>
08<div id="box"></div>
09<script>
10let ele=document.getElementById("box");
11ele.style.width="300px";
12ele.style.height="200px";
13ele.style.backgroundColor="blue";
14ele.style.padding="10px";
15ele.style.color="white";
16ele.textContent="sample";
17</script>
18</body>
19</html>

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

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

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

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

[解答例]

01<!DOCTYPE html>
02<html lang="en">
03<head>
04  <meta charset="UTF-8">
05  <title>Document</title>
06</head>
07<body>
08 <button class="select">赤を持つ</button> 
09 <button class="select">緑を持つ</button> 
10 <button class="select">青を持つ</button> 
11 <button onclick="writePen()">書く</button>
12 <p id="info"></p>
13 <div id="graph"></div>
14 <script>
15   class ColorPen{
16     constructor(color,code,length){
17       this.color=color;
18       this.code=code;
19       this.length=length;
20     }
21     write(){
22       let msg='';
23       if(this.length<=0){
24         msg='もう書けません!';
25       }else{
26         this.length-=0.5;
27         msg=this.color+"で書いた。残りの長さ"+this.length;
28       }
29       return msg;
30     }
31   }
32    
33   const bts=document.querySelectorAll('.select');
34   //const bts=document.getElementsByClassName('select');
35   let pens=[
36     new ColorPen('赤','red',10),
37     new ColorPen('緑','green',10),
38     new ColorPen('青','blue',10),
39    ];
40   let pen=null;
41   const graph=document.getElementById("graph");
42   const info=document.getElementById('info');
43   for(let i=0;i<bts.length;i++){
44     bts[i].addEventListener('click',()=>{
45       pen=pens[i];
46       info.textContent=pen.color+'を持った。';
47       setStyle();
48     });
49   }
50   const writePen=()=>{
51     let msg='';
52     if(pen==null){
53       msg='ペンを持ってください!';
54     }else{
55       msg=pen.write();
56       setStyle();
57     }
58     info.textContent=msg;
59   };
60   const setStyle=()=>{
61       graph.textContent=pen.length+"cm";
62       graph.style.width=pen.length+"cm";
63       graph.style.backgroundColor=pen.code;
64       graph.style.color='yellow';
65   };
66 </script>
67</body>
68</html>