JavaScript 연습으로 FizBuzz 질문을 해 봤습니다.

피즈버즈가 뭐예요?

피즈버즈(Fiz Buzz, 비즈버즈, 버즈)는 영어권에서 장거리 드라이브와 술자리를 할 때 하는 언어 게임이다.
출전: Wikipedia
　
　

이루고 싶은 것(과제)

① Fizz에 입력한 값의 배수와 Buzz에 입력한 값의 배수를 작은 순서로 번갈아 표시합니다.
② Fizz 및 Buzz의 공통 배수는 "FizBuzz"로 표시됩니다.
③ 최대 두 자릿수를 표시합니다.
④ 정수 값을 제외한 값(문자열, 소수점, 공백)을 입력하면 정수 값을 입력하라는 잘못된 글이 표시됩니다.

그림 완성

완료 코드

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>FizzBuzz</title>
</head>

<body>
    <h1>FizzBuzz問題</h1>
    FizzNum：<input type="text" id="fizzNum" placeholder="整数値を入力してください" value="">
    <br>
    BuzzNum：<input type="text" id="buzzNum" placeholder="整数値を入力してください" value="">
    <br>
    <button type="button" id="output">実行</button>
    <h3>【出力】</h3>

    <ul id="fizzbuzzList"></ul>

    <script src="main.js"></script>
</body>

</html>

　
　
style.css

ul {
  padding-left: 10px;
}

li {
  list-style: none;
}

input {
  width: 160px;
}

　
　
main.js

const button = document.getElementById("output");
const fizzbuzzList = document.getElementById("fizzbuzzList");

const listAdd = (a) => {
  const li = document.createElement("li");
  li.innerHTML = a;
  fizzbuzzList.appendChild(li);
};

button.addEventListener("click", () => {
  const fizzNum = Number(document.getElementById("fizzNum").value);
  const buzzNum = Number(document.getElementById("buzzNum").value);

  if (
    Number.isInteger(fizzNum) &&
    Number.isInteger(buzzNum) &&
    fizzNum > 0 &&
    buzzNum > 0
  ) {
    for (i = 1; i < 100; i++) {
      if (i % fizzNum === 0 && i % buzzNum === 0) {
        listAdd("FizzBuzz" + i);
      } else if (i % fizzNum === 0) {
        listAdd("Fizz" + i);
      } else if (i % buzzNum === 0) {
        listAdd("Buzz" + i);
      }
    }
  } else {
    listAdd("整数値を入力してください");
  }
});

코드 해설

JavaScript의 인코딩을 복습하고 싶고 해설도 겸하고 싶습니다.
　
main.js

const button = document.getElementById("output"); 
const fizzbuzzList = document.getElementById("fizzbuzzList");

상수 button에서 클릭하여 이벤트를 일으키는 DOM 요소를 가져오고 대입합니다
상수 fizbuzzList에 FizBuzz를 표시하는 ul 요소를 가져와 대입합니다
　
main.js

const listAdd = (a) => {
  const li = document.createElement("li");
  li.innerHTML = a;
  fizzbuzzList.appendChild(li);
};

상수 listAdd에서 리 요소를 만드는 데 사용되는 함수 대입
함수를 호출할 때 인자를 받기 위해listAdd=(a)=>의 괄호에 수신할 값 a를 입력하십시오.
document.createElement("li")에서 리 요소를 생성하고 변수 리를 대입합니다.
생성된 리요소 리.innerHTML = a;매개변수에서 전송되는 값을 설정합니다.
fizbuzzList에 endChild(li)를 적용하여 생성된 리 요소가 추가되었습니다.
　
　
main.js

button.addEventListener("click", () => {
  const fizzNum = Number(document.getElementById("fizzNum").value);
  const buzzNum = Number(document.getElementById("buzzNum").value);

addeventListener("click", ()=>{클릭하여 이벤트를 시작합니다.
input 요소에 입력한 값을 fizzNum과 buzzNum에 대입합니다.
.value를 통해 입력한 값을 얻을 수 있습니다.
Number 객체를 사용하여 입력한 값을 문자열에서 수치화하지 않으면 if 문장의 조건 분기가 어려울 수 있습니다.
main.js

  if (
    Number.isInteger(fizzNum) &&
    Number.isInteger(buzzNum) &&
    fizzNum > 0 &&
    buzzNum > 0
  )

Number.isInteger(값)를 통해 전달되는 값이 정수인지 여부를 결정합니다.
전달된 값이 정수라면 진짜이고, 그렇지 않으면 가짜로 돌아간다.
그리고fizNum>0 &buzzNum>0
주어진 값이 하나 이상의 자연수라면 진짜 값을 되돌려줍니다.
※ 보통 0은 자연수에 포함되지 않습니다.
이쪽 조건이 엇갈리는 가운데.
fizNum과 buzzNum의 수치가 정수치 '와' 1보다 큰 자연수라면 다음과 같은 for문장 처리를 실행합니다.
　
　
main.js

//変数iに１を代入しiが100より小さい間以下の処理を繰り返す。１ループごとにiを1ずつ増やす
    for (i = 1; i < 100; i++) {

//iを入力されたfizzNumで割った値のあまりが0の場合かつbuzzNumで割ったあまりが0の場合
      if (i % fizzNum === 0 && i % buzzNum === 0) {

//関数listAddに引数として()内の文字列を渡す
        listAdd("FizzBuzz" + i);

//iを入力されたfizzNumで割ったあまりの数が0の場合
      } else if (i % fizzNum === 0) {

//関数listAddに引数として()内の文字列を渡す
        listAdd("Fizz" + i);

//iを入力されたbuzzNumで割ったあまりの数が0の場合
      } else if (i % buzzNum === 0) {

//関数listAddに引数として()内の文字列を渡す
        listAdd("Buzz" + i);
      }
    }
//上記のどの条件にも引っかからなかった場合以下の処理を実行
  } else {
    listAdd("整数値を入力してください");
  }

마지막 부분은 던졌지만 대체로 그런 느낌(웃음)

Reference

이 문제에 관하여(JavaScript로 FizBuzz 질문을 했어요.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/Yohei0502/items/f521bdb2ddf64526a384

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)