자바스크립트 alert() 메소드

자바스크립트 alert() Window.alert()라고도 하는 메서드 , 사용자에게 경고 대화 상자를 표시합니다. 사용자에게 확인 버튼이 있는 메시지를 표시하기 위해 선택적 메시지 인수를 허용합니다. alert()의 일반적인 용도 사용자에게 작업이 성공했음을 알리거나 오류를 표시하는 것입니다.

alert() 방법은 개발 도구로도 유용합니다. 예를 들어, alert() 양식 제출을 처리하는 함수 내부. 일반적으로 alert() event.preventDefault() 뒤에 배치됩니다. 라고 합니다.

검토를 위해 event.preventDefault() 제출 버튼을 클릭한 후 리디렉션의 기본 동작을 취소합니다. 이 빠른 자습서를 읽고 event.preventDefault()를 자세히 검토하세요. .

자바스크립트 경고()란 무엇입니까?

자바스크립트 alert() 팝업 대화 상자를 표시합니다. 문자열 형식의 선택적 메시지를 전달하여 사용자 정의 메시지를 표시할 수 있습니다. alert()에 대한 중요 참고사항 확인을 클릭하여 승인이 필요한 메시지를 표시하는 데만 사용해야 합니다. 작업이 필요한 메시지는 alert()를 사용해서는 안 됩니다. .

alert() 대화 상자에는 많은 용도가 있습니다. fetch() 컨텍스트에서 성공 또는 오류를 표시하는 데 사용할 수 있습니다. 요구. 또 다른 용도는 alert()를 표시하는 것입니다. 프로그램이 적절하게 흐르도록 하는 기능에서.

alert() 자바스크립트 구문

alert() 구문 간결하고 직관적이다. alert()를 호출하기만 하면 됩니다. 문자열 형태의 메시지와 함께:

alert('message')

이렇게 하면 '메시지'라는 대화 상자가 표시됩니다. 사용자 지정 메시지를 문자열로 배치하여 표시합니다.

메시지는 선택 사항입니다. 메시지가 포함되지 않은 경우 확인 버튼이 있는 빈 대화 상자가 나타납니다.

참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.

부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.

alert()

자바스크립트 alert() 예제

이 기사의 도입부에서 우리는 alert()를 사용하기 위한 사용자 및 개발자 시나리오를 고려했습니다. . 이제 각각이 어떻게 구현되는지 살펴보겠습니다. 개발자 쪽부터 시작하겠습니다. alert() 양식 제출을 처리하는 함수 내부.

사용자 이름과 비밀번호로 로그인하기 위한 기본 양식부터 시작하겠습니다.

<form>
<label>Name</label>
<input type="text" name="name">
<label>Password</label>
<input type="text" name="name">
<button type="submit">
Log In
</button>
</form>

어떤 렌더링:

이제 JavaScript 양식의 onSubmit 속성에 전달할 함수를 빌드해 보겠습니다.

const handleOnSubmit = (event) => {
 event.preventDefault();
 alert("Logged In")
}

그런 다음 이 함수를 onSubmit 속성의 양식에 전달합니다.

<form onSubmit="handleOnSubmit(event)">
<label>Name</label>
<input type="text" name="name">
<label>Password</label>
<input type="text" name="name">
<button type="submit">
Log In
</button>
</form>

이제 로그인 버튼을 클릭하여 함수를 양식에 제대로 연결했는지 확인할 수 있습니다. 버튼을 클릭하면 다음과 같은 대화 상자가 나타납니다.

엄청난! 우리는 우리가 정의한 함수가 우리의 형식과 통신한다는 것을 알고 있습니다. 자바스크립트 alert() 프로그램의 흐름을 확인할 수 있는 간단한 방법을 제공합니다.

다음 예제에서는 fetch()에서 성공 및 오류 메시지를 노출하는 방법을 살펴보겠습니다. 요구.

fetch('/current-cart/', {
      credentials: 'include',
      method: 'GET',
      headers: {
        'Content-Type': 'application/json'
      },
    })
    .then(resp => resp.json())
    .then(cart => {
      if(cart.error){
        alert(cart.error)
      }

이 예에서는 전자 상거래 앱에 장바구니 가져오기 요청이 있습니다. 현재 장바구니가 저장되었는지 확인하기 위해 요청을 보내고 있습니다. 요청을 끝까지 진행하면 alert()가 있습니다. 오류가 있는 경우 이를 표시합니다.

활성 장바구니가 없기 때문에 다음 오류가 발생합니다.

이 예제는 프로덕션보다 개발에 더 유용하지만 예를 들어 양식에 대한 유효성 검사에도 동일한 원칙을 적용할 수 있습니다.

return fetch('/login', {
      credentials: 'include',
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(creds)
    })
    .then(resp => resp.json())
    .then(response => {
      if (response.error) {
        alert(response.error)
      }

여기서 alert() 로그인 양식과 관련된 오류 메시지를 표시합니다. 사용자가 양식을 작성하지 않고 로그인하려고 하면 다음 오류가 발생합니다.

alert()를 사용하여 사용자 경험을 지시하는 예입니다. 유효성 검사를 표시합니다.

alert() 개발 측과 클라이언트 측 모두에서 사용할 수 있습니다. 즉, 사용자가 보는 것입니다. 잠시 시간을 내어 배운 내용을 요약해 보겠습니다.

결론

자바스크립트 alert() 광범위하게 사용되는 간단한 방법입니다. 메시지의 선택적 인수를 문자열 데이터 유형으로 사용합니다. 메시지와 확인 버튼이 있는 대화 상자가 표시됩니다. alert() 메시지를 표시하기 위한 것일 뿐 어떠한 조치도 취할 수 없습니다.

예제에서 alert() 기능 및 양식의 통신을 추적하기 위해 개발에서 사용할 수 있습니다. 그런 다음 alert() 가져오기 요청의 개발 측에서 오류 메시지를 노출할 수 있습니다. 마지막 예에서 alert() 사용자에게 양식의 유효성 검사 오류를 전달하는 데 사용할 수 있습니다.

지금쯤이면 alert()의 일반적인 용도를 이해하게 될 것입니다. . 다음 JavaScript 프로젝트에서 다양한 기능을 테스트하는 방법으로 사용해 보세요.