웹 페이지에서 버튼 클릭과 같은 사용자 동작에 반응해 alert 경고창을 표시하고, 동시에 다른 함수까지 함께 실행해야 하는 경우가 종종 있습니다. 자바스크립트(JavaScript)에서는 이런 작업을 매우 간단하게 구현할 수 있습니다.
동작 원리
HTML 버튼의 onclick 속성에 실행할 함수를 지정하면, 버튼이 클릭되는 순간 해당 함수가 호출됩니다. 함수 내부에서는 alert() 메서드로 경고창을 띄운 뒤, 또 다른 함수를 이어서 호출함으로써 연쇄적인 동작을 만들 수 있습니다.
예제 코드
아래 코드는 버튼을 클릭하면 myFunction()이 먼저 실행되어 경고 메시지를 표시하고, 이어서 catchedAlert() 함수가 호출되어 두 번째 알림창을 띄우는 예제입니다.
<!DOCTYPE html>
<html>
<body>
<script>
function myFunction(warning) {
alert(warning);
catchedAlert();
}
function catchedAlert() {
alert('Alert called!');
}
</script>
<button onclick="myFunction('This is an alert box!')">Click me!</button>
</body>
</html>
코드 설명
myFunction(warning)은 매개변수로 전달받은 문구를 alert()으로 화면에 출력한 후, 곧바로 catchedAlert()를 호출합니다. 따라서 버튼을 클릭하면 "This is an alert box!"라는 경고창이 먼저 나타나고, 사용자가 확인을 누르면 "Alert called!"라는 두 번째 경고창이 차례대로 표시됩니다.
이처럼 하나의 함수 안에서 alert()과 다른 함수 호출을 조합하면, 사용자에게 알림을 제공하면서 추가 로직을 자연스럽게 이어갈 수 있습니다.