学んでいくうえでの備忘録．
DOMとはDocument of Modelの略でこれを用いるとプログラムからHTMLの要素をいじれるようになる．
DOM操作メモ
document.body.innerHTML = 'hello';
document.titleやdocument.bodyでそれぞれの要素にアクセスできる．
document.bodyでは
.inneerHTMLによっての中の要素のみにアクセスできる．
例えば上のコードだと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型に変えることも可能．
演習で作成したプログラム
<!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>