[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に近い価値を得た私の行き詰まりのようです…!
laravelのインストール例
インポートで生ファイルをインポートする方法.メタ.vite ()関数のVITEです.js