지역 사회 배우다 도구 라이브러리 여가
찾다
한국어

자바스크립트 출력

JavaScript 출력

JavaScript는 일반적으로 HTML 요소를 조작하는 데 사용됩니다.

JavaScript를 사용하여 데이터 표시

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

window.alert()를 사용하여 경고 상자를 표시합니다. document.write() 메서드를 사용하여 HTML 문서에 내용을 씁니다. HTML 요소에 쓰려면 innerHTML을 사용하세요. 브라우저 콘솔에 쓰려면 console.log()를 사용하세요.

HTML 요소 조작

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

HTML 요소를 식별하려면 "id" 속성을 사용하십시오. 

<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p id="demo">My First Paragraph</p>
<script>document.getElementById("demo").innerHTML="My First JavaScript";</script>
</body>
</html>

위의 JavaScript 문(<script> 태그에 있음)은 웹 브라우저에서 실행될 수 있습니다.

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

innerHTML = "단락이 수정되었습니다."는 요소의 HTML 콘텐츠(innerHTML)를 수정하는 데 사용되는 JavaScript 코드입니다.

window.alert()

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

<!DOCTYPE html>
<html>
<body>
<h1>我的第一个页面</h1>
<p>我的第一个段落。</p>
<script>
window.alert('Hello Word!');
</script>
</body>
</html>

이 튜토리얼에서는

대부분의 경우, 이 튜토리얼에서는 The 메소드를 사용합니다. 위에서 설명한 대로 출력합니다:

다음 예에서는 id="demo"인 <p> 요소를 HTML 문서 출력에 직접 씁니다.

HTML 문서에 쓰기

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

<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<script>
document.write(Date());
</script>
</body>
</html>


문서에 내용만 쓰려면 document.write()를 사용하세요.

문서 로딩이 완료된 후 document.write를 실행하면 전체 HTML 페이지를 덮어쓰게 됩니다. 

 <!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction()  {
   document.write(Date());
}
</script>
</body>
</html>


Write to console

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

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

<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
</body>
</html>

프로그램에서 디버깅은 버그(오류)를 테스트하고 찾고 줄이는 과정입니다.


지속적인 학습
||
<!DOCTYPE html> <html> <body> <h1>我的第一个页面</h1> <p>我的第一个段落。</p> <script> window.alert('Hello Word!'); </script> </body> </html>
제출하다코드 재설정
이전 섹션 다음 섹션
튜토리얼 목록
도움을 받다
  • 코스 추천
  • 코스웨어 다운로드
현재 코스웨어를 다운로드할 수 없습니다. 현재 직원들이 정리하고 있습니다. 앞으로도 본 강좌에 많은 관심 부탁드립니다~

이 강좌를 시청한 학생들도 학습하고 있습니다.

최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)  492578회 재생