[JS]HTML,콘솔 출력하기

5133 단어 JavaScriptJavaScript

1. document.write()

  • 웹 페이지에 가장 먼저 데이터를 출력
  • 따라서 대부분 테스트나 디버깅을 위해 사용
  • 메소드가 실행되면, 웹 페이지 내에 먼저 로딩된 모든 데이터를 지우고 자신의 데이터를 출력
<body>
  <button onclick="document.write(2 * 5)">버튼을 눌러보세요!</button>
</body>
  <script>
  document.write(4 * 5);
  </script>

결과 : 버튼과 '20'이란 연산값이 출력되지만, 버튼을 실행하면 모두 삭제되면서 버튼 연산값인 '10'만 남음

2. document.getElementById()

  • 실제 자바스크립트 코드에서 출력을 위해 가장 많이 사용되는 방법
  • getElementByID()나 getElementsByTagName() 등의 메소드를 사용하여 HTML 요소(ID)를 선택
  • 그 다음 innerHTML 프로퍼티를 이용하여 선택된 HTML 요소의 내용(content)이나 속성(attribute)값 등으로 변경
<body>
  <p id="test"></p>
</body>
  <script>
    document.getElementById("test").innerHTML= 100/20;
  </script>

결과 : '5'로 HTML 문서에 출력

<p id="test"> 아래 Click ! 버튼을 누르면 이것은 '안녕하세요!'로 바뀌는거야</p>

<button type="button" onclick="document.getElementById('test').innerHTML='안녕하세요!'">Click !</button>

결과 :
onclick=""속성은 사용자가 클릭 했을 때의 현상을 정의
getElementById('test')는 아이디가 'test'인 HTML 요소를 가져오고,
innerHTML= 은 갖고 온 요소의 내용(아래 Click ! 버튼을 누르면 이것은 '안녕하세요!'로 바뀌는거야)을 '안녕하세요!'라는 내용으로 변경

click!버튼을 누르면 (아래 Click ! 버튼을 누르면 이것은 '안녕하세요!'로 바뀌는거야) 내용이 ('안녕하세요!')로 변한다.

3. console.log()

  • 브라우저 콘솔 상에서 디버깅 목적으로 사용
console.log("오늘은 Javascript 첫째날")
console.log(4*5)

결과 :
콘솔 상에 첫 번째 줄은 문자열로 입력되어 '오늘은 Javascript 첫째날'과 두 번째 줄은 숫자열로 입력되어 '20' 연산값이 차례대로 나온다.

스스로 마음을 다잡기 위해 공부한 내용을 기록합니다.
수정되어야 할 점이나 추가되어야 할 점이 있다면 언제든지 코멘트 부탁드립니다!

백준 Baekjoon 1001번 A-B - JAVA

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage