화면에 데이터를 출력하는 방법 4가지
1) innerHTML 속성(property)을 이용하는 방법
2) console.log() 메서드를 이용하는 방법
3) document.write() 메서드를 이용하는 방법
4) window.alert() 메서드를 이용하는 방법
1) innerHTML 속성(property)을 이용하는 방법
일반적으로 자바스크립트로 HTML요소에 접근할 때는 document.getElementById(id) 메서드를 이용.
여기서 HTML요소의 id 속성(attribute)을 찾아서 innerHTML 속성을 통해 콘텐츠의 내용을 적용시켜 줌
<body>
<p id="sum"></p>
<script>
document.getElementById("sum").innerHTML = 10 + 1;
</script>
</body>
2) console.log() 메서드를 이용하는 방법
console.log()는 주로 디버깅 시에 필요한 정보를 출력할 때 사용. ==> 전문 디버깅 도구
디버깅
개발시 문법적으로 보면 전혀 문제가 없는데도 어떤 경우에는 정상적으로 동작을 하고, 어떤 경우에는 동작이 제대로 안 되는 경우가 발생함. 프로그램에서는 이런 것을 논리적인 오류인 버그라고 부름. 이러한 버그를 찾아서 없애는 작업을 하는 것을 디버깅이라고 함.
console.log() 기능은 크롬과 사파리 브라우저에서만 사용이 가능.
<body>
<h2>console.log 예시</h2>
<p>Hello, Javascript!</p>
<script type="text/javascript">
console.log("Hello, Javascript!");
</script>
</body>
화면에는 <h2>요소와 <p>요소가 나타나고, <script> 태그 안에 있는 요소는
위와 같이 화면이 아니라 F12를 눌러 개발자모드의 콘솔창에서만 볼 수 있다.
3) document.write() 메서드를 이용하는 방법
자바스크립트 코드를 이용해 바로 화면에 출력하고 싶을 때는 document.write()메서드를 사용할 수 있음
<body>
<script type="text/javascript">
document.write("반갑습니다. 자바스크립트에 오신 걸 환영합니다<br>");
document.write("짠");
</script>
</body>
4) window.alert() 메서드를 이용하는 방법
주로 화면에 경고창을 띄울 때 사용하는 방법
다른 코드들 보다 가장 먼서 실행함
일반적으로 웹 브라우저는 위에서 부터 순차적으로 읽어 내려가는데,
경고창을 띄우는 window.alert() 메서드가 문서 안에 있으면 먼저 화면에 나타내고 이후에 다른 HTML요소들을 화면에 출력한다.
window는 생략하고 alert만 사용하여도 됨.
<body>
<script type="text/javascript">
document.write("반갑습니다. 자바스크립트에 오신 걸 환영합니다.<br>");
document.write("방가방가^^");
alert("반갑습니다.^^");
</script>
</body>
alert창을 가장 먼저 띄우고 이후의 다른 요소들을 화면에 출력한다.
'Front-End > Javascript' 카테고리의 다른 글
| [JavaScript] 조건문(if문, if~else문, 다중 if~else문, switch~case문) (0) | 2021.11.16 |
|---|---|
| [JavaScript] 연산자(operation) (0) | 2021.11.13 |
| [JavaScript] 입출력 대화 상자_alert , confirm, prompt (0) | 2021.11.11 |
| [JavaScript] 변수와 상수(var, let, const), 자료형 (0) | 2021.11.10 |
| [JavaScript] 자바스크립트의 특징 (0) | 2021.11.10 |
댓글