53-2: JavaScript (function() {})()

jk·2024년 3월 19일
JavaScriptKDThtmlnowruz
0

kdt 풀스택

목록 보기
93/127



1. 함수를 만든후 즉시 실행 하는 방법은?

let fn1 = (function() {})();



2.아래를 구현하시오.

     var sorento = createCar("소렌토","발강",130);
     document.write(sorento.color + "</br>");
     document.write(sorento.speed + "</br>");
//code
      function createCar(name, color, speed) {
        return {
          name: name,
          color: color,
          speed: speed,
        };
      }



3.아래를 구현하시오.

     document.write(calculator.add(1,2) + "</br>");
     document.write(calculator.sub(1,2) + "</br>");
     document.write(calculator.mul(1,2) + "</br>");
//     
     document.write(area.getCircle(10) + "</br>");
     document.write(area.getRectangle(1,2) + "</br>");
     document.write(area.getTriangle(1,2) + "</br>");
//code
      let calculator = (function () {
        function add(num1, num2) {
          return num1 + num2;
        }
        function sub(num1, num2) {
          return num1 - num2;
        }
        function mul(num1, num2) {
          return num1 * num2;
        }
        return {
          add: add,
          sub: sub,
          mul: mul,
        };
      })();
      let area = (function () {
        function getCircle(radius) {
          return Math.PI * Math.pow(radius, 2);
        }
        function getRectangle(width, height) {
          return width * height;
        }
        function getTriangle(base, height) {
          return base * height * 0.5;
        }
        return {
          getCircle: getCircle,
          getRectangle: getRectangle,
          getTriangle: getTriangle,
        };
      })();



4. 아래를 구현하시오

 - 모달을 구현하시오.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
      crossorigin="anonymous"
    />
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
      crossorigin="anonymous"
</script>
  </head>
  <body>
    <button
      type="button"
      class="btn btn-primary"
      data-bs-toggle="modal"
      data-bs-target="#exampleModal"

      OPEN
    </button>
    <div class="modal fade bg-danger" id="exampleModal">
      <div class="modal-dialog">
        <div class="modal-content bg-success">
          <div class="modal-header d-flex justify-content-end">
            <h1 class="display-1 text-white fw-bold">!سال نو مبارک</h1>
          </div>
          <div class="modal-body">
            <img
              class="img-fluid"
              src="https://farsimonde.com/wp-content/uploads/2021/03/nowruz.jpg"
              alt=""
            />
          </div>
          <div class="modal-footer"></div>
        </div>
      </div>
    </div>
  </body>
</html>


profile
jk
Brave but clumsy
이전 포스트

53: JavaScript object, json

다음 포스트

54: JavaScript prototype

0개의 댓글