자바스크립트 출력
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>
인스턴스 실행»
온라인을 보려면 "인스턴스 실행" 버튼을 클릭하세요. 인스턴스
|
인스턴스
<!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>
인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
인스턴스 콘솔 스크린샷:
알고 계셨나요?
程序中调试是测试,查找及减少bug(错误)的过程。 |