JavaScript의 경고 상자에 변수 값 표시
이 기사에서는 JavaScript에서 alert() 메소드를 사용하는 방법을 배웁니다. 경고 상자를 사용하여 웹 페이지에서 사용자에게 팝업으로 메시지 또는 기타 유용한 정보를 표시하는 방법을 배웁니다.
JavaScript의 경고 상자에 변수 값 표시
팝업에 값을 표시하려면 경고 상자를 사용해야 합니다. 기본적으로 팝업 대화 상자를 숨기거나 닫는 확인 버튼이 포함되어 있습니다.
사용자가 웹 페이지와 상호 작용할 때 대부분의 경우 개발자는 경고 상자를 사용하여 사용자에게 유용한 메시지를 전달해야 합니다. 예를 들어, 사용자가 클라이언트 측에서 서버로 데이터를 업로드할 때 웹 페이지는 유효성 검사 후 팝업 대화 상자에 성공 또는 실패 메시지를 표시합니다.
경고 상자는 활성 웹 페이지에서 사용자의 포커스를 제거하여 사용자가 경고 메시지를 읽도록 합니다.
JavaScript에서 기본 alert() 메서드는 연결 연산자 +의 도움으로 변수와 함께 경고 메시지, 변수 값 및 텍스트를 표시할 수 있습니다.
기본 구문:
let data = 'hello world'
alert(data);
위에 표시된 것처럼 alert() 메서드에 값이나 변수를 인수로 전달하기만 하면 됩니다.
예시:
<html>
<head>
<title> display JavaScript alert </title>
</head>
<script>
function showPopup()
{
var data = document.getElementById("value").value;
//check empty data field
if(data == "")
{
alert("Please enter any value..");
}
else
{
alert("Your entered value is: "+data); //display variable along with the string
}
}
</script>
<body>
<h1 style="color:blueviolet">DelftStack</h1>
<h3>JavaScript display alert box</h3>
<form onsubmit ="return showPopup()">
<!-- data input -->
<td> Enter Value: </td>
<input id = "value" value = "">
<br><br>
<input type = "submit" value = "Submit">
</form>
</body>
</html>
위의 HTML 소스 코드에서 form 요소를 사용하여 사용자 입력 필드와 Submit 버튼을 생성했습니다. 사용자는 값을 삽입하고 사용자가 Submit 버튼을 클릭하면 showPopup() 기능이 트리거됩니다.
스크립트 태그에서 showPopup() 함수를 선언했습니다. 여기서 data 변수에서 사용자 입력 값을 가져오고 if 조건문을 사용하여 data가 비어 있는지 여부를 확인합니다.
data 변수가 비어 있으면 오류 메시지와 함께 경고가 표시됩니다. 그렇지 않으면 data 변수와 함께 성공 메시지가 표시됩니다.