JavaScript alert() 함수 완벽 가이드 – 텍스트 경고 팝업 띄우는 방법

JavaScript alert()란?

자바스크립트(JavaScript)의 alert() 함수는 사용자에게 팝업 메시지를 표시하는 가장 기본적인 방법입니다. '확인' 버튼 하나만 있는 작은 대화상자가 열리며, 사용자에게 중요한 정보를 즉각적으로 전달하거나 특정 이벤트가 발생했음을 알릴 때 유용하게 활용됩니다.

기본 문법

alert(message);

message 인수에는 문자열뿐만 아니라 변수나 숫자도 전달할 수 있습니다. 또한 사용자가 '확인' 버튼을 누르기 전까지는 스크립트 실행이 일시 중단되므로, 이 점을 염두에 두고 사용해야 합니다.

예제

다음은 버튼 클릭 시 alert() 함수로 경고 팝업을 띄우는 전체 코드입니다.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
</style>
</head>
<body>
<h1>Javascript text alert</h1>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to trigger the alert popup</h3>
<script>
    let BtnEle = document.querySelector(".Btn");
    BtnEle.addEventListener("click", () => {
        alert("You pressed the button");
    });
</script>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 초기 화면이 출력됩니다.

JavaScript alert() 함수 완벽 가이드 – 텍스트 경고 팝업 띄우는 방법

'CLICK HERE' 버튼을 클릭하면 아래와 같이 경고 팝업이 나타납니다.

JavaScript alert() 함수 완벽 가이드 – 텍스트 경고 팝업 띄우는 방법

마무리

alert() 함수는 구현이 매우 간단하고 별도의 라이브러리 없이 바로 사용할 수 있다는 장점이 있습니다. 다만 사용자가 확인을 누를 때까지 페이지의 다른 동작이 차단되므로, 단순한 안내나 디버깅 용도에 적합합니다. 좀 더 세련된 사용자 경험이 필요하다면 커스텀 모달 창이나 토스트 알림 방식을 함께 고려해 보시기 바랍니다.