JavaScript alert() 함수: 웹 페이지에 팝업, 경고 메시지 출력하기

콘텐츠

alert() 함수

alert 는 JavaScript 에서 팝업 알림 창을 출력하는 함수 입니다. 영단어로 alert 는 ‘경고’ 또는 ‘주의’ 를 의미하죠.

예를 웹 사이트에 회원 가입을 할 때 ID 등을 빈칸으로 둔 상태에서 가입 버튼을 클릭하면 크롬, 엣지 브라우저 기준 상단에 ‘ID 를 입력해주세요.’ 메시지 팝업이 출력 되는 경우가 있는데 이 메시지가 바로 alert() 함수에 의해 발생합니다.

값이 입력 되지 않았음을 ‘경고’ 한다는 점에서 용도에 걸 맞는 사용법 이네요. 😏

이 때 출력 되는 메시지에 확인 버튼을 누르기 까지 웹 페이지가 잠시 다른 상호작용이 불가능 하도록 페이지가 비활성화 되는데 이는 메시지 팝업이 모달 창 이기 때문입니다.

모달 창(Modal Window)

모달 창은 사용자는 대화 상자가 닫힐 때까지 다른 모든 인터페이스에 접근할 수 없게 만드는 창을 이야기 합니다. 쉽게 말하자면 창을 끄고 나서야 웹 사이트 이용이 가능합니다.

alert 기본 사용 방법

alert의 사용법은 아주 간단 합니다. alert(‘출력할 메시지’); 를 작성하면 메시지 팝업이 바로 출력됩니다.

alert('출력할 메시지');

JavaScript

출력 될 메시지는 변수를 넣어도 됩니다.

const text = '출력할 메시지';
alert(text);

JavaScript

alert 메시지 텍스트 줄 바꿈

alert 로 출력 될 메시지의 줄 바꿈은 원하는 위치에 ‘\n’ 을 넣으면 줄 바꿈이 이루어집니다.

const text = '출력할 메시지\n줄바꿈 테스트';
alert(text);

JavaScript

alert 활용 방안

if 문과 조합

특정 조건에 해당 할 경우 팝업이 출력 되는 웹 페이지를 만들 때 활용할 수 있습니다. 예를 들어 회원 가입, 로그인 페이지 등을 제작할 때 응용할 수 있습니다.

다음은 위에 언급했던 것처럼 페이지 내 입력 상자(<input> 태그) 값이 비워져 있으면 메시지를 출력하는 예시 코드 입니다.

<!DOCTYPE html>
<html>
<head>
<title>문서제목</title>
</head>
<body>
<div>
	<label for="userid">ID:</label>
	<input type="text" id="userid" name="userid">
</div>
<div>
	<label for="password">Password:</label>
	<input type="password" id="password" name="password">
</div>
<div>
	<button id="loginBtn">Login</button>
</div>
</body>
</html>

HTML

다음 코드는 alert 태그를 활용해서 Login 버튼을 눌렀을 시 ID, Password 에 값이 없다면 메시지를 출력하는 코드입니다.

관련해서 JavaScript HTML 요소 가져오기: getElementById, getElementsByClassName 등 포스팅을 참고 하시면 도움이 됩니다.

const input_id = document.getElementById('userid');
const input_pw = document.getElementById('password');
const loginBtn = document.getElementById('loginBtn');

loginBtn.addEventListener('click', function(){
	if(!input_id.value){
		alert('id 를 입력해 주세요.');
		return;
	};
	
	if(!input_pw.value){
		alert('password 를 입력해 주세요.');
		return;
	}
});

JavaScript

for 문과 조합

for 문과 조합하여 특정 데이터가 존재하면 메시지를 출력 하는 코드를 만들 수도 있습니다. 먼저 html 코드를 작성 합니다.

<!DOCTYPE html>
<html>
<head>
    <title>Table Data Search</title>
</head>
<body>

<h2>Sample Table</h2>
<table id="myTable">
    <tr>
        <td>이름</td>
        <td>나이</td>
    </tr>
    <tr>
        <td>홍길동</td>
        <td>30</td>
    </tr>
    <tr>
        <td>김철수</td>
        <td>25</td>
    </tr>
    <tr>
        <td>특정 데이터</td>
        <td>40</td>
    </tr>
</table>
<button id="searchBtn">홍길동 찾기</button>
</body>
</html>

HTML

여기서 홍길동 찾기 버튼을 누를 때 table 태그 내 홍길동이 있는지 찾아 메시지 존재하면 메시지를 출력합니다.

const searchBtn = document.getElementById('searchBtn');

searchBtn.addEventListener('click', function(){
	const table = document.getElementById("myTable");
	let found = false; // 데이터 찾았는지 상태 저장

	for (var i = 0; i < table.rows.length; i++) {
		// 각 행에 대해 반복
		for (var j = 0; j < table.rows[i].cells.length; j++) {
			// 각 셀에 대해 반복
			if (table.rows[i].cells[j].innerHTML == "홍길동") {
				found = true; // 찾으면 상태를 true로 변경
				break; // 더 이상 검색 중지
			}
		}
		if (found) break; // 찾았으니 반복 중지
	}

	if (found) {
		alert("홍길동이 테이블에 존재합니다.");
	} else {
		alert("홍길동이 테이블에 존재하지 않습니다.");
	}
});