특정 웹페이지를 사용하다보면 메세지창이 가끔 나타나는 것을 볼 수 있다. 메세지창은 window.alert() 함수를 사용한다. 사용자와의 상호작용을 위한 하나의 기능으로 알림, 공지, 경고 등의 용도로 사용된다. 웹페이지와 사용자 사이에서 서로간의 상호작용을 위한 목적이 강한 것으로 적절한 메세지창 사용은 사용자가 올바르게 웹페이지를 이용하도록 유도하기도 한다.
자바스크립트 메세지창 window.alert 사용 방법
javascript output
웹페이지에서 사용자에게 알림이나 경고 등을 표현할 일이 있다.
이 경우 window.alert() 함수는 유용하다.
디자인을 위해 별도로 팝업창을 만드는 경우들도 있지만 window.alert() 함수를 이용하여 먼저 시스템을 만들어 사용자와의 호환성 테스트를 하기도 한다.
사용자가 웹페이지를 올바르게 사용하도록 유도하는 것은 중요하다.
window.alert() 은 이런 목적으로 자주 사용된다.
메세지창 window.alert
웹프로그램을 하다보면 window.alert() 함수를 자주 사용하게 될 수 있다.
이것은 하나의 알림이나 경고 등에 사용되는 함수로 사용자가 웹페이지에서 뭔가 작업 요청할 때 주의할 점, 경고, 혹은 알림 등에 사용된다.
자동화 프로세스에서도 사용되지만 일반적으로 웹페이지를 이용하는 사용자와 상호호환을 목적으로 사용한다.
즉, 사용자가 작업을 함에 있어 올바른 방향으로 유도하도록 하는 역할이 많다.
실행순서
자바스크립트는 별도의 함수로 연결되지 않는 한 웹페이지가 열리면 바로 실행되는 특징을 가진다.
window.alert() 함수도 마찬가지다.
만약, 사용자에게 웹페이지가 열리기 전에 필수로 알려야 하는 내용이 있을 때 사용하면 좋다.
alert() 함수보다도 팝업창을 사용하는 경우도 있다.
팝업창은 window.alert() 함수 보다도 많은 내용을 포함하여 내용을 보여줄 수 있는 장점이 있다.
그렇기에 window.alerT() 함수로 알림을 위한 용도로 사용하는 경우는 사용자의 작업을 유도하거나 필수적으로 알려야 할 내용을 기재하는 것이 좋다.
코드 작성
실제로 작동하는 코드를 작성한다.
자바스크립트의 특징 중 함수로 만들지 않는다면 웹페이지가 로드될 때 자바스크립트가 실행되는 특징을 가진다고 했다.
아래의 코드는 페이지가 로드될 때와 버튼을 클릭했을 때의 window.alert() 함수의 동작을 보여준다.
메세지창은 window.alert('알림문자열') 형식으로 사용한다.
<!DOCTYPE html>
<html>
<body>
<h1>직접 출력하기</h1>
<p id="Intml">첫번째 문단</p>
<p id="InText">두번째 문단</p>
<input type="button" onclick="window.alert('input 버튼 클릭 메세지창')" value="input 태그 버튼"></input>
<button onclick="window.alert('button 클릭 메세지창')">button 태그 사용</button>
<script>
window.alert("메세지창 열림");
</script>
</body>
</html>아래의 결과이미지는 위이 코드를 실행했을 때를 보여준다.
화면이 나타나고 웹페이지가 로드될 때 메세지를 한 번 보여준다.
그 이후 input 태그 버튼과 button 버튼으로 만든 태그로 window.alert() 이 어떻게 동작하는지 보여준다.
'programming > javascript' 카테고리의 다른 글
| 자바스크립트 구문 익히기 다른 프로그래밍 언어와 비슷하다 (0) | 2021.09.25 |
|---|---|
| 자바스크립트 브라우저 콘솔 출력 console.log 사용 방법 javascript output (0) | 2021.09.23 |
| 자바스크립트 직접 출력 document.write() 사용 javascript output (0) | 2021.09.17 |
| 자바스크립트 화면 출력 innerHTML innerText 차이 사용 javascript output (0) | 2021.09.15 |
| 자바스크립트 html 외부 js 호출 실행하는 방법 Executing javascript external js file (0) | 2021.09.14 |
댓글