경고 상자란 무엇입니까?
경고 상자는 일부 유형의 사용자 상호 작용(클릭, 스크롤, 입력 등)에 대한 응답으로 팝업되는 작은 창입니다. 경고 상자는 주로 사용자에게 문제에 대해 경고하는 데 사용됩니다. 그러나 최종 사용자에게 정보를 제공하는 데에도 사용됩니다.
경고 상자를 사용하는 일반적인 예는 사용자가 양식 제출 버튼을 클릭했지만 필수 필드를 채우는 것을 잊은 경우입니다. 그러면 사용자에게 문제를 설명하는 메시지와 함께 경고 상자가 나타납니다.
알림 상자를 만드는 방법
위 스크린샷의 정확한 경고 상자를 복제해 보겠습니다.
먼저 트리거로 사용할 버튼 요소 생성을 추가합니다.
<button onclick="missingFieldWarningPopup()">Submit form</button>
이제 이 JavaScript 함수를 .js에 추가하십시오. 파일:
function missingFieldWarningPopup() {
alert("You forgot to fill out all the required input fields!")
}
코드에서 일어나는 일: 버튼 요소에는 onclick이 있습니다. 속성을 클릭 이벤트 트리거로 사용합니다. 사용자가 버튼을 클릭하면 클릭 이벤트가 missingFieldWarningPopup()을 호출합니다. alert()를 표시하는 함수 프롬프트 창에 표시하고 내부에 문자열(텍스트)을 표시합니다.
JavaScript 기능을 인라인으로 추가하려면 코드를 입력한 다음 <head> 안에 추가합니다. HTML 문서의 요소:
<script type="text/javascript">
function missingFieldWarningPopup() {
alert("You forgot to fill out all the required input fields!")
}
</script>예제 코드.