티스토리 뷰

Frontend/JavaScript

[생활코딩][웹브라우저JS]- 사용자와 커뮤니케이션 하기

blueprint-12 2022. 1. 26. 19:42

HTML은 form 을 통해서 사용자와 커뮤니케이션할 수 있는 기능 제공 

자바스크립트에서는 사용자와 정보를 주고받을 수 있는 간편한 수단을 제공한다. 

 

 

alert

  • 경고창 
  • 사용자에게 정보를 제공 or 디버깅등의 용도로 많이 사용 ->디버깅의 경우, 브라우저의 개발자도구가 있기 때문에 alert보다는 console.log를 많이 사용합니다.
  • 경고창을 실행할 동안은 그 다음 코드가 실행되지 않는다는 특징을 가지고 있음 
<body>
    <input type="button" value="alert" onclick="alertfnc();" />
    <script>
      function alertfnc() {
        alert(1); //경고창이 뜨고 확인을 누르지않으면 그 다음 로직이 실행되지않음
        alert(2);
        alert(3);
      }
    </script>
  </body>

confirm

  • window객체의 메소드 중 하나
  • 다른 경고창과 다르게 "확인, 취소"버튼이 있습니다. 
  • 확인 버튼을 누르면 true를 리턴, 취소 버튼을 누르면 false를 리턴합니다. -> 조건문의 조건식으로 활용가능
 <body>
 <input type="button" value="confirm" onclick="func_confirm()" />
 
 <script>
  function func_confirm() {
        if (confirm("ok?")) {
          alert("ok");
        } else {
          alert("cancel");
        }
      }
</script>
</body>

 

prompt

  • 사용자로부터 입력값을 받아서 그 값을 리턴합니다. -> 조건문의 조건식으로 활용가능
  •  
  • 입력받은 값을 리턴한다.
<body>
<input type="button" value="prompt" onclick="func_prompt();" />


<script>
function func_prompt() {
        if (prompt("what is your name?") === "cong") {
          alert("welcome");
        } else {
          alert("wrong name!");
        }
      }
 </script>
 </body>

 

 

'Frontend > JavaScript' 카테고리의 다른 글

[생활코딩][웹브라우저JS]- Navigator 객체  (0) 2022.01.27
[생활코딩][웹브라우저JS]- Location 객체  (0) 2022.01.26
[생활코딩][웹브라우저JS]- 스크립트 태그 위치, Object Model  (0) 2022.01.23
[생활코딩] JS문법(패턴)- 재귀함수(feat. 노드 종류 API)  (0) 2022.01.22
[생활코딩] JS문법(객체지향)- 참조  (0) 2022.01.21
댓글