[ZeroChoES 2020]見ていて1強.
9083 ワード
💡 学習の第一、順序図
以前からコーディングテストをしていたとき、順番図が並んでいませんでした.
まず機能を最大限に関数化して区分し,必要な順序で機能を実現して統合する.
でも今回は最初から順番図を描く習慣がついていて、面倒ですが、確かにメリットがあると思います.
💡 第二に、DOM
DOMはネズミ薬だと思います.今ではHTMLとJavaScriptをつなぐ絆についてよく知っています!やっていけない
結局、見ずに書いた私のgugudanプログラムは次のような非常に長いコードをロードしました!
guguclass.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">
<script src="guguClass.js" defer></script>
<title>GuGuClass</title>
</head>
<body>
<div>
<input type="text" class="multifly-former-input-bar">
<span>❌</span>
<input type="text" class="multifly-letter-input-bar">
<button class="start-btn">실행</button>
</span>
<div class="result"></div>
</html>
guguClass.js(Utuberの説明を表示する前に)
const former = document.querySelector('.multifly-former-input-bar');
const letter = document.querySelector('.multifly-letter-input-bar');
const btn = document.querySelector('.start-btn');
const result = document.querySelector('.result');
let formerValue = null;
let letterValue = null;
const getValue = (e) => {
const value = e.target.value;
if (value && !parseInt(value)) {
alert('값은 숫자만 가능합니다. (예: 0 ~ 9)')
}
return parseInt(e.target.value);
}
const onClickHandler = () => {
if (! letterValue || ! formerValue) {
alert("숫자로 된 값들을 모두 입력해주세요.");
return
}
const multipliedValue = formerValue * letterValue
alert(`${formerValue}과 ${letterValue}을 곱한 결과는 ${multipliedValue}입니다.`)
result.innerHTML = `=${multipliedValue}`
}
function GuGuClass() {
former.addEventListener('change', (e) => formerValue = getValue(e))
letter.addEventListener('change', (e) => letterValue = getValue(e))
btn.addEventListener('click', () => onClickHandler())
}
GuGuClass();
しかし、正解を聞いて、この方法を変えた.guguClass.js(Utuberの説明を表示する前に)
const btn = document.querySelector('.start-btn');
const result = document.querySelector('.result');
btn.addEventListener('click', () => {
const formerValue = document.querySelector('.multifly-former-input-bar').value;
const letterValue = document.querySelector('.multifly-letter-input-bar').value;
if (parseInt(formerValue) && parseInt(letterValue)) {
result.innerHTML= `= ${formerValue * letterValue}`
return
} else {
if (!parseInt(formerValue)) {
result.innerHTML = `첫 번째 값이 제대로 입력이 되지 않았습니다.`
return
} else if (!parseInt(letterValue)) {
result.innerHTML = `두 번째 값이 제대로 입력이 되지 않았습니다.`
return
}
}
})
わあ、もっときれい!!最も重要なのは、
簡単な問題はeventListenerで十分です
最初からonchangeに近い価値を得た私の行き詰まりのようです…!
Reference
この問題について([ZeroChoES 2020]見ていて1強.), 我々は、より多くの情報をここで見つけました https://velog.io/@jengyoung/zeroCho-ES2020-1강을-보며テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol