자바스크립트 알림창 여러 줄 표시하기 javascript alert multi line

자바스크립의 alert 알림창에서 문자열을 여러 줄로 표현하려면 \n 을 사용한다. \n 은 new line 을 뜻하며 이것이 붙은 문자열은 다음 줄에 표시되게 된다. 자바스크립트 뿐만 아니라 거의 모든 프로그래밍 언어에서 같은 의미로 사용되며 자주 보게 된다.

자바스크립트 알림창 여러 줄 표시하기
javascript alert multi line

사용자에게 메세지창을 보여줄 때 여러 줄을 사용하여 표현하기도 한다.

alert 함수를 사용할 수도 있고, 레이어알림창 형식으로 사용할 수도 있다.

단순히 alert 함수를 사용하여 메세지를 표현하기 위해서도 때로는 여러 줄로 표현할 필요가 있다.

결론적으로 \n 을 문자열과 함께 사용하면 자바스크립트 알림창에서 여러 줄의 메세지를 표시할 수 있다.

알림창 alert

alert 자바스크립트를 처음 겪거나 혹은 개발시 자주 사용된다.

사용자에게 보여주는 알림창을 나타날 때 사용되기도 하고, 개발단계에서 특정 값을 확인하기 위한 용도로도 사용된다.

지금은 개발자모드에서 console.log 메서드를 사용하여 직접 확인할 수 있기도 하지만, 여전히 alert 을 사용하기도 한다.

alert 의 목적은 사용자에게 어떤 알림을 메세지로 표시하는 역할을 한다.

사용방법은 아래와 같다.

alert( 표시할 문자열 );

여러 줄 입력 \n

모든 프로그램에서 공통적으로 사용되는 이스케이프 문자 중 하나가 \n 이다.

\n 은 텍스트를 여러 줄로 표현하는데 사용되며 여러가지 단어로 불린다.

개행, 뉴라인 ( New Line ) 등 표현하는 방법도 많다.

사용법은 단순하다. 여러 줄로 표현하려는 텍스트 중간에 삽입해 주면 된다.

문자열 + \n + 문자열

전체 코드 및 결과

아래는 이스케이프 문자인 \n 을 사용하여 텍스트 문자열을 여러 줄 만들어 알림창에 표현하는 코드이다.

문자열마다 \n 을 붙여주어 엔터 효과를 주었다.

새로운 줄로 넘어가고자 할 때 문자열에 \n 을 붙여주면 된다.

<!-- html5 웹문서 명시 -->
<!DOCTYPE html>
<html lang="ko">
	<head>
		<!-- 반응형 meta 명시 -->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- jquery cdn -->
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	</head>
	<body>
		<input type="button" id="btn" value="클릭">
	</body>
	<script>
		$(document).ready( function() { /* Load Comp. without resources */ });
		$(window).on('load', function() { 
			/* Load Comp. with resources */ 
			$("#btn").click( function () {
				fnDisplayAlert();
			});
		});
	</script>
	<script>
    
		var fnDisplayAlert = function() {
			
			var dspText = "";
			dspText += "알림창입니다.";
			dspText += "\n새로운 줄입니다.";
			dspText += "\n뉴라인입니다.";
			dspText += "\n개행입니다.";

			alert(dspText);
		}
	</script>
</html>

결과화면을 보자.

4개의 문자열을 만들고 각 문자열마다 \n 을 추가하였다.

alert 함수를 이용하여 출력해보면 알림창에 여러 줄로 문자열이 표현되는 것을 볼 수 있다.

저작자표시 비영리 변경금지

'programming > javascript' 카테고리의 다른 글

자바스크립트 라디오 버튼 값 가져오기 Get value of selected radio button (0)	2022.12.25
자바스립트 알림창 제목 표시하기 타이틀 문자열 지정 jquery ui 사용 (0)	2022.12.24
자바스크립트 confirm 함수 예 아니오 선택하기 (0)	2022.12.20
자바스크립트 fetch 함수 사용법 api 파일 이미지 등 데이터 요청하기 (0)	2022.12.17
자바스크립트 에러 발생 시키기 강제로 에러 만들고 테스트하기 (0)	2022.12.16

자바스크립트 알림창 여러 줄 표시하기 javascript alert multi line