스크립트에서는 자바 등의 언어와 달리 인쇄나 출력 방식이 없으며 일반적으로 데이터를 출력하는 데에는 다음 4가지 방식을 사용한다.
window.alert() 사용하여 경고 상자를 표시합니다.document.write()innerHTML 요소에 쓰려면console.log() 사용합니다.아래에서 이를 사용해 보겠습니다.
새 HTML 파일을 생성한 후 VSCode를 사용하여 다음 코드를 작성합니다.
<!DOCTYPE HTML>
<html>
<머리>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, 초기-규모=1">
<title>window.alert()</title>
</head>
<본문>
<p>팝업창 표시</p>
<스크립트 유형="텍스트/자바스크립트">
window.alert("팝업 테스트입니다!");
</script>
</body>
</html> 그런 다음 브라우저에서 위 파일을 열면 다음과 같은 팝업 창이 표시됩니다. 확인을 클릭하면 팝업 창이 닫히고 웹 페이지에 내용이 표시됩니다.
<!DOCTYPE html>
<html>
<머리>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, 초기-규모=1">
<title>document.write()</title>
</head>
<본문>
<p>HTML 문서 작성</p>
<스크립트 유형="텍스트/자바스크립트">
document.write(날짜());
</script>
</body>
</html> 새 HTML 파일을 생성하고 위의 내용을 작성하면 브라우저가 열리고 다음과 같은 내용이 페이지에 표시됩니다. document.write() 사용하여 현재 시간 쓰기가 성공한 것을 확인할 수 있습니다. 다만, 다른 컨텐츠와 동시에, 해당 컨텐츠가 로드되기 전에 document.write() 가 로드되면 다른 컨텐츠와 함께 표시될 수 있다는 점에 유의하시기 바랍니다. 그러나 페이지 내용이 로드된 후 document.write() 실행되면 이전에 로드된 모든 내용이 작성된 내용으로 덮어쓰여집니다.
<!DOCTYPE HTML>
<html>
<머리>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, 초기-규모=1">
<title>document.write()</title>
</head>
<본문>
<p>HTML 문서 작성</p>
<button onclick="showDate()">시간 표시</button>
<스크립트 유형="텍스트/자바스크립트">
함수 showDate() {
document.write(날짜());
}
</script>
</body>
</html> 다음은 페이지가 로드된 후 document.write() 실행하기 전과 후를 비교한 것으로, 페이지가 로드된 후 document.write() 호출하면 이전 페이지 내용을 덮어쓰게 됨을 나타냅니다.
이전과 이후
JavaScript 특정 HTML 요소에 액세스하려면 document.getElementById(id) 메서드를 사용한 다음 innerHTML 사용하여 요소 콘텐츠를 가져오거나 삽입할 수 있습니다.
<!DOCTYPE HTML>
<html>
<머리>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, 초기-규모=1">
<title>내부HTML</title>
</head>
<본문>
<p id="inner">HTML 요소 조작</p>
<button onclick="changeContext()">위 내용을 수정하려면 클릭하세요</button>
<스크립트 유형="텍스트/자바스크립트">
함수changeContext() {
document.getElementById("inner").innerHTML = "수정된 콘텐츠";
}
</script>
</body>
</html> 수정 전 수정 후
console.log() 메소드를 사용하려면 브라우저가 디버깅을 지원해야 합니다. 일반적으로 Chrome을 권장합니다. 그런 다음 F12 바로 가기 키를 사용하여 디버깅 모드를 열고 디버깅 창에서 Console 메뉴로 전환합니다. 여기서는 Edge 사용하고 있기 때문에 콘솔이 표시됩니다. 이러한 브라우저 선택은 주로 사용자의 선호도에 따라 결정되지만 일반적으로 Chrome을 권장합니다.
<!DOCTYPE HTML>
<html>
<머리>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, 초기-규모=1">
<title>console.log</title>
</head>
<본문>
<p>브라우저 디버그 모드에서 보기</p>
<스크립트 유형="텍스트/자바스크립트">
var num1 = 11;
var num2 = 10;
console.log(숫자1 + 숫자2);
</script>
</body>
</html>
위의 내용은 JavaScript의 출력에 대한 것입니다. Java와 같이 인쇄 및 출력을 위한 System.out.println() 메서드는 없지만 위의 네 가지 메서드는 기본적으로 일상적인 개발 요구를 충족할 수 있습니다.