>웹 프론트엔드 >JS 튜토리얼 >이벤트를 사용하여 팝업 메시지를 해석하시겠습니까?

이벤트를 사용하여 팝업 메시지를 해석하시겠습니까?

PHPz
PHPz앞으로
2023-08-24 22:37:021248검색

이벤트를 사용하여 팝업 메시지를 해석하시겠습니까?

팝업 상자를 사용하여 앱 사용자에게 팝업 메시지를 표시할 수 있습니다. 이 튜토리얼에서는 다양한 유형의 JavaScript 팝업에 대해 알아봅니다.

아래 JavaScript에는 세 가지 유형의 팝업 상자가 제공됩니다.

  • 알림 상자

  • 확인 상자

  • 프롬프트 상자

아래에서는 모든 팝업 상자에 대해 하나씩 알아보겠습니다.

알림 상자

window.alert() 메소드를 사용하여 경고 상자를 표시할 수 있습니다. 단지 팝업 상자에 메시지를 표시할 뿐입니다.

사용자에게 메시지를 제공해야 할 경우 경고 상자를 사용할 수 있습니다. 예를 들어, 사용자가 애플리케이션에 로그인하면 "로그인에 성공했습니다."와 같은 메시지가 표시됩니다.

문법

사용자는 다음 구문에 따라 JavaScript로 경고 상자를 표시할 수 있습니다.

으아악

매개변수

  • Message- 알림 상자에 표시되는 메시지입니다.

이 예에서는 사용자가 버튼을 클릭하면 showAlert() 함수를 호출합니다. showAlert() 함수는 경고() 메서드를 사용하여 경고 상자를 표시합니다.

출력에서 사용자는 버튼을 누르면 매개변수로 메시지가 전달된 경고 상자가 표시되는 것을 볼 수 있습니다. 경고 상자에서 "확인" 버튼을 누르면 사라집니다.

으아악

확인 상자

사용자 확인이 필요한 경우 확인 상자를 사용할 수 있습니다. 예를 들어 일부 중요한 데이터를 삭제하기 전에 사용자의 확인을 받아야 합니다.

window.confirm() 메소드를 사용하여 확인 상자를 표시할 수 있습니다. 확인 상자에는 "확인"과 "취소"라는 텍스트가 있는 두 개의 버튼이 있습니다. 사용자가 취소 버튼을 누르면 false를 반환하고, 그렇지 않으면 true를 반환합니다.

문법

사용자는 다음 구문에 따라 JavaScript로 확인 상자를 표시할 수 있습니다.

으아악

매개변수

  • Message- 확인 상자에 표시되는 확인 메시지입니다.

반환 값

사용자가 "확인" 버튼을 눌렀는지 아니면 "취소" 버튼을 눌렀는지에 따라 true 및 false 부울 값을 반환합니다.

이 예에서는 확인 상자를 표시하기 위해 창 개체의 verify() 메서드를 사용합니다. 또한 확인 상자의 확인 버튼을 누르는지 취소 버튼을 누르는지에 따라 사용자에게 화면에 다른 메시지를 표시합니다.

으아악

프롬프트 상자

프롬프트 상자는 JavaScript에서 팝업 메시지를 표시하는 세 번째 방법입니다. 프롬프트 상자는 경고() 및 확인 상자의 고급 버전입니다. 상자에 메시지를 표시하고 사용자의 입력을 받아들입니다. 또한 입력 값을 제출하기 위한 확인 및 취소 버튼이 포함되어 있습니다.

문법

사용자는 프롬프트 상자를 사용하여 다음 구문에 따라 JavaScript로 사용자 입력을 얻을 수 있습니다.

으아악

위 구문에서는 정적 프롬프트() 메서드를 호출했습니다.

매개변수

  • message - 입력창 위에 표시되는 메시지입니다.

  • Placeholder- 입력 상자에 표시되는 텍스트입니다.

반환 값

사용자가 확인 버튼을 누르면 입력 값이 반환되고, 그렇지 않으면 비어 있습니다.

이 예에서는 사용자에게 도구 설명을 표시하는 takeInput() 함수를 만들었습니다. 우리는 사용자가 입력한 이름을 얻기 위해 프롬프트 상자를 사용합니다.

사용자가 입력값을 입력한 후 OK 버튼을 누르면 화면에 사용자가 입력한 내용이 표시됩니다.

으아악

이 튜토리얼에서는 예시와 함께 세 가지 팝업을 모두 살펴보았습니다. 메시지만 표시해야 한다면 경고 상자를 사용할 수 있고, 사용자 확인만 필요한 경우에는 확인 상자를 사용해야 합니다. 팝업 상자에 값을 입력하거나 값을 확인해야 하는 경우 프롬프트 상자를 사용해야 합니다.

위 내용은 이벤트를 사용하여 팝업 메시지를 해석하시겠습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 tutorialspoint.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제