javascript で学んだこと １章

# 読んだ本

ステップアップJavaScript

https://books.circlearound.co.jp/step-up-javascript/

大学の研究室で渡された本です。演習みたいなものが載っているので、自分なりの解答を残します

初学者の方も解答を一緒に考えたら力がつくと思います。


## 第一章で作ったもの

ストップウォッチを作りました



```index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>step1</title>
    <link rel="stylesheet" href="./main.css">
</head>
<body>
    <h1 class="title">ストップウォッチ</h1>
    <div id ="stopWatchPanel">
        <div class="display">0</div>
        <div class="actions">
            <button class="startButton">スタート</button>
            <button class="stopButton">ストップ</button>
        </div>
        <div class="log"></div>
    </div>
    <script src ="./main.js"></script>
</body>
</html>
```

```main.js
function stopWatch(options){
    function addMessage(message){
        var messageElm = document.createElement('div');
        var now = new Date();
        messageElm.innerText = now.getHours() + '時' + now.getMinutes() + '分' + now.getSeconds() +'秒' + message;
        messageElm.classList = ['message'];
        logElm.appendChild(messageElm);
    }
    
    options = options || {};
    var color = options.color || 'lightblue';
    var backgroundColor = options.backgroundColor || 'black';
    var displayElm = document.getElementsByClassName('display')[0];
    displayElm.style.color = color;
    displayElm.style.backgroundColor = backgroundColor;
    var logElm = document.querySelector('.log');
    var startButton = document.getElementsByClassName('startButton')[0];
    var timer = null;
    
    startButton.addEventListener('click', function(){
        if( timer === null){
            var seconds = 0;
            timer = setInterval(function(){
                seconds++;
                displayElm.innerText = seconds;
                console.log(seconds);
            }, 1000);
            console.log('start : ' + timer);
            addMessage('開始');
        }
    });
    
    var stopButton = document.getElementsByClassName('stopButton')[0];
    stopButton.addEventListener('click', function(){
        if(timer !== null){
            
            console.log('stop : ' + timer);
            clearInterval(timer);
            timer = null;
            addMessage('終了');
        }
        
    });
    }
    
    var options ={
    color: 'limegreen',
    backgroundColor: '#333'
};

stopWatch(options);
```



``` main.css
.title{
    text-align: center;
}

#stopWatchPanel{
    margin: 0 auto;
    width: 10em;
}

.display{
    font-weight: bold;
    text-align: right;
    height: 1.5em;
    margin-bottom: .2em;
    padding: .5em;
    color: lightblue;
    background-color: black;
}

.actions{
    text-align: center;
    margin-bottom: 1em;
}

.message{
    text-align: center;
    border-bottom: 1px solid lightblue;
}
```

これらのコードで簡易なストップウォッチができます

### 最初の演習
1 操作履歴の最新のものが一番上に来るようにする

```main.js
function stopWatch(options){
 　
　　・
　　・
　　・
        logElm.prepend(messageElm);

    }
```
prepend メソッドで追加する子要素を最新のものにできました
参考にしたサイトは以下です
https://www.javadrive.jp/javascript/dom/index20.html#section1

2 初期状態及び停止状態のストップボタンと、カウントアップ状態のスタートボタンは無効なことをわかりやすくする。ボタンを押せなくさせる

button.disabled = true
でボタンが薄くなり
button.disabled = false
で再度見えるようになります

```main.js
startButton.addEventListener('click', function(){
            startButton.disabled = true;
            stopButton.disabled = false;
        `
        `
        `
    });
    
    
    
    stopButton.addEventListener('click', function(){
        if(timer !== null){
            startButton.disabled = false;
            stopButton.disabled = true;
            console.log('stop : ' + timer);
            clearInterval(timer);
            timer = null;
            addMessage('終了');
        }
        
    });
```

stopButtonという変数を全体で使えるように
``` main.js
    options = options.color || 'lightblue';
    `
    `
    `
    var startButton = document.getElementsByClassName('startButton')[0];
    var timer = null;
    var stopButton = document.getElementsByClassName('stopButton')[0];

```
という形にしています


3 180秒たったらアラート
これは簡単ですね
secondsが180になったらアラートをすればよいだけです

```main.js
startButton.addEventListener('click', function(){
                `
                `
                `
                if (seconds == 180){
                    alert('カップラーメン出来上がり');
                }
            }, 1000);
            
            console.log('start : ' + timer);
            addMessage('開始');
        }
    });
```




最終的な回答は以下になります



```main.js
function stopWatch(options){
    function addMessage(message){
        var messageElm = document.createElement('div');
        var now = new Date();
        messageElm.innerText = now.getHours() + '時' + now.getMinutes() + '分' + now.getSeconds() +'秒' + message;
        messageElm.classList = ['message'];
        logElm.prepend(messageElm);
    }
    
    options = options || {};
    var color = options.color || 'lightblue';
    var backgroundColor = options.backgroundColor || 'black';
    var displayElm = document.getElementsByClassName('display')[0];
    displayElm.style.color = color;
    displayElm.style.backgroundColor = backgroundColor;
    var logElm = document.querySelector('.log');
    var startButton = document.getElementsByClassName('startButton')[0];
    var timer = null;
    var stopButton = document.getElementsByClassName('stopButton')[0];
    
    
    startButton.addEventListener('click', function(){
        if( timer === null){
            startButton.disabled = true;
            stopButton.disabled = false;
            var seconds = 0;
            timer = setInterval(function(){
                seconds++;
                displayElm.innerText = seconds;
                console.log(seconds);
                if (seconds == 180){
                    alert('カップラーメン出来上がり');
                }
            }, 1000);
            
            console.log('start : ' + timer);
            addMessage('開始');
        }
    });
    
    
    
    stopButton.addEventListener('click', function(){
        if(timer !== null){
            startButton.disabled = false;
            stopButton.disabled = true;
            console.log('stop : ' + timer);
            clearInterval(timer);
            timer = null;
            addMessage('終了');
        }
        
    });
}

var options ={
    color: 'limegreen',
    backgroundColor: '#333'
};

stopWatch(options);
```