JavaScript_javascript 팁에서 Alert() 함수 사용 팁에 대한 자세한 설명

JavaScript 코드에서는 창 개체의 경고() 함수를 사용하여 프로그램을 디버깅하기 위한 텍스트를 표시하거나 사용자에게 관련 정보를 경고할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

//윈도우 객체의 Alert() 함수 사용
window.alert("샘플 텍스트");

이 작성 방법은 Alert() 함수를 직접 사용하여 단순화할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

//간단한 Alert() 사용법
Alert("샘플 텍스트");

줄 바꿈을 사용하여 텍스트를 표시해야 하는 경우 n:

을 사용할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

//alert()에서 n 사용
Alert("첫번째 리넨두번째 줄");

탭 문자를 사용해야 하는 경우 t:

를 사용할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

//alert()에서 t를 사용하세요
Alert("Alext50t34nBobt59t38");

변수 사용

정적 문자열을 표시하는 것 외에도, Alert() 함수는 변수를 허용하고 변수 값을 다른 문자열과 연결할 수도 있습니다.

코드 복사 코드는 다음과 같습니다.

//alert()에서 변수 사용
var word = "생명";
warning("마법의 단어는 " word "입니다. 당황하지 마세요.");

안타깝게도 Alert() 함수는 변수를 허용할 수 있지만 이 문자열 연결 작업만 수행할 수 있습니다. 다른 디버깅 방법인 console.log()와는 달리, Alert() 함수는 매개변수를 문자열에 전달하는 방법을 허용하지 않습니다. . 다음 코드를 예로 들어 보겠습니다.

코드 복사 코드는 다음과 같습니다.

//alert()에서 매개변수를 사용하려고 시도하면 실패합니다
변수 이름 = "Bob";
var 연도 = 42;
Alert("%s은(는) %d살입니다.", 이름, 연도);

Alert() 함수가 문자열 매개변수를 허용하는 경우 예상되는 출력 결과는 "Bob은 42세입니다."이지만 실제로는 Alert() 함수가 이를 지원하지 않으므로 최종 출력 결과는 "%s는 %입니다." d살이야."

팝업창 스타일

alert() 함수에서 사용하는 팝업 상자는 웹 페이지 문서 개체가 아닌 브라우저 시스템 개체이므로, 경고() 함수에서 HTML 태그를 사용하여 팝업 상자의 스타일을 정의할 수 없습니다. - HTML 태그는 그대로 유지됩니다. 다음 코드의 경우:

코드 복사 코드는 다음과 같습니다.

//alert()에서 HTML 태그를 사용하려고 시도하면 실패합니다
Alert("텍스트 테스트");

출력 결과가 굵은 "Test Text"가 아닙니다.

경고 상자의 스타일을 정말로 변경해야 하는 경우 다음 두 가지 옵션이 있습니다.

1. 경고() 함수에 유니코드 문자를 사용하세요. 이 솔루션의 장점은 구현이 매우 간단하다는 것입니다. 그러나 제한 사항도 분명합니다. 즉, 유니코드 문자의 표현력이 매우 제한적입니다.

2. Alert() 함수를 사용하는 대신 HTML 구성 요소를 사용하여 팝업 상자를 시뮬레이션합니다(예: jQuery UI 대화 상자 사용). 이 솔루션의 장점은 팝업 상자의 표현력이 매우 뛰어나지만 이를 사용하면 프런트엔드 코드의 복잡성이 증가한다는 것입니다.

결론

alert() 함수는 사용자에게 정보를 경고하는 데 사용할 수 있으며 프로그램을 디버깅하는 데에도 사용할 수 있습니다. 전자의 경우 jQuery UI 대화 상자와 같은 구성 요소를 사용하면 후자의 경우 표현력과 사용자 경험이 크게 향상될 수 있습니다. 왜냐하면 Alert() 팝업 상자가 JavaScript 코드 실행을 차단하기 때문입니다. 대부분의 경우 console.log()는 다음과 같습니다. 프로그램을 디버깅하는 데 사용되는 것이 더 나은 솔루션입니다.