본문 바로가기

FE/JavaScript

[JavaScript] confirm, open

 

 

 

 

 

confirm, open

confirm : 확인, 취소 버튼을 누를 수 있는 창을 띄움

open : 창을 띄움

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      window.onload = () => {
        let myC = document.getElementById("myC");
        myC.addEventListener("click", myConfirm);
        let myO = document.getElementById("myO");
        myO.addEventListener("click", myOpen);
      };
      function myOpen() {
        // open("https://www.naver.com");
        // 새 창에서 열림
        
        // window.open("https://www.naver.com", "_self");
        // 자기 자신 창에서 열림

        // window.open("ex31.html", "", "width=500, height=500");
        // 새창에 크기를 조절하여 ex31.html 파일 열기

        window.open("popup.html", "", "width=500, height=500");
      }
      const myConfirm = () => {
        let result = confirm("처음 방문???");
        console.log(result);
        let msg = "";
        if (result) {
          msg = "처음 방문 감사합니다!!!";
        } else {
          msg = "재방문 감사합니다!!!";
        }
        document.getElementById("myP").innerHTML = msg;
      };
    </script>
  </head>
  <body>
    <button type="button" id="myC">클릭</button>
    <p id="myP"></p>
    <input type="button" id="myO" value="창열기" />
  </body>
</html>

ex32.html

<script>
  myClose = () => {
    window.close();
  };
</script>

<h1>- 공 지 사 항 -</h1>
<h3>행복한 하루</h3>
<p></p>

<!-- 아래 두 코드는 동일한 코드 -->
<!-- <input id="cl" type="checkbox" onclick="myClose()" /> -->
<input id="cl" type="checkbox" onclick="window.close()" />
<label for="cl">하루동안 열지 않음</label>

popup.html

코드 실행
728x90