홈페이지>웹 디자인 튜토리얼>자바스크립트 튜토리얼

상호작용: 경고, 프롬프트, 확인

저자：Eve Cole 업데이트 시간：2025-01-13 13:06:04

데모 환경으로 브라우저를 사용할 것이므로 사용자와 상호 작용하는 몇 가지 기능인 alert , prompt 및 confirm 살펴보겠습니다.

알리다

이것은 우리가 이미 본 것입니다. 메시지를 표시하고 사용자가 "확인"을 누를 때까지 기다립니다.

예를 들어:

 Alert("안녕하세요");

메시지가 포함된 미니 창을 모달 창 이라고 합니다. "모달"이라는 단어는 방문자가 창을 처리할 때까지 페이지의 나머지 부분과 상호 작용하거나 다른 버튼 등을 누를 수 없음을 의미합니다. 이 경우 – "확인"을 누를 때까지.

즉각적인

함수 prompt 두 가지 인수를 허용합니다:

 결과 = 프롬프트(제목, [기본값]);

텍스트 메시지, 방문자를 위한 입력 필드 및 확인/취소 버튼이 있는 모달 창을 표시합니다.

  • title

  • 방문자에게 표시할 텍스트입니다.

  • default

  • 선택적 두 번째 매개변수로 입력 필드의 초기 값입니다.

구문의 대괄호 [...]

위 구문에서 default 주위의 대괄호는 매개 변수가 필수가 아닌 선택 사항임을 나타냅니다.

방문자는 프롬프트 입력 필드에 내용을 입력하고 확인을 누를 수 있습니다. 그런 다음 result 에 해당 텍스트가 표시됩니다. 또는 취소를 누르거나 Esc 키를 눌러 입력을 취소할 수도 있습니다. 그러면 result 가 null 됩니다.

prompt 호출은 입력 필드의 텍스트를 반환하거나 입력이 취소된 경우 null 반환합니다.

예를 들어:

 let age = 프롬프트('당신은 몇 살입니까?', 100);

Alert(`당신은 ${age}세입니다!`); // 당신은 100세입니다!

IE: 항상 default 제공

두 번째 매개변수는 선택사항이지만 이를 제공하지 않으면 Internet Explorer는 프롬프트에 "undefined" 텍스트를 삽입합니다.

Internet Explorer에서 이 코드를 실행하여 다음을 확인하세요.

 let test = 프롬프트("테스트");

따라서 IE에서 프롬프트가 보기 좋게 보이도록 하려면 항상 두 번째 인수를 제공하는 것이 좋습니다.

 let test = 프롬프트("테스트", ''); // <-- IE의 경우

확인하다

구문:

 결과 = 확인(질문);

confirm 기능은 question 과 두 개의 버튼(확인 및 취소)이 있는 모달 창을 표시합니다.

OK를 누르면 결과는 true 이고, 그렇지 않으면 false .

예를 들어:

 let isBoss = verify("당신이 사장이신가요?");

경고( isBoss ); // OK를 누르면 true

요약

방문자와 상호작용하기 위한 3가지 브라우저별 기능을 다루었습니다.

  • alert

  • 메시지를 보여줍니다.

  • prompt

  • 사용자에게 텍스트를 입력하라는 메시지를 표시합니다. 텍스트를 반환하거나, 취소 버튼이나 Esc를 클릭하면 null 반환합니다.

  • confirm

  • 메시지를 표시하고 사용자가 "확인" 또는 "취소"를 누를 때까지 기다립니다. OK의 경우 true 반환하고 Cancel/ Esc 의 경우 false 반환합니다.

이러한 방법은 모두 모달입니다. 스크립트 실행을 일시 중지하고 창이 닫힐 때까지 방문자가 페이지의 나머지 부분과 상호 작용하는 것을 허용하지 않습니다.

위의 모든 방법에는 두 가지 제한 사항이 공유됩니다.

  1. 모달 창의 정확한 위치는 브라우저에 의해 결정됩니다. 일반적으로 중앙에 있습니다.

  2. 창의 정확한 모양은 브라우저에 따라 다릅니다. 우리는 그것을 수정할 수 없습니다.

이것이 바로 단순함의 대가입니다. 더 멋진 창과 방문자와의 더 풍부한 상호 작용을 표시하는 다른 방법이 있지만 "종소리"가 그다지 중요하지 않은 경우 이러한 방법이 잘 작동합니다.

작업

간단한 페이지

중요도: 4

이름을 요청하고 출력하는 웹페이지를 만듭니다.

데모 실행

JavaScript 코드:

 let name = 프롬프트("이름이 무엇입니까?", "");
경고(이름);

전체 페이지:

 <!DOCTYPE HTML>
<html>
<본문>

  <스크립트>
    '엄격하게 사용하세요';

    let name = 프롬프트("당신의 이름은 무엇입니까?", "");
    경고(이름);
  </script>

</body>
</html>
관련 기사