자바스크립트 출력



JavaScript에는 인쇄나 출력 기능이 없습니다.

데이터 표시를 위한 JavaScript

JavaScript는 다양한 방식으로 데이터를 출력할 수 있습니다.

  • 팝업하려면 window.alert()를 사용하세요. 경고 상자.

  • document.write() 메소드를 사용하여 HTML 문서에 내용을 씁니다.

  • innerHTML을 사용하여 HTML 요소에 작성됩니다.

  • 브라우저 콘솔에 쓰려면 console.log()를 사용하세요.


window.alert() 사용

경고 상자를 표시하여 데이터를 표시할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
</head>
<body>
	
<h1>我的第一个页面</h1>
<p>我的第一个段落。</p>
<script>
window.alert(5 + 6);
</script>
	
</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요


HTML 요소 조작

JavaScript에서 HTML 요소에 액세스하려면 document.getElementById(id) 메서드를 사용할 수 있습니다.

"id" 속성을 사용하여 HTML 요소를 식별하고 innerHTML을 사용하여 요소 콘텐츠를 가져오거나 삽입하세요.

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php.cn</title> 
</head>
<body>
	
<h1>我的第一个 Web 页面</h1>
<p id="demo">我的第一个段落。</p>
<script>
document.getElementById("demo").innerHTML="段落已修改。";
</script>
	
</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

위의 JavaScript 문(<script> 태그에 있음)은 웹 브라우저:

document.getElementById("demo")는 id 속성을 사용하여 HTML 요소를 찾는 JavaScript 코드입니다. .

innerHTML = "단락이 수정되었습니다." 는 요소의 HTML 콘텐츠(innerHTML)를 수정하는 데 사용됩니다. 자바스크립트 코드.


이 튜토리얼에서는

대부분의 경우 이 튜토리얼에서는 위에 설명된 방법을 사용하여 출력합니다.

다음 예에서는 <p>를 직접 작성합니다. ; HTML 문서 출력에 대한 id="demo" 요소:


HTML 문서에 쓰기

테스트 목적으로 HTML에서 직접 JavaScript를 작성할 수 있습니다. 문서에서:

인스턴스

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php.cn</title> 
</head>
<body>
	
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<script>
document.write(Date());
</script>
	
</body>
</html>

인스턴스 실행»

온라인을 보려면 "인스턴스 실행" 버튼을 클릭하세요. 인스턴스


Note
Note

请使用 document.write() 仅仅向文档输出写内容。

如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖。

document.write()를 사용하여 작성된 내용을 문서로 출력합니다. <🎜><🎜>문서 로딩이 완료된 후 document.write를 실행하면 전체 HTML 페이지를 덮어쓰게 됩니다. <🎜>


인스턴스

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
	
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction() 
{
    document.write(Date());
}
</script>
	
</body>
</html>

인스턴스 실행»

"인스턴스 실행" 버튼을 클릭하여 확인하세요. 온라인 인스턴스


콘솔에 쓰기

브라우저가 디버깅을 지원하는 경우 console.log() 메서드를 사용하여 표시할 수 있습니다. 브라우저 JavaScript 값.

브라우저에서 F12를 사용하여 디버깅 모드를 활성화하고 디버깅 창을 클릭하세요. "콘솔" 메뉴.

인스턴스

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php.cn</title> 
</head>
<body>
	
<h1>我的第一个 Web 页面</h1>
<p>
浏览器中(Chrome, IE, Firefox) 使用 F12 来启用调试模式, 在调试窗口中点击 "Console" 菜单。
</p>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
	
</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

인스턴스 콘솔 스크린샷:

QQ截图20161017131243.png


알고 계셨나요?

Note程序中调试是测试,查找及减少bug(错误)的过程。