Dynamic Html

• JavaScript의 Dynamic html 사용해서 계산기 만들기

  • 접근법
    - 자바스크립트 호출 시 HTML의 body를 DOM에 먼저 로딩 후 실행
    • Dynamic html을 통해서 폼 생성
    • html body안에 폼 삽입
    • 버튼 클릭시 계산해주는 함수
    • 유효성 체크
    • 숫자가 아닌 경우 NaN

폼이 들어갈 div 생성

<div id="contents"></div>

자바스크립트 호출 시 HTML의 body를 DOM에 먼저 로딩 후 실행

방법 1

// 자바스크립트 호출 시 HTML의 body를 DOM에 먼저 로딩 후 실행하도록 하는 함수들
// window.onload(), document.ready(), DOMContentLoaded()
window.addEventListener("DOMContentLoaded", function () {
  initForm();
});

방법 2

    <script type="module" src="./dcal2.js"></script>

type = "module" 설정하면 먼저 로드함

html body안에 폼 삽입

// 2. dhtml : 계산기 폼 생성
initForm = () => {
  let output = `
    <ul>
      <li>
        <input type="text" id="number1" placeholder="첫번째 숫자" />
        <input type="text" id="number2" placeholder="두번째 숫자" />
      </li>
      <li>
        <button type="button" class="button" data-operation="sum">➕</button>
        <button type="button" class="button" data-operation="sub">➖</button>
        <button type="button" class="button" data-operation="mul">✖️</button>
        <button type="button" class="button" data-operation="div">➗</button>
      </li>
      <li>
        <h3 class="result"></h3>
      </li>
    </ul>
    `;

계산기 폼 출력

  // 3. 계산기 폼 출력
document.querySelector("#contents").innerHTML = output;

버튼 클릭시 계산해주는 함수

방법 1

    // 4. 버튼을 누르면 input1과 input2를 더해주는 로직
  let buttons = document.querySelectorAll(".button");
  console.log(buttons);
  buttons.forEach((button) => {
    button.addEventListener("click", () => {
      let flag = button.dataset.operation;
      let number1 = document.querySelector("#number1").value;
      let number2 = document.querySelector("#number2").value;
// 5. 유효성 체크
      if (number1 === "" || number2 === "") {
        document.querySelector(".result").textContent =
          "모든 입력값을 채워주세요!";
        return;
      }

      switch (flag) {
        case "sum":
          document.querySelector(".result").textContent = `result : ${parseInt(
            number1 + number2
          )}`;
          break;
        case "sub":
          document.querySelector(".result").textContent = `result : ${parseInt(
            number1 - number2
          )}`;
          break;
        case "mul":
          document.querySelector(".result").textContent = `result : ${parseInt(
            number1 * number2
          )}`;
          break;
        case "div":
          document.querySelector(".result").textContent = `result : ${parseInt(
            number1 / number2
          )}`;
          break;

        default:
          break;
      }
    });
  });

방법 2

// DHTML 형식으로 계산기 프로그램
initForm();

// 계산기 폼을 생성하는 함수
function initForm() {
let output = `
  <h1>Calculator</h1>
  <ul>
    <li>
      <input type="text" id="number1" placeholder="첫번째 숫자" />
      <input type="text" id="number2" placeholder="두번째 숫자" />
    </li>
    <li>
      <button type="button" class="button" data-operation="sum">➕</button>
      <button type="button" class="button" data-operation="sub">➖</button>
      <button type="button" class="button" data-operation="mul">✖️</button>
      <button type="button" class="button" data-operation="div">➗</button>
    </li>
    <li>
      <h3 id="result">result :</h3>
    </li>
  </ul>
`;

// 화면 출력
document.querySelector("#content").innerHTML = output;

// 버튼 이벤트 처리
let buttonList = document.querySelectorAll(".button");

buttonList.forEach((button) => {
  button.addEventListener("click", () => {
    let number1 = document.querySelector("#number1").value;
    let number2 = document.querySelector("#number2").value;

    let result = 0;
    let operation = button.dataset.operation;

    switch (operation) {
      case "sum":
        result = sum(number1, number2);
        break;
      case "sub":
        result = sub(number1, number2);
        break;
      case "mul":
        result = mul(number1, number2);
        break;
      case "div":
        result = div(number1, number2);
        break;
    }

    console.log(result);
    document.querySelector("#result").textContent = `Result : ${result}`;
  });
});
} // initForm

계산하는 함수 모듈화

모듈화 시킬 함수 commons.js 로 따로 빼기

/**
 * 공통 모듈 저장
 */

// sum()
export default function sum(number1, number2) {
  return parseInt(number1) + parseInt(number2);
}
// sub()
export function sub(number1, number2) {
  return parseInt(number1) - parseInt(number2);
}
// mul()
export function mul(number1, number2) {
  return parseInt(number1) * parseInt(number2);
}
// div()
export function div(number1, number2) {
  return parseInt(number1) / parseInt(number2);
}

자주 호출하는 함수는 default설정(딱 1개만 존재)

// 모듈 호출
import sum, { sub, mul, div } from "./commons.js";

default가 붙은 함수는 블레이스 {} 밖에 둔다