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' 연산값이 차례대로 나온다.
스스로 마음을 다잡기 위해 공부한 내용을 기록합니다.
수정되어야 할 점이나 추가되어야 할 점이 있다면 언제든지 코멘트 부탁드립니다!
오늘도 산꼭대기로 열심히 등반하자 😎