JavaScript備忘録1 DOM操作

学んでいくうえでの備忘録．
DOMとはDocument of Modelの略でこれを用いるとプログラムからHTMLの要素をいじれるようになる．
# DOM操作メモ
```
    document.body.innerHTML = 'hello';
```
document.titleやdocument.bodyでそれぞれの要素にアクセスできる．
`document.body`では<body>....</body>というタグを含んだ要素を得ることができる．
.inneerHTMLによって<body></body>の中の要素のみにアクセスできる．
例えば上のコードだとbody内がすべて'hello'のみになる．

```
    document.querySelector('button');
```
querySelectorを使用すると引数のタグの要素にアクセスできる．これも同じようにタグも含んでいる．複数同じタグがある場合，最初に見つかったものが優先されるようだ．同じようにinnerHTMLにより中身の要素にだけアクセスできる．
複数ある場合，cssの時と同じようにクラスを使ってアクセスしよう．
```
    document.querySlector('.first-button');
```
アクセス時にもCSSのようにできる．
jsでクラスを使う場合，分かりやすくするためにjs-buttonのようなクラス名にすることが，一般的なようだ．
```
    const buttonElement.innerHTML = document.querySelector('button');
```
上のようにいったん変数に格納するのがきれいなコードっぽい?
```
    .innerText
```
を用いると空白を省いたtextのみにアクセスできる．
## input
```
    document.querySelector('').value;
```
.valueによってinputに入力されたデータを取得できる．
```
    onkeydown =""
```
これはなにか文字を入力したときに一文字ずつに対して反応する．
```
    event.key
```
これによって打ち込まれたものが分かる．

# その他
```
    cost = Number(inputElement.value);    
```
Numberによって文字列を数値に変換できる．c言語でいうatoi．
pythonでいうint()である．Stringによってstr型に変えることも可能．


# 演習で作成したプログラム
```HTML
<!DOCTYPE html>
<html>
  <head>
    <title>Rock Paper Scissors</title>
  </head>
  <body>
    <p>Rock Paper Scissors</p>
    <button onclick="
    playGame('Rock');
    ">Rock</button>

    <button onclick="
      playGame('Paper');
    ">Paper</button>

    <button onclick="
      playGame('Scissors');
    ">Scissors</button>
    <p class="result" ></p>
    <p class="playerComputerMove"></p>
    <p class="points"></p>
    <button onclick="resetGame()">
      reset
    </button>
    <script>
      
      let score = JSON.parse(localStorage.getItem('score'))||{
        wins:0,
        losses:0,
        tais:0
      };
      function choiceComputerMove(){
        const randomNumber = Math.random();

        let computerMove = '';

        if (randomNumber >= 0 && randomNumber < 1 / 3) {
          return 'rock';
        } else if (randomNumber >= 1 / 3 && randomNumber < 2 / 3) {
          return 'paper';
        } else if (randomNumber >= 2 / 3 && randomNumber < 1) {
          return 'scissors';
        }
      }
      function playGame(playerMove){
        let computerMove = choiceComputerMove();
        let result='';
        if (playerMove==='Rock'){
          if (computerMove === 'rock') {
              result = 'Tie.';
            } else if (computerMove === 'paper') {
              result = 'You lose.';
            } else if (computerMove === 'scissors') {
              result = 'You win.';
            }
          document.querySelector('.result').innerHTML = result;
        }
        else if(playerMove==='Paper'){
          if (computerMove === 'rock') {
            result = 'You win.';
          } else if (computerMove === 'paper') {
            result = 'Tie.';
          } else if (computerMove === 'scissors') {
            result = 'You lose.';
          }

          document.querySelector('.result').innerHTML = result;
          }
        else if(playerMove==='Scissors'){
          if (computerMove === 'rock') {
            result = 'You lose.';
          } else if (computerMove === 'paper') {
            result = 'You win.';
          } else if (computerMove === 'scissors') {
            result = 'Tie.';
          }

          document.querySelector('.result').innerHTML = result;
          }
        
        if(result==='You win.'){
          score.wins+=1;
        }
        else if (result==='You lose.'){
          score.losses+=1;
        }
        else{
          score.tais+=1;
        }
        document.querySelector('.playerComputerMove').innerHTML = `You ${playerMove} - ${computerMove} Computer`;
        document.querySelector('.points').innerHTML = `wins:${score.wins},losses:${score.losses},tais:${score.tais}`;
        console.log(score);
        localStorage.setItem('score',JSON.stringify(score));
        }
      function resetGame(){
        score={
          wins:0,
          losses:0,
          tais:0
        }
        localStorage.setItem('score',JSON.stringify(score));

      }
    </script>
  </body>
</html>
```